In this tutorial we will show how to create a website with client in React JS and Grails as a backend server.
For the purpose if this tutorial we will use IntelliJ IDEA as a development environment on MAC.
The easiest way to start making React apps with Grails is to create a Grails project with a react profile. Refer to the official grails website for latest installation instructions.
We will create an empty client-server app by running the following command in a command line:
$ grails create-app reactGrailsApp --profile=react
Make sure that latest Grails and Java JDK are installed on your system. If you are unsure, check the versions by running a
grails -v command:
| Grails Version: 3.3.9
| JVM Version: 1.8.0_171
1. Open Intellij and select File -> New -> Project from existing Sources
There may be some errors that will appear just after importing the project. They are often easy to solve by following the steps proposed by the IDEA.
In our case the error “Gradle DSL method not found: ‘runtimeOnly()'” is caused by the old gradle distributionUrl reference.
In command line run:
The application will mount at port 3000 per default.
You may sometimes encounter an error that the port is already in use:
Something is already running on port 3000.
To fix it on MAC go to your Terminal window, run a search for processes running on port 3000 and kill it:
netstat -vanp tcp | grep 3000
All changes should be instantly seen in your browser upon saving the file:
Now you may continue making frontend features writing React JS code in the folder “client“.
Backend code goes into the folder “server” and needs to be written in Grails.