Jump Start Solution: Dynamic web application with JavaScript

Last reviewed 2023-12-06 UTC

This guide helps you understand, deploy, and use the Dynamic web application with JavaScript Jump Start Solution. This solution shows you how to build and run dynamic websites on Google Cloud. You can use this as an example deployment for your own dynamic website to Google Cloud including the Google Cloud products you may need, and how they should communicate with each other.

This solution guide deploys the Developer Journey web application to Google Cloud.

Developer Journey is built with TypeScript, Next.js and React, and demonstrates static generation and server-side rendering techniques for pre-rendering cacheable pages.

This document assumes that you're familiar with basic cloud concepts, though not necessarily Google Cloud. Experience with Terraform is helpful.

Note: This solution helps you explore the capabilities of Google Cloud. The solution is not intended to be used as is for production environments. For information about designing and setting up production-grade environments in Google Cloud, see Landing zone design in Google Cloud and Google Cloud setup checklist.

Objectives

This solution guide will help you learn how to use Google Cloud to:

• Deploy a publicly accessible web application to Cloud Run
  • Connect an application to a Google Cloud database following Google Cloud's recommended security practices (like using secrets and assigning least privilege including appropriate IAM permissions)
  • Deploy and operate the backend services
  • Make content changes or modify the application to add a feature
  • Build and redeploy securely
• Explore your deployment
• Customize your application

We advise that:

• You are familiar with TypeScript and React programming.
• You are interested in using cloud infrastructures for your new JavaScript applications.
• You are familiar with database connections, CI/CD, debugging, and logging.
• You are familiar with the fundamentals of website development.

Products used

The following is a summary of the Google Cloud products that the Developer Journeys solution integrates:

• Cloud Run: A fully managed service that lets you build and deploy serverless containerized apps. Cloud Run handles scaling and other infrastructure tasks so you can focus on the business logic of your code.
• Firestore: a NoSQL document database built for automatic scaling, high performance, and ease of application development.
• Cloud Load Balancing : scalable, high performance load balancing on Google Cloud
• Secret Manager: A service that lets you store, manage, and access secrets as binary blobs or text strings. You can use Secret Manager to store database passwords, API keys, or TLS certificates that are needed by an application at runtime.
• Cloud Storage: An enterprise-ready service that provides low-cost, no-limit object storage for diverse data types. Data is accessible from within and outside of Google Cloud and is replicated geo-redundantly.
• Cloud Build: A service that lets you import source code from repositories or Cloud Storage spaces, execute a build, and produce artifacts such as Docker containers or Java archives for continuous delivery.

Architecture

The following diagram shows the architecture of the solution:

Request flow

The architecture includes the following components:

1. Mobile and web users connect to the application using a URL.
2. Cloud CDN serves cached assets if available. If not, request is routed to Cloud Load Balancing.
3. For static assets, Cloud Load Balancing pulls from Cloud Storage bucket.
4. For dynamic resources, Cloud Load Balancing directs requests to Cloud Run.
5. Sensitive values are provided to Cloud Run using environment variables stored in Secret Manager.
6. Cloud Run queries user data from Firestore, which is a NoSQL database backend for the web application.

Cost

For an estimate of the cost of the Google Cloud resources that the dynamic web application with javascript solution uses, see the precalculated estimate in the Google Cloud Pricing Calculator.

Use the estimate as a starting point to calculate the cost of your deployment. You can modify the estimate to reflect any configuration changes that you plan to make for the resources that are used in the solution.

The precalculated estimate is based on assumptions for certain factors, including the following:

• The Google Cloud locations where the resources are deployed.
• The amount of time that the resources are used.

Before you begin

To deploy this solution, you first need a Google Cloud project and some IAM permissions.

Create or choose a Google Cloud project

When you deploy the solution, you choose the Google Cloud project where the resources are deployed. You can either create a new project or use an existing project for the deployment.

If you want to create a new project, do so before you begin the deployment. Using a new project can help avoid conflicts with previously provisioned resources, such as resources that are used for production workloads.

To create a project, complete the following steps:

1. In the Google Cloud console, go to the project selector page.

   Go to project selector

2. Click Create project.

3. Name your project. Make a note of your generated project ID.

4. Edit the other fields as needed.

5. Click Create.

Get the required IAM permissions

To start the deployment process, you need the Identity and Access Management (IAM) permissions that are listed in the following table.

