Deploying an Angular app to Google App Engine

You have put in a lot of effort to develop that idea that will fetch you thousands of USD over the next few months. You even made use of the latest technologies including Angular to build the app. Congratulations. How do you get the app out of your laptop and into the real world so all the awesome people can access it? This article will teach you how to deploy a sample Angular application to Google's App Engine.

App Engine is a computing resource provided by Google that lets you deploy applications without worrying about operations.

Without App Engine, you would be left with a few options:

• package your application as a Docker container and figure out how to deploy it. You can find an example of how to accomplish this in this article.

• set up a web server to deploy your application while worrying about scaling and load balancing. You would typically make use of Compute Engine for this. You can read up about it here. Note that beyond setting up the Compute Engine, you will need to set up the web server application.

App Engine takes care of scaling and load balancing on your behalf. All you have to do is deploy the application and go to sleep. If there is nobody accessing your app, the system scales down and you don't get charged a thing.

If your app suddenly becomes famous like TikTok, App Engine will scale up to support all the users you can throw at it. You will just get a bill from Google at the end of the month.

There is a free quota for that phase when you are not yet famous. Check out the pricing page for more information.

Getting Started

You need to create a Google Cloud Platform project if you do not have an existing one. You can read all about it here.

Next, open the menu on the GCP console and visit the App Engine Dashboard page.

If it's your first time using App Engine, you will be presented with the following screen.

Do this to initialize your App Engine application. Note that if you have not enabled billing, you would have to do so before you can continue.

App Engine has now been created for you.

Creating the Angular App

1. The Angular CLI is required to do this. Run the command below to install it.

npm install -g @angular/cli

2. Creating the application.

ng new sample-app

You would be prompted with some options, choose whatever is applicable to your scenario. When the command completes, you would have something like this.

3. Running the application

ng serve --port=4200

4. Building the application

ng build --prod

This generates static files in a dist/ folder.

Deploying the application

Install Express

We will serve the app using express, so issue the following instruction from your CLI.

npm install express --save

Create server.js

Create a server.js file in the root of the directory and paste the following code.

const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/sample-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/sample-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});

Update package.json

Modify the start command in the package.json to run node server.js . This is the entry point for the application.

"start": "node server.js"

Create app.yaml for App Engine Configuration

Create an app.yaml file in the root of the project. This would be used to specify the configuration for App Engine. All we would specify here is the runtime and service.

runtime: nodejs10
service: default

Install gcloud SDK

Ensure you have the gcloud SDK installed and authorized. You can find more about it here. https://cloud.google.com/sdk/docs/downloads-interactive

Deploy

Run the command in the root of the project to deploy the application.

gcloud app deploy --project=<PROJECT-ID>

You would be prompted to confirm the action after which the deployment would be made and you would be presented with the URL to access your application.

Congratulations, you have deployed your Angular application to Google App Engine.