8485. Continuously Deploy Full Stack React App to Heroku and Netlify with Travis-CI
Heroku, Travis CI, and Netlify

Introduce how to deploy Code Editor app to Heroku and Netlify with Travis-CI.

1. Full Stack Project

1.1 Source Files

Download the source files for this full stack app. Create your own repository on GitHub and submit this project.

git clone https://github.com/jojozhuang/code-editor-react.git

1.2 Deployment Target

Use Travis-CI to continuously deploy the full stack app from GitHub to cloud service Heroku and Netlify. There are two parts of this app.

  • ’./src/server’, backend, built with Node.js + Express
  • ’./src/client’, frontend, built with React

Our target is to use the same GitHub repository to deploy both the client and server.

  • Deploy backend RESTful API to Heroku.
  • Deploy frontend React App to Netlify.

2. Server Deployment

2.1 Start Command

In ‘package.json’, notice there is a command named ‘start’, which is used to launch the express server.

...
  "scripts": {
    "start": "node src/server/index.js",
    ...
  }

2.2 Travis Config File

In the root folder of the project, create a file named ‘.travis.yml’. Notice the app name is ‘code-editor-api’. Submit this file to GitHub. It will be used for deploying the RESTful API(server).

language: node_js
node_js:
  - "8"
sudo: false

branches:
  only:
  - master

cache:
  directories:
    - node_modules

install:
  - npm install

deploy:
  provider: heroku
  skip_cleanup: true
  keep-history: true
  api-key:
    secure: $HEROKU_API_KEY
  app: code-editor-api

2.3 Heroku

Login to Heroku https://www.heroku.com/, go to Dashboard -> New -> Create new app. Set app name ‘code-editor-api’, click ‘Create app’ button. image In addition, go to ‘Account settings’, copy the ‘API Key’. We will use it to setup continuous integration on Travis. image

2.4 Travis

Login to https://travis-ci.com/, then go to ‘Profile’, click ‘Manage repositories on GitHub’ and add ‘code-editor-react’. image Click the ‘Settings’ of the new repository. Keep the default settings for ‘General’ and ‘Auto Cancellation’. image In the ‘Environment Variables’ section, paste your Heroku API Key in the field ‘Value’ and name it ‘HEROKU_API_KEY’, click ‘Add’ button. image

2.5 Push

Make any change to this app and submit it to Github. Once Travis notice the new submission, it starts to build the app according to the instructions configured in ‘.travis.yml’ file. image If the build is finished successfully, your site is deployed to Heroku. image

2.6 Testing Server

Go to Heroku, you should see the new app ‘code-editor-api’ in the dashboard. image Click on it, and switch to ‘Setting’ tab. You should find the link, it is the root url of the RESTful API. image Access https://code-editor-api.herokuapp.com/api/file/java in browser, we see it returns data. image

3. Client Deployment

3.1 Build Command

In ‘package.json’, notice there is a command named ‘build’, which is used to compile the React app and save the output to ‘dist’ folder.

...
  "scripts": {
    ...
    "build": "webpack --env production ",
    ...
  }

3.2 Server URL

In ‘webpack.config.js’, notice the configuration for production. We set the root url of the RESTful API, which is already deployed on Heroku.

const productionConfig = merge([
  parts.loadEnv('https://code-editor-api.herokuapp.com'),
  ...
]);

3.3 Netlify

Login to Netlify https://www.netlify.com/ with GitHub account, click ‘New site from Git’. image Choose ‘Github’, next. image Authorize Netlify to access your GitHub account, then choose the repository ‘code-editor-react’, next. image Choose master for the Branch to deploy, set npm run build to the Build command, and set dist to the Publish directory, click the ‘Deploy site’ button. image Netlify will start to deploy your site. image If no issue occurs, the publish will be done after few seconds(or minutes). Notice the site is given with a random name. image Switch to Settings tab, scroll down and click the ‘Change site name’ button. image Change the name to ‘code-editor-react’ and save. image Go back to overview, we see the new site name with the link. image

3.4 Testing Client

Access https://code-editor-react.netlify.com/, we see the homepage. image Click ‘Code Editor’ button, select javascript and click Run. It works properly. image Though chrome debug tool, we see this React app is calling the RESTful API hosted on Heroku to fetch data. image

4. References