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:

  1. Remove '"@edx/frontend-component-footer": "^1.0.0",' from package.json in frontend-app-user-account.
  2. 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):

  1. 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.

  2. 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.

  1. Make a coding change to the footer shared component.
  2. Build the shared library: 

    # Using a new terminal
    cd ~/edx/frontend-component-footer
    npm run build
  3. Watch for the hot-reload in the browser.
  4. Repeat as needed, or set up npm run watch to automatically rebuild your shared app.
    1. You may need to npm install npm-watch before running npm run watch. 
    2. You'll also have to add a watch config section and a watch script in you package.json file; see https://www.npmjs.com/package/npm-watch


 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.