thm-configurator-app

Quick Reference

| Command | Description | | --------------------- | ------------------------------------------------ | | yarn link-partner | Set up all yarn links for local development | | yarn unlink-partner | Remove all links and restore normal dependencies | | yarn link-status | Check which packages are currently linked | | yarn package-build | Rebuild the configurator package after changes |

Local Development with Partner Portal

To develop and test changes to this package locally within the partner portal (trekhaak-partner-app), you need to use yarn link to avoid multiple React instance conflicts.

Quick Setup (Automated)

Run this single command from the thm-configurator-app directory:

cd /path/to/thm-configurator-app
yarn link-partner

This will automatically:

• Link all shared dependencies (react, react-dom, react-query, react-router, react-router-dom)
• Build the configurator package
• Link the configurator to the partner portal

If your partner portal is not at ../trekhaak-partner-app, specify the path:

PARTNER_PATH=/path/to/trekhaak-partner-app yarn link-partner

Then start the partner portal:

cd /path/to/trekhaak-partner-app
yarn watch

To check link status:

yarn link-status

This will show you which packages are currently linked and which are using regular dependencies.

Manual Setup Steps

If you prefer to set up the links manually or need to troubleshoot:

1. Link shared dependencies from partner portal to configurator:

   # From trekhaak-partner-app directory
   cd /path/to/trekhaak-partner-app/node_modules/react && yarn link
   cd /path/to/trekhaak-partner-app/node_modules/react-dom && yarn link
   cd /path/to/trekhaak-partner-app/node_modules/react-query && yarn link
   cd /path/to/trekhaak-partner-app/node_modules/react-router && yarn link
   cd /path/to/trekhaak-partner-app/node_modules/react-router-dom && yarn link

2. Use the linked dependencies in configurator:

   # From thm-configurator-app directory
   cd /path/to/thm-configurator-app
   yarn link react
   yarn link react-dom
   yarn link react-query
   yarn link react-router
   yarn link react-router-dom

3. Build the configurator package:

   cd /path/to/thm-configurator-app
   yarn run package-build

4. Link configurator to partner portal:

   # First, create the link in configurator
   cd /path/to/thm-configurator-app
   yarn link
   
   # Then use it in partner portal
   cd /path/to/trekhaak-partner-app
   yarn link thm-p3-configurator

5. Restart the partner portal dev server:

   cd /path/to/trekhaak-partner-app
   yarn watch

Making Changes

After making changes to the configurator:

1. Rebuild the package:

   cd /path/to/thm-configurator-app
   yarn run package-build

2. The changes will automatically be available in the partner portal (you may need to refresh the browser)

Cleanup (When Done Developing)

To restore normal dependencies, run this single command:

cd /path/to/thm-configurator-app
yarn unlink-partner

If your partner portal is not at ../trekhaak-partner-app, specify the path:

PARTNER_PATH=/path/to/trekhaak-partner-app yarn unlink-partner

Or manually:

# In thm-configurator-app
cd /path/to/thm-configurator-app
yarn unlink react react-dom react-query react-router react-router-dom

# In trekhaak-partner-app
cd /path/to/trekhaak-partner-app
yarn unlink thm-p3-configurator
yarn install

Why These Links Are Needed

When using yarn link, both projects can end up with their own copies of React, React-DOM, and other shared libraries. This causes the infamous "Invalid Hook Call" error because React hooks require a single instance. By linking these dependencies, we ensure both projects use the same instances.

Local Testing of Internal Pages

To set up and test internal pages locally:

1. Enable internal routes:

   • Open src/shared/App.jsx
   • Uncomment the following code:

     {
       APP_CONFIG.nodeEnv === 'development' && APP_CONFIG.internal === true && (
         <TEST_ONLY_INTERNAL_ROUTES />
       );
     }

   • Make sure to set "INTERNAL=true" and "NODE_ENV=development" in the .env file
   • Add this import at the top of the file:

     import TEST_ONLY_INTERNAL_ROUTES from './__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES';

   • Run yarn watch

2. Set up authentication:

   • Run the trekhaak-partner-app using yarn watch
   • Log in to the partner app
   • Open browser developer tools (F12)
   • Navigate to Application > Local Storage
   • Copy the __authSession value from trekhaak-partner-app
   • Go to thm-configurator-app on localhost
   • Open developer tools
   • Navigate to Application > Local Storage
   • Paste the copied value as __authSession
   • Refresh the page

You should now be able to access the internal pages locally, you can test this by navigating to one of the internal pages in your code editor (src/shared/__pages__/internal), change some text and see if it updates.

3. Reauthenticating (Optional)

   • If you receive 401 or 403 errors, your auth session might have expired, you can reauthenticate by following the steps above.

Important Note

• Do not deploy with the internal routes uncommented.
• Only use this for testing purposes.

Production context

On production the internal routes are embedded via the thm-p3-configurator package. it automatically will share the auth session in production.