Making Multiple Projects Share Same Node Modules Directory

Hi guys, what’s up…. In today’s post, we would be talking about how to make use of a single node module to run a react app without having to use the create-react-app tool. So let me tell you how I came about this.

So I’ve been running some react apps on my computer using visual studio code but the hassle of running the create-react-app can be tiresome since it is very slow and also brews replicates of same node module. So to solve this I looked out for a method of accessing the same node module for my various react project.

I discovered a post with help from a friend on how to do this. The solution to this was by using a softlink. A softlink can be deemed as what you might call a shortcut which contains a reference to another file.

If you try to delete a softlink, it doesn’t affect the targeted file or path it is connected to but it is removed from the location it is found.

A symlink command follows this format:

ln -s target_path link_path

The -s flag prevents the generated symlink from being a hard link. The target_path is the file or folder that you are targeting as reference. The link_path is the name you want the shortcut to be. I would illustrate an example soon.

One tip I use when using symlink is that I first access the directory from my file explorer by using the option “open in terminal”. Let us look at the example below for further explanation.

From your file manager or explorer, select the project you want to open. From the picture above the name of the project is “App Project”. Then open it in your terminal. If you are already in the file directory of your project it would be easier to set the name you want to use for the shortcut of the targeted folder or file.

ln -s ~/Documents/node_modules node_modules(this is the shortcut's name)

You might be asking what the ~ is used for. The tilde is used for accessing the home directory of Unix like operating systems. You can also run this from the terminal available in visual studio code as long as it points to your current directory.

So what the above command means is that you should look into the documents folder that is available in the home of your file system. And in the document folder, you would see a “node_modules” folder. Then create a softlink for it on the current project directory using the name “node_modules”.

Once this is completed you can then run your npm start command from your current directory and it should serve your react app on the browser. So instead of running create-react-app for your next project, you can just link your current project to an existing node_module.

You might ask can’t I just manually copy and paste the module into the current project. Well, yes that would work but it would duplicate the node module and copying it is also slow.

Why I recommend this linking procedure is that it is fast, it doesn’t duplicate files and it can still be updated as if it were a file in your current project directory.

Thanks guys. Hope this article would help you in your development process.