demo.adoc

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='[email protected]'
   http PUT :8080/profiles/1 email='[email protected]'
   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!

Source: https://developer.okta.com/blog/2018/09/25/spring-webflux-websockets-react