grails create-app myapp -profile react-weback
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:
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:
-
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.
-
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