Deploy Angular 2+ to GAE using Maven

For a big project we have in my company, we needed to deploy an angular application (version 6) to the google cloud infrastructure (GAE). I'll show you step by step how you can deploy an angular application to the GAE by using Maven.

My configuration: Java 8 and Maven 3.5

1. Create a GCP project

Create a Google Cloud Project (GCP) through your Google Cloud Console. You will need the app ID for the following steps. You will need also to install the latest version of the App Engine SDK and add the directory to your PATH

2. Create a new project using maven command

Go to the directory where you want to build the project and open a terminal at this location.

On your terminal invoque this maven command to create an empty App Engine project:

	mvn archetype:generate
	-Dappengine-version=1.9.64
	-Djava8=true
	-DCloudSDK_Tooling=false
	-Dapplication-id=your-app-id
	-Dfilter=com.google.appengine.archetypes:appengine-skeleton-archetype

view raw MAVEN_GAE_EMPTY_PROJECT hosted with ❤ by GitHub

When prompted, you should accept default values (archetype, version...) and enter the groupId (your namespace), the artifactId (project name), version (accept default), package (accept default).

When your project successfully finishes, you can remove all demo files (HelloAppEngine.java, HelloAppEngineTest.java and index.jsp) and clean your web.xml.

3. Create a GIT Repository

Clone your git repository in the directory of your choice.  Copy the empty App Engine project in this directory and commit your changes.

4. Create an angular 2+ application using Angular CLI

In your local git repository, open a terminal and invoque the following command to create a new directory called 'angular' in src/main :

	cd src/main/
	mkdir angular

view raw MAVEN_GAE_CD_MAIN hosted with ❤ by GitHub

You need to have at least de Node.js version 8.x and npm version 5.x. You must install the angular CLI globally on your computer.

npm install -g @angular/cli

view raw MAVEN_GAE_ANGULAR_CLI_INSTALL hosted with ❤ by GitHub

Invoque this command from the newly created directory in order to create a new angular project:

ng new vedrax

view raw MAVEN_GAE_ANGULAR_NEW hosted with ❤ by GitHub

My project name will be in this case vedrax (put whatever you want).

src/main/angular/vedrax

5. Update your POM.xml

In order to integrate angular with your maven process, you need to make change to your pom.xml.

5.1 Clean dist and node_modules directories

We must first clean the dist and node_modules directories of the angular application:

	<plugin>
	<artifactId>maven-clean-plugin</artifactId>
	<version>3.0.0</version>
	<configuration>
	<failOnError>false</failOnError>
	<filesets>
	<fileset>
	<directory>src/main/angular/vedrax/dist</directory>
	<followSymlinks>false</followSymlinks>
	</fileset>
	<fileset>
	<directory>src/main/angular/vedrax/node_modules</directory>
	<followSymlinks>false</followSymlinks>
	</fileset>
	</filesets>
	</configuration>
	</plugin>

view raw MAVEN_GAE_POM_CLEAN hosted with ❤ by GitHub

5.2 Copy angular source to target

	<!-- Copy angular distribution to target directory-->
	<plugin>
	<artifactId>maven-resources-plugin</artifactId>
	<version>3.0.2</version>
	<executions>
	<execution>
	<id>copy-angular-dir</id>
	<phase>validate</phase>
	<goals>
	<goal>copy-resources</goal>
	</goals>
	<configuration>
	<outputDirectory>${basedir}/target/angular</outputDirectory>
	<resources>
	<resource>
	<directory>src/main/angular</directory>
	<includes>
	<include>vedrax/**/*.*</include>
	</includes>
	</resource>
	</resources>
	</configuration>
	</execution>
	</executions>
	</plugin>

view raw MAVEN_GAE_ANGULAR_COPY hosted with ❤ by GitHub

5.3 Angular dependencies and compilation

	<plugin>
	<artifactId>exec-maven-plugin</artifactId>
	<groupId>org.codehaus.mojo</groupId>
	<version>1.6.0</version>
	<executions>
	<!-- Call npm install to resolve the dependencies of the angular UI in package.json -->
	<execution>
	<id>npm install</id>
	<goals>
	<goal>exec</goal>
	</goals>
	<phase>generate-sources</phase>
	<configuration>
	<executable>npm</executable>
	<arguments>
	<argument>install</argument>
	</arguments>
	<workingDirectory>${basedir}/target/angular/vedrax</workingDirectory>
	<target>
	<echo message="Npm install" />
	</target>
	</configuration>
	</execution>
	<!-- Build angular UI with Angular CLI -->
	<execution>
	<id>angular-cli build</id>
	<goals>
	<goal>exec</goal>
	</goals>
	<phase>generate-resources</phase>
	<configuration>
	<executable>npm</executable>
	<arguments>
	<argument>run</argument>
	<argument>build</argument>
	</arguments>
	<workingDirectory>${basedir}/target/angular/vedrax</workingDirectory>
	</configuration>
	</execution>
	</executions>
	</plugin>

view raw MAVEN_GAE_ANGULAR_COMPILATION hosted with ❤ by GitHub

