Set Up a GitHub Project with node_module
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
gitrepository and creates a.gitdirectory that is used to track the changes made in the project. - .gitignore File: The
.gitignoreis a hidden file and can be created manually like any other file. This file provides the information togitto ignore/untrack files or directories with the defined names or the patterns. For example,/node_moduleswill ignore thenode_modulesdirectory (and its content) in the root directory only, butnode_moduleswill ignore thenode_modulesdirectory defined anywhere in the project hierarchy. More details about.gitignorepatterns is available on in the official docs. Now the next step is to save the changes intogit:
- Open the terminal
- Stage all of the changes for the next commit
1 git add .- Commit/Save the changes into
gitwith a message using-mflag andcommitcommand
1git commit -m "first commit" Note: No changes will be staged or committed for the declared files and folders in
.gitignorefile.
Once the changes have been committed, the next step is to push the code to a remote repository (on GitHub) via the following steps:
Log in to your GitHub account
- Create a new repository by clicking on the
+icon and copy the given SSH link. Don't create any license orreadme.mdfile, otherwise git will force you to pull/download the changes first, which can be done usinggit pull origin master --allow-unrelated-historiescommand.
The --allow-unrelated-histories flag should not be used afterwards with git pull.
.png)
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:
- 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:
1git push origin masterSetting Up a New Node Project from GitHub
Cloning is a process of downloading a repository from a remote server via using the clone command:
1git clone https://github.com/UserName/RepoName.gitThe 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:
1npm startTips
- A
node_modulesdirectory can take up more than 200MB, so keeping allnode_modulescan cause space issues. If you really want to get rid of disk space issues and open to setupnode_modulesusingnpm installthen thenode_modulescan 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.
- Explore the official React .gitignore file for more details.
- If
node_modulesis already a part of a repository then it can be removed using thegit rm -r --cached node_modulescommand, 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!