Publish your Angular app to Github Pages using Travis CI
Tags: angular, github, travis, javascript
Published: 2019-09-28 10:33:14

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 ☺

<b>Prerequisites</b>
Node.js ≥ 10
Angular CLI

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

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

<hr>

Then, create a repository on Github:


<img src="https://thepracticaldev.s3.amazonaws.com/i/lhev4w76ww1y1oej34fc.png" title="Create a repo on Github" />

<hr>

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

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

<img src="https://thepracticaldev.s3.amazonaws.com/i/b9a3rf40tzntsq0xvri7.png" />

<hr>

Signup to <a href="https://travis-ci.org" title="Travis CI">Travis CI</a> and turn on your repository to be synced with it.

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

<img src="https://thepracticaldev.s3.amazonaws.com/i/r5b1cvi1ljw25tfq7xha.png" title="Travis CI - setting page" />

<hr>

Turn on the repository to start being synced with Travis.

<img title="Travis CI - Turn on the repository" src="https://thepracticaldev.s3.amazonaws.com/i/pkk3zja161lr4yi4vng1.png" />

<hr>

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

<img src="https://thepracticaldev.s3.amazonaws.com/i/uittgfbe22jajncsonbe.png" title="Travis CI - Create an enviroment variable" />

If your don’t have Github token you can create one using this link:
<a href="https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line" title="Getting Github token">https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line</a>

<hr>


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:

{% gist https://gist.github.com/farhang/498f8f8c1ea0ddaae08fb238df12d3e6 file=angular-github-pages-travis.yml %}

<q>Click on the link below to find out more information about the travis CI commands: <a href="https://docs.travis-ci.com/user/apps/">https://docs.travis-ci.com/user/apps/</a></q>

<hr>

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

<img src="https://thepracticaldev.s3.amazonaws.com/i/b2rbjyj8wpypxmctljyl.png" title="Add --prod flag to package.json" />

<hr>

After that, add baseHref to angular.json.

<pre>"baseHref": "https://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/",</pre>

<img src="https://thepracticaldev.s3.amazonaws.com/i/d5wm7qkyo84n0sm39crk.png" title="Adding baseHref to angular.json" />

Commit and push your changes.

<hr>

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 :
<a href="https://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/">https://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/</a>


Congratulations 👍

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

<a href="https://github.com/farhang/angular-github-pages-travis"> Github (sample code) </a>