As you can see, we first install and resolve all dependencies via npm install command. After we build the application with the npm run build command. This last invocation will build the angular application according to the package.json file (in production mode --prod):

	{
	"name": "vedrax",
	"version": "0.0.0",
	"scripts": {
	"ng": "ng",
	"start": "ng serve",
	"build": "ng build --prod",
	"test": "ng test",
	"lint": "ng lint",
	"e2e": "ng e2e"
	},
	"private": true,
	"dependencies": {
	"@angular/animations": "^6.0.3",
	"@angular/common": "^6.0.3",
	"@angular/compiler": "^6.0.3",
	"@angular/core": "^6.0.3",
	"@angular/forms": "^6.0.3",
	"@angular/http": "^6.0.3",
	"@angular/platform-browser": "^6.0.3",
	"@angular/platform-browser-dynamic": "^6.0.3",
	"@angular/router": "^6.0.3",
	"core-js": "^2.5.4",
	"rxjs": "^6.0.0",
	"zone.js": "^0.8.26"
	},
	"devDependencies": {
	"@angular/compiler-cli": "^6.0.3",
	"@angular-devkit/build-angular": "~0.6.8",
	"typescript": "~2.7.2",
	"@angular/cli": "~6.0.8",
	"@angular/language-service": "^6.0.3",
	"@types/jasmine": "~2.8.6",
	"@types/jasminewd2": "~2.0.3",
	"@types/node": "~8.9.4",
	"codelyzer": "~4.2.1",
	"jasmine-core": "~2.99.1",
	"jasmine-spec-reporter": "~4.2.1",
	"karma": "~1.7.1",
	"karma-chrome-launcher": "~2.2.0",
	"karma-coverage-istanbul-reporter": "~2.0.0",
	"karma-jasmine": "~1.1.1",
	"karma-jasmine-html-reporter": "^0.2.2",
	"protractor": "~5.3.0",
	"ts-node": "~5.0.1",
	"tslint": "~5.9.1"
	}
	}

view raw MAVEN_GAE_ANGULAR_PACKAGE_JSON hosted with ❤ by GitHub

The working directory will be /target/angular/vedrax.

5.4 Build the war

We need to inform maven that we want our angular distribution (/target/angular/vedrax/dist/vedrax) to be placed at the root of the war:

	<!-- Build the war-->
	<plugin>
	<artifactId>maven-war-plugin</artifactId>
	<version>3.1.0</version>
	<configuration>
	<failOnMissingWebXml>false</failOnMissingWebXml>
	<webResources>
	<resource>
	<directory>${basedir}/target/angular/vedrax/dist/vedrax</directory>
	</resource>
	</webResources>
	</configuration>
	</plugin>

view raw MAVEN_GAE_ANGULAR_WAR hosted with ❤ by GitHub

It's very important to include in the resource directory not only the dist directory but the vedrax directory. So we will have directly all files in the root without the vedrax folder.

