is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project. Angular is a source code and file storage service with version control using git tool. is a service to automate the software workflow. GitHub GitHub Actions is an object storage service offering scalability, data availability, security and performance. Amazon S3 (Simple Storage Service) Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm Angular CLI IDE (e.g. ) Visual Studio Code Create and configure the account on the Amazon S3 Let's create and configure the account. Access the site and click on the button . 1. https://aws.amazon.com/s3/ Get Started with Amazon S3 Click on the option , fill in the field and click on the button . 2. Root user Root user email address Next Note: If you don't have an Amazon account, do steps 1 to 9 of the post in the session . Authentication using the Amazon Cognito to an Angular application Create and configure the account on the Amazon Cognito Fill in the field and click on the button . 3. Security check Submit Fill in the field and click on the button . 4. Password Sign in Click on the button . 5. Create bucket Fill in the field , click on the option to uncheck this option, and click on the button . 6. Bucket name Block all public access I acknowledge that the current settings might result in this bucket and the objects within becoming public. Create bucket Click on the link with the bucket name. 7. angular-github-actions-amazon-s3 Click on the link . 8. Properties Click on the button . 9. Edit Click on the options , , fill in the fields , and click on the button . 10. Enable Host a static website Index document Error document - optional Save changes Copy the URL and the region displayed, in my case, the URL and the region were displayed because the URL will used to access the Angular application and the region will used in the GitHub Actions file setting and click on the link . 11. http://angular-github-actions-amazon-s3.s3-website-sa-east-1.amazonaws.com sa-east-1 Permissions Click on the button . 12. Edit Fill in the fields with the content below and click on the button . 13. Policy Save changes {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::angular-github-actions-amazon-s3/*"
      ]
    }
  ]
} Ready! Account created and configured and bucket created and configured. 14. Click on the menu , and . 15. Services Security, Identity & Compliance IAM Click on the link . 16. Users Click on the button . 17. Add users Fill in the field , click on the option and click on the button . 18. User name Access key - Programmatic access Next: Permissions Click on the options , and click on the button . 19. Attach existing policies directly AmazonS3FullAccess Next: Tags Click on the button . 20. Next: Review Click on the button . 21. Create user Copy the displayed, in my case, the was displayed, click on the link , copy the displayed because the and will be configured in the GitHub repository and click on the button . 22. Access key ID Access key ID AKIAUAM34QRRRQ5AZD2A Show Secret Access key Access key ID Secret Access key Close Ready! Access keys created. 23. Create the account and the repository on the GitHub Let's create the account and the repository. Do steps 1 to 6 of the post in the session . 1. Hosting an Angular application on GitHub Pages using GitHub Actions Create and configure the account on the GitHub Click on the menu . 2. Settings Click on the side menu . 3. Secrets Click on the button . 4. New repository secret Fill in the fields , and click on the button to configure the key with the . 5. Name Value Add secret Access key ID Click on the button . 6. New repository secret Fill in the fields , and click on the button to configure the key with the . 7. Name Value Add secret Secret Access key Ready! Access keys configured. 8. Create the Angular application Let's create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-github-actions-amazon-s3 --routing true --style scss
CREATE angular-github-actions-amazon-s3/README.md (1074 bytes)
CREATE angular-github-actions-amazon-s3/.editorconfig (274 bytes)
CREATE angular-github-actions-amazon-s3/.gitignore (548 bytes)
CREATE angular-github-actions-amazon-s3/angular.json (3363 bytes)
CREATE angular-github-actions-amazon-s3/package.json (1096 bytes)
CREATE angular-github-actions-amazon-s3/tsconfig.json (863 bytes)
CREATE angular-github-actions-amazon-s3/.browserslistrc (600 bytes)
CREATE angular-github-actions-amazon-s3/karma.conf.js (1449 bytes)
CREATE angular-github-actions-amazon-s3/tsconfig.app.json (287 bytes)
CREATE angular-github-actions-amazon-s3/tsconfig.spec.json (333 bytes)
CREATE angular-github-actions-amazon-s3/.vscode/extensions.json (130 bytes)
CREATE angular-github-actions-amazon-s3/.vscode/launch.json (474 bytes)
CREATE angular-github-actions-amazon-s3/.vscode/tasks.json (938 bytes)
CREATE angular-github-actions-amazon-s3/src/favicon.ico (948 bytes)
CREATE angular-github-actions-amazon-s3/src/index.html (314 bytes)
CREATE angular-github-actions-amazon-s3/src/main.ts (372 bytes)
CREATE angular-github-actions-amazon-s3/src/polyfills.ts (2338 bytes)
CREATE angular-github-actions-amazon-s3/src/styles.scss (80 bytes)
CREATE angular-github-actions-amazon-s3/src/test.ts (745 bytes)
CREATE angular-github-actions-amazon-s3/src/assets/.gitkeep (0 bytes)
CREATE angular-github-actions-amazon-s3/src/environments/environment.prod.ts (51 bytes)
CREATE angular-github-actions-amazon-s3/src/environments/environment.ts (658 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app-routing.module.ts (245 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app.module.ts (393 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app.component.scss (0 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app.component.html (23364 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app.component.spec.ts (1151 bytes)
CREATE angular-github-actions-amazon-s3/src/app/app.component.ts (237 bytes)
✔ Packages installed successfully.
    Successfully initialized git. Change the file and add the scripts below. 2. package.json "build:prod": "ng build --configuration production",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless" Run the test with the command below. 3. npm run test:headless

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

⠙ Generating browser application bundles (phase: setup)...22 01 2022 22:11:29.773:INFO [karma-server]: Karma v6.3.11 server started at http://localhost:9876/
22 01 2022 22:11:29.774:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
22 01 2022 22:11:29.781:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
22 01 2022 22:11:37.472:INFO [Chrome Headless 97.0.4692.71 (Linux x86_64)]: Connected on socket 2NkcZwzLS5MNuDnMAAAB with id 98670702
Chrome Headless 97.0.4692.71 (Linux x86_64): Executed 3 of 3 SUCCESS (0.117 secs / 0.1 secs)
TOTAL: 3 SUCCESS Run the application with the command below. Access the URL and check if the application is working. 4. http://localhost:4200/ npm start

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

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.00 MB | 
polyfills.js          | polyfills     | 339.24 kB | 
styles.css, styles.js | styles        | 213.01 kB | 
main.js               | main          |  53.27 kB | 
runtime.js            | runtime       |   6.90 kB | 

                      | Initial Total |   2.60 MB

Build at: 2022-01-23T01:13:06.355Z - Hash: e7a502736b12e783 - Time: 6256ms

** 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. 5. npm run build:prod

> angular-github-actions-amazon-s3@1.0.0 build:prod
> ng build --configuration production

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

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.464c3a39ed8b2eb2.js      | main          | 206.10 kB |                56.11 kB
polyfills.f007c874370f7293.js | polyfills     |  36.27 kB |                11.56 kB
runtime.8db60f242f6b0a2b.js   | runtime       |   1.09 kB |               603 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 243.46 kB |                68.25 kB

Build at: 2022-01-23T01:14:01.354Z - Hash: cab5f3f1681e58fd - Time: 11304ms Let's create and configure the file with the GitHub Actions flow. Create the file. 6. .github/workflows/gh-pages.yml mkdir -p .github/workflows
touch .github/workflows/gh-pages.yml Configure the file with the content below. 7. .github/workflows/gh-pages.yml name: GitHub Pages

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: sa-east-1

    - 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()
      run: aws s3 sync ./dist/angular-github-actions-amazon-s3 s3://angular-github-actions-amazon-s3 Notes: The and settings were done in the GitHub repository. aws-access-key-id aws-secret-access-key The setting is the bucket region. aws-region The setting is the application build folder. ./dist/angular-github-actions-amazon-s3 The setting is the bucket name. s3://angular-github-actions-amazon-s3 Syncronize the application on the GitHub repository that was created. 8. Ready! After synchronizing the application on the GitHub repository, the GitHub Actions build the application and synchronize with Amazon S3 bucket. Access the URL and check if the application is working. Replace the URL values with your bucket name and region. 9. http://angular-github-actions-amazon-s3.s3-website-sa-east-1.amazonaws.com/ Validate the run of the GitHub Actions flow Let's validate the run of the GitHub Actions flow. Access the repository created and click on the link . 1. https://github.com/rodrigokamada/angular-github-actions-amazon-s3 Actions Click on the flow runned. 2. Click on the job . 3. deploy Click on each step to validate the run. 4. Ready! We validate the run of the GitHub Actions flow. 5. The application repository is available at . https://github.com/rodrigokamada/angular-github-actions-amazon-s3 This tutorial was posted on my in portuguese. blog

Flow

Amazon

Fetch

Google

Initialized

I am creating content to share my knowledge and help people on their technology journey.

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2022 - HackerNoon Contributor of the Year - Amazon

2022 - HackerNoon Contributor of the Year - Angular

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Aws

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Website Development

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

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 Amazon S3 Using Github Actions

Hosting an Angular Application on Amazon S3 Using Github Actions

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Hosting an Angular Application on Amazon S3 Using Github Actions

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES