Skip to content

Latest commit

 

History

History
97 lines (52 loc) · 3.35 KB

demo.adoc

File metadata and controls

97 lines (52 loc) · 3.35 KB
Raw

Bootiful Angular 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: h2, lombok, jpa, rest, and web [bootiful-start]

    http https://start.spring.io/starter.zip dependencies==h2,lombok,data-jpa,data-rest,web \
  packageName==com.okta.developer.demo -d

  2. Add Beer, BeerRepository, BeerCommandLineRunner and add default beers [boot-entity-lombok, boot-repo, boot-command, boot-add]

  3. Start and see list of beers in console

  4. Create BeerController with a /good-beers endpoint [boot-controller, boot-good]

  5. Restart and confirm http://localhost:8080/good-beers works in browser and with http

    http POST :8080/beers name='Guinness'
http PUT :8080/beers/1 name='Guinness is good for you'
http DELETE :8080/beers/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 beer service to talk to the API [a-httpclient-get]

    ng g s shared/beer/beer

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

  5. Generate a BeerListComponent and modify it to use BeerService

    ng g c beer-list

  6. Update beer-list.component.html to show the list of beers [a-ngFor]

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

  8. Start the app, show error, modify /good-beers 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 images with Giphy [ng-giphy-service, ng-giphy-foreach]

PWA Support

  1. Run ng add @angular/pwa to add PWA support

  2. Run ng build --prod; serve with serve -s dist/client -p 4200

  3. Run Lighthouse, show how app works offline

Authentication with Okta

  1. Add Okta Spring Boot Starter and oauth2-autoconfigure [okta-maven-boot and spring-oauth2]

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

  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 beer list component

  11. Watch demo fail because of CORS

  12. Add a corsFilter to Spring Security [cors-filter]

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

  14. Fini! 🎉

Sources: