# Introduction

\
[Angular](https://angular.io/) 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.

\
[GitHub](https://github.com/) is a source code and file storage service with version control using git tool. [GitHub Pages](https://pages.github.com/) is a static file hosting service using a public repository. [GitHub Actions](https://github.com/actions) is a service to automate the software workflow.

\
# Prerequisites

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

\
* [git](https://git-scm.com/)
* [Node.js and npm](https://nodejs.org/)
* [Angular CLI](https://angular.io/cli)
* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/))

# Getting Started

\
## Create and Configure the Account on GitHub

\
**1.** Let's create the account. Access the site <https://github.com/> and click on the button *Sign up*.

\
 ![GitHub - Initial page](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-uj226ay.png)

**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*.

\
 ![GitHub - Sign up](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-yv32664.png)

**3.** Let's create the repository. Click on the menu with the avatar and click on the menu *Your repositories*.

\
 ![GitHub - Menu your repositories](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-ww426px.png)

**4.** Click on the button *New*.

\
 ![GitHub - New repository](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-6k526mh.png)

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

\
 ![GitHub - Create repository](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-h9626sf.png)

**6.** Ready! Account created and repository <https://github.com/rodrigokamada/angular-github-actions> created.

\
 ![GitHub - Repository created](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-29726ai.png)

## 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.

\
```powershell
ng new angular-github-actions
? 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-github-actions/README.md (1066 bytes)
CREATE angular-github-actions/.editorconfig (274 bytes)
CREATE angular-github-actions/.gitignore (604 bytes)
CREATE angular-github-actions/angular.json (3303 bytes)
CREATE angular-github-actions/package.json (1084 bytes)
CREATE angular-github-actions/tsconfig.json (783 bytes)
CREATE angular-github-actions/.browserslistrc (703 bytes)
CREATE angular-github-actions/karma.conf.js (1439 bytes)
CREATE angular-github-actions/tsconfig.app.json (287 bytes)
CREATE angular-github-actions/tsconfig.spec.json (333 bytes)
CREATE angular-github-actions/src/favicon.ico (948 bytes)
CREATE angular-github-actions/src/index.html (306 bytes)
CREATE angular-github-actions/src/main.ts (372 bytes)
CREATE angular-github-actions/src/polyfills.ts (2820 bytes)
CREATE angular-github-actions/src/styles.scss (80 bytes)
CREATE angular-github-actions/src/test.ts (788 bytes)
CREATE angular-github-actions/src/assets/.gitkeep (0 bytes)
CREATE angular-github-actions/src/environments/environment.prod.ts (51 bytes)
CREATE angular-github-actions/src/environments/environment.ts (658 bytes)
CREATE angular-github-actions/src/app/app-routing.module.ts (245 bytes)
CREATE angular-github-actions/src/app/app.module.ts (393 bytes)
CREATE angular-github-actions/src/app/app.component.scss (0 bytes)
CREATE angular-github-actions/src/app/app.component.html (24617 bytes)
CREATE angular-github-actions/src/app/app.component.spec.ts (1121 bytes)
CREATE angular-github-actions/src/app/app.component.ts (227 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
```

\
**2.** Change the `package.json` file and add the scripts below. Replace the `rodrigokamada` value with your GitHub username.

\
```json
  "build:prod": "ng build --configuration production --base-href https://rodrigokamada.github.io/angular-github-actions/",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless"
```

\
**3.** Run the test with the command below.

\
```powershell
npm run test:headless

> angular-github-actions@1.0.0 test:headless
> ng test --watch=false --browsers=ChromeHeadless

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : 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
⠙ Generating browser application bundles (phase: building)...22 09 2021 20:48:47.533:INFO [karma-server]: Karma v6.3.4 server started at http://localhost:9876/
22 09 2021 20:48:47.537:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
22 09 2021 20:48:47.541:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
22 09 2021 20:48:52.326:INFO [Chrome Headless 94.0.4606.54 (Linux x86_64)]: Connected on socket YUmqYxp8kqXTSV63AAAB with id 18515803
Chrome Headless 94.0.4606.54 (Linux x86_64): Executed 3 of 3 SUCCESS (0.185 secs / 0.162 secs)
TOTAL: 3 SUCCESS
```

\
**4.** Run the application with the command below. Access the URL `http://localhost:4200/` and check if the application is working.

\
```powershell
npm start

> angular-github-actions@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.41 MB
polyfills.js        | polyfills     | 128.53 kB
main.js             | main          |  56.84 kB
runtime.js          | runtime       |   6.64 kB
styles.css          | styles        |   1.18 kB

                    | Initial Total |   2.60 MB

Build at: 2021-09-22T23:51:24.809Z - Hash: 491013c58e91631f6f14 - Time: 10491ms

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


✔ Compiled successfully.
```

\
**5.** Build the application with the command below.

\
```powershell
npm run build:prod

> angular-github-actions@1.0.0 build:prod
> ng build --configuration production --base-href https://rodrigokamada.github.io/angular-github-actions/

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.4323acf2b7af06c6f196.js      | main          | 215.10 kB
polyfills.846632910956cf45bd88.js | polyfills     |  36.22 kB
runtime.05bbc8c46ec59fd850d7.js   | runtime       |   1.05 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 252.37 kB

Build at: 2021-09-23T01:22:35.870Z - Hash: 3a09fd924c26cb02fafc - Time: 13654ms
```

\
**6.** Let's create and configure the file with the GitHub Actions flow. Create the `.github/workflows/gh-pages.yml` file.

\
```powershell
mkdir -p .github/workflows
touch .github/workflows/gh-pages.yml
```

\
**7.** Configure the `.github/workflows/gh-pages.yml` file with the content below.

\
```yaml
name: GitHub Pages

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm run test:headless

    - name: Build
      run: npm run build:prod

    - name: Deploy
      if: success()
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: dist/angular-github-actions
        enable_jekyll: true
```

\
Note:

* The documentation for the configuration file is available at <https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions>.

  \

**8.** Synchronize the application on the GitHub repository that was created.

\
 ![GitHub - Repository](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-u2826v4.png)

**9.** Ready! After synchronizing the application on the GitHub repository, the GitHub Actions build the application and synchronize on the branch `gh-pages`. Access the URL <https://rodrigokamada.github.io/angular-github-actions/> and check if the application is working. Replace the `rodrigokamada` value with your GitHub username.

\
## Validate the Run of the GitHub Actions Flow

\
**1.** Let's validate the run of the GitHub Actions flow. Access the repository <https://github.com/rodrigokamada/angular-github-actions> created and click on the link *Actions*.

\
 ![GitHub Actions - Repository](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-c2926pi.png)

**2.** Click on the flow run.

\
 ![GitHub Actions - Workflows](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-uya269g.png)

**3.** Click on the job *deploy*.

\
 ![GitHub Actions - Jobs](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-jub2643.png)

**4.** Click on each step to validate the run.

\
 ![GitHub Actions - Steps](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-fzc26qr.png)

**5.** Ready! We validate the run of the GitHub Actions flow.

\
## Validate the Publishing of the GitHub Pages

\
**1.** Let's validate the publish of the GitHub Pages. Access the repository <https://github.com/rodrigokamada/angular-github-actions> created and click on the link *Settings*.

\
 ![GitHub Pages - Repository](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-d5025bk.png)

**2.** Click on the menu *Pages*.

\
 ![GitHub Pages - Settings](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-v9125p8.png)

**3.** The message *Your site is published at <https://rodrigokamada.github.io/angular-github-actions/>* should be displayed.

\
 ![GitHub Pages - Pages](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-gf225er.png)

**4.** Ready! We validated the publishing of the GitHub Pages.

\

---

*The application repository is available at <https://github.com/rodrigokamada/angular-github-actions>.*

\
*This tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/hospedando-uma-aplicacao-angular-no-github-pages-usando-o-github-actions) in Portuguese.*

Flow

Google

Initialized

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

Hosting an Angular application on GitHub Pages using GitHub Actions

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@rodrigokamada

RELATED STORIES