How to: Develop shared packages across repos with some hot-reloading
The following will use the example of developing the shared library frontend-component-footer
with the ability to see changes frontend-app-user-account
, an application already set up with hot reloading.
Start by clearing removing the existing dependency (if it exists) from your hot-reloading application:
- Remove '
"@edx/frontend-component-footer": "^1.0.0",
' from package.json inÂfrontend-app-user-account
. - Remove the dependency from
frontend-app-user-account
's node_modules.
cd ~/edx/frontend-app-user-account rm -rf node_modules/\@edx/frontend-component-footer
Now add the dependency as a file pointer (still from the frontend-app-user-account
directory):
Add the dependency
# still in ~/edx/frontend-app-user-account npm install ../frontend-component-footer
I tried "npm link" but it makes more invasive changes (sym links from both application and shared package to a global node module), it is more difficult to clean-up, and it had no benefits I could see.
Verify the package.json now contains '
"@edx/frontend-component-footer": "file:../frontend-component-footer",
'.ÂThe following is for temporary local development only. Be sure not to merge these dependency changes to master of any project.
Start the hot-reloading app:
# still in ~/edx/frontend-app-user-account npm start # load the app in the browser: http://localhost:1994/
Switch to the shared library.
- Make a coding change to the footer shared component.
Build the shared library:Â
# Using a new terminal cd ~/edx/frontend-component-footer npm run build
- Watch for the hot-reload in the browser.
- Repeat as needed, or set up
npm run watch
 to automatically rebuild your shared app.- You may need toÂ
npm install npm-watch
before runningÂnpm run watch
. - You'll also have to add a
watch
config section and awatch
script in youpackage.json
file; see https://www.npmjs.com/package/npm-watch
- You may need toÂ
 Based on your requirements, in some cases, it might be enough to set up a dev server in your shared package that provides you with an environment to demo, test, and develop your shared package.