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
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.
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).
Thanks for sharing...
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.
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...
Thanks
ReplyDeleteGreat collection and thanks for sharing this info with us. Waiting for more like this.
ReplyDeleteBest AngularJS Training in Chennai
Angularjs Training institute in Chennai
AngularJS Training in Chennai
Angular 2 Training in Chennai
Angular 7 Training in Chennai
PHP Training in Chennai
Web Designing course in Chennai
Web Development courses in Chennai
React JS Training in Chennai
AngularJS Training
Angular 8 Training in Chennai
AngularJS Interview Questions
thank you so much , it was very useful to me. and congrats for your efforts..
ReplyDeleteC and C++ Training Institute in chennai | C and C++ Training Institute in anna nagar | C and C++ Training Institute in omr | C and C++ Training Institute in porur | C and C++ Training Institute in tambaram | C and C++ Training Institute in velachery
Thanks for sharing this fantastic information.
ReplyDeleteAngularJS training in chennai | AngularJS training in anna nagar | AngularJS training in omr | AngularJS training in porur | AngularJS training in tambaram | AngularJS training in velachery