If you created a new project for this solution, then you have the roles/owner basic role in that project and have all the necessary permissions. If you don't have the roles/owner role, then ask your administrator to grant these permissions (or the roles that include these permissions) to you.

IAM permission required	Predefined role that includes the required permissions
serviceusage.services.enable	Service Usage Admin (roles/serviceusage.serviceUsageAdmin)
iam.serviceAccounts.create	Service Account Admin (roles/iam.serviceAccountAdmin)
resourcemanager.projects.setIamPolicy	Project IAM Admin (roles/resourcemanager.projectIamAdmin)
config.deployments.create config.deployments.list	Cloud Infrastructure Manager Admin (roles/config.admin)
iam.serviceAccount.actAs	Service Account User (roles/iam.serviceAccountUser)

About temporary service account permissions

If you start the deployment process through the console, Google creates a service account to deploy the solution on your behalf (and to delete the deployment later if you choose). This service account is assigned certain IAM permissions temporarily; that is, the permissions are revoked automatically after the solution deployment and deletion operations are completed. Google recommends that after you delete the deployment, you delete the service account, as described later in this guide.

View the roles assigned to the service account

These roles are listed here in case an administrator of your Google Cloud project or organization needs this information.

• roles/datastore.owner
• roles/iam.serviceAccountAdmin
• roles/iam.serviceAccountUser
• roles/resourcemanager.projectIamAdmin
• roles/run.admin
• roles/`roles/secretmanager.admin
• roles/storage.admin
• roles/compute.networkAdmin
• roles/compute.admin

Deploy the solution

To help you deploy this solution with minimal effort, a Terraform configuration is provided in GitHub. The Terraform configuration defines all the Google Cloud resources that are required for the solution.

You can deploy the solution by using one of the following methods:

• Through the console: Use this method if you want to try the solution with the default configuration and see how it works. Cloud Build deploys all the resources that are required for the solution. When you no longer need the deployed solution, you can delete it through the console. Any resources that you create after you deploy the solution might need to be deleted separately.

  To use this deployment method, follow the instructions in Deploy through the console.

• Using the Terraform CLI: Use this method if you want to customize the solution or if you want to automate the provisioning and management of the resources by using the infrastructure as code (IaC) approach. Download the Terraform configuration from GitHub, optionally customize the code as necessary, and then deploy the solution by using the Terraform CLI. After you deploy the solution, you can continue to use Terraform to manage the solution.

  To use this deployment method, follow the instructions in Deploy using the Terraform CLI.

Deploy through the console

Complete the following steps to deploy the preconfigured solution.

Note: If you want to customize the solution or automate the provisioning and management of the solution by using the infrastructure as code (IaC) approach, then see Deploy using the Terraform CLI.

1. In the Google Cloud Jump Start Solutions catalog, go to the Dynamic web application with JavaScript solution.

   Go to the Dynamic web application with JavaScript solution

2. Review the information that's provided on the page, such as the estimated cost of the solution and the estimated deployment time.

3. When you're ready to start deploying the solution, click Deploy.

   A step-by-step configuration pane is displayed.

4. Complete the steps in the configuration pane.

   Note the name that you enter for the deployment. This name is required later when you delete the deployment.

   When you click Deploy, the Solution deployments page is displayed. The Status field on this page shows Deploying.

5. Wait for the solution to be deployed.

   If the deployment fails, the Status field shows Failed. You can use the Cloud Build log to diagnose the errors. For more information, see Errors when deploying through the console.

   After the deployment is completed, the Status field changes to Deployed.

When you no longer need the solution, you can delete the deployment to avoid continued billing for the Google Cloud resources. For more information, see Delete the deployment.

Deploy using the Terraform CLI

This section describes how you can customize the solution or automate the provisioning and management of the solution by using the Terraform CLI. Solutions that you deploy by using the Terraform CLI are not displayed in the Solution deployments page in the Google Cloud console.

Note: If you want to deploy the solution with the default configuration to see how it works, then follow the instructions in Deploy through the console.

Set up the Terraform client

You can run Terraform either in Cloud Shell or on your local host. This guide describes how to run Terraform in Cloud Shell, which has Terraform preinstalled and configured to authenticate with Google Cloud.

The Terraform code for this solution is available in a GitHub repository.

1. Clone the GitHub repository to Cloud Shell.

   

   A prompt is displayed to confirm downloading the GitHub repository to Cloud Shell.

2. Click Confirm.

   Cloud Shell is launched in a separate browser tab, and the Terraform code is downloaded to the $HOME/cloudshell_open directory of your Cloud Shell environment.

3. In Cloud Shell, check whether the current working directory is $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra. This is the directory that contains the Terraform configuration files for the solution. If you need to change to that directory, run the following command:

   cd $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra
   

4. Initialize Terraform by running the following command:

   terraform init
   

   Wait until you see the following message:

   Terraform has been successfully initialized!
   

Configure the Terraform variables

The Terraform code that you downloaded includes variables that you can use to customize the deployment based on your requirements. For example, you can specify the Google Cloud project and the region where you want the solution to be deployed.

1. Make sure that the current working directory is $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra. If it isn't, go to that directory.

2. In the same directory, create a text file named terraform.tfvars.

3. In the terraform.tfvars file, copy the following code snippet, and set values for the required variables.

   • Follow the instructions that are provided as comments in the code snippet.
   • This code snippet includes only the variables for which you must set values. The Terraform configuration includes other variables that have default values. To review all the variables and the default values, see the variables.tf file that's available in the $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra directory.
   • Make sure that each value that you set in the terraform.tfvars file matches the variable type as declared in the variables.tf file. For example, if the type that’s defined for a variable in the variables.tf file is bool, then you must specify true or false as the value of that variable in the terraform.tfvars file.

   # This is an example of the terraform.tfvars file.
   # The values in this file must match the variable types declared in variables.tf.
   # The values in this file override any defaults in variables.tf.
   
   # ID of the project in which you want to deploy the solution
   project_id = "PROJECT_ID"
   
   # Google Cloud region where you want to deploy the solution
   # Example: us-central1
   region = "REGION"
   
   # Google Cloud zone where you want to deploy the solution
   # Example: us-central1-a
   zone = "ZONE"
   

For information about the values that you can assign to the required variables, see the following:

• project_id: Identifying projects
• region and zone: Available regions and zones

Validate and review the Terraform configuration

1. Make sure that the current working directory is $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra. If it isn't, go to that directory.

2. Verify that the Terraform configuration has no errors:

   terraform validate
   

   If the command returns any errors, make the required corrections in the configuration and then run the terraform validate command again. Repeat this step until the command returns the following message:

   Success! The configuration is valid.
   

3. Review the resources that are defined in the configuration:

   terraform plan
   

4. If you didn't create the terraform.tfvars file as described earlier, Terraform prompts you to enter values for the variables that don't have default values. Enter the required values.

   The output of the terraform plan command is a list of the resources that Terraform provisions when you apply the configuration.

   If you want to make any changes, edit the configuration and then run the terraform validate and terraform plan commands again.

Provision the resources

When no further changes are necessary in the Terraform configuration, deploy the resources.

1. Make sure that the current working directory is $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra. If it isn't, go to that directory.

2. Apply the Terraform configuration:

   terraform apply
   

3. If you didn't create the terraform.tfvars file as described earlier, Terraform prompts you to enter values for the variables that don't have default values. Enter the required values.

   Terraform displays a list of the resources that will be created.

4. When you're prompted to perform the actions, enter yes.

   Terraform displays messages showing the progress of the deployment.

   If the deployment can't be completed, Terraform displays the errors that caused the failure. Review the error messages and update the configuration to fix the errors. Then run the terraform apply command again. For help with troubleshooting Terraform errors, see Errors when deploying the solution using the Terraform CLI.

   After all the resources are created, Terraform displays the following message:

   Apply complete!
   

When you no longer need the solution, you can delete the deployment to avoid continued billing for the Google Cloud resources. For more information, see Delete the deployment.

Explore your deployment

You've deployed your sample JavaScript dynamic web application. Your solution deployment consists of multiple primary services that have been integrated into a single Google Cloud project including the following:

• A frontend application written in TypeScript
• A Cloud Run service that uses the Next.js framework and the React framework.
• A Firestore database.
• A Cloud Storage enterprise-ready bucket.

To view the Google Cloud resources that are deployed and their configuration, take an interactive tour.

Start the tour

Optional: customize your application

To customize the Dynamic web application with JavaScript solution, you can make changes to the application that is deployed on Cloud Run and then redeploy. To follow step-by-step guidance for this task directly in Cloud Shell Editor, click Guide me.

Guide me

This task takes about 30 minutes to complete.

Delete the deployment

When you no longer need the solution, to avoid continued billing for the resources that you created in this solution, delete all the resources.

Delete through the console

Use this procedure if you deployed the solution through the console.

1. In the Google Cloud console, go to the Solution deployments page.

   Go to Solution deployments

2. Select the project that contains the deployment that you want to delete.

3. Locate the deployment that you want to delete.

4. In the row for the deployment, click Actions and then select Delete.

   You might need to scroll to see Actions in the row.

5. Enter the name of the deployment and then click Confirm.

   The Status field shows Deleting.

   If the deletion fails, see the troubleshooting guidance in Error when deleting a deployment.

When you no longer need the Google Cloud project that you used for the solution, you can delete the project. For more information, see Optional: Delete the project.

Delete using the Terraform CLI

Use this procedure if you deployed the solution by using the Terraform CLI.

1. In Cloud Shell, make sure that the current working directory is $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra. If it isn't, go to that directory.

2. Remove the resources that were provisioned by Terraform:

   terraform destroy
   

   Terraform displays a list of the resources that will be destroyed.

3. When you're prompted to perform the actions, enter yes.

   Terraform displays messages showing the progress. After all the resources are deleted, Terraform displays the following message:

   Destroy complete!
   

   If the deletion fails, see the troubleshooting guidance in Error when deleting a deployment.

When you no longer need the Google Cloud project that you used for the solution, you can delete the project. For more information, see Optional: Delete the project.

Optional: Delete the project

If you deployed the solution in a new Google Cloud project, and if you no longer need the project, then delete it by completing the following steps:

Caution: If you delete a project, all the resources in the project are permanently deleted.

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. At the prompt, type the project ID, and then click Shut down.

Optional: Delete the service account

If you deleted the project that you used for the solution, then skip this section.

As mentioned earlier in this guide, when you deployed the solution, a service account was created on your behalf. The service account was assigned certain IAM permissions temporarily; that is, the permissions were revoked automatically after the solution deployment and deletion operations were completed, but the service account isn't deleted. Google recommends that you delete this service account.

• If you deployed the solution through the Google Cloud console, go to the Solution deployments page. (If you're already on that page, refresh the browser.) A process is triggered in the background to delete the service account. No further action is necessary.

• If you deployed the solution by using the Terraform CLI, complete the following steps:

  1. In the Google Cloud console, go to the Service accounts page.

     Go to Service accounts

  2. Select the project that you used for the solution.

  3. Select the service account that you want to delete.

     The email ID of the service account that was created for the solution is in the following format:

     goog-sc-DEPLOYMENT_NAME-NNN@PROJECT_ID.iam.gserviceaccount.com
     

     The email ID contains the following values:

     • DEPLOYMENT_NAME: the name of the deployment.
     • NNN: a random 3-digit number.
     • PROJECT_ID: the ID of the project in which you deployed the solution.

  4. Click Delete.

Troubleshoot errors

The actions you can take to diagnose and resolve errors depend on the deployment method and the complexity of the error.

Errors when deploying through the console

If the deployment fails when you use the console, do the following:

1. Go to the Solution deployments page.

   If the deployment failed, the Status field shows Failed.

2. View the details of the errors that caused the failure:

   1. In the row for the deployment, click Actions.

      You might need to scroll to see Actions in the row.

   2. Select View Cloud Build logs.

3. Review the Cloud Build log and take appropriate action to resolve the issue that caused the failure.

Errors when deploying using the Terraform CLI

If the deployment fails when you use Terraform, the output of the terraform apply command includes error messages that you can review to diagnose the problem.

The examples in the following sections show deployment errors that you might encounter when you use Terraform.

API not enabled error

If you create a project and then immediately attempt to deploy the solution in the new project, the deployment might fail with an error like the following:

Error: Error creating Network: googleapi: Error 403: Compute Engine API has not
been used in project PROJECT_ID before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/compute.googleapis.com/overview?project=PROJECT_ID
then retry. If you enabled this API recently, wait a few minutes for the action
to propagate to our systems and retry.

If this error occurs, wait a few minutes and then run the terraform apply command again.

Error when deleting a deployment

In certain cases, attempts to delete a deployment might fail:

• After deploying a solution through the console, if you change any resource that was provisioned by the solution, and if you then try to delete the deployment, the deletion might fail. The Status field on the Solution deployments page shows Failed, and the Cloud Build log shows the cause of the error.
• After deploying a solution by using the Terraform CLI, if you change any resource by using a non-Terraform interface (for example, the console), and if you then try to delete the deployment, the deletion might fail. The messages in the output of the terraform destroy command show the cause of the error.

Review the error logs and messages, identify and delete the resources that caused the error, and then try deleting the deployment again.

If a console-based deployment doesn't get deleted and if you can't diagnose the error by using the Cloud Build log, then you can delete the deployment by using the Terraform CLI, as described in the next section.

Delete a console-based deployment by using the Terraform CLI

This section describes how to delete a console-based deployment if errors occur when you try to delete it through the console. In this approach, you download the Terraform configuration for the deployment that you want to delete and then use the Terraform CLI to delete the deployment.

1. Identify the region where the deployment's Terraform code, logs, and other data are stored. This region might be different from the region that you selected while deploying the solution.

   1. In the Google Cloud console, go to the Solution deployments page.

      Go to Solution deployments

   2. Select the project that contains the deployment that you want to delete.

   3. In the list of deployments, identify the row for the deployment that you want to delete.

   4. Click View all row content.

   5. In the Location column, note the second location, as highlighted in the following example:

      

2. In the Google Cloud console, activate Cloud Shell.

   Activate Cloud Shell

   At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

3. Create environment variables for the project ID, region, and name of the deployment that you want to delete:

   export REGION="REGION"
   export PROJECT_ID="PROJECT_ID"
   export DEPLOYMENT_NAME="DEPLOYMENT_NAME"
   

   In these commands, replace the following:

   • REGION: the location that you noted earlier in this procedure.
   • PROJECT_ID: the ID of the project where you deployed the solution.
   • DEPLOYMENT_NAME: the name of the deployment that you want to delete.

4. Get the ID of the latest revision of the deployment that you want to delete:

   export REVISION_ID=$(curl \
       -H "Authorization: Bearer $(gcloud auth print-access-token)" \
       -H "Content-Type: application/json" \
       "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}" \
       | jq .latestRevision -r)
       echo $REVISION_ID
   

   The output is similar to the following:

   projects/PROJECT_ID/locations/REGION/deployments/DEPLOYMENT_NAME/revisions/r-0
   

5. Get the Cloud Storage location of the Terraform configuration for the deployment:

   export CONTENT_PATH=$(curl \
       -H "Authorization: Bearer $(gcloud auth print-access-token)" \
       -H "Content-Type: application/json" \
       "https://config.googleapis.com/v1alpha2/${REVISION_ID}" \
       | jq .applyResults.content -r)
       echo $CONTENT_PATH
   

   The following is an example of the output of this command:

   gs://PROJECT_ID-REGION-blueprint-config/DEPLOYMENT_NAME/r-0/apply_results/content
   

6. Download the Terraform configuration from Cloud Storage to Cloud Shell:

   gcloud storage cp $CONTENT_PATH $HOME --recursive
   cd $HOME/content/infra
   

   Wait until the Operation completed message is displayed, as shown in the following example:

   Operation completed over 45 objects/268.5 KiB
   

7. Initialize Terraform:

   terraform init
   

   Wait until you see the following message:

   Terraform has been successfully initialized!
   

8. Remove the deployed resources:

   terraform destroy
   

   Terraform displays a list of the resources that will be destroyed.

   If any warnings about undeclared variables are displayed, ignore the warnings.

9. When you're prompted to perform the actions, enter yes.

   Terraform displays messages showing the progress. After all the resources are deleted, Terraform displays the following message:

   Destroy complete!
   

10. Delete the deployment artifact:

    curl -X DELETE \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json" \
        "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}?force=true&delete_policy=abandon"
    

11. Wait a few seconds and then verify that the deployment artifact was deleted:

    curl -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json" \
        "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}" \
        | jq .error.message
    

    If the output shows null, wait a few seconds and then run the command again.

    After the deployment artifact is deleted, a message as shown in the following example is displayed:

    Resource 'projects/PROJECT_ID/locations/REGION/deployments/DEPLOYMENT_NAME' was not found
    

Submit feedback

Jump Start Solutions are for informational purposes only and are not officially supported products. Google may change or remove solutions without notice.

To troubleshoot errors, review the Cloud Build logs and the Terraform output.

To submit feedback, do the following:

• For documentation, in-console tutorials, or the solution, use the Send Feedback button on the page.

• For unmodified code, create issues in the appropriate GitHub repository:

  • Terraform code
  • Application code

  GitHub issues are reviewed on a best-effort basis and are not intended for general usage questions.

• For issues with the products that are used in the solution, contact Cloud Customer Care.

What's next

To continue learning more about Google Cloud products and capabilities, see:

• Google Cloud web hosting