User Tools
Writing /app/www/public/data/meta/toolsandtechnologies/reactwithgradle.meta failed
toolsandtechnologies:reactwithgradle
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| toolsandtechnologies:reactwithgradle [2017/07/26 16:17] – created 1carew1 | toolsandtechnologies:reactwithgradle [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== How to Add React to a Gradle Project ====== | ||
| + | --- // | ||
| + | ===== Modifications to build.gradle ===== | ||
| + | * You will need to add the following to the buildscript dependencies : < | ||
| + | * You will need to apply the Node Plugin : < | ||
| + | * Add the following to the very end of the file : < | ||
| + | version = ' | ||
| + | download = true | ||
| + | } | ||
| + | |||
| + | task bundle { | ||
| + | dependsOn([' | ||
| + | } | ||
| + | |||
| + | task webpack { | ||
| + | dependsOn([' | ||
| + | } | ||
| + | |||
| + | // This is spring boot specific, it is for hot reloading static resouces such as index.html which is where your bundle.js is called from | ||
| + | bootRun { | ||
| + | addResources = true | ||
| + | } | ||
| + | |||
| + | |||
| + | bootRun.dependsOn([' | ||
| + | build.dependsOn([' | ||
| + | |||
| + | ===== New files in Project ===== | ||
| + | * In the root of your project create a file called .babelrc who's content should be :< | ||
| + | " | ||
| + | } | ||
| + | </ | ||
| + | * Create a file called webpack.config.js in the root of the project who's content should be like : < | ||
| + | let webpack = require(" | ||
| + | |||
| + | module.exports = { | ||
| + | plugins: [ | ||
| + | new webpack.DefinePlugin({ // <-- key to reducing React' | ||
| + | ' | ||
| + | ' | ||
| + | } | ||
| + | }), | ||
| + | new webpack.optimize.DedupePlugin(), | ||
| + | new webpack.optimize.UglifyJsPlugin(), | ||
| + | new webpack.optimize.AggressiveMergingPlugin()// | ||
| + | ], | ||
| + | entry: { | ||
| + | index: ' | ||
| + | }, | ||
| + | output: { | ||
| + | path: ' | ||
| + | publicPath: '/ | ||
| + | filename: ' | ||
| + | }, | ||
| + | module: { | ||
| + | loaders: [ | ||
| + | { | ||
| + | test: /\.js$/, | ||
| + | include: path.join(__dirname, | ||
| + | loader: ' | ||
| + | query: { | ||
| + | presets: [' | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | test: /\.css$/, | ||
| + | loader: ' | ||
| + | }, | ||
| + | { | ||
| + | test: /\.svg$/, | ||
| + | loader: ' | ||
| + | }, | ||
| + | { | ||
| + | test: / | ||
| + | loader: ' | ||
| + | }, | ||
| + | { | ||
| + | test: /\.json$/, | ||
| + | loader: ' | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | } | ||
| + | ; | ||
| + | |||
| + | </ | ||
| + | * For this file note the : < | ||
| + | index: ' | ||
| + | }, | ||
| + | output: { | ||
| + | path: ' | ||
| + | publicPath: '/ | ||
| + | filename: ' | ||
| + | }</ | ||
| + | * entry is where the main React component is so make this where you want all the react code to be. Output path is where the bundle file will go. Ensure this is in the same directory/ | ||
| + | * In the root of the project create a package.json file with contents like : < | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | * Create you index.html file in a close directory to where your bundle.js goes. If you are replacing the root div in React then the index.html should look something like : < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <link rel=" | ||
| + | </ | ||
| + | < | ||
| + | <div id=' | ||
| + | |||
| + | <script src=" | ||
| + | </ | ||
| + | </ | ||
| + | * Run npm install and npm run bundle. Ensure the bundle.js file is created where the output should be. You will obviously need node installed locally for this. Once bundle.js is building through node, delete the bundle.js file and run ./gradlew build and ensure the bundle.js creates | ||
| + | * In your backend you will obviously need some controller that renders the index.html or that uses the bundle.js | ||
Page Tools
