Deploying your production version of app feels overwhelming when we do not have right resource. The process is quite simple. Once you get hang of it, it feels quite simple. If you are juggling on how to deploy Angular App on GCP, you have come to right place.

There are two ways —

1. Google Compute Engine: GCE is Infrastructure-as-a-service i.e. IaaS ( We would get a box )
2. Google App Engine: GAE is Platform-as-a-service i.e. PaaS. ( We need not worry about scaling and use the service )

We would be using Google App Engine to deploy our angular app in 5 steps.

Step 1 : Build production version of your Angular App

> ng build — prod

At the end of this step, new folder dist will be created containing these minified CSS and JS files. ( It is quite interesting as to how our entire code is compressed and optimized to these few files )

Step 2 : Create new configuration file required for hosting

We need to create a new file app.yaml to specify the few configurations like that guides GCP to find starting directory, static files and others as you see below.

Copy the below contents to newly created app.yaml file

runtime: python27

api_version: 1

threadsafe: true

handlers:

- url: /

 static_files: <YOUR_APP_NAME>/index.html

 upload: <YOUR_APP_NAME>/index.html

- url: /

static_dir: <YOUR_APP_NAME>

Important — Place this file inside dist folder. Please see the directory structure in the image below.

Step 3 : Configuration in GCP UI

a) Login to Google console to create new project ( e.g. angular-project )

b) Create new Google Storage Bucket in the same project. ( Just name your bucket and keep rest of details default )

c) Upload your project folder and app.yaml file to the newly created bucket.

Step 4 : Sync the data in your bucket to your project

a) Login to Google cloud console by clicking console icon from top right of the console.

b) create a new directory

> mkdir angular-gcp-app

c) Sync data from bucket to this directory

> gsutil rsync -r gs://angular-appname-bucket ./angular-gcp-app

d) Go inside the directory and deploy the gcp

> cd angular-gcp-app
> gcloud app deploy 

Woohoo Done !

Deployment Url will be displayed in the console. E.g. [https://angular-gcp-app.appspot.com]