Author avatar

Pavneet Singh

Setting Up a React Project from GitHub

Pavneet Singh

  • Oct 20, 2020
  • 8 Min read
  • 268 Views
  • Oct 20, 2020
  • 8 Min read
  • 268 Views
Web Development
Front End Web Development
Client-side Frameworks
React

Introduction

GitHub is the most widely used hosting service provider for projects and files to manage data changes effectively. Apart from repository hosting, GitHub also offers many other services like gists, CI/CD integration, package publication, GitHub APIs, GitHub Pages, sponsors, and much more. The create-react-app tool automatically adds a .gitignore file that contains the names or patterns to ignore files/directories while pushing the code to the GitHub server. git and GitHub are widely used to develop software in a collaborative environment. This guide explains the details of setting up a React project from a GitHub repository using different methods.

Basic Terms and Command of Git

There is some important terminology related to git files and commands that are required to understand how git works:

  • git is a tool to manage the history of a project using git commands. The history details are stored in a hidden directory named .git.
  • repository is a conventional name of a git project hosted on the GitHub server.
  • .gitignore files contain the names (or patterns) of the files or directories that will neither be tracked nor uploaded to a GitHub repository by git.
  • remote is the command used to add SSH or HTTPS URL links of a GitHub repository.
  • origin is just a conventional name for a GitHub repository URL.
  • staged can be visualized as a bucket of files or directories whose changes are ready to be stored. The add command is used to stage changes.
  • commit is used to store the state of all the staged files with an optional message.
  • pull is used to copy the code from a remote branch in the current project.
  • push is used to move the committed changes to a remote repository.

Prerequisite:

Install the following tools to set up a GitHub project:

Optional

  • Putty is a tool for windows to generate SSH keys. Download and install the Putty tool as per your Windows OS type (32 or 64).

Clone a Repository Using GitHub CLI

The GitHub CLI brings capabilities of GitHub web UI to the command line to perform operations like creating a pull request, track issues, fork a repository, etc. Use the auth command to authenticate the account and clone the project using the clone command:

1
2
gh auth login
gh repo clone UserName/RepoName
bash
  • The auth command can take a --web flag to authenticate using a browser. It can also accept authentication token using a --with-token flag.
1
gh auth login --with-token < myGitHubToken.txt
bash
  • The clone a command allows to omit the current user name and can work with the repository name associated with the logged-in user account:
1
gh repo clone RepoName
bash

Alternative Options to Set Up a Repository

There are two other official ways to set up a GitHub repository:

  1. Use the download option to get a compressed file of a codebase and uncompress it.
  2. Install the GitHub Desktop tool and choose the Open with GitHub Desktop option on a repository.

Run a Cloned React Project

The node_modules directory is not a part of a cloned repository and should be downloaded using the npm install command to download all the direct and transitive dependencies mentioned in the package.json file:

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

It will take some time to download all the dependencies into a node_modules directory, and after the download completion, run the project:

1
npm start
sh

Tips

  • A node_modules directory can take up more than 200MB, so it should not be a part of a repository.
  • If node_modules is already a part of a repository then it can be removed using git rm -r --cached node_modules command, though make sure to commit and push the changes to the remote server first.

Conclusion

A GitHub repository can be cloned using git and gh tools. Use an SSH key to auto-authenticate. There are many free software available to manage git projects. Try out the GitHub CLI tools to bring all the features of the GitHub UI to terminal. Happy coding!

3