Adding React into Spring Boot


Main steps:

  • creat-react-app xxx
  • cd xxx
  • add "homepage": "." into package.json, this is to make sure that current directory is used when building the app entry (index.html)
  • last 2 lines in package.json

"homepage": "." }

  • in js code, change all BrowserRouter to HashRouter, otherwise route is not working
  • npm run build, make sure build directory is generated.
  • serve -s build, start the local server, make sure localhost:5000 has the app
  • stop the server
  • cd build and open index.html locally in the file system with Browser, make sure it shows the same app as from server
  • in configuration file of spring boot. application.properties add: spring.mvc.static-path-pattern=/static/** this is to let spring boot directs request for /static/ to resources/static/
  • cd resources/static/, create directory /react/xxx/
  • copy anything in xxx/build/ into react/xxx/
  • start sprint boot
  • access react using localhost:8080/static/react/xxx/index.html
  • in this blog, the react is added into the blog using iframe.

Cheers!

frontend
backend