Deploying Angular App to GCP

This article provide steps that to deploy an Angular App to Google GCP AppEngine.

I will be deploying a frontend Angular App (Angular Word Combiner) with does not need any backend.

Bellow is the screenshot of the Application that we would be deploying.

Google offers 2 options to deploy your application on GCP

1. Google App Engine
2. Google Compute Engine

Here I will be using Google App Engine to deploy the Word-Combiner App. App Engine is the Googles managed platform to deploy application. App Engine comes in two flavors Standard and Custom. I will be using App Engine Standard.

First get the Word Combiner APP from git repo to local disk.

git clone https://github.com/siddharthagit/angular-word-merger.git

Now we need to create a config file that will be used by Google Cloud App Engine to deploy the project. Now go to the directory and add the app.yaml file. The name of the file needs to be app.yaml

touch app.yaml

and paste the following content.

# [START runtime]runtime: nodejs8handlers:- url: / static_files: dist/index.html upload: dist/index.html- url: / static_dir: dist# [END runtime]

Now we need to build the Angular app so that it generates the production artifacts that would be deployed to App Engine

ng build --prod

Go to the Google Cloud Console and login with your Google account. Create a new project for your angular app deployment e.g. angular-word-merger

Second step, is to install the Google Cloud SDK. Follow the steps at https://cloud.google.com/sdk/ so that we can deploy our application via command line. For Mac following the instructions in https://cloud.google.com/sdk/docs/quickstart-macos to download the SDK locally.

gcloud app deploy

Now if you goto https://angular-word-merger.appspot.com it should load the Angular App from GCP.