Deploy a React application to Netlify using Github and CI/CD pipeline

In the last post, we saw how to deploy a spring boot application to Heroku using Github (karthikeyanrm.hashnode.dev/deploy-a-spring-..), in this one we're going to see the process to deploy a react application to Netlify using Github.

A small note about CI/CD here which stands for Continuous Integration and Continuous Deployment.

CI stands for building and testing code after every implemented change. Code changes from different developers are automatically integrated into the project

CD is the constant and automated production deployment of every change made to the code. The changes should be automated, without human intervention.

Table Of Contents:-

Prerequisites

Commit Code into Github

Deploy from Github to Netlify

1. Prerequisites

We should have a React application that is up and running locally on our machine.

Must have a Github account where the code has to be pushed (if not, sign up for free at www.github.com )

Commit Code into Github

Below are the steps to push our application from local to Github repository

Step 1: Create a new repository in Github by clicking on "+" icon like in below image

Step 2: In Visual Studio Code, click on Terminal tab in the menu bar.

For some reason, if Git Bash is not showing then need to install using link https://git-scm.com/downloads. May have to restart the IDE once its installed

Step 3: Initialise a local Git repository using the below command in the terminal (Mac users) or command prompt (windows users) or can do via the IDE as well

git init
#initialising

Step 4:

Add the project files & folders to the local git repository. This stages files for first/initial commit

git add .
#adding

Step 5:

Then commit the files/folders from your workspace repository to the local repository

git commit -m "The first commit"
#committing, the comment under quotes could be anything, here it is just to signify that its for very first time

Step 6:

Go to Github repository and click on the drop-down under code which would give a link for the remote repository url. It ends in .git like in below image

Step 7:

Need to add the remote repository url that was copied in the previous step and verify the remote repository by using commands

git remote add origin <remote-repository-url>
git remote -v
# verifies the remote url

Step 8:

Final step is to push the files to remote github repository using the command below

git push origin main
#push local code to main branch in remote

We need to go to GitHub repository and verify if the files have been committed properly.

Deploy from Github to Netlify

Step 1:

Login to Netlify account and click on New site from Git like in below image

Step 2:

Select GitHub as shown below and authenticate if required

Step 3:

Under the Continuous Deployment: GitHub App, search for the repository

Step 4:

Site settings would be displayed along with the build settings. Just scroll down and click on deploy site

Step 5:

Once the deploy is successful, then go to Deploys tab and the URL of the app which is live would be displayed.

That's a wrap !