From Zero to Deployed with React, TravisCI and Surge

UPDATE: This article was written a while back and while some of the concepts are still solid, the exact code needed to get from start to finish has changed and I will not have time in the near future to update it. I still hope it’s able to help some readers out there to see the process walked through from step to step, though these days services like Netlify and Now make this process even easier.

If you’ve done any web development over the last few years you’ll know how time-consuming building websites can be. Not just in the design, coding, and testing of your content, but in the ACTUAL deployment and management of that content. Typically, for most static content websites, you end up with one or more HTML documents, some CSS, pictures, fonts, and JS code that you need to FTP up to some server somewhere and the whole process can be kind of a pain. You may or may not be aware that there’s a way to do this all MUCH more simply with some modern tools. Today I will show you how to leverage create-react-app, TravisCI, and Surge to rapidly spin up, test, and deploy a bootstrapped project to the internet in just a few simple steps.

This post assumes you’ve at least heard of React, that you’ve got NodeJS installed on your machine, and have done some web development recently. Moreover, it is highly recommended to learn Javascript programming in 2021.

Getting Started

First, you need to run npm install --global create-react-app from the command line to get create-react-app. After that, you can spin up a project easily by navigating to a directory that you want to create your app in and typing create-react-app myHelloWorld. Update: it would appear create-react-app no longer supports camelcase. For the remainder of this blog assume that wherever you see myHelloWorld substitute my-hello-world. I will try to update all references but I might miss one or have an outdated screenshot or something scattered about…

The whole process looks sort of like this:

$ npm install --global create-react-app
$ cd /path/to/folder
$ create-react-app my-hello-world

Now you’ve got a React application that you can open in your text editor — I use Visual Studio Code.

The output of create-react-app my-hello-world will give you some next steps such as cd my-hello-world and npm start. When you open this project in VSCode you’ll get something that looks a lot like this:

The main App.js file in a bootstrapped create-react-app project

You can see that this is the file that contains basically all of the layout and content of our app. Next, remove everything from App.js and add the following:

import React from 'react';
import './App.css';
export default () => (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Welcome To My Hello World!</h1>
    </header>
    <p className="App-intro">
      My name is type_your_name_here. Welcome, and hello!
    </p>
  </div>
);

Make sure you replace the type_your_name_here part with your name, or, anything else you want. This example is purposely simplified so you can move on to the next steps. Since this isn’t meant to be a primer on React, I will skip explaining this, but suffice it to say if you’ve been doing web dev the old way, you will love it and want to do EVERYTHING in React as it is much simplified. If you need a crash course on it, this appears to be a great resource.

Moving On

Just a few more steps before you can set up some fancy automated builds and deployments. Install Surge by running npm install --global surge. While waiting for that to install you can watch this video for a quick explanation of what Surge is, and what it can do:

Surge introduction from https://surge.sh on how to deploy using Surge

Once that’s installed and you’ve seen how AWESOME Surge is, you can run the following command to build the app and set up your Surge account:

$ npm run build && surge

After the app builds, Surge will kick in and ask for your email and a password to set up your account. When it gets to project path:, be sure to append /build to the end since that’s where create-react-app put the code. The next prompt is for domain:, enter <your_name_here>.surge.sh.

If you’ve been following along so far, you will have bootstrapped a React application, built it, and after running the surge command above, actually deployed it to the internet at <your_name_here>.surge.sh. Feel free to take a look at mine deployed at shawnpetros.surge.sh. This is a great start for automated deployments of static webpage content, but let’s take it one step further and do it through GitHub and TravisCI!

GitHub and TravisCI

If you’ve never used TravisCI or any build tool, then you’ll love this. Travis is a great tool that simplifies a lot of things that you previously had to do on your own or write scripts for, like FTPing files to your hosting provider. Make sure you go to GitHub and create your new repo for my-hello-world then head on over to TravisCI and log in with your GitHub account so you can easily integrate the two. Travis should have a list of your repositories and lets you turn automation on by clicking the switch for the repo you want to build. Go ahead and do that now for your my-hello-world repo.

Now back in the code, create a file at the root of your project named .travis.yml and add the following:

language: node_js
node_js:
  - "stable"
cache:
  directories:
    - node_modules
script:
  - npm test
  - npm run build
deploy:
  provider: surge
  skip_cleanup: true
  domain: <my_name_here>.surge.sh
  project: ./build/
on:
  branch: master

Make sure to change the domain line under deploy to the domain you used above when running Surge so the automation will deploy the code to the same domain each time it runs.

The rest of the file basically tells Travis to use the latest stable Node package, cache the node_modules directory, run the test and build scripts built into create-react-app, then use the Surge deployment provider to push the build folder to the internet at <my_name_here>.surge.sh hosted by Surge when a push is made to the Master branch on the repository. It is basically magic.

Now, we need to go back to Travis and set up a couple of things. Surge will need your email address and a token to log in as you from the TravisCI build tool. To get this token, run surge token in your command line and copy the output from the second token line, obviously I masked mine, but it should look something like this:

Surge - surge.sh
              email: shawn.petros@gmail.com
              token: *****************
              token: <masked>                 <-- copy this

Go to Travis and click the gear icon for your my-hello-world repository after flicking the switch to on. If you already turned it on in a previous step, then you can find the settings by clicking the repo in the left side panel then clicking “More options” > “Settings” from the menu on the right side. Scroll down the page to Environment Variables and set up the following variables:

Environment variables for Surge deployments

Where SURGE_LOGIN is the email you used when you set Surge up, and SURGE_TOKEN is the token you copied from the output of surge token.

Once you’ve set that up, you can now go back to your project and set up your git repo, commit your changes, then push them up to GitHub.

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/<username>/<reponame>.git
$ git push -u origin master

After pushing your code you should see Travis CI building your app:

Travis CI building your app

If all was set up correctly, your build should pass, and Travis should’ve deployed your app to <your_name_here>.surge.sh. Go ahead and make some more changes to your App.js and push them up to GitHub to see them quickly redeployed automatically to your webpage.

Next Steps

There’s a lot more you can do with these tools, such as deploy with Surge to a custom domain — my website is deployed like that. I hope this was an informative look at some of the current web development tools and that I was able to show you how you can leverage these tools to easily and rapidly deploy web applications and other static content.

Please click 👏 button below a few times to show your support! ⬇⬇

Thanks! Don’t forget to follow Quick Code below.

Find out Free courses on Quick Code for various programming languages. Get new updates on Messenger.