Create and verify a template

This quickstart helps you create and deploy a three-tier web application template that includes frontend, backend, and database components. The following image shows the design canvas, which includes the application components and connections.

A three-tier web application in the design canvas. The application includes frontend, backend, and database components.

You design the template by doing one of the following:

  • Add and connect components on the design canvas in Application Design Center.
  • Use natural language prompts in Gemini Cloud Assist.

After you complete the design, verify the template by deploying a test application in App Design Center.

To follow step-by-step guidance for this task directly in the Google Cloud console, click Guide me:

Guide me

Before you begin

  1. Set up App Design Center.

  2. Create a descendant project in your app-enabled folder.

    You'll deploy Google Cloud resources to this project when you deploy your application.

  3. Make sure that billing is enabled for your descendant project.

  4. To use Gemini Cloud Assist to create your design, see Set up Gemini Cloud Assist.

Make sure you have required roles

  1. To create templates, make sure you have one of the following roles on the management project:

  2. To deploy applications, make sure you have one of the following roles on the management project:

  3. To create a service account during deployment, grant the following role on the descendant project:

Create a new template and add details

Use the App Design Center design canvas or Gemini Cloud Assist to design your template.

Design canvas

  1. In the Google Cloud console, go to the Templates page.

    Go to Templates

  2. Click Create Template and enter the following details:

    1. In the Template ID field, enter quickstart-three-tier-web-app.

    2. In the Template Name field, enter Quickstart three-tier web app .

    3. In the Description field, enter A template to generate a three-tier web application.

    4. Click Create template.

    The template is created and the design canvas is displayed.

  3. In the Components area, click the following components to add them to the design canvas:

    • Cloud Run (add two components)
    • Cloud SQL (PostgreSQL)

  4. To create connections between components, do the following:

    1. From the blue dot at the bottom of cloud-run-1, drag to the blue dot at the top of cloud-run-2.

    2. From the blue dot at the bottom of cloud-run-2, drag to the blue dot at the top of sql-postgresql-1.

    Your template contains three components. The canvas displays between components to represent connections.

Gemini Cloud Assist

  1. In the Google Cloud console toolbar, click spark Open or close Gemini Cloud Assist chat.

    The Cloud Assist panel opens.

  2. In Gemini Cloud Assist chat, enter the following prompt:

    I want to create a three-tier web application.

    Gemini Cloud Assist generates a basic design for a three-tier web application.

  3. To remove the load balancers and Secret Manager components, enter the following prompt:

    I don't need load balancers or Secret Manager.

    Gemini Cloud Assist updates the design to remove the components.

  4. Review the updated design that includes the following components:

    • Cloud Run (two components)
    • Cloud SQL for PostgreSQL

  5. Click Edit app design.

    The Create a new template page is displayed.

  6. Enter the following template details:

    1. In the Template ID field, enter quickstart-three-tier-web-app.

    2. In the Template Name field, enter Quickstart three-tier web app .

    3. In the Description field, enter A template to generate a three-tier web application.

  7. Click Create template.

    The system creates a new template and displays the design canvas.

Create an application draft

  1. From the design canvas, click Configure an app.

  2. Click Create new application and do the following:

    1. In the Name field, enter quickstart-three-tier-test.

    2. In the Display Name field, enter Quickstart three-tier test.

    3. From the Region list, select us-central1 (Iowa).

    4. From the Environment list, select Test.

    5. From the Criticality list, select Low.

    6. In the Scope area, from the Application scope list, select Regional.

  3. Click Create Application.

    The system creates the application draft.

Configure components

  1. In the design canvas, click cloud-run-1 and do the following in the Configuration area:

    1. From the Project ID list, select the descendant project you created in Before you begin.

    2. In the Service Name field, enter frontend-service.

    3. Click Save.

  2. In the design canvas, click cloud-run-2 and do the following in the Configuration area:

    1. From the Project ID list, select the descendant project you created in Before you begin.

    2. In the Service Name field, enter backend-service.

    3. Click Save.

  3. In the design canvas, click sql-postgresql-1 and do the following in the Configuration area:

    1. From the Project ID list, select the descendant project you created in Before you begin.

    2. In the Name field, enter database-postgresql.

    3. From the Database Version list, select POSTGRES_15.

    4. From the Zone drop-down list, select us-central1-a.

    5. Click Save.

    The canvas displays a green check mark in each component to convey that you have specified the required parameters. You can now deploy the application draft to the Test environment for verification.

Deploy the application

  1. Click Deploy.

  2. In the Select a service account area, do the following:

    1. Click Create a new service account.

    2. Click Proceed.

  3. Click Deploy.

    After a few minutes, the system deploys the application and creates resources in your project. The system displays the following details:

    • A link to App Hub, where you can view deployed resource details, including links to monitoring dashboards.
    • Links to Cloud Build logs, which you can use to troubleshoot deployment errors.
    • Outputs like service URIs are displayed, which you can use to interact with deployed resources.

  4. To build on this quickstart, see Update an application template and redeploy.

Clean up

To avoid incurring charges to your Google Cloud account for the resources used on this page, follow these steps.

Delete the deployed application

  1. From the navigation menu, click Applications.

    Go to Applications

  2. From the table, click Quickstart three-tier web app.

  3. Click Actions and select Delete application.

  4. In the Delete field, enter Quickstart three-tier web app.

  5. Click Delete.

The system deletes the application, including the following:

  • The application details are removed from App Design Center.
  • The underlying App Hub application is deleted.
  • The underlying resources are deleted.

Optional: Delete the project

To delete the descendant project you created in Before you begin, do the following:

  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.

What's next