Introduction In this article, an application will be created using the latest version of and hosted on the static website service using the continuous integration tool to deploy the application stored on the repository. Angular GitHub Pages Travis CI GitHub Prerequisites Before you start, you need to install and configure the tools below to create the Angular application. : Git is a distributed version control system and it will be used to sync the repository. git : 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. Node.js and npm : Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application. Angular CLI IDE (e.g. or ): 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. Visual Studio Code WebStorm Getting started Create and configure the account on the GitHub is a source code and file storage service with version control using git tool. is a static file hosting service using a public repository. GitHub GitHub Pages Let's create the account. Access the site and click on the button . 1. https://github.com/ Sign up Fill in the fields , , , click on the button to solve the challenge and click on the button . 2. Username Email address Password Verify Create account Let's generate the token that will be used in Travis CI. Click on the menu with the avatar and click on the menu . 3. Settings Click on the menu . 4. Developer settings Click on the menu . 5. Personal access tokens Click on the button . 6. Generate new token Fill in the field , select the option and click on the button . 7. Note repo Create token Copy the generated token and, in my case, the token was generated because this token will be configured in Travis CI. 8. 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 Let's create the repository. Click on the menu with the avatar and click on the menu . 9. Your repositories Click on the button . 10. New Fill in the field and click on the button . 11. Repository name Create repository Ready! Account created, token generated and repository created. 12. https://github.com/rodrigokamada/angular-travisci Create and configure the account on the Travis CI is a deployment service integrated with GitHub. Travis CI Let's create the account. Access the site and click on the button . 1. https://travis-ci.com/ Sign up Click on the button to sign in with GitHub account. 2. SIGN IN WITH GITHUB If Travis CI requests permission to list the GitHub repositories, accept the request. Click on the repository link . 3. angular-travisci Let's set up the GitHub access token. Click on the menu and click on the menu . 4. More options Settings Fill in the fields with the value , with the value of your token generated on GitHub and click on the button . 5. NAME GITHUB_TOKEN VALUE Add Ready! Account created and repository configured. 6. Create the Angular application 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. Angular Let's create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ? 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. ng new angular-travisci Create the file. 2. .travis.yml touch .travis.yml Configure the file with the content below. 3. .travis.yml notifications: email: recipients: - rodrigo@kamada.com.br language: node_js node_js: - 18 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: main Change the file and add the scripts below. Replace the value with your GitHub username. 4. package.json rodrigokamada "build:prod" : "ng build --prod --base-href https://rodrigokamada.github.io/angular-travisci/" , "test:headless" : "ng test --watch=false --browsers=ChromeHeadless" Change the file and remove the tests and . 5. src/app/app.component.spec.ts should have as title 'angular-travisci' should render title Run the test with the command below. 6. > ng test --watch=false --browsers=ChromeHeadless

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015 Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015 ✔ Browser application bundle generation complete. npm run test:headless > angular-travisci@ 1.0 . 0 test:headless Compiling @angular/ common /testing : es2015 as esm2015 ⠸ Generating browser application bundles (phase: building)... 05 09 2021 19 : 40 : 04.329 :INFO [karma-server]: Karma v6. 3.4 server started at http://localhost: 9876 / 05 09 2021 19 : 40 : 04.331 :INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited 05 09 2021 19 : 40 : 04.369 :INFO [launcher]: Starting browser ChromeHeadless 05 09 2021 19 : 40 : 09.704 :INFO [Chrome Headless 92.0 . 4515.159 (Linux x86_64)]: Connected on socket NUtJhjavb1JvssqOAAAB with id 25989029 Chrome Headless 92.0 . 4515.159 (Linux x86_64): Executed 1 of 1 SUCCESS ( 0.068 secs / 0.042 secs) TOTAL: 1 SUCCESS Run the application with the command below. Access the URL and check if the application is working. 7. http://localhost:4200/ npm start > angular -travisci@ 1 . 0 . 0 start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names         |      Size vendor .js           | vendor        | 2 . 39 MB polyfills .js        | polyfills     | 128 . 51 kB main .js             | main          | 8 . 89 kB runtime .js          | runtime       | 6 . 63 kB styles .css          | styles        | 1 . 18 kB | Initial Total | 2 . 53 MB Build at: 2021 - 09 - 05 T 22 : 35 : 38 . 010 Z - Hash: a 4 cfc 9149589386 eca 5 b - Time: 39997 ms ** Angular Live Development Server is listening on localhost: 4200 , open your browser on http://localhost: 4200 / ** ✔ Compiled successfully. Build the application with the command below. 8. ✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |      Size npm run build:prod > angular -travisci @ 1.0 . 0 build:prod > ng build - -configuration production - -base -href https://rodrigokamada.github.io/angular -travisci / main.c678fa8750e7c769.js      | main          | 177.63 kB polyfills. 6 d7801353e02e327.js | polyfills     | 36.21 kB runtime.b136bda8a38c4f2e.js   | runtime       | 1.06 kB styles.ef46db3751d8e999.css   | styles        | 0 bytes | Initial Total | 214.90 kB Build at: 2021 -09 -05T22 : 42 : 19.525 Z - Hash: 83 bfffc079b083727ca4 - Time: 26030 ms Syncronize the application on the GitHub repository that was created. 9. Ready! After synchronizing the application on the GitHub repository, Travis CI build the application and synchronize on the branch . Access the URL and check if the application is working. Replace the value with your GitHub username. 10. gh-pages https://rodrigokamada.github.io/angular-travisci/ rodrigokamada 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 in portuguese. blog To stay updated whenever I post new articles, follow me on . Twitter

Google

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Hosting an Angular application on GitHub Pages using Travis CI

Too Long; Didn't Read

Companies Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Hosting an Angular application on GitHub Pages using Travis CI

Too Long; Didn't Read

Companies Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES