Deploying React App on Surge using Github Actions

Today we are going to set up an automation which will deploy our react code on surge whenever a push request is made to main branch of the github repository.

First step would be to create a React app using create-react-app.

npx create-react-app react-github-surge
cd react-github-surge

Now set up a github repository and push your code to the repository.

$ git init
$ git add .
$ git commit -m "initial commit"
$ git branch -M main
$ git remote add origin REPOSITORY_URL
$ git push origin main

After creating a repository on github login to surge account and create a token for surge which will be used by github action to deploy to surge using your account.

$ surge login
$ surge token

Go to github repository and add the token as a secret

Github actions are stored in .github/workflows/ directory.
so create this directory and add a yaml file to it.

mkdir .github/worflows
touch .github/worflows/deploy.yml

Open this file and add the below code to it.

name: Deploy

on:
  push:
    branches: [ main ]

jobs:
    runs-on: ubuntu-latest

    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # Install node version 12
      - uses: actions/setup-node@v2-beta
        with:
          node-version: '12'

      # Install npm packages
      - name: Install packages
        run: npm install

      # Build react app
      - name: Build the app
        run: npm run build

      # Install Surge 
      - name: Install Surge
        run: npm install -g surge

      # Deploy to the defined URL using the token
      - name: Deploy to surge
        run: surge ./build URL_TO_DEPLOY_TO --token ${{secrets.TOKEN}}

So let's see what is going on over here.
In first line we are giving a name to our action so that we can identify it easily.

Then we have on: block

on:
  push:
    branches: [ main ]

here we are defining when we want our function to run i.e. whenever a push request is made on main branch.We can specify more than one branch inside the array using comma seperated values.

Now whenever a push request will be made to main branch of the github repository the github action will execute this job and deploy the react app to surge.

jobs:
    runs-on: ubuntu-latest

Inside the jobs we write the platform on which our code will run. Here we are using latest version of ubuntu.

steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Install node version 12
      - uses: actions/setup-node@v2-beta
        with:
          node-version: '12'

      # Install npm packages
      - name: Install packages
        run: npm install

      # Build react app
      - name: Build the app
        run: npm run build

      # Install Surge 
      - name: Install Surge
        run: npm install -g surge

      # Deploy to the defined URL using the token
      - name: Deploy to surge
        run: surge ./build URL_TO_DEPLOY_TO --token ${{secrets.TOKEN}}

Then we declare the steps to be followed. Each step will run synchronously.
First step is to load our repository in our latest ubuntu version.

Second step is to install node, we are installing node version 12 here.

Then we write steps to install npm packages and build our react app.

Next we will install surge and lastly we will deploy our build directory to surge using the token.

Now whenever a push request is made on main branch of our repository github will automatically deploy it to the url provided.