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