React Github Does Not Upload Node Module

Set Up a GitHub Project with node_module

Pavneet Singh

Front End Web Development

Introduction

The npx create-react-app app-proper noun command is the easiest way to gear up a React template project. Information technology is besides an officially recommended approach to prepare a React project. The npx control stands for "Node Package Execute," and uses the latest version of the create-react-app tool to ready a React projection without installing a specific version of the tool locally.

The npx control 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 i of the crucial parts of any node or React projection, but it shouldn't be tracked past the version control system (git) due to its large size. The right approach is to rail the bundle.json file, and utilise 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 control automatically sets up the project as a git repository. Information technology performs the following git commands:

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

.gitignore File: The .gitignore is a hidden file and tin be created manually like whatever other file. This file provides the information to git to ignore/untrack files or directories with the divers names or the patterns. For example, /node_modules volition ignore the node_modules directory (and its content) in the root directory simply, just node_modules will ignore the node_modules directory defined anywhere in the project hierarchy. More details about .gitignore patterns is bachelor on in the official docs. At present the next footstep 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 -g "showtime commit"                                                      

sh

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

Once the changes accept been committed, the next footstep is to push the lawmaking to a remote repository (on GitHub) via the following steps:

Log in to your GitHub account

Create a new repository past clicking on the + icon and re-create the given SSH link. Don't create whatsoever license or readme.md file, otherwise git volition force y'all to pull/download the changes first, which can exist done using git pull origin principal --let-unrelated-histories command.

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

If yous haven't added the SSH key to your GitHub business relationship then either you tin can use HTTPS link, which volition crave you to enter a username and countersign for every push to a GitHub server, or yous can set the SSH key by post-obit 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                                  

sh

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

The terminal stride is to push/move the committed changes to the remote repository:

                                      1                    git push button origin primary                                  

sh

Setting Upwardly a New Node Project from GitHub

Cloning is a procedure of downloading a repository from a remote server via using the clone control:

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

sh

The in a higher place clone control 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 packet.json file:

                                      1                    # brand certain that you lot are in the root directory of the project, apply pwd or cd for windows                                        twocd RepoName                    iiinpm install                                  

sh

Information technology volition accept some time to download all the dependencies into the node_modules directory, and subsequently 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 desire to get rid of disk infinite issues and open to setup node_modules using npm install then the node_modules can be listed and deleted using the :

                                      ane                    # list all node_modules directories in the electric current path                                        iidetect . -proper noun 'node_modules' -blazon d -prune                    3# remove all node_modules directories in the current path                    4find . -proper name 'node_modules' -type d -prune -exec rm -rf '{}' +                                  

sh

This is an irreversible procedure as node_modules is role of .gitignore , then 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 like shooting fish in a barrel way to avert 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 , and so this file is plenty to set a fresh re-create of a Node project. Happy coding!

curtisunettle.blogspot.com

Source: https://www.pluralsight.com/guides/set-up-a-github-project-with-node_module

Share this post