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