I would like to serve the results of the Webpack build of a ReactJS UI application from a Spring Boot server application.
As the Webpack build generates all the assets in a "dist" folder i.e. index.html, bundle.js, etc... Accessed as i.e. http://localhost/index.html
And the Spring Boot application serves the API URLs from i.e. http://localhost/api/xxx
.env
file in the root of react project (next to package.json)PUBLIC_URL=/nameContextRoot
in .env
file (name of context root typically is name of war file)npm run build
For me it generates its contents in build
directory of react project
static
directorystatic
directory should be a normal folder in src/main/resources
clean and rebuild spring boot project and run it
Contents are now properly served
UPDATE
Spring Boot structure
D:.
├───.mvn
│ └───wrapper
├───.settings
├───src
│ ├───main
│ │ ├───java
│ │ │ └───my.java.stuff
│ │ ├───resources
│ │ │ └───static
│ │ │ └───static
│ │ │ ├───css
│ │ │ └───js
│ │ └───webapp
│ └───test
│ └───java
│ └───my.java.tests
├───target
│ ├───classes
│ │ ├───java.classes
│ │ └───static
│ │ ├───css
│ │ ├───js
│ │ └───static
│ │ ├───css
│ │ └───js
│ ├───generated-sources
│ │ └───annotations
│ ├───m2e-wtp
│ │ └───web-resources
│ │ └───META-INF
│ │ └───maven
│ │ └───java.stuff
│ ├───maven-archiver
│ ├───maven-status
│ │ └───maven-compiler-plugin
│ │ └───compile
│ │ └───default-compile
│ ├───rclient-0.0.1-SNAPSHOT
│ │ ├───META-INF
│ │ └───WEB-INF
│ │ ├───classes
│ │ │ ├───java stuff
│ │ │ └───static
│ │ └───lib
│ └───test-classes
└───WebContent
└───META-INF
ReactJS project structure
D:.
├───build
│ └───static
│ ├───css
│ └───js
├───node_modules
├───public
└───src
├───components
├───domain
└───util
Your api endpoints will be also served below the context root. They have nothing to do with React.
The hint of @Codo to use a reverse proxy to access the static content is still valid. But here you asked specifically for how to host the react app in a spring boot application.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With