如何在Tomcat中部署React应用程序？

Question

Problem Statement : I have two parts of my application. front-end and back-end. front-end is built using React which uses Node.js and back-end is maven web app, and the communication between front-end and back-end is done using REST . my application is running on two server. front-end is running on Node.js ans back-end is running on tomcat. What I want is to deploy both the part on the same server.

How do I do this?

What i tried.

1st approach : I tried using maven plugin. added the bellow plugin in pom.xml

 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <executions> <execution> <id>exec-npm-install</id> <phase>compile</phase> <configuration> <executable>npm</executable> <arguments> <argument>--prefix</argument> <argument>${basedir}/src/main/webapp/ui</argument> <argument>install</argument> <argument>${basedir}/src/main/webapp/ui</argument> </arguments> </configuration> <goals> <goal>exec</goal> </goals> </execution> <execution> <id>exec-webpack</id> <phase>compile</phase> <configuration> <executable>npm</executable> <arguments> <argument>--prefix</argument> <argument>${basedir}/src/main/webapp/ui</argument> <argument>run</argument> <argument>build</argument> </arguments> </configuration> <goals> <goal>exec</goal> </goals> </execution> </executions> </plugin> 

Added the front-end application folder in back-end, web-app folder. but the problem with this approach is, when I do mvn install all node module are downloaded and the size of the project become very large( 700MB ) because of the node module. This is not desire.

How do I do that?

Answer 1

Node.js is by itself a server, and cannot be handled by tomcat. You have to install both your servers applications (front-end on node & back-end on tomcat) side by side.

As your front-end files will not be served by tomcat, you should not install them within tomcat folders and keep them separate (you can still use maven to install them though).

Dependencies files (node_module folder) are needed by the node.js server, you cannot get rid of it.

Also covered in Can node js be run within tomcat server

Answer 2

Ran into similar puzzle, and this is what I did:

1. Created my Webpack project in the root of my whole project, that way I can keep the node_modules folder out of FrontEnd, and still tell Webpack to put the build stuff inside FrontEnd, where my Tomcat application can pick up the index.jsp. (The output folder for this has to me inside the Webpack application, that is what I had to put it in the top root, even if it does not look very organized)

Here is the configuration for output in webpack.production.config:

  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'FrontEnd/src/main/webapp/'), 
    publicPath: '' 
  },

As a result, when you run npm run build in your console, webpack generates the output files and place it inside the FrontEnd:

As last thing, to tell Webpack to generate an JSP file, and also to tell it to clean everything except WEB-INF and META-INF in every build, you will need to add these pluggings to WebPack:

  plugins: [ 
    new CleanWebpackPlugin(['AMS/src/main/webapp/'], {
        exclude: ['WEB-INF', 'META-INF'],
        verbose: true
    }),
    new HtmlWebpackPlugin({ 
      filename:'index.jsp' 
    })
  ]

I hope it helps.. Good Luck!!