Automatically Deploy Generative AI Node.js Genkit Web Application from Version Control to Cloud Run

Automatically Deploy Generative AI Node.js Genkit Web Application from Version Control to Cloud Run

About this codelab

subjectLast updated Jan 22, 2025
account_circleWritten by Peter Friese, Luke Schlangen

1. Overview

Deploying a web application for the first time can be intimidating. Even after the first deployment, if the process is too much work, you might avoid deploying new versions of your application. With continuous deployment, you can automatically deploy changes of your application with ease.

In this lab, you write a web application and configure Cloud Run to automatically deploy your application when a change is made to the source code of your application. Then you modify your application and deploy it again.

What you will learn

  • Write a web application with Cloud Shell Editor
  • Store your application code in GitHub
  • Automatically deploy your application to Cloud Run
  • Add generative AI to your application using Genkit
  • Manage LLM prompts using the dotprompt library

2. Prerequisites

  1. If you do not already have a Google account, you must create a Google account.
    • Use a personal account instead of a work or school account. Work and school accounts may have restrictions that prevent you from enabling the APIs needed for this lab.
  2. If you do not already have a GitHub account, you must create a GitHub account

3. Project setup

  1. Sign-in to the Google Cloud Console.
  2. Enable billing in the Cloud Console.
    • Completing this lab should cost less than $1 USD in Cloud resources.
    • You can follow the steps at the end of this lab to delete resources to avoid further charges.
    • New users are eligible for the $300 USD Free Trial.
    • Attending a Gen AI for Devs event? A $1 USD credit may be available.
  3. Create a new project or choose to reuse an existing project.
  4. Confirm billing is enabled in My projects in Cloud Billing
    • If your new project says Billing is disabled in the Billing account column:
      1. Click the three dots in the Actions column
      2. Click Change billing
      3. Select the billing account you would like to use
    • If you are attending a Gen AI for Devs event, the account will likely be named Google Cloud Platform Trial Billing Account

4. Open Cloud Shell Editor

  1. Navigate to Cloud Shell Editor
  2. If the terminal doesn't appear on the bottom of the screen, open it:
    • Click the hamburger menu Hamburger menu icon
    • Click Terminal
    • Click New TerminalOpen new terminal in Cloud Shell Editor
  3. In the terminal, set your project with this command:
    • Format:
      gcloud config set project [PROJECT_ID]
    • Example:
      gcloud config set project lab-project-id-example
    • If you can't remember your project id:
      • You can list all your project ids with:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Set project id in Cloud Shell Editor terminal
  4. If prompted to authorize, click Authorize to continue. Click to authorize Cloud Shell
  5. You should see this message:
    Updated property [core/project].
    
    If you see a WARNING and are asked Do you want to continue (Y/N)?, then you have likely entered the project ID incorrectly. Press N, press Enter, and try to run the gcloud config set project command again.

5. Enable APIs

In the terminal, enable the APIs:

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

This command may take a few minutes to complete, but it should eventually produce a successful message similar to this one:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Configure Git

  1. Set your global git user email:
    git config --global user.email "you@example.com"
  2. Set your global git user name:
    git config --global user.name "Your Name"
  3. Set your global git default branch to main:
    git config --global init.defaultBranch main

7. Write your code

To write an application in Node.js:

  1. Navigate to the home directory:
    cd ~
  2. Create the codelab-genai directory:
    mkdir codelab-genai
  3. Navigate to the codelab-genai directory:
    cd codelab-genai
  4. Create a index.js file:
    touch index.js
  5. Create the package.json file:
    npm init es6 -y
  6. Add express as a dependency
    npm install express
  7. Add .gitignore file to prevent committing node_modules
    echo node_modules/ >> .gitignore
  8. Open the index.js file in Cloud Shell Editor:
    cloudshell edit index.js
    An empty file should now appear in the top part of the screen. This is where you can edit this index.js file. Show that code goes in the top section of the screen
  9. Copy the following code and paste it into the opened index.js file:
    import express from 'express';

    const app = express();
    app.get('/', async (req, res) => {
        res.send('Hello world!');
    });

    const port = process.env.PORT || 8080;
    app.listen(port, () => {
        console.log(`codelab-genai: listening on port ${port}`);
    });
    After a few seconds, Cloud Shell Editor will save your code automatically. This code responds to http requests with our "Hello world!" greeting.

Your initial code for your application is finished and ready to be stored in version control.

8. Create a repository

  1. Return to the Cloud Shell terminal on the bottom of your screen.
  2. Ensure that you are still in the correct directory:
    cd ~/codelab-genai
  3. Initialize your git repository
    git init -b main
  4. Log in to the GitHub CLI
    gh auth login
    Press Enter to accept the default options and follow the instructions in the GitHub CLI tool including:
    1. What account do you want to log into? GitHub.com
    2. What is your preferred protocol for Git operations on this host? HTTPS
    3. Authenticate Git with your GitHub credentials? Y (Skip if this one does not appear.)
    4. How would you like to authenticate GitHub CLI? Login with a web browser
    5. Copy your one-time code
    6. Open https://github.com/login/device
    7. Paste your one-time code
    8. Click Authorize github
    9. Complete your login
  5. Confirm you are logged in:
    gh api user -q ".login"
    If you have logged in successfully, this should output your GitHub username.
  6. Create a GITHUB_USERNAME variable
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. Confirm you have created the environment variable:
    echo ${GITHUB_USERNAME}
    If you have successfully created the variable, this should output your GitHub username.
  8. Create an empty GitHub repository named codelab-genai:
    gh repo create codelab-genai --private
    If you receive the error:
    GraphQL: Name already exists on this account (createRepository)
    
    Then you already have a repository named codelab-genai. You have two options to continue following this tutorial:
  9. Add the codelab-genai repository as the remote origin:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. Share your code

  1. Confirm you are in the correct directory:
    cd ~/codelab-genai
  2. Add all files in the current directory to this commit:
    git add .
  3. Create the first commit:
    git commit -m "add http server"
  4. Push your commit to main branch of the origin repository:
    git push -u origin main

You can run this command and visit the resulting URL to view your application code on GitHub:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"

10. Set up automatic deployments

  1. Leave the Cloud Shell Editor tab open. We will return to this tab later.
  2. In a new tab, visit the Cloud Run page
  3. Select the correct Google Cloud Project in the console Google Cloud Console project dropdown
  4. Click CONNECT REPO
  5. Click SET UP WITH CLOUD BUILD
    1. Select GitHub as the Repository Provider
      • If you're not logged into your GitHub account in the browser, log in with your credentials.
    2. Click Authenticate and then click Continue.
    3. After logging in, you'll see a message on the Cloud Run page stating The GitHub App is not installed on any of your repositories.
    4. Click on the INSTALL GOOGLE CLOUD BUILD button.
      • On the Installation Setup page, select Only select repositories and choose the codelab-genai repository which you created through CLI.
      • Click on Install
      • Note: If you have a lot of GitHub repositories, this can take a few minutes to load.
    5. Select your-user-name/codelab-genai as the Repository
      • If the repository is not present, click the Manage Connected Repositories link.
    6. Leave Branch as ^main$
    7. Click Go, Node.js, Python, Java, .NET Core, Ruby or PHP via Google Cloud's buildpacks
      • Leave the other fields (Build context directory, Entrypoint, and Function target) as they are.
    8. Click Save
  6. Scroll down to Authentication
  7. Click Allow unauthenticated invocations
  8. Click CREATE

Once the build finishes (which will take several minutes), run this command and visit the resulting URL to view your running application:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Change your code

Return to Cloud Shell Editor

If you still have Cloud Shell Editor open, you can skip these steps.

  1. Navigate to Cloud Shell Editor
  2. If the terminal doesn't appear on the bottom of the screen, open it:
    • Click the hamburger menu Hamburger menu icon
    • Click Terminal
    • Click New TerminalOpen new terminal in Cloud Shell Editor
  3. In the terminal, set your project with this command:
    • Format:
      gcloud config set project [PROJECT_ID]
    • Example:
      gcloud config set project lab-project-id-example
    • If you can't remember your project id:
      • You can list all your project ids with:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Set project id in Cloud Shell Editor terminal
  4. If prompted to authorize, click Authorize to continue. Click to authorize Cloud Shell
  5. You should see this message:
    Updated property [core/project].
    
    If you see a WARNING and are asked Do you want to continue (Y/N)?, then you have likely entered the project ID incorrectly. Press N, press Enter, and try to run the gcloud config set project command again.

