GitHub Pages is a service from GitHub that allows you to host a website related to your individual projects or your user account itself. This post is going to explain how to use the former one to deploy an Angular application build with the Angular CLI (@angular/cli). First from you local machine and then from Travis CI.
Preconditions
Create an initialised repository on GitHub for your application and clone it to a directory of your choice.
git clone https://github.com/<user-name>/<repository-name>.git
The Angular app
I’m going to scaffold a new application with the Angular CLI to use for this post. If you already have a running app, skip to the next section.
Make sure you have the latest Angular CLI available.
npm install @angular/cli -g
Next up, in the cloned repository, create a new Angular project with the CLI. You can safely let the CLI overwrite the initialized README.
ng new gh-pages-demo --directory .
Now we have a simple application good enough for the demo purposes of this post. Check that every thing works by serving the app.
npm start
If you see the "app works!" heading when browsing the http://localhost:4200, we are good to go.
Prepare the application for deployment
The Angular CLI added scripts to build and run the application in the scripts section of package.json. Let’s add one more, making a production build ready for deployment.
A note on the base-href option: We need to set the base-href option to properly route our resources when deployed. The application will be hosted on the URL https://<user-name>.github.io/<repository-name>/ . The Angular application is build by expecting to be hosted on https://<user-name>.github.io/. To properly map all requests for https://<user>.github.io/main.js to https://<user-name>.github.io/<repository-name>/main.js the CLI uses the HTML <base> tag.
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build.prod": "ng build --aot --prod --progress false --base-href \"https://.github.io//\""
},
} This new script build.prod will build the application with the AOT compiler and uglify etc. before creating a dist folder with the result, ready to deploy.
Let’s make it automatically deployed.
Continuous deployment
We can easily set up Travis CI to run the above line of code and every time you commit to your master branch, the application gets deployed.
Head over to Travis CI and log in with your GitHub account. Then add your repository. To let Travis commit to the repository, it needs an access token. Head in to the settings section and add an environment variable named GITHUB_TOKEN and add a token from your GitHub page. See more details on how to do this on GitHub help pages or in the Travis docs.
Add a .travis.yml file to the root of your repository.
language: node_js
node_js:
- "6"
branches:
only:
- master
cache:
directories:
- node_modules
script:
- npm run build.prod
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
local_dir: dist
on:
branch: masterThat’s all there is to it. The file describes that we want to have Node.js 6 available. It should only build on commits to the master branch, it should cache the node_modules folder between builds and lastly, it should deploy to GitHub pages.
Commit your changes and watch the Travis build log for details. When completed, you should head over to https://<user-name>.github.io/<repository-name> and see the deployed application running.
Try an automatic deployment
Let’s make a change to the app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Automatically deployed app works!';
}Commit the changes and push it to your master branch.
If you watch your repository on Travis CI you should see a build be scheduled and run. When it is completed, your GitHub page is updated with the latests changes and you should see the updated heading. Be patient. It can take a minute or two after build has finished before the changes are reflected on the URL.
That’s it for this post. We have created an Angular app, connected it to a GitHub repository and deployed it to GitHub Pages, first locally and then automatically with Travis CI. You can see all the code for this demo at https://github.com/Crevil/gh-pages-demo and the deployed application at https://crevil.github.io/gh-pages-demo/.