how do you create a war for spring boot / react application

Question

I have a spring boot app as backend and using react as front end (both are in same project). I only have the one pom file for the backend and I run the spring app manually and then do a npm start on the frontend, all works fine. What I want to do now is deploy both backend and frontend and start them up automatically. Do I need another POM file for the front end or something which will execute npm etc? Front end was created with create-react-app and currently running on port 3000 ( "start": "react-scripts start" ), my backend running on port 8080 but would be deployed to an external tomcat server.

Do I need to add the following plugin:

 <groupId>com.github.eirslett</groupId>
 <artifactId>frontend-maven-plugin</artifactId>

and then some execution rules in the pom?

Any information is much appreciated.

Thanks

Answer 1

If you want to create war in spring boot, you need to add packaging as war and spring-boot-starter-tomcat should be <scope>provided</scope> . I think yes you need to add, please check the reference in the below url,

https://github.com/spring-guides/tut-react-and-spring-data-rest/blob/master/basic/pom.xml

Ref: https://spring.io/guides/tutorials/react-and-spring-data-rest/

        <packaging>war</packaging>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

Answer 2

let me chip in and say something else. If you need a war as packaging, you can proceed as per Thangavel said. But I am a bit sceptical to go for a deployment like that on a production site.

Since you are using a front-end framework and spring as backend, I would suggest another way. Usually after doing a build of your front-end, you will use a http server like apache or nginx to deploy your build and then your war or jar for your spring boot project.

But if you want to keep both in the same project, you can do a build of your react project and it should be possible to import those JS files of your build in a thymeleaf or JSP view. Then you would only need to run the project on port 8080.

Here is an example for Angular. I am sure you can look for same in React.

How to include angular2/4 component in JSP page?

Please let me know how it goes.

Answer 3

如果你想要一个好的参考实现，你可以生成一个jhipster项目，看看前端插件是如何使用的。