Publish your Angular app to Github Pages using Travis CI

Farhang Darzi — Sat, 28 Sep 2019 10:33:14 +0000

It is a good idea to deploy your Angular application with latest changes on github pages automatically. Travis CI is an appropriate tool to do that.

OK, let’s start ☺

Prerequisites
Node.js ≥ 10
Angular CLI

To get strarted, simply create an Angular project on your local computer using commands below:

ng new angular-github-pages-travis // no diffrences between having routing or not
cd angular-github-pages-travis

Then, create a repository on Github:

Add the remote repositoy to your local computer and push the changes using following commands:

git remote add origin git@github.com:YOUR_USER_NAME/YOUR_REPOSITORY_NAME.git
git push -u origin master

Signup to Travis CI and turn on your repository to be synced with it.

Switch to setting of your active repository in Travis CI panel.

Turn on the repository to start being synced with Travis.

Create an enviroment variable named “GITHUB_TOKEN” then paste your github token value.

Now go back to the local project and create “.travis.yml” file in the project root. Then copy the code below and paste it to the file:

Click on the link below to find out more information about the travis CI commands: https://docs.travis-ci.com/user/apps/

Now in your local repository Add "--prod" flag to package.json file.

After that, add baseHref to angular.json.

"baseHref": "https://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/",

Commit and push your changes.

If you get succeeded, just visit the github pages of your github project, you can follow the build status in Travis CI using the following url :
https://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/

Congratulations 👍

Please leave a comment If you have any question or issue.

DEV Community: Farhang Darzi