Skip to content

Latest commit

 

History

History
112 lines (59 loc) · 3.62 KB

demo.adoc

File metadata and controls

112 lines (59 loc) · 3.62 KB

Angular 8 + Spring Boot 2.2 Demo Steps

The brackets at the end of each step indicate the alias’s or IntelliJ Live Templates to use. You can find the template definitions at mraible/idea-live-templates.

Spring Boot API

  1. start.spring.io: JPA, H2, Rest Repositories, Lombok, Okta, and Web [boot-start]

    http https://start.spring.io/starter.zip dependencies==h2,data-jpa,data-rest,lombok,okta,web javaVersion==11 bootVersion==2.2.0.M4 -d

  2. Comment out okta-spring-boot-starter dependency in pom.xml

  3. Add Car, CarRepository, and ApplicationRunner bean [boot-entity-lombok, boot-repo, boot-data]

  4. Start and see list of cars in console: ./mvnw spring-boot:run

  5. Create CoolCarController with a /cool-cars endpoint [boot-cool]

  6. Restart and confirm http://localhost:8080/cars works in browser and with HTTPie

    http POST :8080/cars name='VW Bus'
http PUT :8080/cars/10 name='Hefe the Bus'
http DELETE :8080/cars/10

Angular App

  1. Install Angular CLI

    npm i -g @angular/[email protected]

  2. Run ng new client --routing --style css --enable-ivy; show app with ng serve -o

  3. Install Angular Material [ng add @angular/material]

  4. Generate a car service to talk to the API [a-httpclient-get]

    ng g s shared/car/car

  5. Add HttpClientModule as an import in app.module.ts

  6. Generate a CarListComponent and modify it to use CarService

    ng g c car-list

  7. Update car-list.component.html to show the list of cars [a-ngFor]

  8. Update app.component.html to use the <app-car-list> component

  9. Start the app, show error, modify /cool-cars and repository to use @CrossOrigin

Angular Material + Giphy

  1. Add Angular Material imports and modify HTML [mat-imports, mat-toolbar, mat-card]

  2. Add Animated Cars with Giphy [ng-giphy-service, ng-giphy-foreach]

Add an Edit Feature

  1. Create a CarEditComponent to modify car data

    ng g c car-edit

  2. Add a link to edit component (+add button) in car-list.component.html [mat-edit, mat-add]

  3. Import the FormsModule in app.module.ts

  4. Add routing to list and edit components in app-routing.module.ts [ng-routes]

  5. Modify edit component and car service to add methods for saving and deleting. [ng-service-api, ng-service-cud, ng-edit]

  6. Make the edit template look good + add some CSS. [mat-form]

  7. Remove <app-car-list/> from app.component.html, show CORS error and fix [cors-filter]

  8. Restart, demo, and be proud!

Authentication with OIDC and Okta

  1. Uncomment Okta Spring Boot starter in pom.xml

  2. Create OIDC app in Okta; add properties to application.yml [ss-okta]

  3. Create SecurityConfiguration for resource server [ss-resource-config]

  4. Show 401 at http://localhost:8080/

  5. Commit all changes to Git

  6. Add Okta’s Angular SDK using OktaDev Schematics

    ng add @oktadev/schematics

  7. Show changes made to project and explain

  8. Remove default route and add canActivate: [OktaAuthGuard] to routes in app-routing.module.ts

  9. Modify app.component.html to have login and logout buttons + adjust CSS [mat-login, toolbar-spacer]

  10. Update HomeComponent to use Angular Material and link to Car List [mat-home]

  11. Add MatButtonModule and MatCardModule to auth-routing.module.ts

  12. Change <mat-card> to fill the screen by adding the following to styles.css

    mat-card {
  height: 100vh;
}

  13. Disable Ivy in tsconfig.app.json because Ivy doesn’t have CommonJS/UMD support

  14. Show app and rejoice 🎉