Hosting an Angular application on GitHub Pages using Travis CI

Introduction

In this article, an application will be created using the latest version of Angular and hosted on the GitHub Pages static website service using the continuous integration tool Travis CI to deploy the application stored on the GitHub repository.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application.

• git: Git is a distributed version control system and it will be used to sync the repository.
• Node.js and npm: Node.js is a JavaScript code runtime software based on Google’s V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
• Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
• IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.

Getting started

Create and configure the account on the GitHub

GitHub is a source code and file storage service with version control using git tool. GitHub Pages is a static file hosting service using a public repository.

1. Let’s create the account. Access the site https://github.com/ and click on the button Sign up.

2. Fill in the fields Username, Email address, Password, click on the button Verify to solve the challenge and click on the button Create account.

3. Let’s generate the token that will be used in Travis CI. Click on the menu with the avatar and click on the menu Settings.

4. Click on the menu Developer settings.

5. Click on the menu Personal access tokens.

6. Click on the button Generate new token.

7. Fill in the field Note, select the option repo and click on the button Create token.

8. Copy the generated token and, in my case, the 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 token was generated because this token will be configured in Travis CI.

9. Let’s create the repository. Click on the menu with the avatar and click on the menu Your repositories.

10. Click on the button New.

11. Fill in the field Repository name and click on the button Create repository.

12. Ready! Account created, token generated and repository https://github.com/rodrigokamada/angular-travisci created.

Create and configure the account on the Travis CI

Travis CI is a deployment service integrated with GitHub.

1. Let’s create the account. Access the site https://travis-ci.com/ and click on the button Sign up.

2. Click on the button SIGN IN WITH GITHUB to sign in with GitHub account.

3. If Travis CI requests permission to list the GitHub repositories, accept the request. Click on the repository link angular-travisci.

4. Let’s set up the GitHub access token. Click on the menu More options and click on the menu Settings.

5. Fill in the fields NAME with the value GITHUB_TOKEN, VALUE with the value of your token generated on GitHub and click on the button Add.

6. Ready! Account created and repository configured.

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.

1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

2. Create the .travis.yml file.

3. Configure the .travis.yml file with the content below.

4. Change the package.json file and add the scripts below. Replace the rodrigokamada value with your GitHub username.

5. Change the src/app/app.component.spec.ts file and remove the tests should have as title 'angular-travisci' and should render title.

6. Run the test with the command below.

7. Run the application with the command below. Access the URL http://localhost:4200/ and check if the application is working.

8. Build the application with the command below.

9. Syncronize the application on the GitHub repository that was created.

10. Ready! After synchronizing the application on the GitHub repository, Travis CI build the application and synchronize on the branch gh-pages. Access the URL https://rodrigokamada.github.io/angular-travisci/ and check if the application is working. Replace the rodrigokamada value with your GitHub username.

The application repository is available at https://github.com/rodrigokamada/angular-travisci.

Conclusion

Summarizing what was covered in this article:

• We created an account on GitHub.
• We created an access token on GitHub.
• We created a repository on GitHub.
• We created an account on Travis CI.
• We configured the GitHub access token on Travis CI.
• We create an Angular application.

You can use this article to create your personal website and have an online portfolio.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter.