Loading a local Node package into multiple local projects can be beneficial to your development process.
Let’s call the project and the package we are going to work with my-local-project
and my-local-package
for the purpose of this post. We’re going to load the my-local-package
into the project as a dependency.
Usually you would execute a Node install that loads a package from the NPMJS.org registry:
npm install package-name@version
That will include and autoload the Node package into your project. That is from the remote registry but you don’t have to publish your package there during development, you can load them locally.
Here are two ways of loading a local Node package into your project. The first way is the standard way of doing it while the second way will simplify and automate the process for you. No 2 is the updated and recommended way of streamlining development.
1. NPM install Local Package
To install a local Node package in your project, you can just specify a relative path to the package directory. In your my-local-project
folder, run this command:
npm install ../my-local-package
Which results a relative, local file reference in your package.json
file. When you update the Node package source code, you need to build it again and update the project to load the newly built dependency locally.
To re-build the package, go to it and run:
npm run build
This works perfectly good and is extremely useful in development and testing phases of a project.
If the package has new dependencies, you need to run an install on the project:
npm install
Or rather just do this in the project:
npm update my-local-package
Each time you make changes, you need to rebuild the package and restart your project which can be tedious. Let’s see how we can automate this and automatically load package changes into the project without having to do anything.
2. Use Yalc to Add Local Package
Not only does Yalc help you to use a package across multiple local projects – it also allows the automation of pushing changes to the package to all projects.
Automate the loading of a local package changes into projects
We can even automate this process so that changes to the package are automatically pushed. That way you can focus on the implementation of the project and it’s dependencies.
Follow these steps to load a local Node package into your project and automate the pushing of changes in the package to the project:
2.1. Setup Yalc in the Package
First off, install Yalc globally:
npm install -g yalc
That will install Yalc globally on your machine. Yalc has a local store on your machine to which you can publish packages and from where you can load packages.
When it’s done, you can go to the package’s folder and then publish to the Yalc store:
yalc publish
2.2. Add Yalc to the Project
With the package published to your Yalc store, you can now use it as a dependency in other projects. To add it to your project, go to the project’s folder in your command line or terminal and execute this command:
yalc add my-local-package
Then do an install if your package has dependencies of it’s own:
npm install
That’s it, you can now use the package’s code and logic in your project by importing it’s class exports.
At this point, you can make changes to your local package and just execute a yalc publish --push
command to run a build on the package and push the changes to your local project/s where you added the package from the Yalc store.
Try it out – Make a change to your package, run the command and test the code in your project/s.
Let’s automate this so that changes in the package automatically runs the build and publish command and also in your project, restart the application or run an install for the dependencies.
2.3. Setup Nodemon
Nodemon will automatically detect changes to the package and project files. In this case, we want to run some commands when changes are detected.
2.3.1. Nodemon in the Package
Let’s say the source files in your package is inside src/
we want to watch all changes to files in this directory and run the yalc publish --push
command when there are changes.
Install Nodemon in your package as a development dependency with the following command:
npm install --save-dev nodemon
Then in the root of your project – same level as the Node package.json
file, create a new file named nodemon.json
and paste the following configuration into it:
{
"restartable": "rs",
"ignore": [".git", "dist/", "coverage/"],
"watch": ["src/"],
"execMap": {
"ts": "node -r ts-node/register"
},
"env": {
"NODE_ENV": "development"
},
"ext": "js,json,ts"
}
Start Nodemon with the following command in your package:
nodemon -e js,ts -x yalc publish --push
Then start making changes to your package and watch the application run the command automatically to build and push the changes to all local projects using the package.
2.3.2. Nodemon in the Project
Install Nodemon in your project as well using the same command as above.
Also create a nodemon.json
configuration file in the project. The configuration will be a little bit different since we want to watch for changes on the package folder inside the project and restart the application or run a command. Here is the configuration file’s content:
{
"restartable": "rs",
"ignore": [".git"],
"watch": ["src/", "node_modules/my-local-package/"],
"execMap": {
"ts": "node -r ts-node/register"
},
"env": {
"NODE_ENV": "development"
},
"ext": "js,json,ts"
}
The package lives inside the node_modules
folder. That is done by Yalc itself. So let’s watch the package folder in there using Nodemon.
Start it up with the following command:
npm run dev
That will run Node and execute the Nodemon watch as well. Once you’ve run it, make changes to the package and let it run it’s build and push. Then watch the project restart due to the changes in the node_modules/my-local-package/
folder.
2.4. Test It Out
Since you have Nodemon running on the project and also on the package, make a change to any of the package files and watch the magic happen 🙂
As you make changes the package, Nodemon will pick it up and run the build as well as the Yalc push command to your local project folder/s. Then Nodemon in the project will pick up the changes to node_modules/my-local-package
and also rebuild.
Be the first to reply