Sunday, November 18, 2018

idea[2018.2] create spring mvc and react mixing project

1. create spring mvc project
2. bash change current directory to "{project dir}/src/main", create reactproject with "create-react-app webapp.mobile.react"
3 modify "package.json" add "homepage": "./",
because default file link start with /
4. mark "webapp.mobile.react" directory as "sources root" in idea
5. create an ant file named "build.xml" in project root, fill with:

<?xml version="1.0" encoding="UTF-8"?>
<project name="wechatlogin" default="build">

  <property name="mobile.react" value="${basedir}/src/main/webapp.mobile.react"/>

  <target name="build" description="hello">
    <exec executable="/usr/bin/npm" dir="${mobile.react}">
      <arg value="run"/>
      <arg value="build"/>
    </exec>
  </target>
</project>

6. idea: "view -> tool window -> Ant Build" import build.xml
7. idea project config -> modules: config module "web" as follow:
a. web source directory: add "webapp.mobile.react/build" to "/mobile"
b. check "source roots" on the bottom with "java","resource","webapp.mobile.react"
8. idea config artifact: create new "web application" explorer or archive
a. config output layout, add java class, lib into WEB-INF output dir, add web facet resource to output root dir
b in "pre process" tab, checked "run ant target: build"
10. deploy as same as normal, eg: deploy to /spring3

finnal:
http://ip/spring3/ [test ok]
http://ip/spring3/mobile [test ok]

No comments: