demo.adoc

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]

Source: https://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2