Deploying Angular App to GCP
Tags: angular, gcp, webdev
Published: 2019-07-30 18:15:58

---
title: Deploying Angular App to GCP
published: true
tags: Angular,GCP, #webdev
canonical_url: https://webdevpedia.blogspot.com/2019/06/deploying-angular-app-to-gcp.html
---

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](https://github.com/siddharthagit/angular-word-merger)) with does not need any backend.  
Bellow is the screenshot of the Application that we would be deploying.

[![](https://1.bp.blogspot.com/-Ib0K1VJD0gU/XPtj3J4ws9I/AAAAAAAAAGk/bw6OLSErfGcMflm9ZeuL_xNGI323f4obQCLcBGAs/s640/Screen%2BShot%2B2019-06-08%2Bat%2B12.29.09%2BAM.png)](https://1.bp.blogspot.com/-Ib0K1VJD0gU/XPtj3J4ws9I/AAAAAAAAAGk/bw6OLSErfGcMflm9ZeuL_xNGI323f4obQCLcBGAs/s1600/Screen%2BShot%2B2019-06-08%2Bat%2B12.29.09%2BAM.png)
  
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
```

[![](https://1.bp.blogspot.com/-H-zp63RwXdQ/XPtuATJcEAI/AAAAAAAAAGw/icnfZv5uyEktilczV9pFf_iDmHmYJFwvQCLcBGAs/s640/Screen%2BShot%2B2019-06-08%2Bat%2B1.12.29%2BAM.png)](https://1.bp.blogspot.com/-H-zp63RwXdQ/XPtuATJcEAI/AAAAAAAAAGw/icnfZv5uyEktilczV9pFf_iDmHmYJFwvQCLcBGAs/s1600/Screen%2BShot%2B2019-06-08%2Bat%2B1.12.29%2BAM.png)

[![](https://1.bp.blogspot.com/-8k4kEpnB4kc/XPtvIU2nAGI/AAAAAAAAAG4/OwRHzZmxuPcTSUFCnQyWUHUuzC9M0ZJyACLcBGAs/s640/Screen%2BShot%2B2019-06-08%2Bat%2B1.17.23%2BAM.png)](https://1.bp.blogspot.com/-8k4kEpnB4kc/XPtvIU2nAGI/AAAAAAAAAG4/OwRHzZmxuPcTSUFCnQyWUHUuzC9M0ZJyACLcBGAs/s1600/Screen%2BShot%2B2019-06-08%2Bat%2B1.17.23%2BAM.png)
 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 
[![](https://1.bp.blogspot.com/-qL5js6g5g2E/XPtz_e27woI/AAAAAAAAAHE/MQz8ZQkzcyMsj1gG-PRBO56dVpjLYNDSgCLcBGAs/s640/Screen%2BShot%2B2019-06-06%2Bat%2B10.19.05%2BPM.png)](https://1.bp.blogspot.com/-qL5js6g5g2E/XPtz_e27woI/AAAAAAAAAHE/MQz8ZQkzcyMsj1gG-PRBO56dVpjLYNDSgCLcBGAs/s1600/Screen%2BShot%2B2019-06-06%2Bat%2B10.19.05%2BPM.png)

[![](https://1.bp.blogspot.com/-sO8pd5YlQwE/XPtz_wG0ixI/AAAAAAAAAHU/dqlVrUZZFHkWE2dE0ZtMwX86FsGnpgy2wCEwYBhgL/s640/Screen%2BShot%2B2019-06-06%2Bat%2B10.49.35%2BPM.png)](https://1.bp.blogspot.com/-sO8pd5YlQwE/XPtz_wG0ixI/AAAAAAAAAHU/dqlVrUZZFHkWE2dE0ZtMwX86FsGnpgy2wCEwYBhgL/s1600/Screen%2BShot%2B2019-06-06%2Bat%2B10.49.35%2BPM.png)
 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
```

  

[![](https://1.bp.blogspot.com/-E1g1uX7rhdQ/XPt6odsirTI/AAAAAAAAAHc/C90HcdNVC5w6zZKLIiYbQ3H-Tklvk3BzgCLcBGAs/s640/Screen%2BShot%2B2019-06-08%2Bat%2B2.06.01%2BAM.png)](https://1.bp.blogspot.com/-E1g1uX7rhdQ/XPt6odsirTI/AAAAAAAAAHc/C90HcdNVC5w6zZKLIiYbQ3H-Tklvk3BzgCLcBGAs/s1600/Screen%2BShot%2B2019-06-08%2Bat%2B2.06.01%2BAM.png)

  

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