How To Create Node_modules Folder

Author avatar

Set Up a GitHub Project with node_module

Pavneet Singh

Front End Web Development

Introduction

The npx create-react-app app-name command is the easiest way to set up a React template project. It is also an officially recommended approach to set up a React project. The npx command stands for "Node Package Execute," and uses the latest version of the create-react-app tool to set up a React project without installing a specific version of the tool locally.

The npx command is bundled with the node.js package, and, apart from npx , node.js also simplifies the process of dependency management using npm and package.json file to track the list of dependencies. A node_modules directory contains all the React dependencies packages: react , react-dom , and their transitive dependencies like webpack , babal , rxjs , ESLint , etc., to build and run a React project. The node_modules directory is one of the crucial parts of any node or React project, but it shouldn't be tracked by the version control system (git) due to its large size. The right approach is to track the package.json file, and use the npm tool to regenerate node_modules . This guide explains the steps to set up a GitHub project to manage node_modules directory.

Setting Up a Node Project as a GitHub Repository

The create-react-app command automatically sets up the project as a git repository. It performs the following git commands:

git init: This command will configure the project as a git repository and creates a .git directory that is used to track the changes made in the project.

.gitignore File: The .gitignore is a hidden file and can be created manually like any other file. This file provides the information to git to ignore/untrack files or directories with the defined names or the patterns. For example, /node_modules will ignore the node_modules directory (and its content) in the root directory only, but node_modules will ignore the node_modules directory defined anywhere in the project hierarchy. More details about .gitignore patterns is available on in the official docs. Now the next step is to save the changes into git :

Stage all of the changes for the next commit

Commit/Save the changes into git with a message using -m flag and commit command

                                      1                    git commit -m "first commit"

Note: No changes will be staged or committed for the declared files and folders in .gitignore file.

Once the changes have been committed, the next step is to push the code to a remote repository (on GitHub) via the following steps:

Create a new repository by clicking on the + icon and copy the given SSH link. Don't create any license or readme.md file, otherwise git will force you to pull/download the changes first, which can be done using git pull origin master --allow-unrelated-histories command.

The --allow-unrelated-histories flag should not be used afterwards with git pull .

New repository

If you haven't added the SSH key to your GitHub account then either you can use HTTPS link, which will require you to enter a username and password for every push to a GitHub server, or you can set up the SSH key by following the steps here.

To push the code to a remote repository, git needs to know the URL of the remote repository.

Copy the SSH URL from GitHub repository:

Clone with SSH

Add the remote SSH URL into git remote entries:

                                      1                    # SSH link ends with .git                                        2                    git remote add origin https://github.com/UserName/RepoName.git

Here remote is a command to manage remote server connection and origin is just a conventional name for remote links.

The final step is to push/move the committed changes to the remote repository:

                                      1                    git push origin master

Setting Up a New Node Project from GitHub

Cloning is a process of downloading a repository from a remote server via using the clone command:

                                      1                    git clone https://github.com/UserName/RepoName.git

The above clone command will download the project from a remote server locally. The node_modules is not a part of the cloned repository and should be downloaded using the npm install command to download all the defined and transitive dependencies mentioned in package.json file:

                                      1                    # make sure that you are in the root directory of the project, use pwd or cd for windows                                        2cd RepoName                    3npm install

It will take some time to download all the dependencies into the node_modules directory, and after the completion of this process, the project is ready to run:

Tips

A node_modules directory can take up more than 200MB, so keeping all node_modules can cause space issues. If you really want to get rid of disk space issues and open to setup node_modules using npm install then the node_modules can be listed and deleted using the :

                                      1                    # list all node_modules directories in the current path                                        2find . -name 'node_modules' -type d -prune                    3# remove all node_modules directories in the current path                    4find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +

This is an irreversible process as node_modules is part of .gitignore , so make sure to verify the path and git commits before executing the above commands.

If node_modules is already a part of a repository then it can be removed using the git rm -r --cached node_modules command, though make sure to commit and push the changes to the remote server.

Conclusion

Git and npm provides an easy way to avoid pushing bulky node_modules to a GitHub repository using the .gitignore file and npm install command. A package.json file is the source to regenerate node_modules , so this file is enough to set up a fresh copy of a Node project. Happy coding!