Creating a Grails backend for an AngularJS app
Recently I wanted to dig a bit into Grails which is a full stack web application framework for the JVM. Grails "takes advantage of the Groovy programming language and convention over configuration to provide a productive and stream-lined development experience".
Before installing Grails itself make sure Java is installed on your box and the JAVA_HOME environment variable is set accordingly. On my box (Ubuntu Trusty) it looks like this in my ~/.bashrc:
export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64
export PATH="$PATH:$JAVA_HOME/bin"
I downloaded Grails 2.4.4, installed it in /opt/grails-2.4.4 and added the following lines to my ~/.bashrc:
export GRAILS_HOME=/opt/grails-2.4.4
export PATH="$PATH:$GRAILS_HOME/bin"
Now you should be able to run grails. The following command should show you the version of Grails:
grails --version
As an IDE a tried the Groovy/Grails Tool Suite developed by SpringSource. To be extact I am using the default STS distribution and installed the STS Grails plugin. Creating a new Grails project is pretty simple: Open the "New Grails Project" dialog, give the project a name and click on the "finish" button to let STS generate the Grails project for you.
To start the Grails application open a console, change to the folder where your project is located and run the following command:
grails run-app
Grails will show you the url where your application is running on. Open a browser, point it to the url and you should be able to see the default Grails website. That was the easy part. Since I wanted to use Grails to write an REST API for an AngularJS application which was generated with yeoman and the yeoman-generator-angular I was looking for a good way to integrate both tools. Luckily I there's an yeoman plugin for Grails which can be installed pretty easily. Add the following line to your BuildConfig.groovy (search for the plugin configuration in that file):
runtime ":yeoman-frontend:0.2"
To install the additional runtime you need to refresh the Grails dependencies. To do that choose Grails Tools > Refresh dependencies from the project's context menu. As a last step it is needed to replace the content of views/index.gsp with:
<yo:index/>
Before you are able to let yeoman generate the AngularJS skeleton application for you, you need to install yeoman and the yeoman-generator-angular with npm:
npm install -g yo yeoman-generator-angular
The AngularJS application will live in the grails-app/frontend folder. Change to that folder and kick of the yeoman generation process:
cd grails-app/frontend/
yo angular myapp
If you restart the Grails application again, Grails should launch the application and the AngularJS frontend:
grails stop-app && grails run-app
As it turns out the Grails yeoman-frontend plugin will launch the Grails application in an Tomcat instance running on port 8080 and the AngularJS application in an own webserver running on port 9000. This means we need to configure CORS (Cross-origin resource sharing) to be able to let the AngularJS frontend talk to the Grails application. Luckily there's also a Grails plugin for that. Add the following line to your BuildConfig.groovy and refresh the project's dependencies:
compile ":cors:1.1.6"
To configure which CORS headers should be set edit the Config.grooy file and add the following line:
cors.headers = ['Access-Control-Allow-Origin': '*']
Setup done. Next up: Start developing the API ;)