Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React + Spring Boot deployment

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.

like image 766
Zip184 Avatar asked Apr 13 '18 12:04

Zip184


People also ask

Can I use React with spring boot?

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.

How do I run spring and React on the same port?

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.

How React is deployed?

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.

How do I connect React to frontend with backend in Java?

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.


2 Answers

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).

like image 51
mancini0 Avatar answered Oct 20 '22 13:10

mancini0


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

like image 42
Naor Bar Avatar answered Oct 20 '22 13:10

Naor Bar