Using Travis CI to host an Angular App on GitHub Pages | Hacker Noon

@rodrigokamadaRodrigo Kamada

Software developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.

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

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.

Travis CI is a deployment service integrated with GitHub.

Prerequisites

Before you start, you need to install and configure the tools:

Getting started

Create and configure the account on the GitHub

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

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

1. Let’s create the application with the Angular base structure using the 

@angular/cli

 with the route file and the SCSS style format.

ng new angular-travisci
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-travisci/README.md (1061 bytes)
CREATE angular-travisci/.editorconfig (274 bytes)
CREATE angular-travisci/.gitignore (604 bytes)
CREATE angular-travisci/angular.json (3267 bytes)
CREATE angular-travisci/package.json (1078 bytes)
CREATE angular-travisci/tsconfig.json (783 bytes)
CREATE angular-travisci/.browserslistrc (703 bytes)
CREATE angular-travisci/karma.conf.js (1433 bytes)
CREATE angular-travisci/tsconfig.app.json (287 bytes)
CREATE angular-travisci/tsconfig.spec.json (333 bytes)
CREATE angular-travisci/src/favicon.ico (948 bytes)
CREATE angular-travisci/src/index.html (301 bytes)
CREATE angular-travisci/src/main.ts (372 bytes)
CREATE angular-travisci/src/polyfills.ts (2820 bytes)
CREATE angular-travisci/src/styles.scss (80 bytes)
CREATE angular-travisci/src/test.ts (743 bytes)
CREATE angular-travisci/src/assets/.gitkeep (0 bytes)
CREATE angular-travisci/src/environments/environment.prod.ts (51 bytes)
CREATE angular-travisci/src/environments/environment.ts (658 bytes)
CREATE angular-travisci/src/app/app-routing.module.ts (245 bytes)
CREATE angular-travisci/src/app/app.module.ts (393 bytes)
CREATE angular-travisci/src/app/app.component.scss (0 bytes)
CREATE angular-travisci/src/app/app.component.html (23809 bytes)
CREATE angular-travisci/src/app/app.component.spec.ts (1087 bytes)
CREATE angular-travisci/src/app/app.component.ts (221 bytes)
✔ Packages installed successfully.

2. Create the

.travis.yml

file.

touch .travis.yml

3. Configure the

.travis.yml

file with the content below.

notifications:
  email:
    recipients:
      - [email protected]

language: node_js

node_js:
  - 14

before_script:
  - npm install

script:
  - npm run test:headless

before_deploy:
  - npm run build:prod

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist/angular-travisci
  on:
    branch: master

4. Change the

package.json

file and add the scripts below. Replace the

rodrigokamada

value with your GitHub username.

  "build:prod": "ng build --prod --base-href https://rodrigokamada.github.io/angular-travisci/",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless"

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.

npm run test:headless

> [email protected] test:headless
> ng test --watch=false --browsers=ChromeHeadless

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
⠹ Generating browser application bundles (phase: building)...06 06 2021 21:22:49.870:INFO [karma-server]: Karma v6.3.3 server started at http://localhost:9876/
06 06 2021 21:22:49.872:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
06 06 2021 21:22:49.875:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
06 06 2021 21:22:54.562:INFO [Chrome Headless 91.0.4472.77 (Linux x86_64)]: Connected on socket SvdczBWd9ENbliBLAAAB with id 49624818
Chrome Headless 91.0.4472.77 (Linux x86_64): Executed 1 of 1 SUCCESS (0.059 secs / 0.036 secs)
TOTAL: 1 SUCCESS

7. Run the application with the command below. Access the URL

http://localhost:4200/

and check if the application is working.

npm start

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.38 MB
polyfills.js        | polyfills     | 128.56 kB
main.js             | main          |   8.93 kB
runtime.js          | runtime       |   6.59 kB
styles.css          | styles        | 118 bytes

                    | Initial Total |   2.52 MB

Build at: 2021-06-07T00:23:57.046Z - Hash: 0ddc925fb2029ab1452c - Time: 8963ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

8. Build the application with the command below.

npm run build:prod

> [email protected] build:prod
> ng build --prod --base-href https://rodrigokamada.github.io/angular-travisci/

Option "--prod" is deprecated: No need to use this option as this builder defaults to configuration "production".
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.8e694e7aafc3a1a42dae.js      | main          | 183.39 kB
polyfills.ced499a8795c0b89925d.js | polyfills     |  35.96 kB
runtime.0fbd4bc4e284e2219405.js   | runtime       |   1.01 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 220.36 kB

Build at: 2021-06-07T00:32:55.680Z - Hash: 53d59484d4126ac206fa - Time: 27491ms

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.

This post was made on my blog in portuguese.

by Rodrigo Kamada @rodrigokamada. Software developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Read my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.

read original article here