Streamlining React CI/CD Pipelines with GitHub Actions

In this blog, I am going to go over the steps on how to implement a CI/CD pipeline using GitHub Actions on a Linux Virtual Machine and deploying a simple React js project on it.

Things require before start

You have a basic knowledge of:

• Git & GitHub

• Nginx server

• Linux commands

Steps to Action Runner of Virtual Machine

Before following the steps to set up a pipeline using GitHub actions, you have to check out how to do this manually: How to host MERN Stack Application on Azure Cloud

Now that you have done the basic setup (as the first time you have to do the setup manually) we can start by creating a repository on GitHub and pushing your code in it.

Go to the settings tab of you repository and choose the actions option from the left sidebar and choose the runner option. Then click on the New self-hosted runner

After clicking on that, you will have 3 options to choose the Operating Systems. You have to choose the commands based on which operation system you have picked. In my case, I am going to select Linux OS. After selecting the option, you will get some. You don't have to worry about them, just save them securely for future use.

After performing the configuration of action runner, you must have an SSH connection between your github and your virtual machine. To do that, you have to add your virtual machine's SSH key to GitHub.

To create the SSH key into your virtual machine, type the following commands:

sudo ssh-keygen -t ed25519

After that just press enters until the prompt exits to get the key. This command will generate a 2 key files: a private key and a public key of your virtual machine. Make sure you must not share your private key to anyone. You can also give a custom name to your ssh key. In my case, I have defined both name and path of the SSH files: /root/.ssh/id_cicd

Now type sudo cat /root/.ssh/id_cicd.pub to get your public SSH key into the terminal. You have to copy and paste it into the settings of your GitHub account to prepare a connection between them.

Go to settings of your account and select the SSH and GPG keys and create a new SSH connection and paste your public keys.

After the above task, you have to paste the commands into your virtual machine's terminal that was previously generated by your repository.

You have to paste those commands line by line and hit enter everytime. These command will prepare a secure connection between that repository and your vitual machine

Now in the end, type the following commands and hit enter

sudo ./svc.sh install
sudo ./svc.sh start

Steps to setup GitHub Actions for CI/CD

If you are here, that means we have done so much fancy Linux stuff but bare with me, this is one of the important step that will make the automate change whenever you push the code into Github.

Go to Actions tab of your repository and select the suitable action configuration. Since in this tutorial we are hosting a 'React Project', I will select the nodejs action.

Now copy and paste the following text into the nodejs.yml file. This is the configuration that tracks changes and push the code to your virtual machine server everytime some changes are made on 'master' branch.

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: self-hosted

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm install
    - run: npm run build
    - run: sudo cp -r dist/* /var/www/html/

After configuring that, press on save and wait for the pipeline to execute. After execution, the action tab will show you the build result:

Now visit your IP address/domain to see the website that you've hosted using GitHub Action and viola, your changes are reflected🎉

If you have read it till now, thank you so much for reading!, please leave your comments if any ✌️

Don't forget to bookmark this blog for the future 📌

Connect with the author:

• LinkedIn

• GitHub

• Twitter