CODEWITHSUNDEEP
node.jsreactjswebpack
Ben H
Ben H

Reputation: 3236

Editing a npm library and seeing changes live with hot reloading?

I am working on a React.js website that uses webpack and some shared code in a module to which I also have the source code. I'd like to make some tweaks to the shared library but currently it's installed from npm via a node_module. How can I set up my development environment to be able to work on the shared module but still be able to see my changes to the module live with hot reloading?

Upvotes: 7

Views: 4631

Answers (2)

Tyler Goelz
Tyler Goelz

Reputation: 11

Update: Here is a more descriptive answer of how to use yarn link: https://stackoverflow.com/a/48688156/2748017

It looks like there is a built in solution to handle this with yarn.

docs: https://yarnpkg.com/cli/link

$> yarn link <destination>

I believe npm might handle this, too, just with a bit more lifting.

As far as hot reloading, I think that more-so depends on the app consuming the local dependency, but npm-watch seems like a decent solution.

Upvotes: 0

Oro
Oro

Reputation: 1867

Use a local dependency, pointing to the local copy of your package:

{   
    "dependencies": {
    "bar": "file:../foo"
}

Then build foo in watch mode.

The main app will recognize that something has changed and will hot-reload the relevant parts.

Upvotes: 4

Related Questions