5.5 Complete POM.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<project>
	<modelVersion>4.0.0</modelVersion>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<groupId>com.vedrax</groupId>
	<artifactId>vedrax</artifactId>
	<properties>
	<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
	<maven.compiler.source>1.8</maven.compiler.source>
	<maven.compiler.target>1.8</maven.compiler.target>
	<maven.compiler.showDeprecation>true</maven.compiler.showDeprecation>
	<archiveClasses>true</archiveClasses>
	</properties>
	<prerequisites>
	<maven>3.5</maven>
	</prerequisites>
	<dependencies>
	<!-- Compile/runtime dependencies -->
	<dependency>
	<groupId>com.google.appengine</groupId>
	<artifactId>appengine-api-1.0-sdk</artifactId>
	<version>1.9.64</version>
	</dependency>
	<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>javax.servlet-api</artifactId>
	<version>3.1.0</version>
	<type>jar</type>
	<scope>provided</scope>
	</dependency>
	<dependency>
	<groupId>jstl</groupId>
	<artifactId>jstl</artifactId>
	<version>1.2</version>
	</dependency>
	<!-- Test Dependencies -->
	<dependency>
	<groupId>com.google.appengine</groupId>
	<artifactId>appengine-testing</artifactId>
	<version>1.9.64</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>com.google.appengine</groupId>
	<artifactId>appengine-api-stubs</artifactId>
	<version>1.9.64</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>com.google.appengine</groupId>
	<artifactId>appengine-tools-sdk</artifactId>
	<version>1.9.64</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>com.google.truth</groupId>
	<artifactId>truth</artifactId>
	<version>0.33</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>junit</groupId>
	<artifactId>junit</artifactId>
	<version>4.12</version>
	<scope>test</scope>
	</dependency>
	<dependency>
	<groupId>org.mockito</groupId>
	<artifactId>mockito-all</artifactId>
	<version>2.0.2-beta</version>
	<scope>test</scope>
	</dependency>
	</dependencies>
	<build>
	<!-- for hot reload of the web application-->
	<outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory>
	<plugins>
	<plugin>
	<groupId>com.google.appengine</groupId>
	<artifactId>appengine-maven-plugin</artifactId>
	<version>1.9.64</version>
	<configuration>
	<appId>your app ID here</appId> <!-- Override appengine-web.xml <project> -->
	<version>1</version>
	<fullScanSeconds>1</fullScanSeconds>
	<retainUploadDir>true</retainUploadDir>
	</configuration>
	</plugin>
	<plugin>
	<groupId>org.codehaus.mojo</groupId>
	<artifactId>versions-maven-plugin</artifactId>
	<version>2.3</version>
	<executions>
	<execution>
	<phase>compile</phase>
	<goals>
	<goal>display-dependency-updates</goal>
	<goal>display-plugin-updates</goal>
	</goals>
	</execution>
	</executions>
	<configuration>
	<excludes>
	<exclude>javax.servlet:javax.servlet-api</exclude>
	<exclude>com.google.guava:guava</exclude> <!-- avoid android version -->
	</excludes>
	</configuration>
	</plugin>
	<!-- Build the war-->
	<plugin>
	<artifactId>maven-war-plugin</artifactId>
	<version>3.1.0</version>
	<configuration>
	<failOnMissingWebXml>false</failOnMissingWebXml>
	<webResources>
	<resource>
	<directory>${basedir}/target/angular/vedrax/dist/vedrax</directory>
	</resource>
	</webResources>
	</configuration>
	</plugin>
	<plugin>
	<artifactId>maven-compiler-plugin</artifactId>
	<version>3.6.1</version>
	</plugin>
	<!-- Delete dist and node_modules directories in the angular folder -->
	<plugin>
	<artifactId>maven-clean-plugin</artifactId>
	<version>3.0.0</version>
	<configuration>
	<failOnError>false</failOnError>
	<filesets>
	<fileset>
	<directory>src/main/angular/vedrax/dist</directory>
	<followSymlinks>false</followSymlinks>
	</fileset>
	<fileset>
	<directory>src/main/angular/vedrax/node_modules</directory>
	<followSymlinks>false</followSymlinks>
	</fileset>
	</filesets>
	</configuration>
	</plugin>
	<plugin>
	<artifactId>maven-install-plugin</artifactId>
	<version>2.5.2</version>
	</plugin>
	<plugin>
	<artifactId>maven-surefire-plugin</artifactId>
	<version>2.20</version>
	</plugin>
	<plugin>
	<artifactId>maven-site-plugin</artifactId>
	<version>3.6</version>
	</plugin>
	<!-- Copy angular distribution to target directory-->
	<plugin>
	<artifactId>maven-resources-plugin</artifactId>
	<version>3.0.2</version>
	<executions>
	<execution>
	<id>copy-angular-dir</id>
	<phase>validate</phase>
	<goals>
	<goal>copy-resources</goal>
	</goals>
	<configuration>
	<outputDirectory>${basedir}/target/angular</outputDirectory>
	<resources>
	<resource>
	<directory>src/main/angular</directory>
	<includes>
	<include>vedrax/**/*.*</include>
	</includes>
	</resource>
	</resources>
	</configuration>
	</execution>
	</executions>
	</plugin>
	<plugin>
	<artifactId>exec-maven-plugin</artifactId>
	<groupId>org.codehaus.mojo</groupId>
	<version>1.6.0</version>
	<executions>
	<!-- Call npm install to resolve the dependencies of the angular UI in package.json -->
	<execution>
	<id>npm install</id>
	<goals>
	<goal>exec</goal>
	</goals>
	<phase>generate-sources</phase>
	<configuration>
	<executable>npm</executable>
	<arguments>
	<argument>install</argument>
	</arguments>
	<workingDirectory>${basedir}/target/angular/vedrax</workingDirectory>
	<target>
	<echo message="Npm install" />
	</target>
	</configuration>
	</execution>
	<!-- Build angular UI with Angular CLI -->
	<execution>
	<id>angular-cli build</id>
	<goals>
	<goal>exec</goal>
	</goals>
	<phase>generate-resources</phase>
	<configuration>
	<executable>npm</executable>
	<arguments>
	<argument>run</argument>
	<argument>build</argument>
	</arguments>
	<workingDirectory>${basedir}/target/angular/vedrax</workingDirectory>
	</configuration>
	</execution>
	</executions>
	</plugin>
	<plugin>
	<artifactId>maven-deploy-plugin</artifactId>
	<version>3.1</version>
	</plugin>
	<plugin>
	<artifactId>maven-enforcer-plugin</artifactId>
	<version>1.4.1</version>
	<executions>
	<execution>
	<id>enforce-maven</id>
	<goals>
	<goal>enforce</goal>
	</goals>
	<configuration>
	<rules>
	<requireMavenVersion>
	<version>3.5</version>
	</requireMavenVersion>
	<requirePluginVersions>
	<message>Best Practice is to always define plugin versions!</message>
	<banLatest>true</banLatest>
	<banRelease>true</banRelease>
	<phases>clean,deploy,verify,appengine:run,appengine:deploy,appengine:update,appengine:devappaserver,site</phases>
	</requirePluginVersions>
	</rules>
	</configuration>
	</execution>
	</executions>
	</plugin>
	</plugins>
	</build>
	</project>

view raw ANGULAR_GAE_POM hosted with ❤ by GitHub

Thanks for sharing...