Deploying React App on Surge using Github Actions

#react #javascript #github #tutorial

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}}