How to Add React to a Gradle Project

— Colm Carew 2017/07/26 08:16

• You will need to add the following to the buildscript dependencies :

  classpath "com.moowork.gradle:gradle-node-plugin:0.13"

• You will need to apply the Node Plugin :

  apply plugin: "com.moowork.node"

• Add the following to the very end of the file :

  node {
  	version = '6.10.2'
  	download = true
  }
  
  task bundle {
  	dependsOn(['npmInstall', 'npm_run_bundle'])
  }
  
  task webpack {
  	dependsOn(['npmInstall', 'npm_run_webpack'])
  }
  
  // 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(['bundle'])
  build.dependsOn(['bundle'])

• In the root of your project create a file called .babelrc who's content should be :

  {
    "presets": ["es2015"]
  }

• Create a file called webpack.config.js in the root of the project who's content should be like :

  let path = require('path');
  let webpack = require("webpack");
  
  module.exports = {
      plugins: [
          new webpack.DefinePlugin({ // <-- key to reducing React's size
              'process.env': {
                  'NODE_ENV': JSON.stringify('production')
              }
          }),
          new webpack.optimize.DedupePlugin(), //dedupe similar code
          new webpack.optimize.UglifyJsPlugin(), //minify everything
          new webpack.optimize.AggressiveMergingPlugin()//Merge chunks
      ],
      entry: {
          index: './src/main/webapp/index.js'
      },
      output: {
          path: './src/main/resources/static',
          publicPath: '/assets/',
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  include: path.join(__dirname, 'src/main/webapp'),
                  loader: 'babel',
                  query: {
                      presets: ['es2015', 'react']
                  }
              },
              {
                  test: /\.css$/,
                  loader: 'style!css!'
              },
              {
                  test: /\.svg$/,
                  loader: 'svg-inline'
              },
              {
                  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                  loader: 'url-loader?limit=100000'
              },
              {
                  test: /\.json$/,
                  loader: 'json'
              }
          ]
      }
  }
  ;
  

• For this file note the :

      entry: {
          index: './src/main/webapp/index.js'
      },
      output: {
          path: './src/main/resources/static',
          publicPath: '/assets/',
          filename: 'bundle.js'
      }

• 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/relatively close directory as the index.html file.
• In the root of the project create a package.json file with contents like :

  {
    "name": "react-grails",
    "version": "0.0.1",
    "description": "A profile for creating applications with node-based frontends using webpack",
    "main": "index.js",
    "repository": {},
    "dependencies": {
      "bootstrap": "^3.3.6",
      "react": "^15.4.2",
      "react-bootstrap": "^0.30.0-src.1",
      "react-dom": "^15.4.2",
      "superagent": "^3.5.2",
      "superagent-no-cache": "^0.1.1"
    },
    "scripts": {
      "start": "webpack --progress --watch",
      "bundle": "webpack",
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "license": "ISC",
    "devDependencies": {
      "babel-core": "6.9.1",
      "babel-loader": "6.2.4",
      "babel-preset-es2015": "6.9.0",
      "babel-preset-react": "^6.23.0",
      "css-loader": "^0.27.3",
      "file-loader": "^0.10.1",
      "json-loader": "^0.5.4",
      "style-loader": "^0.16.0",
      "svg-inline-loader": "^0.7.1",
      "url-loader": "^0.5.8",
      "webpack": "1.13.1"
    }
  }

• 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 :

  <!DOCTYPE html>
  <html>
  <head>
      <title>Content Distributor</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
  <div id='root'></div>
  
  <script src="./bundle.js"></script>
  </body>
  </html>

• 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