Deploying Angular 5 App on Google App Engine

Hi Folks.

I have been working on Angular 5, Spring Boot and Java ecosystem. Recently one of my assignment includes Google cloud as deployment platform. The application front end is in Angular 5 and that needs to be deployed on Google cloud.  This article summarizes how to deploy Angular application on Google Cloud Platform.

Google cloud platforms offers 2 options:

1. Google Compute Engine: GCE acts as Infrastructure-as-a-service i.e. IaaS
2. Google App Engine: GAE acts as Platform-as-a-service i.e. PaaS. Its goal – let developers focus on code while google manage infrastructure for you. I’m using GAE in this article.

So to start with the prerequisites are:

1. Angular Application that need to deploy.
2. Setup Google Cloud account : while writing this article one can sign up for the google cloud services for free for a year. Refer GCP Console

 

1.  Lets Build Angular 5 App:

To demonstrate this just create a sample application or build your application in ‘prod’ mode. Luckily few days back I was working on PrimeNG p-treeTable and selected same application to deploy on GCP.

To build the app go to angular app directory and run the following command

ng build –prod

you should see similar output as below screenshot –

This will result into creation of few bundles/chunks and creation of dist folder in angular project directory.

 

Note: Visual studio code ide is being used to develop Angular code.

Once this is done, now create a config file in your project (at main src level ). This file will be used by GAE to deploy angular app. Name this file as app.yaml and paste following code in file:

runtime: python27
api_version: 1
threadsafe: true
handlers:
– url: /
static_files: primeTree/index.html
upload: primeTree/index.html
– url: /
static_dir: primeTree

Note: Please change the path as per your dist folder and subfolders. In my case dist folder contains primeTree directory and index.html it it.

That’s it. Now lets move to GCP setup.

2. Setting up Google Cloud for deployment:

• Go to the google cloud console and login with your google account.
• create a new project to deploy your angular app e.g. angular-gcp-app
• Now to store the app artifacts we need to create a bucket. Go to the Storage and click on create bucket.
• Give unique name to your bucket i.e. angular-matrix-poc and keep rest thing as it is.
• Once bucket is created click on upload folder button to upload content of your dist folder and click on upload files to upload app.yaml file (from your local machine).
• Next open the in browser cloud shell window located top right of the console – 
• One terminal window opened, create a directory something like angular-gcp-app

          mkdir angular-gcp-app

• Next sync up the data from bucket to this directory using below command. Note: Go to overview tab once bucket is created and look out for Link fir gsutil. The same value used in following command  i.e. gs://angular-matrix-poc
  

  gsutil rsync -r gs://angular-matrix-poc ./angular-gcp-app

• Once sync up is done, change directory to your bucket and deploy you application using following command

• gcloud app deploy

• Select any zone/region where you would like to deploy your app.
• That’s it. Your application will be deployed as service within couple of minutes and link will be of this format – [https://angular-gcp-app.appspot.com]

Hope this article will be helpful to you. Will appreciate the feedback or comments.  Cheers !!!