Deploy React Apps on Surge using GitHub Actions (Free)

GitHub Actions is a tool by GitHub to automate building, testing and deployment of code.

Surge is a simple tool for publishing static websites for free, by only running a single command.

In this post, I have written the steps you can follow to deploy a react app to surge.sh using GitHub actions.

What we need:

• A React application. create
• A GitHub repository. create
• A Surge deploy token.

Get surge deploy token

npm install surge
surge

Enter username/email and password to login.
Then run surge token to generate token.
Copy this token and add it as a secret in the GitHub repository.

Setup GitHub Actions

GitHub actions are triggered by yaml files in .github/workflows/ directory. Create a yaml file in this directory and add these lines.

name: Deploy

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Setup Node
      uses: actions/setup-node@v2-beta
      with:
          node-version: 12

    - name: Build React App
      run: |
        npm install # Install Dependencies
        CI=false npm run build # CI=false to ignore warnings

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

    - name: Deploy to Surge
      run:  surge ./build https://someawsomeurl.surge.sh/ --token ${{secrets.TOKEN}}

What this does is on every push to master branch, these steps are performed by GitHub actions.

• Setup Node
• Install all dependecies.
• Build the app.
• Install surge.
• Run surge to deploy on given url.

Deploy

Commit and push your changes to the GitHub repository. You can now see the progress in the Actions tab on GitHub.
After all steps are completed, you React app will be available on the URL used in the deploy.yaml file.

Conclusion

You can use this process to deploy Vue and Angular app too. GitHub actions is a great tool that can be used to automate your workflow.

Checkout this React project in which I used the above steps for deployment:

usamasubhani / another-covid-tracker

Covid-19 Tracker project for Panacloud Bootcamp 2020

Feel free to share what automation tools are you using and what tasks are you planning to automate.

Comments

[Nishith Savla]

Very helpful. Thanks
A suggestion: change secrets.TOKEN to secrets.SURGE_TOKEN as there can be other tokens in a repository and renaming it will make more sense.