Setup CI/CD for a React project

A tutorial on how to setup automatic deployment using github actions for a react project on netlify

Photo by Lautaro Andreani on Unsplash

With the increased need of productivity and time management any well meaning company or startup should look into reducing the time taking to deploy applications. This time can be greatly reduced by automatic deployment and what’s more is that these services are mostly free.

In this project you would learn how to setup automatic deployment for a react project in netlify and github actions. In this project, I would make sure I tackle all the problems I ran into personally during my own project.

With the basics settled, let’s get to work !!

Step 1:

In your root directory create a folder called .github and in the folder create another folder called workflows in the workflows folder, create the main.yml file.

Setp 2:

In the main.yml file write the code to create the name of current action using:

name: "build pipeline for web release"

add a trigger for this action using:

on: 
  push:
    branches:
    - main

the code above sets the action to be triggered on push to the main branch.

Step 3:

The next thing to do is to set the job. This jobs are tasks performed by the actions

jobs:
  build:
    runs-on: ubuntu-latest

this script above sets the operating system for the github action to be ubuntu

Setp 4:

Add steps for the github actions. The steps required for every react application is as follows:

• Setup github actions
• Install node in the ubuntu environment
• Install dependencies for the project
• Build the website for the public folder

steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16.x
      uses: actions/setup-node@v2
      with:
        node-version: 16.x
        cache: 'npm'
        cache-dependency-path: package-lock.json
    - name: Install dependencies
      run: npm install 
    - name: Build file
      run: npm run build

Step 5:

The next step was one that i had some issue with. This arises due to the fact that react produces single page applications (SPA) and you would need to configure netlify to accept sub pages from any request to your application.

To do this, create an a file in the root directory named netlify.toml . and paste the code below:

now back to the main.yml file, add a step to copy this file to the build folder

    - name: Copy build settings to build folder
      run: cp netlify.toml build/

Step 6:

These next steps allow you to deploy your application build to netlify

    - name: Deploy production to Netlify
      uses: South-Paw/action-netlify-deploy@v1.2.0
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
        build-dir: './build'
        comment-on-commit: true

from the step above there are some tokens that would be necessary to build your application and these tokens are:

• Github secrets secrets.GITHUB_TOKEN
• Netlify user authorization token secrets.NETLIFY_AUTH_TOKEN
• Netlify site id secrets.NETLIFY_SITE_ID

Step 7:

Follow the process below

• Build your application manually using npm build
• Create your netlify application
• Setup your website manually and upload the manual build
• Save your netlify account token and netlify site id as github secrets

Summary

Summary of the github release