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.

$3

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

``bash
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:

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

Then start the partner portal:

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

To check link status:

`bash
yarn link-status
`

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

$3

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

1. Link shared dependencies from partner portal to configurator:

`bash
# 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:

`bash
# 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:

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

4. Link configurator to partner portal:

`bash
# 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:

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

$3

After making changes to the configurator:

1. Rebuild the package:

`bash
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)

$3

To restore normal dependencies, run this single command:

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

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

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

Or manually:

`bash


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
`

$3

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:
`javascript
{
APP_CONFIG.nodeEnv === 'development' && APP_CONFIG.internal === true && (

);
}
`
- Make sure to set "INTERNAL=true" and "NODE_ENV=development" in the .env file
- Add this import at the top of the file:
`javascript
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.