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
GCP Platforms

Digizoo helps Greater Bank to build their new digital banking platform in the cloud

Foreword

Greater Bank is an Australian customer owned mutual bank, based in Hamilton, NSW. The Greater was founded in 1945, and now has over 270,000 customers, 59 branches, and over $7 billion in assets under management. The Greater is currently implementing a major digital transformation strategy to improve all of their digital platforms (web, iOS, and Android). Digizoo have been asked to help Greater Bank achieve their digital transformation goals.

Digizoo’s broad and deep experience brought the necessary confidence and capability to help Greater Bank to make the right decisions early, and establish the foundations for modern digital banking.

Google Cloud Logo

Transitioning to Cloud

Early in 2019, Digizoo was asked by Greater Bank to design and deliver their new, innovative banking platform. Greater Bank had an existing on-premise solution, which was becoming costly, slow to change, and increasingly limiting to the necessary business change. Digizoo’s experience was a key enabler for Greater Bank’s decision to implement a cloud-native solution on Google Cloud Platform, to capitalise on innovative technologies and improve their time-to-market.

Cloud-native solutions are designed to capitalise on the scalability and flexibility of the cloud, working effectively in combination with an agile approach to delivery. Greater Bank was able to modernise their architecture, shift workloads, and make changes to their solution faster and more reliably. Utilising a cloud-native solution also lowered risk for Greater Bank, providing superior scalability and security; with lower maintenance costs and redundancy.

Greater Bank Works with Digizoo to Deliver New Innovative Banking Platform

Digizoo’s expertise and track record of banking platform delivery in the cloud became a catalyst for helping build and transition Greater Bank’s new Digital Technology Team. Digizoo provided technical specialists for all key areas including:

  • Core Banking Integration with Data Action
  • Cutting edge infrastructure as code using Google Cloud Platform; design and build, security, and automation with CI/CD
  • Backbase Omni-Channel Customer Experience Platform; Native Web, iOS, and Android Banking Applications
  • New integrated digital security platform
  • API Management with Google Apigee
  • User Experience and Accessibility practices and standards
  • Regulatory compliance and Open Banking standards.

Partnership and Mentorship

Digizoo and Greater Bank have forged a strong partnership, based on successfully completing every delivery milestone to date. The long-standing success of this partnership is a result of making the right decisions from the beginning. Digizoo helped Greater Bank to modernise their ways of working to a new agile approach, establishing new practices and structures within Greater Bank using proven methodology and frameworks. The resulting business and development processes became more streamlined and cohesive, also providing the ability to integrate with Fintech’s and new opportunities easier.

By establishing a holistic environment, all individuals from each team had the ability to up-skill themselves and benefit from mentorship in all technology disciplines. Thanks to this mentorship focused team structure, several team members were able to obtain Google Cloud certifications and improve their personal development.

The Result 

Partnering with Digizoo has led to Greater Bank successfully completing all of their delivery milestones and achieving a foundational modern banking platform. The platform consists of a contemporary banking app with full payment capability. Digizoo continues to work closely with Greater Bank on future releases to incrementally upscale users. Greater Bank now has a cohesive development team with the necessary capability and frameworks to allow them to achieve all future milestones.

Categories
Platforms

Greater Bank partners with Digizoo to build modern banking platform

Digizoo has been selected to bring its specialist expertise in digital banking platforms by assisting Greater Bank in Newcastle to design and deliver an innovative new banking platform.

The solution is cloud-native on the Google Cloud Platform to take advantage of the most modern and innovative technologies, and improve time to market.

Digizoo are providing technical specialists in all key areas including, Core Banking Integration, Cloud Platform design and build, Open Banking standards, Backbase Customer Experience Platform, Security, Automation with CI/CD, new ways of working in Agile and remote working.

The new platform will allow Greater Bank to quickly adapt and respond to the fast-changing financial environments in the future.

Categories
Platforms

Digizoo forms partnership with Google Cloud

The Google Cloud Platform (GCP) has in recent times made progress that puts it ahead of the other two players AWS and Azure.

GCP provides a more considered and usable feature set that makes many of the mundane scenarios easy without having to revert to extensive scripting to put together many smaller components.

Google Cloud Partner Badge.

For the banking and financial services world, Digizoo has already delivered complete banking platforms in the cloud with regulatory approval from APRA.

We’re excited about building another banking platform to run on GCP where the time to build and operating costs will be reduced even further thanks to the benefits that the GCP offers.