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.
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.Install the following tools to set up a GitHub project:
git
tool is used to set up an environment to execute git
commands, so download and install the git tool.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).Cloning is the process of creating a local copy of a remote repository. A GitHub repository can be cloned using an SSH or HTML link.
SSH is a protocol to securely communicate with a server using a handshake mechanism and public-key cryptography technique. A secure connection allows you to execute git
instructions from the command line (terminal) without confirming GitHub credentials for every push/pull operation.
Follow the below steps to create an SSH public/private key pair and add the public key to the GitHub
account:
git
maintains a global and local (per project) configuration file that is used to store required details like email, user-name, editing software, etc. Update the value of your GitHub account user name and email in the git
configuration file:
1git config --global user.name "Your name here"
2git config --global user.email "[email protected]"
SSH keys can be generated using git
bash or the Putty tool to generate keys. Follow the below steps to generate SSH keys on Mac or Linux:
If an SSH key already exists then you can use the existing key.
ssh-keygen
:1ssh-keygen -t rsa -C "[email protected]"
A
passphrase
can be used to provide an extra layer of security to SSH keys. If a passphrase if used thengit
will prompt to enter thepassphrase
before using the SSH key, althoughpassphrase
can be saved inssh-agent
like key-chain access to automatically provide the value of thepassphrase
.
1# Mac
2pbcopy < ~/.ssh/id_rsa.pub
cat
command:1cat < ~/.ssh/id_rsa.pub
git
bash
(or putty), so open the git
bash
console and type:1ssh-keygen -t rsa
Now copy the content of your_home_directory/.ssh/id_rsa.pub
file.
Open settings from the profile icon, select SSH and GPG keys, and add the copied SSH key:
Use the git clone
command to clone the project in the current directory, using an SSH
link:
1git clone [email protected]:/UserName/RepoName.git
An SSH link of a GitHub repository can be only be retrieved via a logged-in GitHub account.
An HTTP URL is used to clone any public or private repository from a GitHub account. The major drawback of using an HTTP URL is that git
will ask for a user-name and password for authentication before performing any operation on a GitHub repository. To clone a GitHub repository, copy the HTTP URL of the GitHub repository
execute the clone
command:
1git clone https://github.com/UserName/RepoName.git
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:
1gh auth login
2gh repo clone UserName/RepoName
auth
command can take a --web
flag to authenticate using a browser. It can also accept authentication token using a --with-token
flag.1gh auth login --with-token < myGitHubToken.txt
clone
a command allows to omit the current user name and can work with the repository name associated with the logged-in user account:1gh repo clone RepoName
There are two other official ways to set up a GitHub repository:
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# 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 a node_modules
directory, and after the download completion, run the project:
1npm start
node_modules
directory can take up more than 200MB, so it should not be a part of a repository.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.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!