Show Navigation

Combining the Angular Profile Projects

This guide will take you through the process of creating a single build starting with the Angular 2 profile.

Authors: James Kleeh

Grails Version: 4

1 Grails Training

Apache Grails Training

Apache Grails is now part of the Apache Software Foundation. The community-maintained training catalog is being migrated; in the meantime see the Learning page for current resources, recorded talks, and links to other community-supplied training material.

2 Getting Started

The Angular 2 profile in Grails 3 provides a multi project build out of the box. Today there are many options for how to build and package your applications. It is important to decide for yourself what is best for your needs. For those who prefer to have the client side application bundled together with their Grails application, this guide is for you. In this guide I will cover some quick simple steps to get up and running with a combined project starting from the multi project build created from the Angular 2 profile.

2.1 What you will need

To complete this guide, you will need the following:

  • Some time on your hands

  • A decent text editor or IDE

  • JDK 11 or greater installed with JAVA_HOME configured appropriately

2.2 How to complete the guide

To get started do the following:

or

The Grails guides repositories contain two folders:

  • initial Initial project. Often a simple Grails app with some additional code to give you a head-start.

  • complete A completed example. It is the result of working through the steps presented by the guide and applying those changes to the initial folder.

To complete the guide, go to the initial folder

  • cd into grails-guides/angular2-combined/initial

and follow the instructions in the next sections.

You can go right to the completed example if you cd into grails-guides/angular2-combined/complete

3 Writing the Application

3.1 Combining the Applications

Since a single project is desired, the settings.gradle file is no longer necessary.

rm -f settings.gradle

Move all of the contents of server to the current directory

mv server/* ./

Delete the server directory

rm -r server

Move the client directory to the src/main directory

mv client src/main/

Delete the no longer used build.gradle file in the client directory

rm -f src/main/client/build.gradle

Now you have a single Grails project with the client side application living in src/main/client!

3.2 Combining the Builds

It would be ideal if the application would just "work" by executing run-app similar to how typical Grails applications with the web profile do. In order to achieve that, additional configuration is required.

To support the build process, first we need to add some NPM scripts. Add the following to the package.json file.

src/main/client/package.json
{
  ...
  "scripts": {
    "build": "ng build --prod",
    "buildDev": "ng build",
    "buildWatch": "ng build --watch=true",
  ...
}

The next step is to add the Gradle Node Plugin.

build.gradle
buildscript {
    dependencies {
        classpath "com.moowork.gradle:gradle-node-plugin:1.0.1"
    }
}

apply plugin:"com.moowork.node"

Now that we have the plugin, we need to configure it and use it to create some tasks to hook into the build process of the Grails application.

build.gradle
node {
    version = '6.9.1'
    download = true
    nodeModulesDir = file("src/main/client")
}

task buildClientDev(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'build'
    description = 'Compile client side assets for development'
    args = ['run', 'buildDev']
}

task buildClient(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'build'
    description = 'Compile client side assets for production'
    args = ['run', 'build']
}

task buildClientWatch(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'application'
    description = 'Builds and watches the client side assets for rebuilding'
    args = ['run', 'buildWatch']
}

task clientTest(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'verification'
    description = 'Executes client side unit tests'
    args = ['run', 'test']
}

task clientIntegrationTest(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'verification'
    description = 'Executes client side integration tests'
    args = ['run', 'e2e']
}

bootRun.dependsOn(buildClientDev)

war.dependsOn(buildClient)

test.dependsOn(clientTest)

integrationTest.dependsOn(clientIntegrationTest)

clean {
    delete fileTree(dir: "src/main/webapp")
}

3.3 Changing Configuration

We need to change where the client side assets will be stored after they are built and bundled. Modify the apps.outDir setting to point to the webapp folder.

src/main/client/angular-cli.json
...
  "apps": [
    {
      "root": "src",
      "outDir": "../webapp",
...

Because CORS is no longer a requirement of this application, it should be turned off in configuration. Find grails.cors.enabled and remove the configuration or set it to false.

grails-app/conf/application.yml
grails:
    cors:
        enabled: false

In order to resolve our index.html without the /static prefix, it is necessary to set the resources pattern.

grails-app/conf/application.yml
grails:
    resources:
        pattern: /**

When a user vists your page, it should direct them to the client side application. By default in a rest-api application, it will show some metadata about your application. To change that behavior, modify UrlMappings.groovy.

grails-app/controllers/angular2/combined/UrlMappings.groovy
"/"(uri: "/index.html")

4 Running the Application

That is everything required to combine the Angular 2 multi project build into a single project.

To run the application use the ./gradlew bootRun command which will start the application on port 8080.

5 Do you need help with Grails?

Help with Apache Grails

Apache Grails is supported by an active community of contributors and the Apache Software Foundation. If you need help working through a guide, want to discuss the framework, or have run into something that looks like a bug, the channels below are the right place to start.

For Grails plugins, see the matching project on the apache org or the plugin’s own GitHub repository.