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:


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 :



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.



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



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:


5.2 Copy angular source to target


5.3 Angular dependencies and compilation


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):



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:


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


Thanks for sharing...


Comments

Post a Comment

Popular posts from this blog

Spring JPA : Using Specification with Projection

Chip input using Reactive Form