Grails Training - Developed and delivered by the folks who created and actively maintain the Grails framework!.

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 and client. 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.

To complete this guide you will need the following:

To get started with this profile, specify it when generating your app:

You can also generate your project using the Application Forge, either from the web interface or using the following curl command:

Take a look at the directory structure - you will see a typical Gradle multi-project build, with separate client and server projects.

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.

The 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 package.json.

You may edit the contents of this file to add additional variables or to change the SERVER_URL to point to another backend server.

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:

The client 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:

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.

Again, please see the create-react-app documentation for more information on leveraging these scripts and the other features provided by create-react-app.