1 Grails Training
Grails Training - Developed and delivered by the folks who created and actively maintain the Grails framework!.
2 Getting Started
In this guide you are going to create a multi-project build, with both a Grails application and a React front-end app, using the React profile for Grails.
This profile will generate two applications,
server will be a Grails 3 application built using the
rest-api profile, which includes support for creating domain resources, restful controllers, and JSON views.
client is a standalone React app generated with the
create-react-app CLI, with some customizations. The
client app includes a complete UI implemented using React-Bootstrap, and is configured to communicate with the Grails backend via REST. The project also includes a functioning test suite and scripts for building and testing the app - see the
create-react-app project documentation for more information.
2.1 What you will need
To complete this guide you will need the following:
10 minutes or less
Grails 3.2.1 or greater installed
JDK 1.7 or greater installed with
3 Generate the Application
To get started with this profile, specify it when generating your app:
$ grails create-app myApp --profile=react
You can also generate your project using the Application Forge, either from the web interface or using the following
curl -O start.grails.org/myApp.zip -d version=3.3.2 -d profile=react
Take a look at the directory structure - you will see a typical Gradle multi-project build, with separate client and server projects.
drwxr-xr-x 9 zak staff 306 Nov 1 13:15 client drwxr-xr-x 3 zak staff 102 Nov 1 13:10 gradle -rwxr--r-- 1 zak staff 4971 Nov 1 13:10 gradlew -rwxr--r-- 1 zak staff 2314 Nov 1 13:10 gradlew.bat drwxr-xr-x 8 zak staff 272 Nov 1 13:12 server -rw-r--r-- 1 zak staff 26 Nov 1 13:10 settings.gradle
server is of course our Grails application. The profile will generate a Grails app using the
rest-api profile, which provides support for creating domain classes as restful resources as well as JSON and Markup views.
client is our React app.
-rw-r--r-- 1 zak staff 44412 Nov 1 13:10 README.md -rw-r--r-- 1 zak staff 669 Nov 1 13:10 build.gradle -rw-r--r-- 1 zak staff 404 Nov 1 13:10 package.json drwxr-xr-x 4 zak staff 136 Nov 1 13:10 public drwxr-xr-x 10 zak staff 340 Nov 1 13:10 src
client project structure (with the exception of
build.gradle, which is specific to the react profile) is all courtesy of
create-react-app, and includes an excellent README file. In short, the
src/ directory is where the React code is kept,
public/ is for public resources that you wish to make available from your React app without going through webpack’s bundling - this directory also includes a template
index.html file which is used to generate the React app’s home page. Again, see the
create-react-app documentation for more details.
One significant customization of the
client project (besides the Grails-branded UI) is the file
src/config.js. This file is used to specify the URL of the backend, by default
http://localhost:8080. It also obtains the current version of the React app from
import pjson from './../package.json'; export const SERVER_URL = 'http://localhost:8080/'; export const CLIENT_VERSION = pjson.version; export const REACT_VERSION = pjson.dependencies.react;
You may edit the contents of this file to add additional variables or to change the
SERVER_URL to point to another backend server.
4 Running the Application
This profile also defines a set of custom Gradle tasks, including a bootRun task to startup the client app. You can either start up the server and client apps separately:
./gradlew server:bootRun //in another terminal ./gradlew client:start
build.gradle file also includes a
bootRun (for consistency with the
server project), which means you can take advantage of Gradle’s parallel execution to run both client and server apps in a single command:
./gradlew bootRun -parallel
Other tasks defined in client wrap the create-react-app scripts for building and testing the React app. You can run them with the Gradle wrapper, or run the npm scripts directly if you have npm installed.
./gradlew client:test //or, from the client project dir: npm test ./gradlew client:build //or, from the client project dir: npm run build
Again, please see the create-react-app documentation for more information on leveraging these scripts and the other features provided by