demo.adoc

Bootiful 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 Boot API

1. start.spring.io: h2, lombok, jpa, rest, web, and okta [bootiful-start]

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

2. Comment out Okta starter in pom.xml

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

4. Start and see list of beers in console

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

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

   http POST :8080/beers name='Guinness'
   http PUT :8080/beers/10 name='Guinness is good for you'
   http DELETE :8080/beers/10

React App

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

2. Modify App.tsx and add a componentDidMount() method to fetch good beers [react-fetch]

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

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

5. Configure CORS for Spring Boot and show list of beers

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

7. Create GiphyImage.tsx; add to BeerList; show beers with images [react-giphy]

PWA Support

1. Run npm run build; serve with serve -s build -p 3000

2. Run Lighthouse; fix 512px icon

3. Mention Cloud Foundry and Heroku + scripts

Authentication with Okta

1. Uncomment Okta Spring Boot starter in pom.xml

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

3. Create Security configuration for resource server [oauth2-resource-server]

   @Configuration
   static class OktaOAuth2WebSecurityConfigurerAdapter extends WebSecurityConfigurerAdapter {
       @Override
       protected void configure(HttpSecurity http) throws Exception {
           http
               .authorizeRequests().anyRequest().authenticated()
               .and()
               .oauth2ResourceServer().jwt();
       }
   }

4. Add Okta’s React SDK and configure

   npm install -g @angular-devkit/schematics-cli
   npm i -D @oktadev/schematics
   schematics @oktadev/schematics:add-auth

5. Show App.tsx and how it uses <Security/> component; show auth awareness in Home.tsx, add BeerList

6. Update BeerList to add auth to BeerListProps

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

8. Show app and Loading…​

9. Fix CORS error after adding Spring Security [cors-filter]

10. Update BeerList to add an authorization header + error handling [react-token]

11. Fini!

Source: https://developer.okta.com/blog/2017/12/06/bootiful-development-with-spring-boot-and-react