About this codelab
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
- 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.
- If you do not already have a GitHub account, you must create a GitHub account
- Use an existing GitHub account if you have one. GitHub is more likely to block a new account as spam.
- Configure two-factor authentication on your GitHub account to reduce the chances of your account being marked as spam.
3. Project setup
- Sign-in to the Google Cloud Console.
- 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.
- Create a new project or choose to reuse an existing project.
- Confirm billing is enabled in My projects in Cloud Billing
- If your new project says
Billing is disabled
in theBilling account
column:- Click the three dots in the
Actions
column - Click Change billing
- Select the billing account you would like to use
- Click the three dots in the
- If you are attending a Gen AI for Devs event, the account will likely be named Google Cloud Platform Trial Billing Account
- If your new project says
4. Open Cloud Shell Editor
- Navigate to Cloud Shell Editor
- If the terminal doesn't appear on the bottom of the screen, open it:
- Click the hamburger menu
- Click Terminal
- Click New Terminal
- Click the hamburger menu
- 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}'
- You can list all your project ids with:
- Format:
- If prompted to authorize, click Authorize to continue.
- You should see this message:
If you see aUpdated property [core/project].
WARNING
and are askedDo you want to continue (Y/N)?
, then you have likely entered the project ID incorrectly. PressN
, pressEnter
, and try to run thegcloud 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
- Set your global git user email:
git config --global user.email "you@example.com"
- Set your global git user name:
git config --global user.name "Your Name"
- 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:
- Navigate to the home directory:
cd ~
- Create the
codelab-genai
directory:mkdir codelab-genai
- Navigate to the
codelab-genai
directory:cd codelab-genai
- Create a
index.js
file:touch index.js
- Create the
package.json
file:npm init es6 -y
- Add
express
as a dependencynpm install express
- Add
.gitignore
file to prevent committingnode_modules
echo node_modules/ >> .gitignore
- Open the
index.js
file in Cloud Shell Editor: An empty file should now appear in the top part of the screen. This is where you can edit thiscloudshell edit index.js
index.js
file. - Copy the following code and paste it into the opened
index.js
file: After a few seconds, Cloud Shell Editor will save your code automatically. This code responds to http requests with our "Hello world!" greeting.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}`);
});
Your initial code for your application is finished and ready to be stored in version control.
8. Create a repository
- Return to the Cloud Shell terminal on the bottom of your screen.
- Ensure that you are still in the correct directory:
cd ~/codelab-genai
- Initialize your git repository
git init -b main
- Log in to the GitHub CLI
Pressgh auth login
Enter
to accept the default options and follow the instructions in the GitHub CLI tool including:- What account do you want to log into?
GitHub.com
- What is your preferred protocol for Git operations on this host?
HTTPS
- Authenticate Git with your GitHub credentials?
Y
(Skip if this one does not appear.) - How would you like to authenticate GitHub CLI?
Login with a web browser
- Copy your one-time code
- Open https://github.com/login/device
- Paste your one-time code
- Click Authorize github
- Complete your login
- What account do you want to log into?
- Confirm you are logged in:
If you have logged in successfully, this should output your GitHub username.gh api user -q ".login"
- Create a
GITHUB_USERNAME
variableGITHUB_USERNAME=$(gh api user -q ".login")
- Confirm you have created the environment variable:
If you have successfully created the variable, this should output your GitHub username.echo ${GITHUB_USERNAME}
- Create an empty GitHub repository named
codelab-genai
: If you receive the error:gh repo create codelab-genai --private
Then you already have a repository namedGraphQL: Name already exists on this account (createRepository)
codelab-genai
. You have two options to continue following this tutorial:- Delete the existing GitHub repository
- Create a repository with a different name and remember to change it in the following commands.
- Add the
codelab-genai
repository as the remoteorigin
:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Share your code
- Confirm you are in the correct directory:
cd ~/codelab-genai
- Add all files in the current directory to this commit:
git add .
- Create the first commit:
git commit -m "add http server"
- Push your commit to
main
branch of theorigin
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
- Leave the Cloud Shell Editor tab open. We will return to this tab later.
- In a new tab, visit the Cloud Run page
- Select the correct Google Cloud Project in the console
- Click CONNECT REPO
- Click SET UP WITH CLOUD BUILD
- Select GitHub as the Repository Provider
- If you're not logged into your GitHub account in the browser, log in with your credentials.
- Click Authenticate and then click Continue.
- 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.
- 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.
- Select
your-user-name/codelab-genai
as the Repository- If the repository is not present, click the Manage Connected Repositories link.
- Leave Branch as
^main$
- Click Go, Node.js, Python, Java, .NET Core, Ruby or PHP via Google Cloud's buildpacks
- Leave the other fields (
Build context directory
,Entrypoint
, andFunction target
) as they are.
- Leave the other fields (
- Click Save
- Select GitHub as the Repository Provider
- Scroll down to Authentication
- Click Allow unauthenticated invocations
- 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.
- Navigate to Cloud Shell Editor
- If the terminal doesn't appear on the bottom of the screen, open it:
- Click the hamburger menu
- Click Terminal
- Click New Terminal
- Click the hamburger menu
- 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}'
- You can list all your project ids with:
- Format:
- If prompted to authorize, click Authorize to continue.
- You should see this message:
If you see aUpdated property [core/project].
WARNING
and are askedDo you want to continue (Y/N)?
, then you have likely entered the project ID incorrectly. PressN
, pressEnter
, and try to run thegcloud config set project
command again.
Add Genkit and Vertex AI to your application
- Return to the Cloud Shell terminal on the bottom of your screen.
- Ensure that you are still in the correct directory:
cd ~/codelab-genai
- Install the Node.js Genkit SDK:
npm install @genkit-ai/ai
- Install the Node.js Genkit SDK for Vertex AI:
npm install @genkit-ai/vertexai
- Reopen
index.js
in the Cloud Shell Editorcloudshell edit ~/codelab-genai/index.js
- 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}`);
});
- Ensure that you are still in the correct directory in Cloud Shell:
cd ~/codelab-genai
- Run these commands to commit a new version of your application to your local git repository:
git add .
git commit -m "add latest changes" - Push the changes to GitHub:
git push
- 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
- Return to the Cloud Shell terminal on the bottom of your screen.
- Ensure that you are still in the correct directory:
cd ~/codelab-genai
- Create a
prompts
folder to store your prompts:mkdir prompts
- Create a
animal-facts.prompt
file to create your first prompt:touch prompts/animal-facts.prompt
- Open the
animal-facts.prompt
file in Cloud Shell Editor:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- 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. - Open the
index.js
file in Cloud Shell Editor:cloudshell edit ~/codelab-genai/index.js
- 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}`);
});
- Ensure that you are still in the correct directory in Cloud Shell:
cd ~/codelab-genai
- Run these commands to commit a new version of your application to your local git repository:
git add .
git commit -m "add latest changes" - Push the changes to GitHub:
git push
- 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.
- Return to the Cloud Shell terminal on the bottom of your screen.
- Ensure that you are still in the correct directory:
cd ~/codelab-genai
- Open the
animal-facts.prompt
file in Cloud Shell Editor:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- 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}}
- Ensure that you are still in the correct directory in Cloud Shell:
cd ~/codelab-genai
- Run these commands to commit a new version of your application to your local git repository:
git add .
git commit -m "add latest changes" - Push the changes to GitHub:
git push
- 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:
- Genkit Docs: Get Started
- Codelab to add observability to your Node.js application: Practical observability techniques for Generative AI application in Javascript
- Codelab to add a frontend to your application with Next.js: Automatically Deploy Generative AI Next.js Web Application from Version Control to Cloud Run
- Codelab to show how to use function calling: How to use Gemini function calling with Cloud Run
- Codelab to use AI to process video content: How to use Cloud Run Jobs Video Intelligence API to process a Video scene-by-scene