React-Webpack Profile

A Grails profile for creating applications using React-Webpack

Version: 1.1.1.BUILD-SNAPSHOT

Table of Contents

1 Introduction

This profile is based on the approach described in this post Using React with Grails. Please read this post for more information.

This profile is a superset of the webpack profile. It provides a monolithic project structure with React code embedded within the Grails project.

To create an application using the react-weback profile you can use the next command:

grails create-app myapp -profile react-weback

You can also choose this project when generating your project from the Grails Application Forge, either from the web app or via the API:

curl -O start.grails.org/myapp.zip -d profile=react-webpack

Grails Application Forge is a great way to discover the different provided features in the profile.

2 Usage

To get started with this profile, simply run the Grails application using grails run-app or ./gradlew bootRun. The profile will configure the Gradle-node plugin with npm scripts to build the React application on build time. Grails react-webpack profile configures Webpack to bundle React components from src/main/webapp into grails-app/assets. The bundle will be generated once when the app is started.

In order to take advantage of webpack’s "watch" mode to automatically reload changes, you will need to run webpack along with the Grails application. Use npm run webpack or use the Gradle wrapper: ./gradlew webpack

3 Running Tests

Following convention, the client-side tests are located alongside the other React source files in src/main/webapp, and can be run via npm, yarn, or Gradle:

./gradlew mochaTest

4 Upgrade

You can explore the differences between Grails versions, to ease the upgrade of your Grails application created with the react-webpack profile.

5 Guides, Quickcast and Blog Posts

To learn more about the React profiles, check the following Grails Guides & Quickcasts:

The following blog posts would be useful too:

6 Profile Info

You can always get information about the provided command and available features executing grails profile-info react-webpack

You will see an output similar to:

Profile: react-webpack
--------------------
A profile for creating Grails applications with a React frontend using Webpack

Provided Commands:
--------------------
* help - Prints help information for a specific command
* open - Opens a file in the project
* gradle - Allows running of Gradle tasks
* create-controller - Creates a controller
* create-integration-test - Creates an integration test
* create-interceptor - Creates an interceptor
* create-taglib - Creates a Tag Library
* clean - Cleans a Grails application's compiled sources
* compile - Compiles a Grails application
* create-command - Creates an Application Command
* create-domain-class - Creates a Domain Class
* create-service - Creates a Service
* create-unit-test - Creates a unit test
* install - Installs a Grails application or plugin into the local Maven cache
* assemble - Creates a JAR or WAR archive for production deployment
* bug-report - Creates a zip file that can be attached to issue reports for the current project
* console - Runs the Grails interactive console
* create-script - Creates a Grails script
* dependency-report - Prints out the Grails application's dependencies
* list-plugins - Lists available plugins from the Plugin Repository
* plugin-info - Prints information about the given plugin
* run-app - Runs a Grails application
* run-command - Executes Grails commands
* run-script - Executes Groovy scripts in a Grails context
* shell - Runs the Grails interactive shell
* stats - Prints statistics about the project
* stop-app - Stops the running Grails application
* test-app - Runs the applications tests

Provided Features:
--------------------
* babel - Preconfigures webpack with babel-loader and ES6 transpilation
* asset-pipeline - Adds Asset Pipeline to a Grails project
* events - Adds support for the Grails EventBus abstraction
* geb - Adds Geb and webdriver dependencies to run functional tests
* gsp - Adds support for GSP to the project
* hibernate4 - Adds GORM for Hibernate 4 to the project
* hibernate5 - Adds GORM for Hibernate 5 to the project
* json-views - Adds support for JSON Views to the project
* less-asset-pipeline - Adds LESS Transpiler Asset Pipeline to a Grails project
* markup-views - Adds support for Markup Views to the project
* mongodb - Adds GORM for MongoDB to the project
* neo4j - Adds GORM for Neo4j to the project
* rx-mongodb - Adds RxGORM for MongoDB to the project

7 Known Issues

Both of these profiles (as well as the angular profile) leverage the Gradle Node Plugin to wrap the Node.js build tools when running via Grails or Gradle commands. Unfortunately, there are a couple of issues with the underlying Gradle task management with this plugin. In particular, the following two issues are known and being investigated:

  1. Node process sometimes fails to stop when run from Gradle - this is due to an issue in Gradle. You may need to kill the process manually in order to restart the app.

  2. Errors when running React tests via Gradle - this error seems to be specific to the latest versions of macOS. A related issue has been reported against Jest, the testing framework used in this profile for React tests. One workaround is to not use Gradle to manage the Node.js installation - instead, you can install Node manually (or using NVM), and then set the download flag in the Gradle-Node plugin config to false in build.gradle:

node {
    version = '8.7.0'
    yarnVersion = '1.3.2'
    download = false
}

You can now run the tests either using ./gradlew client:test, or yarn test.

8 Support

For support, please use the Grails Community Slack or open an issue on Github