Deploying your Angular app to GitHub Pages using Travis-CI

Automation makes our lives easier and keep us out of common problems.

Photo on Foter.com

I’m lazy AF and I take everything that makes my life easy and smooth, Software development is not different to me. I avoid doing the following tasks manually:

• Building the app
• Create the artifact when the build is done
• Publish to the target environment
• Wait for deployment

I love automation, so once I push my changes I want to see them deployed automatically.

We are going to talk about it in this post, so we are going to start simple, let’s create a new Angular project with the Angular CLI (I’m using Angular v6).

Create a new repository on GitHub and push it to GitHub.
Now we are ready to set up our pipeline to automate the deploying process of our app, let’s start adding our awesome project to Travis-CI.

1. In the root of the project create a new file named .travis.yml
2. Populate this file with the gist below

but, what does it mean? what is happening there?

Don’t worry, this is just the configuration of:

• The language and runtime we want to use (Node/JavaScript)
• The branch(es) we want to build
• Some folders we want in the cache to make the process faster and
• The way to install-test-build our project.

I’m going to focus in two steps scripts and deploy.

Scripts:

• yarn lint will check the syntax of the code, if fails the build and deploy will be skipped.
• yarn build --base-href will build our application, same as lint, if fails deploy will be skipped.
• mv dist/my-awesome-project/index.html dist/my-awesome-project/404.html will create a 404.html file needed in Github pages when your app use the Angular Router.

Spoiler Alert: if any of the scripts above fail, the whole process will fail.

Deploy:

Deploying to GitHub Pages uses git push --force to overwrite the history on the target branch, so make sure you only deploy to a branch used for that specific purpose, such as gh-pages. It is possible to disable this “force push” behavior by setting keep-history option to true.

from Travis-CI Docs

1. provider: Tells Travis-CI where you want to deploy your project.
2. skip_cleanup: true: Prevents the reset of the current working directory and the deletion of all changes made during the build.
3. github_token: This token in generated in your GitHub repo to perform Git operation via API. Click here to create your own token. (we are going to talk about this later but please copy the token in a safety place where you can grab it later).
4. local_dir: The physical path where the output artifact was built. (Is important to note that path may change to dist/ if you are using Angular version < 6).
5. on: branch:Specify what branch(es) you want to deploy. Any branch outside this config will build but not will be deployed.

We’ve set everything in the code to automate our building/deploying process, now is time to tell Travis-CI how things will work. Sign up in Travis-CI with your GitHub account and select my-awesome-project in the list of repos, then click in the settings button.

Turn on Build only if .travis.yml is preset (if you want to build any new push for any branch set up your General config like the one below).

Travis-CI by default build only the last commit and cancel the older ones, unless there is a build running, it will be queued in the waiting list. I like to have an history of builds so I disable these options, doing this each new commit will be queued and will run its own build. You can configure this in the section ‘Auto Cancellation’.

that’s the configuration that i chose

We’ve reached the most important step in all of this automated process configuration, the way Travis-CI is allowed to push to our repo, and the answer is with the github token that we talked about earlier, in the “Environment Variables” section paste your token in the field ‘Value’ and name it ‘GITHUB_TOKEN’.

With all this set our pipeline is completed, now it’s time to see how magic happens, so let’s do it!!

• In command line create a new branch git checkout -b my-awesome-branch master
• In app.component.ts change title = 'app' by title = 'my awesome project'
• Commit this change git add . git commit -m "change app title”
• Push it git push -u origin my-awesome-branch
• Create a new Pull Request to Master and you will see how everything starts to work

Our branch start building, yay!

But we are halfway to our goal, deploy it to GitHub Pages.

You might notice the deploy was skipped, that’s because we told Travis-CI only deploy master branch, but all build process was successful.

Now is time to merge my-awesome-branch to master . The pipeline start over

Master branch starts building and when is finish the application is deployed, a new branch named gh-pages is automatically created, Travis-CI takes care to obtain the built artifact and push it to this branch.

The only thing remain is use GitHub Pages to serve our site, go to your repo Settings > GitHub Pages section and select gh-pages branch.

Our site is alive!!!!! From now on we’ll only take care of making our app more and more awesome!!

**Update Dharmen Shah suggest to add a 404.html file to avoid the 404 error page not found when the Angular app has routing.