How to deploy React App through Surge and Github Actions

Learn how to continuously integrate and deploy your static react app

Photo by Emile Perron on Unsplash

Everyone knows about the popularity of React. React is taking over front-end development. But the question is why do we need to React in the first place? Why is it so popular? The answer is simple, Virtual DOM(Domain Model Object). The virtual DOM is a JavaScript object that describes the current state of your application’s web page in the simplest way possible.Think of it as a copy of the actual DOM object. But instead of rendering the whole page, like in tradition JavaScript, what it does is that it changes the Virtual DOM at run time, compares that copy with the actual DOM, and changes only the parts of DOM object that are required to be changed which makes the application fast and smooth to run. Also, continuous integration and deployment is the key to improve applications frequently and not worry about time-consuming manual tasks.

So let us get started

Create Empty Github Repository

First of all, create an empty Github repository, without initializing with README because the React template already has it and it will cause merge conflict if you try to initialize it also on Github.

Install YARN

Once you have successfully created the repository, it’s time to create a react app. First of all, we need to install nodejs and then yarn package manager. We will use this to create, run, and build our react app.

sudo apt install nodejs
sudo apt install yarn

Once you have installed it, check the version to see if it is installation was successful.

node --version
yarn --version

Yarn is an alternative package manager of npm. You can use any of them.

Create-React-App

Next, we will create a react app through yarn using the following command. This will create a basic react template with an initialized git and README file. my-app is the name of our app folder.

yarn create react-app my-app

After this, we will move into that folder my changing our directory and start our react app using yarn.

cd my-app
yarn start

Push React App to Github Repository

Now we will push our app to Github. As I mentioned earlier, Git has already initialized. Type git status to see if there are any unstaged changes.

git status

Get a remote repository. Go to the GitHub website and press the clone/download button. Copy the URL and paste it in place of “your GitHub repo URL”.

git remote add origin "your github repo url"

If you have done any changes, commit those changes before pushing it in GitHub remote repository.

git add .
git commit -m "Your commit msg"

Now we are ready to push our app to GitHub repository. Type the following command.

git push origin master

After pushing the changes, go to GitHub and see the changes.

Continuous Integration and Continuous Deployment

Its time to write GitHub actions and continuously deploy our website on the surge. For this, install the surge on your laptop.

npm install --global surge

To continuously deploy our website on the surge, we need to create surge token and place it in our GitHub secrets. Generate the surge token

surge token

Copy the generated token, go to the GitHub repository setting, and open secrets. Press “create secret” button, paste the token and then name the secret whatever you want i.e. SURGE_TOKEN

Create Github Workflow Action for CI/CD

To create a workflow,go to Github Actions and click “set up a workflow yourself”.The workflow page will open.After writing the workflow, I will explain what the code is doing. Save this workflow by committing and press the Action tab to see if the actions are running successfully on each push.

name: Deploy Surge Website   
on: [push]   
jobs:
       build:                           
           runs-on: ubuntu-latest 
           name: Deploying to surge 
           steps:    
           - uses: actions/checkout@v2 
           - name: Install Node.js
             uses: actions/setup-node@v2-beta
             with: 
               node-version: 12 
           - uses: borales/actions-yarn@v2.0.0 # `yarn install`
             with:
               cmd: install 
           - name: Build React App                              
             run: yarn build 
           - name: Install Surge
             run:npm install --global surge  
           - name: Run surge
             run: surge ./build myreact_mk.surge.sh --token ${{   secrets.SURGE_TOKEN }}

Every workflow starts with the name. I called it the Deploy Surge Website. You can name it whatever you want.

Then we define on. That means on which action you want to run workflow i.e push, pull. You can also specify the branch.

Next, we will define what jobs the workflow is going to perform. We use the checkout@v2 which checks-out our repository under GitHub workspace, so our workflow can access it. If you look closely, the next set of steps are the same steps that we have been performing from the beginning. That is, Installing node and yarn. Then instead of yarn start, we are running the yarn build to build our app. Installing surge and finally running react app on the surge.

./build refers to the build folder of the react app which is created when we run yarn build. myreact_mk.surge.sh is the name of the website and then the surge token name we defined in our secrets.

That’s it. Now, whenever you will push new changes into the code. The website will be automatically updated.

Conclusion:

What we have learned is how to create ta basic react app and deploy it continuously on Surge using GitHub workflow so that we do not have to do the time-taking task of deployment ourselves.