[英]How to integrate ReactJS with spring Boot
I want to integrate ReactJS with Spring-boot and maven but I don't know how.我想将ReactJS与Spring-boot和maven集成,但我不知道如何。
I can use npm to install it but I don't know in which path I will do that.我可以使用 npm 来安装它,但我不知道我会在哪条路径上安装。
npm init
npm install --save react react-dom
See frontend-maven-plugin请参阅前端 Maven 插件
You should add something like this to your pom.xml file您应该将这样的内容添加到 pom.xml 文件中
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.2</version>
<configuration>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v4.4.5</nodeVersion>
<npmVersion>3.9.2</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>webpack build</id>
<goals>
<goal>webpack</goal>
</goals>
</execution>
</executions>
</plugin>
There should be webpack.config.js and package.json together with pom.xml and the webpack is like this应该有 webpack.config.js 和 package.json 以及 pom.xml 和 webpack 是这样的
var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
'./src/main/resources/static/App.js'],
devtool: 'sourcemaps',
cache: true,
// debug: true,
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js',
publicPath: 'http://localhost:8080/yourServletContextHere'
},
resolve: {extensions: ['.js', '.jsx']},
plugins: [
new webpack.HotModuleReplacementPlugin()
,new webpack.LoaderOptionsPlugin({
debug: true
})
],
module: {
loaders: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
},
]
},
devServer: {
noInfo: false,
quiet: false,
lazy: false,
watchOptions: {
poll: true
}
}
};
Have a look through this repository it's from spring.看看这个存储库,它来自春天。 The projects here uses React+SpringBoot+WebpackV1
这里的项目使用React+SpringBoot+WebpackV1
https://github.com/spring-guides/tut-react-and-spring-data-rest https://github.com/spring-guides/tut-react-and-spring-data-rest
Here is the actual tutorial for the above repository, have a read through its very well explained.这是上述存储库的实际教程,请仔细阅读其很好的解释。 https://spring.io/guides/tutorials/react-and-spring-data-rest/
https://spring.io/guides/tutorials/react-and-spring-data-rest/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.