Categories
Angular GCP

How to Deploy Angular 8 App to Google App Engine

Hi there 👋. My name is Thomas Van Deun and I’m a certified Google Cloud Architect.

What we’ll do

  1. Set up a Google Cloud Repository on GCP 
  2. Scaffold an Angular 8 application 
  3. Integrate Cloud Build CI/CD for this project
  4. Automatically deploy to App Engine 
Architecture for deploying angular 8 to Google App Engine on GCP with CI/CD

What you’ll need

  • Google Cloud Platform account — free tier will do
    • Set up a new project if you’d like
  • Have the Cloud SDK installed (to connect with the repository)
  • Angular CLI tools installed
  • IDEA of your choice

Google Cloud Repository

Log in on the Google Cloud Console

Open the hamburger menu and navigate to Source Repository under Tools. On the next screen, you’ll find the button Add Repository.

Here we will create a new repository. Give it a name and choose the project you want to work within. 

Creating an Angular 8 Application in Cloud Source Repositories

When you are happy with your name, click Create.

Now we need to connect locally with the repository. I’d recommend you to set up using the gcloud SDK, you will need it in a later step. If all goes well, you will have the repo cloned on your local machine.  Step 1 complete 🎉

Scaffold Angular 8 project

Now, open the command line at the root of your cloned repository. Let’s scaffold an Angular project with the following commands. 

ng new angular-on-gcp

This will prompt you through the setup, change or accept default settings.

Navigate to your newly created app and serve it up to see it locally.

cd angular-on-gcp
ng serve --open

Feel free to make more changes in this angular project, but for tutorial purposes, we will leave it like this.

Website running on localhost: 

Running Angular on gcp app with a localhost

More in depth Angular documentation over here.

Cloud Build Trigger

Go back to your GCP console, and look for the tool Cloud Build. Start with enabling this API for your project. You should see this screen next: 

GCP console cloud build tool

Click CREATE TRIGGER

On the next screen, fill in the name and select a repository. The name should represent what this pipeline does. So in this case, I will name it BuildAndDeployAngularApplication. Select the branch you created in step 1. 

You can leave the trigger on the master branch, but you can change this later to whatever fits your need.

Leave the defaults for Build Configuration.

From now, every push we make to master will trigger this pipeline. At the moment, there is no logic defined so nothing will actually happen. Let’s change that in the next step.

Creating a build trigger on gcp

CI / CD Pipeline

Google Cloud Build(ers)

Google Cloud Build makes uses of Cloud Builders. Google provide a few of them out of the box over here.

Unfortunatly, this list does not contain an Angular builder. We will create our own and store it in our project Image Repository, making use of the community managed cloud builders.

Clone this repo to your local machine, build the Angular docker image and verify that it’s now part of your available containers:

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
cd cloud-builders-community/ng
gcloud builds submit --config cloudbuild.yaml .  
gcloud container images list --filter ng

Now that we have the NG image in our project registry, and we can make use of it in our pipeline.

Cloud Build Options

On the root of your Angular repo, create a new file named cloudbuild.yaml. Use these steps and save the file. Replace projectId with your own projectId. It will now reference the image you created in the step before.

steps:

  # Install node packages
  - name: "gcr.io/cloud-builders/npm:latest"
    args: ["install"]
    dir: "angular-on-gcp"

  # Build production package
  - name: "gcr.io/{projectId}/ng"
    args: ["build", "--prod"]
    dir: "angular-on-gcp"

  # Deploy to google cloud app engine
  - name: "gcr.io/cloud-builders/gcloud"
    args: ["app", "deploy", "--version=prod"]
    dir: "angular-on-gcp"

This file means the following:

  1. In the build environment, install all the NPM dependencies defined in the package.json
  2. Using the Angular Cloud Builder to create a production distribution using the Angular Docker
  3. Use the Gcloud Builder to deploy  this app in the App engine service

Google App Engine 

Now that we have set up our automatic build pipeline, we need to give the builder instructions on how to deploy the Angular application. 

