Skip to content

Latest commit

 

History

History
102 lines (54 loc) · 3.46 KB

demo.adoc

File metadata and controls

102 lines (54 loc) · 3.46 KB

Angular + Spring Boot 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, Web, and Actuator [boot-start]

    http https://start.spring.io/starter.zip dependencies==h2,data-jpa,data-rest,lombok,web,devtools,actuator -d

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

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

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

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

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

Angular App

  1. Run ng new client; show app with npm start

  2. Install Angular Material [ng-material]

    npm i @angular/material @angular/cdk @angular/animations

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

    ng g s shared/car/car

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

  5. Generate a CarListComponent and modify it to use CarService

    ng g c car-list

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

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

  8. 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. Modify styles.css to specify theme and icons [mat-style]

  3. 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, restart, rejoice!

Authentication with Okta

  1. Add Spring Security OAuth and dependencies [ss-oauth]

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

  3. Add @EnableResourceServer and show error at http://localhost:8080

  4. Add Okta’s Angular SDK [okta-angular]

    npm i @okta/okta-angular

  5. Update app.module.ts to have Okta config and use OktaAuthModule component [okta-config, ng-oauth]

  6. Update app-routing.module.ts to have a new route for the redirect URI callback [ng-callback]

  7. Create an AuthInterceptor in okta/auth.interceptor.ts and register it [ng-interceptor, ng-provider]

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

  9. Change app.component.ts to be security aware [ng-auth]

  10. Show app and issue with car list component

  11. Create HomeComponent as a landing page and add routes [mat-home, ng-auth]

  12. Watch demo fail because of CORS

  13. Add a corsFilter to Spring Security and rejoice 🎉 [cors-filter]