DEV Community

Cover image for Deploying React App on Surge using Github Actions
Shaurya Vardhan Singh
Shaurya Vardhan Singh

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
didaquis profile image
Dídac García • Edited

I think you need to set a name to the job, right?

example

Collapse
 
tomatopickle profile image
tomatopickle

If anyone else has a doubt, yes name has to be set

Collapse
 
wulforr profile image
Shaurya Vardhan Singh

No its not necessary to name your job

Collapse
 
salmanullahkhan15 profile image
Salman Ullah Khan

Hi Shaurya, I would like to get in touch with you. Please write me back at salman.ullahkhan@yahoo.com