Show Navigation

Using the React Profile

This guide introduces the React profile for Grails.

Authors: Zachary Klein

Grails Version: 3.3.1

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

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 JAVA_HOME configured appropriately

3 Generate the Application

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

$ grails create-app myApp --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
-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

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.

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:bootRun

Or 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 create-react-app.

5 Do you need help with Grails?

OCI sponsored the creation of this Guide. OCI offers several Grails services:

Free consultation

The OCI Grails Team includes Grails co-founders, Jeff Scott Brown and Graeme Rocher. Check our Grails courses and learn from the engineers who developed, matured and maintain Grails.

Grails OCI Team