## Quick Reference
npm install thm-p3-configurator| 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 |
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.
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.
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
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)
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:
`bashIn thm-configurator-app
cd /path/to/thm-configurator-app
yarn unlink react react-dom react-query react-router react-router-dom
$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 watch2. 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 pageYou 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.