How to Deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform

deploy-angular-on-google-app-engine---feature-image

Google App Engine is a web framework and cloud computing platform. App Engine enables developers to stay more productive and agile. So in the tutorial, we show you how to deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform.

Related posts:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Google Cloud Platform
– Angular

Goal

– We deploy Angular Application on Google App Engine:

deploy-angular-on-google-app-engine---deploy-gcloud

deploy-angular-on-google-app-engine---done-v1

Practice

Create Google App Engine & Storage

– Use your Google account -> Go to the Google Cloud Console then Login with your Google account. Create a Google App Engine gcp-angular-app:

deploy-angular-on-google-app-engine---create-google-app-engine

– On Search box, search Storage, and create a bucket-angular-app bucket.

deploy-angular-on-google-app-engine---storage-search

deploy-angular-on-google-app-engine---create-a-bucket

deploy-angular-on-google-app-engine---create-a-bucket-overview

Now the cloud is almost setup

Build Angular Application

* Get the sourcecode here!

Build Angular application with production mode:

ng build --prod --output-path angularapp

deploy-angular-on-google-app-engine---build-angular-app

-> Results:

deploy-angular-on-google-app-engine---build-result

Create Config file

We create a config file app.yaml that will be used by Google Cloud App Engine to deploy the project:

Upload Angular build & Config files

– Go to the bucket bucket-angular-app, then select the Upload Files & Upload Folder to upload
app.yaml & build angularapp folder to the cloud bucket.

deploy-angular-on-google-app-engine---upload-file-to-gcp

Deployment

– Open the in-browser terminal window Google Cloud Interactive Shell.

deploy-angular-on-google-app-engine---active-cloud-shell

deploy-angular-on-google-app-engine---google-cloud-shell

– Create a folder: grokonez-angular-app by mkdir cmd.
– Sync the data from the bucket bucket-angular-app into this directory grokonez-angular-app by cmd:

$gsutil rsync -r gs://bucket-angular-app ./grokonez-angular-app

-> Details:

– Deploy the angular application using the following command:

$gcloud app deploy

-> Details:

-> Now go to link: https://gcp-angular-app.appspot.com. Result:

deploy-angular-on-google-app-engine---done-v1

Sourcecode

AngularDynamicRoutes

By grokonez | December 21, 2018.



Related Posts


2 thoughts on “How to Deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform”

  1. Hello, admin.

    Interesting website, really!
    But “Search” function on it doesnt work. Sad.

    P.S. Where I can get XEvil4.0 for free?
    It’s best captcha solver, included Google ReCaptcha.
    Need it for white SEO. Thanks.

    1. Hi WilliamTef,

      Please capture your screen when you use the search function, we’ll check its problem 🙂

      It works well on my PC.

      Regards,
      grokonez.

Got Something To Say:

Your email address will not be published. Required fields are marked *

*