A starter for a basic React/Webpack configuration within a Grails app
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gradle/wrapper
grails-app
src
.babelrc
.gitignore
build.gradle
gradle.properties
gradlew
gradlew.bat
mocha.config.js
package.json
readme.md
server.js
settings.gradle
webpack.config.js
webpack.hot.config.js

readme.md

#Grails/React Starter A starter project for a basic React/Webpack configuration within a Grails app, with support for hot-loading with webpack-dev-server.

Also uses the mocha test framework for testing React components.

##Notes:

  • Gradle-node plugin is used to wrap node/npm tasks and unify the build process
  • Minimal webpack config is provided
  • Configurable webpack-dev-server with react-hot-load support is provided (includes custom GSP TagLib to handle dynamic linking to WDS bundles)
  • Babel transpiler is used to support JSX & ES6 code
  • Loading images from JSX and from CSS is demonstrated
  • React-bootstrap is demonstrated
  • Test bootstrap is provided (mocha + expect + jsdom)

###Please Note! In order to use react-hot-load for instant Javascript updates without reloading the page, it will be necesssary to run both the Grails app and the webpack-dev-server simultaneously.

##Setup: ###Option 1: (With webpack-dev-server and react-hot-load):

  • grails run-app or ./gradlew bootRun to start the app on http://localhost:8080
  • npm start to start the webpack-dev-server on http://localhost:3000
  • The webpack-dev-server will generate the bundle.js in memory and automatically upate the browser when it detects a change in the source files.
  • When the app is run in production or packaged as a war/jar, the bundle will be statically generated (without WDS) and included with the application distribution.

###Option 2: (With statically generated webpack bundle - you will need to run webpack yourself after changing Javascript or use webpack --watch)

  • Edit application.yml - change webpack.dev-server.enabled to false.
  • grails run-app or ./gradlew bootRun to start the app on http://localhost:8080
  • The Gradle-Node plugin is configured and will take care of installing node if necessary, and installing dependencies
  • Custom Gradle-Node tasks take care of generating the bundle.js when the app is started and when the app the packaged (as a war or jar file)
  • E.g, to run webpack in watch mode, use ./gradlew npm_run_webpack, or npm run webpack (if you have npm installed locally)

##Tests:

  • React tests can be run via npm: npm run test, or with Gradle: ./gradlew npm_run_test

##Conventions:

  • React source files are placed under grails-app/views/src (this can be changed - edit webpack.config.js as desired)
  • Barebones (and annotated) webpack.config.js with babel, css, url and img loaders configured
  • webpack-generated bundle.js is placed under grails-app/assets and delivered via the Grails Asset Pipeline

##WebpackTagLib:

  • WebpackTagLib provided to dynamically load bundle.js from webpack-dev-server if enabled & running, otherwise loads via asset pipeline. Use the tag <webpack:bundle bundle='bundle.js' devServer='false' />. All attributes are optional (defaults shown).

##Coming soon:

  • Loading of images/assets from the asset-pipeline from React/JSX
  • Redux?
  • Websockets?
  • Suggestions?