Github Actions

What is Github Actions | Hands on Experience with Github Actions | Building React app using Github Actions and Hosting using Github Pages.

Developers using Github as a code hosting platform for version controlling systems and github allows collaborative coding. Many developers using Github only for that purpose . Well , there are many other features in Github that helps us in many ways. Such as Github Actions, Github Copilot, CodeSpaces etc.

In this Article I’m focus on Github Actions. Github Actions is used for Automate our Workflows and to build CI/CD pipelines. Workflow means what steps we take from building to deploy our applications. Read more about workflows here. CI/ CD (continuous integration / continuous deployment )pipeline is automated process to Build,Test,Merge and Deployment. When we developing an application most probably there can be updates or bug fixes . Each time we have to run the same process again and again to deploy newer version. So why not just automate the process ? which will increase productivity , Reduce risk on delivery and more importantly deploying software quickly and efficiently.

Now we know what Gihub actions is and what Github Actions used for. So lets play around with Github . I’ m going to use a simple react application to create an CI/CD pipeline. I guess you already have an React application. In case you don’t have one fork my simple react app here.

To deploy in github pages we need to add few scripts and the domain name in the package.json file.

{
  "name": "my-app",
  "homepage": "https://hiransanjeewa.github.io/Github_Actions_React_Demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy":"npm run build",
    "deploy":"gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

in homepage add link to your repository.In scripts add predeploy and deploy scripts as well. Remember you can use github pages without using github actions to host your react app you can done that by installing gh-pages to your modules and run a build .

Ok . Now let’s add the automation scripts for our CI/CD pipeline.

Create a folder called .gihub in your app root folder. Inside .github folder create a file called workflows and inside that file create github_pages.yml. you can use any name here as the workflow name. add below codes to the workflow file you created.

---
    name: Build and Deploy React App to GitHub Pages
    on:
      push:
        branches: [ main ]
    jobs:
      build-push-gcr:
        name: Build and Deploy
        runs-on: ubuntu-latest
    
        steps:
        - name: Checkout
          uses: actions/checkout@v2
    
        - name: Build
          run: npm install
    
        - name: Test
          run: npm run test
    
        - name: Deploy
          run: |
            git config --global user.name 'Hiransanjeewa'
            git config --global user.email 'hiransanjeewaa@gmail.com'
            git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}    
            npm run deploy

relace user.name and user.email here. So lets understand the yaml workflow file. first we call this workflow when commit is pushed to main branch . In this case it’s better you create a deploy branch in your repository and add that branch to your workflow.

Inside jobs we specify what are the actions to do.

runs-on: ubuntu-latest

It specify which runner to use for the jobs. Here we use Github hosted runner which means the actions will run on Github servers. We can use self hosted runners as well. As a example we can use EC2 instance as the runner. When choosing a runner we need to consider below cases.

1. Is the repository is private. Since github runners are publically accessible using these runners for private repos is not a good way .
2. Is these github runners are fit for your purpose.
3. Then we can have security issues as well we don’t know where these runners are hosted.

When it’s comes to Enterprise level we definitely should use a alternative CI/CD tools like Jenkins .

uses: actions/checkout@v2

This is the action that will checkout your repository. By default it will check out the right version and branch that is associated with the GitHub push or pull request. Then we install npm, run tests , and run deploy where we specified in the package.json file.

make sure to give read and write permissions to your workflows inside actions/general tab in your settings in the repository.

push the changes to github repo. check in the actions tab if the workflow is running. After successful workflow you will find environments section in your repository.

in the environments you can find view deployment option to your app.

Here I did’t add any domain name to my deployment you can add it to github pages options and edit homepage section in your package.json file.

We used only the github hosted runners here. We can your other servers as runners as well in github actions. Github Actions and Github Pages are totally free. Spending more time with Github Actions might addict you to automate everthing you do . See you in my next article about My new portfolio project.