React App Build and Release — Travis CI and Github

Working with a team always needs efficiency, and efficiency comes from a better process. To my understanding, continuous integration (CI) and continuous deployment (CD) is nothing but an excellent method to allow teams to efficiently create and release applications to end-users. It is crucial to understand the problems CI and CD solve to use them properly. It will allow your team to improve their process, and avoid putting effort chasing fancy metrics that do not bring any value to your operation. Disclaimer I don’t have enough experience working in big teams, but what I’m going to explain here is my theoretical understanding, and then try to apply it in my projects.

Scope of Article

1. Git workflow
2. CI/CD using Travis CI and GitHub

Git Workflow

Any software development starts with source code management (SCM) and a version control system (VCS). In my case, I used git for VCS. For better productivity, security, and efficiency having a good git-flow is a must.

There are a couple of points you should agree with if you are going to use git workflow:

1. Define mainlines like master and develop is most common.
2. Make sure those are protected.

When we have this rule in place, then a possible workflow could be:

1. The developer always starts work by creating a feature branch.
2. When the task is complete on the feature branch, a pull request (PR) must be opened against the develop branch.
3. When PR open, CI trigger all test and provide status.
4. Upon test status and PR review is done, code gets merged to develop.
5. A developer will open a PR end of the work sprint and merge it to master.
6. Master must be ready to deploy anytime.

If there any issue arises in production then we can use a hotfix branch created from master, then a PR of a hotfix to master is made and merged.

Continuous integration

We may ask what is the problem we are trying to solve if we have an excellent git-workflow. Well, CI is a team problem, not any tooling problem or engineering problem. CI solves the team scaling problem.

The scenario we want to avoid is that a faulty commit makes it to the main branch. Faulty or defective means the code does not compile, or the app won’t start or is unusable. A faulty code merges to mainline mean hours of struggle to find the real issue and fix by doing another fix or rolling back changes. Most importantly, your production could be broken and that’s a huge loss for any business.

The problem is that your entire team is stuck. All the developers who pulled the faulty commit will spend 5 minutes wondering why it doesn’t work. Several will probably try to find the defective commit. Some will try to fix the issue by themselves in parallel with the faulty code author.

This is a waste of time for your team. The worst part is that repeated incidents fuel mistrust of the main branch and encourages developers to work apart.

Continuous Delivery and Deployment

CD is an engineering problem to solve. When the team merges their PR, it’s time to make sure we can run all tests, and sanity check then produces the build. CD is nothing but:

1. Ensure production build can deploy in a production environment
2. It’s the release process to make sure, with a single click you can deploy a build

CI/CD using Travis CI and GitHub

Github is a great place to do automation and it provides a lot of free tooling, such as Github Pages, CI integration, WebHook support and a lot more. I have a couple of projects in Github already but going to use CarFinder React-App to build the pipeline. Here is a snapshot of the pipeline:

• Gitflow already in place
• Integrate Travis CI support in the git
• Configure Webhook to trigger Travis CI
• And rest should be configuring small things here and there.

About the project Car finder

This project is using an open API to search Cars! Using the​ ​Marketcheck Cars Search API​, I built a react-app that uses a different filter. For example, I can accept car manufacturer, model, and year and search nearby dealerships for local inventory (within 10 km radius) closest to the user and be able to switch cities (i.e., select Montreal over Toronto).

To develop this project, I used NodeJS and a free account on https://www.marketcheck.com/automotive, which served as the necessary data from the API for the app.

Scaffold the project and load the code on a repository

First, I created a basic React application using a create-react-app tool and then checked if everything was working correctly.

   npx create-react-app carfinder-app
   cd carfinder-app
   npm start

Something similar should appear on your browser, at http://localhost:3000/

Here is the Github repository creation and starter snapshot:

From the root folder of the project I ran

git remote add origin https://github.com/nipa04/carfinder-app.git
git push -u origin master

Create the file .travis.yml

Icreated a new file .travis.yml in the root folder of the project Carfinder-app.

language: node_js
 node_js:
 - "stable"
 cache:
 directories:
   - node_modules
 script:
 - npm test
 - npm run build

This file contains all the instructions for Travis CI to test and build the project. I have to push this file to the repository (on the master branch). In a perfect gitflow, I should open a PR then go through with PR review and CI test status and then merge to develop. To deploy in production, you must create a release branch and then CD should deploy the build in your production environment. I’m skipping all of these because I’m a single person working to make CI/CD pipeline work.

Create an account on Travis CI

I am using Travis CI for deploying my project. Travis CI is a hosted continuous integration service (managed service) used to build and test software projects hosted at GitHub. Here is the site https://travis-ci.org, and you can sign in with GitHub. Then by clicking on the avatar, the list of all repositories on GitHub was shown. By clicking on the “Sync account” it would take a couple of seconds for sync with the GitHub account.

Generate the GitHub token and update the file .travis.yml

Now I needed to generate the GitHub token and in Travis CI and created an Environment Variable GITHUB_TOKEN and past the token in the Value field.

Now I go back to the file .travis.yml and add these lines at the end

deploy:
 provider: pages
 skip_cleanup: true
 github_token: $GITHUB_TOKEN
 local_dir: build
 on:
   branch: master

Update the file package.json

Then I added the homepage property to the package.json file

homepage: "https://nipa04.github.io/carfinder-app/",

Now pushed again the updated code on the master branch and open Travis CI dashboard. At first, the build was failed due to no test to build then I wrote a dummy test to make sure pipeline work. After that, the build passed. Here is the final travis.yml file look like:

language: node_js
node_js:
 - "stable"
cache:
 directories:
   - node_modules
script:
 - npm test
 - npm run build || true
deploy:
 provider: pages
 skip_cleanup: true
 github_token: $GITHUB_TOKEN
 local_dir: build
 on:
   branch: master

Building!
The bottom of the logs should see something like

Preparing deploy
Deploying application
Done. Your build exited with 0.

So Carfinder-app is now deployed and available at the URL specified before in the package.json as “homepage” and that is

https://nipa04.github.io/carfinder-app/

Car Finder App UI

Conclusion

It’s a simple but efficient CI/CD pipeline and can be empowered by adding custom configuration in the .travis.yml file.

Github Link for the project:

nipa04/carfinder-app