Bootiful Development with Spring Boot and React - Dublin JUG 2018

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
September 12, 2018

Bootiful Development with Spring Boot and React - Dublin JUG 2018

Blog post:
GitHub repo:

To simplify development and deployment, you want everything in the same artifact, so you put your React app “inside” your Spring Boot app, right?

But what if you could create your React app as a standalone app and make cross-origin requests to your API? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production).

This session shows how to develop with Java 8, Spring Boot, React, and TypeScript. You’ll learn how to create REST endpoints with Spring MVC, configure Spring Boot to allow CORS, and create a React app to display its data.


Matt Raible

September 12, 2018


  1. Matt Raible | @mraible Bootiful Development with Spring Boot and

    React September 12, 2018
  2. Blogger on and Web Developer and Java Champion

    Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. None
  4. None
  5. None

  7. @spring_io #springio17 Authentication/Authorization Standards

  8. What About You?

  9. Bootiful Development

  10. OAuth 2.0 Overview Today’s Agenda Why Spring Boot? Demo: Developing

    with Spring Boot Introduction to ES6 and TypeScript Why React? Demo: Developing with React Introduction to PWAs and JHipster
  11. Spring Boot Automatically configures Spring whenever possible Provides production-ready features

    such as metrics, health checks and externalized configuration Absolutely no code generation and no requirement for XML configuration Embeds Tomcat, Jetty or Undertow directly

  13. None
  14. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    {, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
  15. @spring_io #springio17 Microservices with Spring Boot

  16. @spring_io #springio17 Secure Microservices with Spring Boot

  17. Demo: Build a Spring Boot API

  18. ES6, ES7 and TypeScript ES5: ES6: ES7:

    TS: TS ES7 ES6 ES5
  19. TypeScript $ npm install -g typescript function greeter(person: string) {

    return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts
  20. @spring_io #springio17 bus.ts

  21. “Node.js is a JavaScript runtime built on Chrome's V8 JavaScript

    engine. Node.js uses an event-driven, non- blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.”
  22. @spring_io #springio17 Leading JavaScript Frameworks in 2018

  23. None
  24. None
  25. “Angular and React dominate: Nothing else even comes close.”

  26. None
  27. Crunch the Numbers

  28. @spring_io #springio17 Hot Frameworks

  29. @spring_io #springio17 Jobs on Indeed (US) September 2018 0 2,500

    5,000 7,500 10,000 React Angular Vue Vanilla
  30. @spring_io #springio17 Stack Overflow Tags September 2018 0 35,000 70,000

    105,000 140,000 React Angular Vue
  31. @spring_io #springio17 GitHub Stars September 2018 0 30,000 60,000 90,000

    120,000 React Angular Vue
  32. @spring_io #springio17 GitHub Star Growth

  33. Hello World with React <div id="root"></div> <script> ReactDOM.render( <h1>Hello,

    world!</h1>, document.getElementById('root') ); </script>
  34. Imperative Code if (count > 99) { if (!hasFire()) {

    addFire(); } } else { if (hasFire()) { removeFire(); } } if (count === 0) { if (hasBadge()) { removeBadge(); } return; } if (!hasBadge()) { addBadge(); } var countText = count > 99 ? "99+" : count.toString(); getBadge().setText(countText);
  35. Declarative Code if (count === 0) { return <div className="bell"/>;

    } else if (count <= 99) { return ( <div className="bell"> <span className="badge">{count}</span> </div> ); } else { return ( <div className="bell onFire"> <span className="badge">99+</span> </div> ); }
  36. None
  37. None
  38. Create React App

  39. Create React App

  40. Ships with documentation!

  41. Learning React

  42. @spring_io #springio17 React Courses on

  43. @spring_io #springio17 Progressive Web Apps

  44. “We’ve failed on mobile” — Alex Russell

  45. Mobile Hates You! How to fight back: Implement PRPL Get

    a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling
  46. The PRPL Pattern Push critical resources for the initial URL

    route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
  47. Learn More about PWAs

  48. Demo: Build a React Client class BeerList extends React.Component<{}, any>

    { constructor(props: any) { super(props); this.state = { beers: [], isLoading: false }; } componentDidMount() { this.setState({isLoading: true}); fetch('http://localhost:8080/good-beers') .then(response => response.json()) .then(data => this.setState({beers: data, isLoading: false})); } render() { const {beers, isLoading} = this.state; … } }
  49. More Authentication with React

  50. @spring_io #springio17 JHipster JHipster is a development platform to

    generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.
  51. None
  52. The JHipster Mini-Book 4.5 Release on April 6, 2018 @jhipster_book Write your own InfoQ mini-book!
  53. Action! Try Spring Boot Try React Try Okta Explore PWAs

    Enjoy the bootiful experience!
  54. it down with Okta!

  55. @SpringBootApplication class NotesApplication fun main(args: Array<String>) {, *args) }

    @Entity data class Note(@Id @GeneratedValue var id: Long? = null, var text: String? = null, @JsonIgnore var user: String? = null) @RepositoryRestResource interface NotesRepository : JpaRepository<Note, Long>
  56. DIY: Bootiful Development

  57. CRUD with React and Spring Boot

  58. Bootiful React with a Java EE API

  59. @oktadev

  60. Questions? Keep in touch! @mraible Presentations Code