/
How to: Develop shared packages across repos with some hot-reloading

How to: Develop shared packages across repos with some hot-reloading

Aug 11, 2020


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

  2. Verify the package.json now contains '"@edx/frontend-component-footer": "file:../frontend-component-footer",'. 

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.