React JS has been a more and more popular front framework these days. Thus, I have decided to use React JS as front framework to help me with my project.

1. Thinking

The front part I decided to use ReactJS and single page applicaion by react-router. And I have no basis of any React js at all. So I will start from the basic.

And the back server I want to use RESTful style. Use all interface to make it as API for my front side. And I am going to use MAVEN to help build my project. Spring + spring MVC to deal with the back side.

2. React framework

https://reactjs.org/
This website has given us a good tutorial on how to use react. And we don’t have to learn to use and configure the complex webpack.

Now we all use create-react-app this tool to create react app.
https://github.com/facebookincubator/create-react-app
Just run

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

And after creating the app, we will see the directory like this

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Just run npm build. We can get all the js and css we needed into a single file and a index.html to create our front page resources.

3. Java back Side

create Maven webapp project using IDEA

The pom.xml is like

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.successfactors</groupId>
  <artifactId>classexceptionanalyze</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>classexceptionanalyze Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.10</version>
      <scope>test</scope>
    </dependency>

    <!-- Spring -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>4.0.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.2.1</version> <!-- makesure correct version here -->
    </dependency>
    <!-- json数据 -->
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.9.13</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>

    <!-- hibernate -->
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-core</artifactId>
      <version>4.3.8.Final</version>
    </dependency>
    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.2</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.34</version>
    </dependency>

    <dependency>
      <groupId>com.squareup.okhttp3</groupId>
      <artifactId>okhttp</artifactId>
      <version>3.3.0</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.0</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/log4j/log4j -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.17</version>
    </dependency>

  </dependencies>
  <build>
    <finalName>classexceptionanalyze</finalName>
      <plugins>
          <plugin>
              <groupId>org.apache.maven.plugins</groupId>
              <artifactId>maven-compiler-plugin</artifactId>
              <configuration>
                  <source>1.6</source>
                  <target>1.6</target>
              </configuration>
          </plugin>
      </plugins>
  </build>
</project>

How to add the React Part into the maven project and deploy it into docker and tomcat.

For docker:
1. create docker-compose.yml

version: '2'
services:
  web:
    image: tomcat:latest
    ports:
     - "8080:8080"
    volumes:
     - ./target/classexceptionanalyze.war:/usr/local/tomcat/webapps/ROOT.war
     - ./target/classexceptionanalyze:/usr/local/tomcat/webapps/ROOT
    expose:
     - 8080

This helps you to map 8080 from docker to your local environment.
And we use tomcat to deploy our webapp. Then the volumes means that we map this war to the tomcat inside the docker and named it ROOT.war. The second one is exactly same with the first. By this script, we can use docker-compose to start deploy our application here.

1. mv front content into your Java back environment

This helps you to combine your front content and back content together so that you can update it easily.

1. build your start script

This is the startup.sh

cd my-app
npm run build
cd ..
mkdir -p ~/WEB-INF
mv src/main/webapp/WEB-INF/* ~/WEB-INF
rm -r src/main/webapp
mkdir src/main/webapp
mv ~/WEB-INF src/main/webapp
mv my-app/build/* ~/WEB-INF src/main/webapp
mvn clean install -DskipTests
docker-compose up

By one commend you can start your allication easily now.
From build React resources and maven build your project and deploy your project into the server.

sh startup.sh

That’s all we need to build a Spring and React Maven project.