Deploying Multiple Environments with Create React App and Travis CI

Austin Wilshire
Dec 23, 2017 · 3 min read
Simple Build Diagram

Over the last few months I have been working on a project at Max Kelsen, and during the start of this project I noticed that our build process was a little inefficient. We were using the Create React App boilerplate, and our process for deploying was to run npm build on someone’s local machine, and then upload it to S3. This was a terrible process to have because it could lead to inconsistencies in builds, and it was a very manual process. This was something that could and should be automated!

I started to set up CI/CD pipelines to build and deploy our React frontend. This is something I’ve used Travis CI for in the past on side projects, and it’s also the build tool that was used at A Cloud Guru while I worked there. Setting up Travis to build and deploy to S3 was a fairly simple to do, their documentation is fantastic. However, I also wanted to start setting up a staging environment for this project, which is where things got a little tricky.

Our API at the time was split among 5 API Gateway (APIGW) endpoints (this was still fairly early stages of development, they’re now combined using serverless-domain-manager). This meant we had to swap out our staging endpoints with our prod endpoints when we deployed from master or dev.

At first, I tried using normal Travis CI environment variables, but found out I could not conditionally set them depending on the branch I was using without a shell script. The base for such is script is the following:

if [[ $TRAVIS_BRANCH == ‘staging’ ]]; then
# Staging env variables
elif [[ $TRAVIS_BRANCH == 'master' ]]; then
# Prod env variables
exit 0

I at first thought that I could use the following snippet and it would work:

if [[ $TRAVIS_BRANCH == ‘staging’ ]]; then

And my React App would be built with the exported environment variable. Interestingly, this did not work and the app was being bundled with none of the exported environment variables.

I dug around Create React App’s code base and found this snippet. When you run npm build in a Create React App, it will automatically set process.env.NODE_ENV=”production” which then tries to find a dotenv file to load into the build. This article authored by Drew Goodwin does a very good job of explaining how environment variables work with Create React App.

So, now that I knew I needed a dotenv file, I created the following script.

I’ll admit, this feels like a slightly hacky solution, but it works! The builds would now successfully deploy to staging and prod with the correct endpoints. The Travis CI script looks like this:

I hope this post helps other people looking to deploy to multiple environments using Create React App! If you know of a better way to do this, please let me know either on here or @awoldes on Twitter!

Austin Wilshire

Written by

Australian student, systems engineer interested in distributed computing, SRE and finance

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade