Menu
I'm having problems deploying a react nodejs application with a spring boot. The spring application works fine with basic HTML/JS and I've got the react app running fine in dev mode, but I seem to be missing something as far as bundling the react and spring properly.
Currently, I can run/deploy my spring boot application with some simple HTML and javascript ajax calls (no react). It runs on my AWS ec2 with no problems.
I can also run my react application in dev mode through node JS "npm start" and point it at my local spring boot application. (I added "proxy": "http://localhost:8080" to manifest.json). I'm struggling with the next steps of actually bundling my react application into the war with the rest of my spring application and getting it working. I can't even get a react hello-world page to load without rest calls.
I've tried running npm run build and then copying all of the files generated in the /build directory to my spring project's /src/main/resources.
Specifically I copied:
react-app/build/static/* -> spring-app/src/main/resources/static/.
react-app/build/* -> spring-app/src/main/resources/.
After building the war (mvn install) and running the war locally, I'm getting 404 errors when trying to load the server without any page specified. When I specify index.html, I'm getting errors that it's failing to load the JS and CSS files in my static directory. The same problems happen when I deploy the war to ec2 and try to load pages.
Are there more configuration steps that I'm missing? I'm aware there's probably some base URL config I'll need to do to consume the rest API outside of dev mode, but I can't even get a page to load without any rest calls. I tried moving index.html to various locations like /resources/static and /resources/public. Any help would be appreciated.
766
The basic idea of what Spring Boot and Create React App do.Create React App helps you start a React project very quickly. It gives you all the basic things you need to get up and running asap. Spring boot helps you start and maintain a spring application quickly and easily.
So, here is a quick guide how to run a react frontend and a spring boot backend on the same port and how to package them as a single jar file. First, create a spring boot project with https://start.spring.io. Add the Web dependency. Set the groupid and artifactid to whatever you want.
For your React app, you'll have to drag and drop the build folder onto the Netlify Dashboard. Run npm run build beforehand to deploy the latest build. You can also connect GitHub, GitLab, or Bitbucket, depending on where your project is stored. This allows automatic deployment whenever you push your changes.
Remember you need to put this in the React UI package. json file. With this in place, all the calls start with /api will be redirected to http://localhost:8080 where the Java API running. Once this is configured, you can run the React app on port 3000 and java API on 8080 still make them work together.
Look into this tutorial from Spring, there is a "frontend-maven-plugin" that you might find very useful. I would ditch the war and just build your spring boot app as a jar, then place your js files in src/main/js, and your index.html in /src/main/resources/static.
The tutorial is available here:
https://spring.io/guides/tutorials/react-and-spring-data-rest/
And the code is available here:
https://github.com/spring-guides/tut-react-and-spring-data-rest/tree/master/basic
Use a webpack.config.js config similar to the one used in the tutorial, and it will "just work" once you build using the maven front end plugin.
As others have suggested, you will be better off separating your front-end and back-end code (keep them in separate repositories).
51
I followed the same approach for Production purposes using frontend-maven-plugin and maven-antrun-plugin.
I used frontend-maven-plugin to generate the React bundle (npm install and than npm run build) and maven-antrun-plugin to copy the artifacts to spring boot's public folder.
A great sample project and tutorial can be found here
42
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
