Set up continuous deploy for Free with React, Github, Travis and Heroku

In this tutorial I'll show you how to set up professional development process with help of continuous deployment.

We'll be using React with help of Create-react-app but you can easily follow with any other project maintained with NPM. Even if you are not using NPM, you can adjust the core build and run scripts for your needs quite easily. By any means you don't have to have any React experience whatsoever. It's just a sample project that will be used to show the flow of setting up the environment.

Requirements before we start:

• Installed NodeJS with NPM and Git,

• You have to have an account on Github, Github account linked with Travis-ci.org and Heroku. All of them are free. Travis CI has .org TLD for free repos and .com TLD for private repos. For this tutorial we'll use .org version for free repos.

Create React project with Create-React-App

Open your terminal of choice in your work folder. For me, it's ~/sandbox/

cd ~/sandbox/

Within this folder, we'll create the React project with NPX (A tool for executing Node packages) that is pre-installed with NPM version 5.2+

npx create-react-app tutorial-cicd

Installation of boilerplate project will begin. When everything is good to go you'll see a message with list of commands that can be run within the app. We'll just cd into the project

cd tutorial-cicd

We don't have to do npm install since the npx command already dit it. Now we can start the app with:

npm start

New browser tab will get open with http://localhost:3000 and following page will be shown.

The good thing about create-react-app is that it has tests included out of the box so we don't have to set up anything. For the reference you can run tests within you folder with

npm test

You'll be prompted with few options of running your tests. Simple press a to run all tests. Only one test should be run with text renders learn react link that checks if the app renders link that can be seen on http://localhost:3000. Since React renders the link just fine, the test passes.

Now we have our project setup.

Create Github repo and link it to our app

If you already setup your Github account you are good to go, if not please register on Github.com. After you login to Github, we'll create new repository. You can create new repository on https://github.com/new.

We'll name the repository tutorial-cicd and set it to Public. Now we have repo created but still not linked to our app. We can do that with following commands

git remote add origin git@github.com:<your_github_username>/tutorial-cicd.git
git push -u origin master

NOTE that you should swap <your_github_username> in first command with your username. Also this way we are using SSH to connect our repo. If you don't want to use SSH auth you can use HTTPS versions.

We don't have to do git init since npx already included .git and .gitignore in our app folder.

If you've done everything correctly, you should see the app on Github under project tutorial-cicd.

We have now working app that is connected to Github repo.

Connect Github repo with Travis CI

Now comes the part where we connect the repo with Travis CI. You should be logged in into Travis CI with the same Github account that has our tutorial-cicd repo. You'll be afterwards redirected to Github for authorization.

After you have successfully logged in. Click on your profile logo in the upper right side of the dashboard, click Settings and then the green Activate button. After that you should see a list of repositories on your Github account. If you don't see the tutorial-cicd repo, click on Sync account in the left side of the screen. It'll take few mins (don't know why it takes so much time to sync) to sync Github and Travis CI. After success you should see the tutorial-cicd repo.

Create Travis config file

To tell Travis CI what to do, we must create .travis.yml config file in our projects root directory.

touch .travis.yml

Within this file, we will specify language to be used in build, its version and script to be run.

Since we need JavaScript on server, we will use Node.js v12. For this demo we will run only our test and production build of create-react-app so we can add following to .travis.yml

language: node_js

node_js:
  - "12"

script:
    - npm test
    - npm run build

Let's try that. Push new file to Github repo with

git add .
git commit -m "add travis.yml config file"
git push

If you visit tutorial-cicd in Travis on URL

https://travis-ci.org/github/<your-github-name>/tutorial-cicd

You should see either running (yellow) build, already finished build (green), or failed build (red).

Under it, there is a log of the build. If something failed, you will see there the appropriate error message.

If everything passed, you just run first build! Good job

Create Heroku project

Now we will create project on Heroku where we can run our app in the cloud. For that you need to create an account on their website. After you create and account, create new app on this link. Name the app as "-tutorial-cicd" and choose a region that is closer to your location. For me Europe. If the app name is already taken, just modify it slightly. Click "Create app".

Map Deployment Method to Github

To link Heroku project with you Github repo, in the Herokus Deployment method, choose Github. Then find the Github repo project and connect it. In the Automatic deploys section, check the "Wait for CI to pass before deploy" and then click on "Enable Automatic Deploys".

Link Travis and Heroku

To connect Travis and Heroku, we need to update .travis.yml file. But before updating the file, we need to create our secure api key. For this, you need to have both Heroku and Travis CLI. After installation login to heroku CLI with

heroku login

That will prompt you with e-mail and password for Heroku.

If you have both CLIs installed you will run

travis encrypt $(heroku auth:token) --add deploy.api_key

You will verify detected repository with yes. Then it will prompt you what the CLI will overwrite our Travis config file with deploy part. Answer with y. At last we will specify provider of our deploy to be heroku and app name. Final .travil.yml config file should look like this.

language: node_js

node_js:
  - '12'

script:
  - npm test
  - npm run build

deploy:
  provider: heroku
  app: <your_heroku_app_name>
  api_key:
    secure: <your_secure_key>

Now you can push changes to Github repo with

git commit -m "add deploy section to travis.yml"
git push

Serve static files on Heroku

We have build our create-react-app to production version but we have not specified how to run such build. For that we will use serve package. Sure there are better ways to do that but I have chosen the most straightforward for this tutorial. We need to install one extra dependency to our project

npm install --save serve

After that we will change our start script in package.json to use our installed serve package as following

NOTE: only edit start in scripts object.

{
    ...
    "scripts": {
        "start": "serve -s build",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    }
    ...
}

We can again commit new changes

git commit -m "add serve package"
git push

After success CI in Travis, you should be able to see you app running on URL

https://<your_heroku_app_name>.herokuapp.com/

Conclusion

You have now setup continuous deployment that will deploy your changes to production without human intervention. Only failed tests or build will need additional steps. Remember that you should create new git branch when developing new feature so another college can check your changes before they are deployed to production.

My full repo can be found on my Github.

Going to create another tutorial on same process, but also with Docker! Stay tuned

Checkout more articles on my personal blog