In this codelab, you'll learn how to deploy, monitor, debug, and scale a Node.js & Angular 2 web application on Google Cloud Platform.

What you'll learn

What you'll need

How will you use use this tutorial?

Read it through only Read it and complete the exercises

How would you rate your experience with building node.js apps?

Novice Intermediate Proficient

How would you rate your experience with building Angular 2 apps?

Novice Intermediate Proficient

How would you rate your experience with using Google Cloud Platform services?

Novice Intermediate Proficient

Codelab-at-a-conference setup

The instructor will be sharing with you temporary accounts with existing projects that are already setup so you do not need to worry about enabling billing or any cost associated with running this codelab. Note that all these accounts will be disabled soon after the codelab is over.

Once you have received a temporary username / password to login from the instructor, log into Google Cloud Console: https://console.cloud.google.com/.

Here's what you should see once logged in :

Note the project ID you were assigned ( "codelab-test003" in the screenshot above). It will be referred to later in this codelab as PROJECT_ID.

Enable Stackdriver Error Reporting API

Enable the Stackdriver Error Reporting API so the trace agent can function:

  1. Under API Manager > Google APIs, search for the "Stackdriver Error Reporting API"
  2. Click on Stackdriver Error Reporting API
  3. Click Enable if the API is not already enabled

Enable Stackdriver Trace API

Enable the Stackdriver Trace API so the trace agent can function:

  1. Under API Manager > Google APIs, search for the "Stackdriver Trace API"
  2. Click on Stackdriver Trace API
  3. Click Enable if the API is not already enabled

Enable YouTube Data API v3

Enable the YouTube Data API v3 so you can query for Google Cardboard videos:

  1. Under API Manager > Google APIs, search for the "YouTube Data API v3"
  2. Click on YouTube Data API v3
  3. Click Enable
  4. You will be prompted to create credentials. Click "Go to credentials" to go to the Credentials Dashboard.
  5. Create an API Key for the YouTube Data API v3, which you will use later

Start Cloud Shell

"Build a Node.js & Angular 2 Web App using Google Cloud Platform" can be operated remotely from your laptop, but in this codelab we will be using Google Cloud Shell, a command line environment running in the Cloud. This Debian-based virtual machine is loaded with all the development tools you'll need. It offers a persistent 5GB home directory, and runs on the Google Cloud, greatly enhancing network performance and authentication. This means that all you will need for this codelab is a browser (yes, it works on a Chromebook).

To activate Google Cloud Shell, from the developer console simply click the button on the top right-hand side (it should only take a few moments to provision and connect to the environment):

Once connected to the cloud shell, you should see that you are already authenticated and that the project is already set to your PROJECT_ID :

$ gcloud auth list
Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)
$ gcloud config list project
[core]
project = <PROJECT_ID>

If for some reason the project is not set, simply issue the following command :

$ gcloud config set project <PROJECT_ID>

Looking for your PROJECT_ID? Check out what ID you used in the setup steps or look it up in the console dashboard :

IMPORTANT. Finally, set the default zone and project configuration:

$ gcloud config set compute/zone us-central1-f

You can pick and choose different zones too. Learn more about zones in Regions & Zones documentation.

Summary

In this step, you created a project, enabled two APIs, created an API key and started a new session in Google Cloud Shell.

Next up

Next, you will clone the sample application.

Download the application code

1. Clone the sample project:

git clone https://github.com/googlecodelabs/cloud-cardboard-viewer.git

2. Change into the cloud-cardboard-viewer directory:

cd cloud-cardboard-viewer

3. Install dependencies:

npm install

Summary

In this step, you cloned the sample application into your Google Cloud Shell session.

Next up

Next, you will use Google Cloud Shell to run and preview the sample application.

The sample has the following layout:

public/
  app/
    about.component.ts
    app-routing.module.ts
    app.component.ts
    app.module.ts
    home.component.ts
    main.ts
    rxjs-extensions.ts
    video-card.component.ts
    video-card.component.css
  system.config.js
  index.css
  index.html
package.json
server.js

To run the sample application, let's perform the following steps:

1. Set the GCLOUD_PROJECT environment variable:

export GCLOUD_PROJECT=YOUR_PROJECT_ID

replacing YOUR_PROJECT_ID with your project ID.

2. Set the API_KEY environment variable:

export API_KEY=YOUR_API_KEY