At the source root of your Angular project, create a new file named app.yaml and paste the following contents (rename the file directory if you have a different name for your application) :

runtime: python27
api_version: 1
threadsafe: yes

handlers:
  - url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
    static_files: dist/angular-on-gcp/\1
    upload: dist/angular-on-gcp/(.*)(|\.map)

  - url: /(.*)
    static_files: dist/angular-on-gcp/index.html
    upload: dist/angular-on-gcp/index.html

skip_files:
  - e2e/
  - node_modules/
  - src/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

Create an App Engine

Enable the App Engine API (App Engine Admin API) on the console and spin up an App Engine by navigating to the App Engine tool in the console.

Enabling the App Engine API on gcp console

Permissions for App Engine Deploy

You will need to give your Cloud Builder service account access to the App Engine. Go to the settings menu of Cloud Build, and enable App Engine Admin

Providing service permissions in App Engine on gcp

The Build History is a good starting point to debug any failures:

GCP Build history

The result 🥂

Now that you have everything set up, Angular 8 should be deployed and running on Google App Engine correctly. When you run your pipeline, it will deploy it to Google App Engine. In the dashboard of App Engine, you will see your deployed instances and the address of your application:

App Engine Dashboard on GCP

Angular on gcp is running

Categories
Platforms

Rabobank selects Digizoo for new online and mobile banking platform

Rabobank Australia and New Zealand has selected Digizoo as it’s strategic implementation partner for the Backbase Customer Experience Platform.

Digizoo’s pedigree in multiple Backbase implementations, as well as their unique approach of working to build their clients’ own internal capability and practices was a key factor as the bank was looking for the right partner to drive the culture change that it was seeking for its FutureTech initiative.

Rabobank has targeted some very aggressive dates for a complete technology refresh of most of the key technology platforms. Digizoo will also be assisting Rabobank to drive new Agile ways of working, including DevOps, CI/CD, and full test automation using Behaviour Driven Development (BDD) practices.

Backbase has recognised Digizoo as their strategic partner in Australia and New Zealand, and largely works in the mode of an Australian office for the world’s leading Customer Experience Platform for Banking; even earning the nickname OutbackBase within the Backbase organisation.

Categories
Platforms

Digizoo delivers whole of government digital platform

When Computer Sciences Corporation (now DXC) won the tender to build a new whole of government digital identity and services platform, they asked Digizoo to provide the technology team to design and develop the solution.

Digizoo worked as a key services provider in a broader team consisting of members from CSC and various government agencies to build a solution that was production ready in the Microsoft Azure Cloud platform within 6 months.

The solution consisted of custom services for motor vehicle registration renewals, payments, and address management that were integrated with the AccessCanberra Oracle Service Cloud for an integrated federated identity solution. The web and mobile platform was based on the Backbase Customer Experience Platform that the ACT Government had selected in a rigorous tender process. Integration microservices were built to manage interactions with AccessCanberra, Roads and Traffic Authority, Westpac payments, and the Federal Government’s Document Verification Service (DVS).

Throughout the project, the decision to move the platform from cloud to on-premise was constantly under review, and the elegance of the modular platform architecture was able to regularly move the deployments from one infrastructure to the other without much effort thanks to the automation and DevOps practices in place.

Categories
Backbase

Westpac – Australia’s first Backbase customer

Digizoo staff are engaged in key roles within the WIB Digital team to establish the first implementation of the Backbase Customer Experience platform in Australia for Westpac Institutional Bank.

team planning on a whiteboard

A key project outcome is to pave the way for some significant technology and organisational change in areas that had entrenched groupthink over the years. Challenges in the areas of infrastructure, security, Agile, Integration, DevOps were all needing to be met head on in a project that takes the organisation on a transformation journey.

Compliance with the stringent standards for the Monetary Authority of Singapore (MAS) and the Hong Kong Monetary Authority (HKMA) to facilitate banking in Asia are an additional complexities for standards of probity and security that are well beyond the needs for Australia.