Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
90 lines (52 sloc) 3.06 KB

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!

You can’t perform that action at this time.