Lab Angular S3 Route53

An Angular project to access Starwars backend of https://swapi.dev/

Project setup

Clone the project

Clone project from git repo https://github.com/cssamLabs/Lab-Anguar-S3-Route53

in to your $HOME/sites/ folder.

Install Required Libraries

Install the required libraries using these commands:

• npm update

To build:

> cd Lab-Anguar-S3-Route53
> ng build 

To run:

> cd Lab-Anguar-S3-Route53
> ng serve 

check http://localhost:4200

---

App Using Guide

Dashboard

App is routing to dashboard always

Click on the top heard to load the dashboard

http://localhost:4200/dashboard

Angular Material components used here are

• mat-ripple

---

People page

This page implemented as Accordion with Paginator.

At expand you will see

Once click on Films

Similarly you can see Species, Vehicles, Starships of each Person. SnackBar appears if no content.

Angular Material components used here are

• mat-paginator
• mat-accordion
• mat-expansion-panel
• mat-list
• mat-subheader
• mat-list-icon
• mat-divider
• matBadge
• matBadgeColor
• MatSnackBar

---

Films page

This page developed using Tab group with dynamic height based on tab contents.

It shows number of records for Starships, Planets, Characters, and Species but I didn't add loading since I did at Peoples page.

Paginator didn't use since only 6 records available.

Angular Material components used here are

• mat-tab-group
• mat-tab
• mat-card
• mat-card-header
• mat-card-subtitle
• mat-card-content
• mat-card-actions
• mat-button
• mat-icon
• matBadge
• matBadgeColor

---

Planet page

This page developed using Table with expandable rows and Paginator.

At expand you will see

Again it shows number of records for Films and Residence. Loading titles of them are added using dialog.

Angular Material components used here are

• mat-paginator
• mat-table
• mat-cell
• mat-header-row
• mat-row
• MatSnackBar
• MatDialog

---

Species page

This page developed using List with Bottomsheet and Paginator.

At expand you will see

Angular Material components used here are

• mat-paginator
• mat-list
• MatBottomSheet
• BottomsheetSpeciesComponent

---

Theme

Added <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in index.html

Added starwars-theme.css file and linked at angular.json file "styles": [ "src/starwars-theme.css", "src/styles.css" ],

---

Cloud Technologies

AWS S3 deployment

See the description of how to configure Angular app as static web site in AWS S3. AWs S3 StaticWeb

In development CMD run following to build compiled files for static web.

Following command in project root will build sttaic web files.

ng build

Then goto dist/StarwarsClient folder and run aws s3 command

cd dist/StarwarsClient
aws s3 cp . s3://starwars.hibersoft.com --recursive

Hosted Site

Hiroku Deployment

I have deployed the app with Hiroku and you can access at https://starwarsclient.herokuapp.com/. There are few additional steps has to take to deploy on Heroku. I added server.js and Procfile file to deploy on Heroku. You can find them in heroku-deployment branch.

Hiroku Configuration

• Procfile

• to get nodejs server deployment server.js needed to implement. Therefore "express": "^4.17.1", "path": "^0.12.7" had to added to the package.json

  

Containerized Deployment

I have added required yaml files to deploy the app in any of cloud services in kube-config.

• config
• deployment
• ingress
• service

Ngnix configuration

I have added nginx.conf file required to run the app with ngnix server instead nodejs server. There we don't need configuration used for Hiroku server.

Dockerfile

I have created Dockerfile required to create app image for deployment in cloud environments. Image is pushed to my DockerHub repository cssam/starwarsclient.

---

Testing

Postman collection

I used Postman to verify and compare the results. Configurations are in the file Starwars.postman_collection.json.