{"id":16687403,"url":"https://github.com/rodrigokamada/angular-github-actions","last_synced_at":"2025-03-21T18:33:23.348Z","repository":{"id":39656284,"uuid":"409293332","full_name":"rodrigokamada/angular-github-actions","owner":"rodrigokamada","description":"Application example built with Angular 14 and hosted on GitHub Pages using GitHub Actions.","archived":false,"fork":false,"pushed_at":"2023-04-03T07:24:47.000Z","size":3501,"stargazers_count":29,"open_issues_count":2,"forks_count":36,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T03:51:30.558Z","etag":null,"topics":["angular","beginners","cicd","continuous-deployment","deployment","dev-community","gh-actions","gh-pages","github","hacktoberfest","tutorial"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-github-actions/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigokamada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"rodrigokamada"}},"created_at":"2021-09-22T17:18:05.000Z","updated_at":"2024-12-11T17:17:01.000Z","dependencies_parsed_at":"2024-10-28T11:29:39.475Z","dependency_job_id":"9869d0f3-cf90-4f3f-85c6-470d1f30dd65","html_url":"https://github.com/rodrigokamada/angular-github-actions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-github-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-github-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-github-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-github-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-github-actions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244849533,"owners_count":20520731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","beginners","cicd","continuous-deployment","deployment","dev-community","gh-actions","gh-pages","github","hacktoberfest","tutorial"],"created_at":"2024-10-12T15:09:03.046Z","updated_at":"2025-03-21T18:33:22.976Z","avatar_url":"https://github.com/rodrigokamada.png","language":"HTML","readme":"# Angular Github Actions\n\n\nApplication example built with [Angular](https://angular.io/) 15 and hosted on [GitHub Pages](https://pages.github.com/) using [GitHub Actions](https://github.com/actions).\n\nThis 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 and on the [DEV Community](https://dev.to/rodrigokamada/hosting-an-angular-application-on-github-pages-using-github-actions-5ag8) in english.\n\n\n\n[![Website](https://shields.braskam.com/v1/shields?name=website\u0026format=rectangle\u0026size=small\u0026radius=5)](https://rodrigo.kamada.com.br)\n[![LinkedIn](https://shields.braskam.com/v1/shields?name=linkedin\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.linkedin.com/in/rodrigokamada)\n[![Twitter](https://shields.braskam.com/v1/shields?name=twitter\u0026format=rectangle\u0026size=small\u0026radius=5\u0026socialAccount=rodrigokamada)](https://twitter.com/rodrigokamada)\n[![Instagram](https://shields.braskam.com/v1/shields?name=instagram\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.instagram.com/rodrigokamada)\n\n\n\n## Prerequisites\n\n\nBefore you start, you need to install and configure the tools:\n\n* [git](https://git-scm.com/)\n* [Node.js and npm](https://nodejs.org/)\n* [Angular CLI](https://angular.io/cli)\n* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/))\n\n\n\n## Getting started\n\n\n### Create and configure the account on the GitHub\n\n\n**1.** Let's create the account. Access the site [https://github.com/](https://github.com/) and click on the button *Sign up*.\n\n![GitHub - Home page](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776745/Blog/angular-github-actions/github-step1.png)\n\n**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*.\n\n![GitHub - Sign up](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776745/Blog/angular-github-actions/github-step2.png)\n\n**3.** Let's create the repository. Click on the menu with the avatar and click on the menu *Your repositories*.\n\n![GitHub - Menu Your repositories](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776745/Blog/angular-github-actions/github-step3.png)\n\n**4.** Click on the button *New*.\n\n![GitHub - New repository](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776745/Blog/angular-github-actions/github-step4.png)\n\n**5.** Fill in the field *Repository name* and click on the button *Create repository*.\n\n![GitHub - Create repository](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776746/Blog/angular-github-actions/github-step5.png)\n\n**6.** Ready! Account created and repository [`https://github.com/rodrigokamada/angular-github-actions`](https://github.com/rodrigokamada/angular-github-actions) created.\n\n![GitHub - Repository created](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776746/Blog/angular-github-actions/github-step6.png)\n\n\n### Create the Angular application\n\n\n**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.\n\n```shell\nng new angular-github-actions\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]\nCREATE angular-github-actions/README.md (1066 bytes)\nCREATE angular-github-actions/.editorconfig (274 bytes)\nCREATE angular-github-actions/.gitignore (604 bytes)\nCREATE angular-github-actions/angular.json (3303 bytes)\nCREATE angular-github-actions/package.json (1084 bytes)\nCREATE angular-github-actions/tsconfig.json (783 bytes)\nCREATE angular-github-actions/.browserslistrc (703 bytes)\nCREATE angular-github-actions/karma.conf.js (1439 bytes)\nCREATE angular-github-actions/tsconfig.app.json (287 bytes)\nCREATE angular-github-actions/tsconfig.spec.json (333 bytes)\nCREATE angular-github-actions/src/favicon.ico (948 bytes)\nCREATE angular-github-actions/src/index.html (306 bytes)\nCREATE angular-github-actions/src/main.ts (372 bytes)\nCREATE angular-github-actions/src/polyfills.ts (2820 bytes)\nCREATE angular-github-actions/src/styles.scss (80 bytes)\nCREATE angular-github-actions/src/test.ts (788 bytes)\nCREATE angular-github-actions/src/assets/.gitkeep (0 bytes)\nCREATE angular-github-actions/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-github-actions/src/environments/environment.ts (658 bytes)\nCREATE angular-github-actions/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-github-actions/src/app/app.module.ts (393 bytes)\nCREATE angular-github-actions/src/app/app.component.scss (0 bytes)\nCREATE angular-github-actions/src/app/app.component.html (24617 bytes)\nCREATE angular-github-actions/src/app/app.component.spec.ts (1121 bytes)\nCREATE angular-github-actions/src/app/app.component.ts (227 bytes)\n✔ Packages installed successfully.\n    Successfully initialized git.\n```\n\n**2.** Change the `package.json` file and add the scripts below. Replace the `rodrigokamada` value with your GitHub username.\n\n```json\n  \"build:prod\": \"ng build --configuration production --base-href https://rodrigokamada.github.io/angular-github-actions/\",\n  \"test:headless\": \"ng test --watch=false --browsers=ChromeHeadless\"\n```\n\n**3.** Run the test with the command below.\n\n```shell\nnpm run test:headless\n\n\u003e angular-github-actions@1.0.0 test:headless\n\u003e ng test --watch=false --browsers=ChromeHeadless\n\n⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015\nCompiling @angular/compiler/testing : es2015 as esm2015\nCompiling @angular/common : es2015 as esm2015\nCompiling @angular/core/testing : es2015 as esm2015\nCompiling @angular/common/testing : es2015 as esm2015\nCompiling @angular/platform-browser : es2015 as esm2015\nCompiling @angular/router : es2015 as esm2015\nCompiling @angular/platform-browser-dynamic : es2015 as esm2015\nCompiling @angular/platform-browser/testing : es2015 as esm2015\nCompiling @angular/platform-browser-dynamic/testing : es2015 as esm2015\nCompiling @angular/router/testing : es2015 as esm2015\n⠙ 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/\n22 09 2021 20:48:47.537:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited\n22 09 2021 20:48:47.541:INFO [launcher]: Starting browser ChromeHeadless\n✔ Browser application bundle generation complete.\n22 09 2021 20:48:52.326:INFO [Chrome Headless 94.0.4606.54 (Linux x86_64)]: Connected on socket YUmqYxp8kqXTSV63AAAB with id 18515803\nChrome Headless 94.0.4606.54 (Linux x86_64): Executed 3 of 3 SUCCESS (0.185 secs / 0.162 secs)\nTOTAL: 3 SUCCESS\n```\n\n**4.** Run the application with the command below. Access the URL `http://localhost:4200/` and check if the application is working.\n\n```shell\nnpm start\n\n\u003e angular-github-actions@1.0.0 start\n\u003e ng serve\n\n✔ Browser application bundle generation complete.\n\nInitial Chunk Files | Names         |      Size\nvendor.js           | vendor        |   2.41 MB\npolyfills.js        | polyfills     | 128.53 kB\nmain.js             | main          |  56.84 kB\nruntime.js          | runtime       |   6.64 kB\nstyles.css          | styles        |   1.18 kB\n\n                    | Initial Total |   2.60 MB\n\nBuild at: 2021-09-22T23:51:24.809Z - Hash: 491013c58e91631f6f14 - Time: 10491ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n✔ Compiled successfully.\n```\n\n**5.** Build the application with the command below.\n\n```shell\nnpm run build:prod\n\n\u003e angular-github-actions@1.0.0 build:prod\n\u003e ng build --configuration production --base-href https://rodrigokamada.github.io/angular-github-actions/\n\n✔ Browser application bundle generation complete.\n✔ Copying assets complete.\n✔ Index html generation complete.\n\nInitial Chunk Files               | Names         |      Size\nmain.4323acf2b7af06c6f196.js      | main          | 215.10 kB\npolyfills.846632910956cf45bd88.js | polyfills     |  36.22 kB\nruntime.05bbc8c46ec59fd850d7.js   | runtime       |   1.05 kB\nstyles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes\n\n                                  | Initial Total | 252.37 kB\n\nBuild at: 2021-09-23T01:22:35.870Z - Hash: 3a09fd924c26cb02fafc - Time: 13654ms\n```\n\n**6.** Let's create and configure the file with the GitHub Actions flow. Create the `.github/workflows/gh-pages.yml` file.\n\n```shell\nmkdir -p .github/workflows\ntouch .github/workflows/gh-pages.yml\n```\n\n**7.** Configure the `.github/workflows/gh-pages.yml` file with the content below.\n\n```yaml\nname: GitHub Pages\n\non:\n  push:\n    branches:\n    - main\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n    - name: Checkout\n      uses: actions/checkout@v2\n\n    - name: Setup Node.js\n      uses: actions/setup-node@v2\n      with:\n        node-version: '16'\n\n    - name: Install dependencies\n      run: npm install\n\n    - name: Run tests\n      run: npm run test:headless\n\n    - name: Build\n      run: npm run build:prod\n\n    - name: Deploy\n      if: success()\n      uses: peaceiris/actions-gh-pages@v3\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: dist/angular-github-actions\n        enable_jekyll: true\n```\n\nNote:\n\n* The documentation for the configuration file is available at [https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions).\n\n**8.** Syncronize the application on the GitHub repository that was created.\n\n![GitHub - Repository](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776746/Blog/angular-github-actions/github-step8.png)\n\n**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/](https://rodrigokamada.github.io/angular-github-actions/) and check if the application is working. Replace the `rodrigokamada` value with your GitHub username.\n\n\n### Validate the run of the GitHub Actions flow\n\n**1.** Let's validate the run of the GitHub Actions flow. Access the repository [https://github.com/rodrigokamada/angular-github-actions](https://github.com/rodrigokamada/angular-github-actions) created and click on the link *Actions*.\n\n![GitHub Actions - Repository](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-actions-step1.png)\n\n**2.** Click on the flow runned.\n\n![GitHub Actions - Workflows](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-actions-step2.png)\n\n**3.** Click on the job *deploy*.\n\n![GitHub Actions - Jobs](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-actions-step3.png)\n\n**4.** Click on each step to validate the run.\n\n![GitHub Actions - Steps](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-actions-step4.png)\n\n**5.** Ready! We validate the run of the GitHub Actions flow.\n\n\n### Validate the publish of the GitHub Pages\n\n**1.** Let's validate the publish of the GitHub Pages. Access the repository [https://github.com/rodrigokamada/angular-github-actions](https://github.com/rodrigokamada/angular-github-actions) created and click on the link *Settings*.\n\n![GitHub Pages - Repository](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-pages-step1.png)\n\n**2.** Click on the menu *Pages*.\n\n![GitHub Pages - Settings](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776744/Blog/angular-github-actions/github-pages-step2.png)\n\n**3.** The message *Your site is published at https://rodrigokamada.github.io/angular-github-actions/* should be displayed.\n\n![GitHub Pages - Pages](https://res.cloudinary.com/rodrigokamada/image/upload/v1637776745/Blog/angular-github-actions/github-pages-step3.png)\n\n**4.** Ready! We validate the publish of the GitHub Pages.\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```shell\ngit clone git@github.com:rodrigokamada/angular-github-actions.git\n```\n\n**2.** Install the dependencies.\n\n```shell\nnpm ci\n```\n\n**3.** Run the application.\n\n```shell\nnpm start\n```\n","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-github-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-github-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-github-actions/lists"}