Skip to content

Latest commit

 

History

History
106 lines (55 loc) · 3.86 KB

demo.adoc

File metadata and controls

106 lines (55 loc) · 3.86 KB
Raw

WebFlux + React 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 WebFlux API

  1. start.spring.io: data-mongodb-reactive, webflux, devtools, and lombok [webflux-start]

    http https://start.spring.io/starter.zip dependencies==data-mongodb-reactive,webflux,devtools,lombok -d

  2. Add Profile, ProfileRepository, and SampleDataInitializer [webflux-entity, webflux-repo, webflux-data]

  3. Start and see list of profiles in console: SPRING_PROFILES_ACTIVE=demo mvn

  4. Create ProfileService [webflux-service]

  5. Create ProfileRestController with a /profiles endpoint [webflux-controller]

  6. Restart server with classic profile: SPRING_PROFILES_ACTIVE=classic mvn

  7. Restart and confirm http://localhost:8080/profiles works in browser and with http

    http POST :8080/profiles email='matt.raible@okta.com'
http PUT :8080/profiles/1 email='matt.raible@okta.com'
http DELETE :8080/profiles/1

  8. Create ProfileCreatedEvent, ProfileCreatedEventPublisher, and update ProfileService [webflux-event, webflux-publisher]

  9. Create WebSocketConfiguration for executor bean [webflux-websocket]

  10. Create ProfileHandler, ProfileEndpointConfiguration, and CaseInsensitiveRequestPredicate [webflux-handler, webflux-endpoint, webflux-predicate]

  11. Restart and confirm http://localhost:8080/profiles works in browser and with http

  12. Create static/ws.html to show event notifications [webflux-ws]

  13. Restore doOnSuccess in ProfileService and show http://localhost:8080/ws.html with create.sh

  14. Create ServerSentEventController, show http http://localhost:8080/sse/profiles -S [webflux-sse]

React App

  1. Run npx create-react-app react-app --template typescript; show app with npm start

  2. Modify App.tsx and add componentDidMount() to fetch profiles [react-fetch]

  3. Create interfaces: Profile, AppProps, and AppState; add constructor and initialize state [react-constructor]

  4. Change render() to show profiles [react-loading and react-list]

  5. Configure proxy for React and show list of profiles

  6. Create ProfileList.tsx and copy code from App.tsx; change App.tsx to use <ProfileList/>

React App with Streaming Data

  1. Modify ProfileList.tsx to fetch every second [react-interval]

  2. Create and run create-stream.sh

  3. Use RxJS: install rxjs first! [react-rxjs]

  4. Use WebSocket [react-websocket]

  5. Create src/setupProxy.js to set up proxy for WebSockets [react-proxy]

  6. Use EventSource with SSE [react-eventsource]

  7. Add @CrossOrigin in ServerSentEventController

Authentication with Okta

  1. Add Spring Security OIDC and dependencies [ss-maven || okta-maven-boot]

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

  3. Show login redirect from http://localhost:8080/profiles

  4. Create SecurityConfiguration for resource server and CORS [ss-config]. Add resourceserver settings to application.yml.

  5. Create a new SPA app on Okta for React

  6. Add Okta’s React SDK using OktaDev Schematics

    npm install @oktadev/schematics
schematics @oktadev/schematics:add-auth

  7. Show changes in App.tsx and new Home.tsx file

  8. Add <ProfileList authState={this.props.authState}/> in Home.tsx

  9. Add CSS to App.css to make buttons more visible [react-css]

  10. Restart, show app and Loading…​

  11. Update ProfileList to add an authorization header + error handling [react-token]

  12. Modify WebSocketConfiguration.java to only return an ID.

  13. Modify ProfileList to fetch a profile by ID when added. [react-websocket2]

  14. Run ./create-stream.sh and show profiles being added.

  15. Fini!