8366. Continuously Deploy Angular App to Heroku using Travis-CI
Heroku and Travis CI

Introduce how to continuously deploy Game Store Angular app to Heroku with Travis-CI.

1. Angular Project

1.1 Source Files

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

git clone https://github.com/jojozhuang/game-store-angular.git

1.2 Express Server

We will use express to serve our angular app in heroku. Check the posting Deploying Angular App to Heroku with Express Server to make the required changes to Angular app.

1.3 Travis Config File

Create a file named ‘.travis.yml’ in the root folder. Submit this file to GitHub as well.

language: node_js
node_js:
  - "9"
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: game-store-angular

2. Travis

Go to https://travis-ci.com/ to sign up with your GitHub account. After login, go to ‘Profile’. We see the ‘GitHub App Integration’ section, click ‘Activate’ button. Grant with GitHub authority, choose the repository you want to integrate, click ‘Approve & install’ button. After a while, your GitHub repository is integrated to Travis, click ‘Settings’. Keep the default settings for ‘General’ and ‘Auto Cancellation’. In the ‘Environment Variables’ section, paste your GitHub token in the field ‘Value’ and name it ‘GITHUB_TOKEN’, click ‘Add’ button.

3. Deployment

Make any change to your Angular 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. If the build is finished successfully, your site is deployed to GitHub page.

If you see below error, remove the cache settings in traivs.yml.

The command "eval npm ci  " failed 3 times.
The command "npm ci " failed and exited with 127 during .

4. Testing

Open web browser, access ‘https://game-store-angular.herokuapp.com/’. The Angular app is working now. It works properly, wee see the products.

8366. Continuously Deploy Angular App to Heroku using Travis-CIHeroku and Travis CI