replacing YOUR_API_KEY with the API key you created earlier.

3. Run npm start to start the node.js server:

npm start

4. Click the "Web preview"icon that appears at the top left side of the cloud shell window and select "Preview on port 8080" to see the app in a web browser.

You will see a page that looks like this:

The application displays videos from Youtube based on the search query "Google Cardboard 3D Videos".

Summary

In this step, you set up and ran the codelab sample application.

Next up

Next, you will learn how to setup Stackdriver Trace and Stackdriver Debugger and configure the agents.

In this step, you will learn how to setup Stackdriver Trace and Stackdriver Debugger and configure the agents.

Note that server.js contains the following code:

if (process.env.NODE_ENV === "production") {
  require("@google/cloud-trace").start();
}

if (process.env.GCLOUD_PROJECT) {
  require("@google/cloud-debug").start();
}

This code adds Stackdriver Trace and Stackdriver Debugger to the application, and must be the very first code that executes when the application starts. Stackdriver Trace gathers information on RPC calls happening in the application. Once the application is deployed, you can view the trace reports in the Stackdriver Trace Dashboard.

Stackdriver Debugger allows you to debug your application from the Stackdriver Debugger Dashboard. In order for remote debugging to work, you need to push the code into a Cloud Source Repository so Stackdriver Trace can reference your source code:

1. Configure git:

git config --global user.email "you@email.com"
git config --global user.name "Your Name"
git config credential.helper gcloud.sh

3. Add your Cloud Source Repository as a git remote:

git remote add google https://source.developers.google.com/p/YOUR_PROJECT_ID/r/default

replacing YOUR_PROJECT_ID with your project ID.

4. Push the code into the Cloud Source Repository:

git push --all google

5. Start the app again:

npm start

5. Go to the Stackdriver Debugger Dashboard. You should see something like this:

6. Click on line number 48 to capture a snapshot:

7. Now visit your running app and refresh the page. Now go back to the Debugger Dashboard, you should see something like this:

Summary

In this step you learned how to use Stackdriver Debugger to debug your locally running application.

Next up

Next, you will deploy the application to Google App Engine Flexible Environment.

It's time to deploy the app.

1. Open app.yaml for editing (using Nano or Vim, e.g. nano app.yaml) and add your API key you created earlier:

2. Enter the following command to deploy:

gcloud app deploy --version v1

It takes several minutes to deploy the first time. This command uses the existing app.yaml file, packages the source code into remote Docker container, deploys and directs all traffic to new container labeled v1, and stops any previously running version.

2. Visit your deployed app at https://<your-project-id>.appspot.com

You should see the same thing you saw when you ran it locally.

Deployments are customizable in powerful ways to suit your development workflow and production needs.

Summary

In this step you deployed your app to App Engine Flexible Environment, and explored the deploy command.

Next up

Learn how to monitor and debug the deployed application in the Google Cloud Console.

In this step, you will learn how to monitor and debug the deployed application.

The Stackdriver Trace and Stackdriver Debugger Node.js agents are already in the app, and are initialized before anything else when the application starts.

1. The Trace agent gathers information on RPC calls happening in the app. View the reports in the Stackdriver Trace Dashboard.

2. You've already been to the Stackdriver Debugger Dashboard. Go there now and repeat what you did for the debugging steps.

3. You view the logs for the deployed application in the Stackdriver Logging Dashboard.

4. Stackdriver Error Reporting helps you monitor errors that happen in your application. The demo application has a broken endpoint. Visit https://<your-project-id>.appspot.com/search to see an error, then visit the Logging and Error Reporting dashboards.

You can use Google Stackdriver to monitor multiple projects.

Summary

In this step you learned how to monitor and debug the deployed application.

Next up

Next, you'll learn how to scale the application.

In this step, you will learn how to automatically scale the application.

1. Open app.yaml for editing (using Nano or Vim, e.g. nano app.yaml) and comment out the manual_scaling section:

2. Uncomment the automatic_scaling section:

3. Deploy the app again with the new settings:

gcloud app deploy --version v2

4. View the two deployed versions of the app in the App Engine Dashboard.

Summary

In this step you learned how to scale the deployed application.

Next up

Next, a summary of this tutorial.

You learned how to deploy, monitor, debug, and scale a Node.js application.

What we've covered

Next Steps

Give us your feedback