Grails® React Profiles

By Zachary Klein

November 21, 2017

Tags: #react

As of Grails^® 3.3.2, there are now two distinct Profiles for using React in your Grails projects. These profiles are essentially the same as those described in the announcement post, with some updates.

React-Webpack Profile for Grails apps

This profile provides a monolithic project structure with React code embedded within the Grails project. Formerly, to use this version of the profile you had to specific it's version explictly. Now, this profile can be used when creating a new Grails 3.3.2 app like so:

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

Besides the convenience of having a distinct name for the project, the new name better reflects the dependence of the react-webpack profile on its parent profile, webpack. You can use the webpack profile directly if you want to pick your own frontend JavaScript libraries in your project.

The documentation for the react-webpack profile is available at https://grails-profiles.github.io/react-webpack/latest

New Start Task

The react profile now provides both start and bootRun tasks for the client project. bootRun is intended to be used when running both server and client in parallel; otherwise, the client app can now be started using either ./gradlew start or yarn start /npm start.

The documentation for the react profile is available at https://grails-profiles.github.io/react/latest

React 16

Both the react and react-webpack profiles have been upgraded to use React 16. In addition, the react profile is now using the latest (1.0.17, as of time of writing) release of create-react-app.

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.

You might also like ...