Automate React Build using Travis CI

November 17, 2017 0 Comments

Automate React Build using Travis CI



Travis CI is a hosted continuous integration platform that is free for all open source projects hosted on Github. For commercial use one needs to pay for the services.

We just a need a file called.travis.ymlcontaining information about our project along with other set of options that needs to be done, we can trigger automated builds with every change to our code base in the master branch, other branches or even a pull request.

We are using create-react-app,to create to bootstrap our application. It focus on building applications, rather than configuring them which is really helpful for developers. You can kick your application using following commands.

$ create-react-app angel-fire
$ cd angel-fire
$ npm run

Once you’ve kicked off a new application, npm run build will optimize, compile, and dump the static files required to serve your application in abuild directory.

Note: In this article we are not going to learn about how to deploy create react app into s3. You can find those in my previous article “Deploy create-react-app to S3 and CloudFront within a single Command”.
  • Say goodbye to long and tense integrations
  • Increase visibility enabling greater communication
  • Catch issues early and nip them in the bud
  • Spend less time debugging and more time adding features
  • Build a solid foundation
  • Stop waiting to find out if your code’s going to work
  • Reduce integration problems allowing you to deliver software more rapidly

In this tutorial we are assuming you have link your github repo with travis. The very first step in integrating Travis CI is to create a file called.travis.ymlwhich will contain the essential information about the environment and configurations for the build to run. For simplicity, we will just include the programming environment and the version. In our simple project, it is NodeJS version 8.0 which has LTS recently provided by NodeJS The final contents of the file .travis.yml will be as follows:

sudo: required
dist: trusty
language: nodejs
# LTS version
- "8.0"
onsuccess: change # only if status change from fail to success
failure: always # if there is a fail
- nodemodules
- npm install
- export CI=false
skip_cleanup: true
provider: script
script: npm run publish:webapp
branch: ["master"]
Note: Since the default behavior of CI tools sets the warnings as an error, make sure to export CI=false prior running your script and also add your branches where you want to deploy. In my case its master.

The npm run publish:webapp runs the script which is defined in script section of our package.json file.


"scripts": {
“publish:webapp”: “npm run buid && node tools/s3-upload.js”

What it basically does is it first builds the production version and upload it to s3. Now its ready make a commit and push it to your master branch.

This is simple approach to deploy your code to s3 using Travis CI. There are lots of options we can setup in Travis which are not discussed here. Depending upon the application frameworks we can integrate the CI tools. I found this more easy and straightforward way. love to hear how you deploy your application.

Tag cloud