Using the Vue.js Grails Profile
This guide introduces the Vue.js profile for Grails.
Authors: Zachary Klein
Grails Version: 3.3.3
1 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 an application using the Vue profile for Grails. This profile will generate a multi-project build, which includes a Grails application, and a Vue.js front-end app that access the RESTful API provided by 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 Vue.js app generated with the Vue-CLI (using the webpack template). The client app includes a complete UI implemented using Vue-Router and the the UIV (Bootstrap) library, and is configured to communicate with the Grails backend via REST. The client project also includes a functioning test suite (unit & e2e tests) and scripts for building and testing the app - see the vue-cli template 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_HOMEconfigured appropriately
3 Generate the Application
To get started with this profile, specify it when generating your app:
$ grails create-app myApp --profile=vueYou can also generate your project using the Application Forge, either from the web interface or using the following curl command:
curl -O start.grails.org/myApp.zip -d version=3.3.3 -d profile=vueTake 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.gradleThe server project is 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, CORS enabled by default, as well as JSON and Markup views.
client is our Vue 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 srcThe client project structure (with the exception of build.gradle, which is specific to the profile) is all courtesy of Vue-CLI’s webpack template, and includes an excellent README file. In short, the src/ directory is where the Vue source code is kept, with subdirectories for /components , /assets, and config.
The static directory is for public resources that you wish to make available from your Vue app without being bundled by webpack. There is also a root index.html file which is used to generate the Vue app’s home page. Again, see the Vue-CLI template documentation for more details.
If you edit the file config/dev.env.js, you will see that the profile has added an additional configuration property to the template defaults:
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
SERVER_URL: '"http://localhost:8080"' (1)
})| 1 | SERVER_URL points to the default address of the server Grails application, and is used as the base URL for REST calls from the Vue app. |
You can change the existing configuration properties or add new ones to this file; they will apply to the "development" environment (note that the client environments are based on the scripts in client/package.json, and are not related to Grails' environments).
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:bootRunThis will start the Grails application, which will be available at http://localhost:8080.
./gradlew client:startThis will start the dev server for the Vue application, which will be available at http://localhost:3000.
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:
./gradlew bootRun -parallelThere are several more client tasks which "wrap" the npm scripts in package.json, for building and testing the Vue app. You can run them with the Gradle wrapper, or run the scripts directly if you have npm installed.
$ ./gradlew client:test
$ ./gradlew client:build$ npm test
$ npm run buildAgain, please see the template documentation for more information on leveraging these scripts and the other features provided by Vue-CLI.
Rember to check Grails Vue Profile documentation to learn more.