9042. Online Judge - Continuously Deploy MEAN Stack App to Heroku and Netlify with Travis-CI
Heroku, Travis CI, and Netlify

Deploy online judge app built with Angular and Express to Heroku and Netlify with Travis-CI.

1. MEAN Stack Project

1.1 Source Files

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

git clone https://github.com/jojozhuang/online-judge-mean.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.

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

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

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

2. Server Deployment

2.1 Commands

In ‘package.json’, notice there is a command named ‘start’, which is used to launch the express server. Also, notice the ‘test’ command. It is empty as we don’t need any testing for this app. Do not specify ‘exit 1’ in the end of this command. Otherwise, the deployment will fail.

...
  "scripts": {
    "start": "NODE_ENV=production node ./server/server",
    ...
    "test": "echo \"Error: no test specified\"",
  }

2.2 Travis Config File

In the root folder of the project, create a file named ‘.travis.yml’. Notice the app name is ‘online-judge-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

deploy:
  provider: heroku
  skip_cleanup: true
  keep-history: true
  api-key:
    secure: $HEROKU_API_KEY
  app: online-judge-api

2.3 Heroku

Login to Heroku https://www.heroku.com/, go to Dashboard -> New -> Create new app. Set app name ‘online-judge-api’, click ‘Create app’ button. image Then, go to Settings, click ‘Reveal Config Vars’ button. Add new Key: MONGOLAB_URI and Value: Your MongoDB link. 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 ‘online-judge-mean’. 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 MEAN 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, the RESTful API service is deployed to Heroku. image

2.6 Testing Server

Go to Heroku, you should see the new app ‘online-judge-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://online-judge-api.herokuapp.com/api/submission/questions 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 Angular app and save the output to ‘dist’ folder.

...
  "scripts": {
    ...
    "build": "ng build --prod",
    ...
  }

3.2 Server URL

In ‘./src/environments/environment.prod.ts’, set the ‘apiUrl’ with the root url of the RESTful API, which is already deployed on Heroku.

export const environment = {
  production: true,
  http_timeout: 150, //unit: seconds, 0: no timeout
  apiUrl: "https://online-judge-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 ‘online-judge-mean’, 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 ‘online-judge’ and save. image Go back to overview, we see the new site name with the link. image

3.4 Testing Client

Access https://online-judge.netlify.com/, we see the homepage. image Click ‘Questions’ button, we see 5 questions are displayed. image Though chrome debug tool, we see this Angular app is calling the RESTful API hosted on Heroku to fetch data. image

4. References