Add Genkit and Vertex AI to your application

  1. Return to the Cloud Shell terminal on the bottom of your screen.
  2. Ensure that you are still in the correct directory:
    cd ~/codelab-genai
  3. Install the Node.js Genkit SDK:
    npm install @genkit-ai/ai
  4. Install the Node.js Genkit SDK for Vertex AI:
    npm install @genkit-ai/vertexai
  5. Reopen index.js in the Cloud Shell Editor
    cloudshell edit ~/codelab-genai/index.js
  6. Replace the code in your index.js file with:
    import express from 'express';
    const app = express();

    import { genkit } from 'genkit';
    import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';

    const ai = genkit({
        plugins: [
            vertexAI({ location: 'us-central1' }),
        ],
    });

    app.get('/', async (req, res) => {
        const animal = req.query.animal || 'dog';
        const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
        const llmResponse = await ai.generate({
            model: gemini15Flash,
            prompt: prompt,
        });
        const html = llmResponse.text;
        res.send(html);
    });

    const port = process.env.PORT || 8080;
    app.listen(port, () => {
        console.log(`codelab-genai: listening on port ${port}`);
    });
  1. Ensure that you are still in the correct directory in Cloud Shell:
    cd ~/codelab-genai
  2. Run these commands to commit a new version of your application to your local git repository:
    git add .
    git commit -m "add latest changes"
  3. Push the changes to GitHub:
    git push
  4. Once the build finishes, run this command and visit your deployed application:
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
        "$( \
            gcloud run services list | \
            grep codelab-genai | \
            awk '/URL/{print $2}' | \
            head -1 \
        )" \n\n"

It may take several minutes for the build to finish before you can see your changes.

You can see the history of all revisions here: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

12. (Optional) Use .prompt files with Genkit

  1. Return to the Cloud Shell terminal on the bottom of your screen.
  2. Ensure that you are still in the correct directory:
    cd ~/codelab-genai
  3. Create a prompts folder to store your prompts:
    mkdir prompts
  4. Create a animal-facts.prompt file to create your first prompt:
    touch prompts/animal-facts.prompt
  5. Open the animal-facts.prompt file in Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  6. Edit animal-facts.prompt and paste the following code into it:
    ---
    model: vertexai/gemini-1.5-flash
    input:
        schema:
            animal: string
    ---

    Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
  7. Open the index.js file in Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/index.js
  8. Replace the code in your index.js file with:
    import express from 'express';
    const app = express();

    import { genkit } from 'genkit';
    import { vertexAI } from '@genkit-ai/vertexai';

    const ai = genkit({
        plugins: [
            vertexAI({ location: 'us-central1' }),
        ],
    });

    app.get('/', async (req, res) => {
        const animal = req.query.animal || 'dog';
        const animalPrompt = ai.prompt('animal-facts');
        const llmResponse = await animalPrompt({animal});
        const html = llmResponse.text;
        res.send(html);
    });

    const port = process.env.PORT || 8080;
    app.listen(port, () => {
        console.log(`codelab-genai: listening on port ${port}`);
    });
  1. Ensure that you are still in the correct directory in Cloud Shell:
    cd ~/codelab-genai
  2. Run these commands to commit a new version of your application to your local git repository:
    git add .
    git commit -m "add latest changes"
  3. Push the changes to GitHub:
    git push
  4. Once the build finishes, run this command and visit your deployed application:
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
        "$( \
            gcloud run services list | \
            grep codelab-genai | \
            awk '/URL/{print $2}' | \
            head -1 \
        )" \n\n"

It may take several minutes for the build to finish before you can see your changes.

You can see the history of all revisions here: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Optional) Use system prompts

This step assumes you have already added .prompt files in the previous step.

  1. Return to the Cloud Shell terminal on the bottom of your screen.
  2. Ensure that you are still in the correct directory:
    cd ~/codelab-genai
  3. Open the animal-facts.prompt file in Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  4. Edit animal-facts.prompt and paste the following code into it:
    ---
    model: vertexai/gemini-1.5-flash
    config:
        temperature: 0.9
    input:
        schema:
            animal: string
    ---

    role "system"
    The user should have submitted an animal.
    If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts.
    Give the user 10 fun facts about the animal the user provided.
    All responses should be valid HTML without markdown backticks.

    role "user"
    {{animal}}
  1. Ensure that you are still in the correct directory in Cloud Shell:
    cd ~/codelab-genai
  2. Run these commands to commit a new version of your application to your local git repository:
    git add .
    git commit -m "add latest changes"
  3. Push the changes to GitHub:
    git push
  4. Once the build finishes, run this command and visit your deployed application:
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
        "$( \
            gcloud run services list | \
            grep codelab-genai | \
            awk '/URL/{print $2}' | \
            head -1 \
        )" \n\n"

It may take several minutes for the build to finish before you can see your changes.

You can see the history of all revisions here: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. Congratulations

In this lab, you wrote a web application and configured Cloud Run to automatically deploy your application when a change was made to the source code of your application. Then you modified your application and deployed it again.

If you enjoyed this lab, you can try it again in another coding language or framework:

Here are some options for continuing your learning: