ABBY CAREY: Hey, Martin, what are you working on?
MARTIN OMANDER: Hey, Abby.
I'm building a new website application for teachers.
And it will use Cloud Run.
Is there an easy way to get started?
ABBY CAREY: Are you using Visual Studio Code?
MARTIN OMANDER: Yes, I am.
ABBY CAREY: Perfect.
Let me show you how you can use the Cloud Run
extension to build a starter app,
run it locally, and apply it to the cloud all within minutes.
[MUSIC PLAYING]
So let's take a look at what we've got here.
MARTIN OMANDER: So I created a project here in Cloud Console
and created an empty folder on my local hard drive.
Now, I'm not sure what to do next.
ABBY CAREY: With Cloud Code, you can get a hello world app
up and running fast.
Cloud Code has a repository of samples
that show best practices for a variety of languages.
They're a good starting off point and also great
reference for seeing best practices in action.
Is there a language you're interested in starting with?
MARTIN OMANDER: Yeah, let's build a Node.js app.
ABBY CAREY: Awesome.
First you'll need to install Cloud Code.
Go ahead and click the Extensions icon.
MARTIN OMANDER: All right.
Yep, I did.
ABBY CAREY: Now type in Cloud Code.
MARTIN OMANDER: Cloud Code.
Ah, here it is.
ABBY CAREY: Yep.
Hit the Install button.
MARTIN OMANDER: All right, install.
Installing.
All right.
ABBY CAREY: Now there are new icons to the left
and a Cloud Code button in your status bar.
MARTIN OMANDER: Ah.
Yep.
ABBY CAREY: Let's get a hello, world Node.js sample going.
First click the Cloud Code button in the status bar.
Then select New Application--
MARTIN OMANDER: New Application, yep.
ABBY CAREY: --Cloud Run--
MARTIN OMANDER: Cloud Run Application, yep.
ABBY CAREY: --and Node.js Cloud Run
MARTIN OMANDER: Node.js Cloud Run.
OK.
Hello, world 1, sure.
Put it there.
Oh, it's downloading the sample.
Great.
Oh, awesome.
It looks like there's some code here, index.js and a Docker
file here too.
That's great because Docker files is sometimes
a little hard to write.
ABBY CAREY: Yep.
These samples can be built with both Docker or Buildpacks.
MARTIN OMANDER: So, Abby, you mentioned earlier
that I can run my Cloud Run service locally.
How would I do that?
ABBY CAREY: Cloud Code comes with a Cloud Run emulator.
The emulator emulates the Cloud Run environment locally.
To use it, you'll need to have Docker installed first.
MARTIN OMANDER: OK.
Let me do a quick search on how to do that.
Install Docker Mac.
OK, Docker Desktop on Mac.
OK.
So I'll install this.
Let's refill our tea and meet back up in a few minutes.
ABBY CAREY: Sounds good.
MARTIN OMANDER: I now have Docker installed.
And I've also started Docker Desktop
and I can even see a little Docker symbol up here
in my toolbar.
ABBY CAREY: Awesome.
Let's try running this locally now.
First let's make sure you're signed in.
Click the Cloud Code Cloud Run button.
And now click that little Login button there.
MARTIN OMANDER: Click Here to Log In?
ABBY CAREY: Yeah.
MARTIN OMANDER: Very good.
Uh-huh, something's happening.
Oh, look at that.
I want to pick this account.
View my data, view manage Compute Engine resources.
Sure.
You're now authenticated with a Google Cloud SDK.
ABBY CAREY: Nice.
MARTIN OMANDER: Yay.
ABBY CAREY: Now back in VS Code, let's
go ahead and click the Cloud Code
button at the bottom of the screen again in the status bar.
MARTIN OMANDER: I seem to have the wrong project here.
How do I change project?
ABBY CAREY: Oh, yeah, you have to click
that little Switch button.
MARTIN OMANDER: Oh, this one.
OK.
Got it.
ABBY CAREY: Yeah.
MARTIN OMANDER: Let's see.
Teacher's Aid, OK.
ABBY CAREY: Yes.
MARTIN OMANDER: Ah, teacher's aid,
no Cloud Run services in that project.
That sounds about right.
ABBY CAREY: Now go ahead and click the Cloud Code button
at the bottom of the screen.
MARTIN OMANDER: Cloud Code, bottom of the screen.
OK.
I'm here.
ABBY CAREY: Yes.
And now could run on Cloud Run Emulator.
MARTIN OMANDER: Run on the emulator.
ABBY CAREY: With setting it up, you
get the same configuration options
you'd see when deploying to the cloud
except you're deploying locally to the emulator.
Go ahead and in Build Settings, let's switch the builder
to Buildpacks.
That way, you'll get hot reloading.
This makes updating code super fast.
Now, pop open the Show Advanced Settings.
To best emulate running on Cloud Run, set CPUs to One
Virtual CPU.
MARTIN OMANDER: CPU, one.
OK.
ABBY CAREY: Now scroll to the bottom and click Run.
MARTIN OMANDER: OK.
Let's see.
Ah, there it is, Run.
ABBY CAREY: First time you kick off the elevator
can take around five minutes.
So go grab a snack to go with that tea.
Future ones will be much faster.
MARTIN OMANDER: All right, Abby.
Looks like it's done.
Let's see.
Forwarded URL from service hello world.
Do I click this link here?
ABBY CAREY: Yep.
MARTIN OMANDER: Let's have a look.
Oh, look at that.
It's running!
ABBY CAREY: Yeah, that there is your sample
app running in the emulator.
MARTIN OMANDER: Awesome!
That was super easy.
So now that it's running in the emulator,
what happens if I make changes to my code?
ABBY CAREY: Go ahead and test it out.
Maybe try it updating the main response
on line 47 of your index.js file to return a simple message.
MARTIN OMANDER: Oh, right.
So right now it's compiling a handlebars template
or something, a template, and outputting all the HTML
from the template.
But I'll replace that.
So instead it will say hello world!
And I save that.
Oh, something happened down here.
It looks like it just updated.
Let me refresh the browser.
Hello world!
It updated.
ABBY CAREY: Cloud Code supports hot reloading
when building Node.js apps with Buildpacks, which
makes updates take seconds.
If you instead build with a Docker file,
a complete rebuild and redeploy will happen,
which isn't quite as fast.
That update kicked off after saving
because you have watch mode turned on in your one
configuration we just made.
It can be turned off at any time if you don't like this feature.
MARTIN OMANDER: OK.
That wasn't too difficult. The Cloud Code's UI
is really similar to Cloud Console.
But I plan on adding Datastore to my Cloud Run service.
Can the Cloud Code extension help me with that too?
ABBY CAREY: It actually can.
Cloud Code has an integrated GCP API Explorer.
Just click the Cloud Code API icon to the left there.
MARTIN OMANDER: Let's see.
It says API here.
Is this the one?
ABBY CAREY: Yep.
MARTIN OMANDER: Oh, I see lots of Google APIs here.
Let's see, databases, databases--
ooh, Cloud Datastore API, there it is.
ABBY CAREY: Mm-hmm.
Now, if you scroll down a little here--
oh, it looks like, from here, you
can enable the API with a click and read up
on how you can get it working in your project.
It looks like Datastore's enabled by default,
which saves you a click here.
Now go ahead and install the client library.
MARTIN OMANDER: Ah, install a client library.
Let's see, not Java.
Node.js-- ooh, this little Play button there.
Oh, cool.
That runs npm install for the Datastore library.
Now I've got the Datastore NPM package installed here.
And so I have--
I can use Datastore.
And then in the Teachers Aid project,
I had previously set up Datastore and put some data in.
Let me show you.
So here I put in the kind, course.
So these are courses.
And I put in two courses so far, trigonometry and calculus.
ABBY CAREY: Now head back to VS Code.
There should be a handy documentation link
to help you get started with the Datastore API.
MARTIN OMANDER: Let's see, invoke the API--
ah, documentation.
Let's go in and take a look at that.
So here's some code for the Cloud Datastore Node.js client,
looks good.
Install the library, OK, that happened already.
Make this a little bigger.
Using the client library--
OK, this looks promising.
It looks like it's creating a new entity.
That's not what I want to do.
I want to read my existing entities, the trigonometry
and calculus courses from the database.
Let's see, I'll keep scrolling, error handling,
importing tasks, delete-- oh, list tasks.
That sounds good.
I'll click there.
All right, good.
Here we have some code that shows how
to use the Datastore library.
So I guess we need to declare an import require Datastore
at the top of the code.
So I'll copy that--
let's see-- up here near the top of the code,
paste those in Datastore.
OK.
Require Datastore.
And it looks like there's a function called listTasks.
It seems to run a query against Datastore.
That's looking promising.
I'll just paste that whole function in here at the top
as well.
And then I guess this is just a function that
isn't called from anywhere.
So I'll just, at the beginning of my main
here, I'll just call it.
And it's asynchronous, so I'll put in await there.
And it looks like the code--
I'm looking at it here.
It prints stuff to the console.
So it doesn't show anything to the user in the browser.
But it prints to the server log.
It says tasks.
And then it goes over all the tasks in the database
and prints them out in the server console.
So I'll just hit Save again and the output here.
ABBY CAREY: That should trigger the hot reloading there.
MARTIN OMANDER: Uh-huh.
Very nice.
I see that.
And off to the server we go.
Localhost.
Let me reload this.
Very nice.
It still says Hello world!
I haven't broken anything.
Now, where can I see my server logs,
these console log statements?
ABBY CAREY: So go ahead and go back to VS code.
And you see that little dropdown there
that says Cloud Run, Run Debug?
Click that.
MARTIN OMANDER: Yeah.
ABBY CAREY: And then switch to the Detailed view.
MARTIN OMANDER: Oh, detailed.
Uh-huh.
Very nice.
Ah, here's tasks.
That corresponds to line 27 up here, very good.
And then it should loop over all the tasks
and print them out here on line 30.
But it doesn't.
Seems like, Abby, I have a bug in my code here.
I expect to see the names of my courses, trigonometry
and calculus.
Is there a way to debug this error?
ABBY CAREY: Oh, yeah.
First go ahead and click that Stop button at the top there.
MARTIN OMANDER: Stop.
ABBY CAREY: Now make sure you have Debug Toggle Auto
Attach set to Smarter Always.
MARTIN OMANDER: All right, Debug Toggle Auto Attach,
ah, it's set to Smart already.
Good.
ABBY CAREY: Yeah.
And this makes it so that we can attach to the running
application for debugging.
Now place a breakpoint at the problem spot.
MARTIN OMANDER: So I think here on line 26,
this is where we read the elements, records,
from the database.
So maybe I'll place a breakpoint here on 27
so we can expect what the tasks variable contains.
ABBY CAREY: Looks good.
So now let's go ahead and click that Cloud Code status bar
again.
MARTIN OMANDER: All right.
Cloud Code-- ah, there it is.
ABBY CAREY: And then click Debug on Cloud Run Emulator.
MARTIN OMANDER: Ah, Debug, I see it.
ABBY CAREY: Yep.
Now we're going to debug this locally.
MARTIN OMANDER: Oh, it switched back to Visual Studio Code.
In the debugger here.
I see that because it's orange status bar.
And, oh, look, it hit my breakpoint,
this breakpoint on 27.
So let's see here.
Tasks, that's what I wanted to look at.
So tasks is an array.
That's good.
Oh, an array of length 0.
Hmm, so it's not getting anything from the database.
Oh, I think I know why.
Here I'm looking for the task entity in the database.
And my database doesn't have task entities.
They're course entities.
So I'll copy that.
And I will look for course entities.
And I won't sort them by created.
I will sort them by--
because I don't have a created.
They have a name, however, so I'll sort them by name.
Name, there we go.
I'm saving.
ABBY CAREY: So watch mode doesn't work while debugging.
So go ahead and to view your bug fix,
let's detach our debugger by clicking that little Unplug
button up there.
MARTIN OMANDER: Unplugging.
ABBY CAREY: And hit Stop.
MARTIN OMANDER: Stop.
ABBY CAREY: Now click that Cloud Code status bar again.
MARTIN OMANDER: All right.
ABBY CAREY: And then let's Run Cloud Run Emulator one more
time.
MARTIN OMANDER: One more time.
It looks like it started running.
I'll hit that local host URL again.
It says Hello world!
Good, nothing is broken.
And now I'll go back and check the server logs.
So you said they were in Details, right?
ABBY CAREY: Yup.
MARTIN OMANDER: Let's have a look.
Oh, look!
Name, trigonometry, very nice, and name,
calculus, and sorted by name.
ABBY CAREY: Woo!
Awesome!
Cool, you fixed a bug.
MARTIN OMANDER: Yeah, very nice.
So this little service is looking great.
Now, if I want to deploy it to the Cloud,
do I have to figure out those tricky G Cloud?
ABBY CAREY: No.
Cloud Code can do that for you.
Just like with running on the emulator,
Cloud Code packages deploy to the Cloud
in a couple of clicks.
Go ahead and click on that Cloud Code status bar
again and select Deploy to Cloud Run.
MARTIN OMANDER: Cloud Code, ah, Deploy to Cloud Run.
ABBY CAREY: You can see all the service options.
Go ahead and keep all the defaults and just click Deploy.
MARTIN OMANDER: Ah, there we go, Deploy.
I'm deploying.
ABBY CAREY: And it's now building your container image,
pushing it to your Container Registry,
and deploying it Cloud Run.
Managed.
Oh, looks like it's done, go ahead and click that link.
MARTIN OMANDER: Aha, hello world at run.app.
Cool.
Let's see.
ABBY CAREY: Now, this is your service running on Cloud Run.
Anyone can access it now.
MARTIN OMANDER: Woo-hoo!
Feels great to finally get something running on Cloud Run
and not having to type any G Cloud commands.
Can you do anything else Cloud Run related with the Cloud Code
extension?
ABBY CAREY: Yes, now that you have a Cloud Run service,
you can view its details from the Cloud Run Explorer.
Let's go ahead and go back to VS Code
and click that Cloud Code Cloud Run button.
Yup.
And if you-- there we go.
There's your service.
So if you go ahead and expand that dropdown there
on your service, here is where you
can view quick details about your service, like traffic
allocation and its URL.
What's even cooler is being able to view the logs of your Cloud
Run service from your IDE.
Go ahead and hover over your service real quick.
MARTIN OMANDER: Up here?
ABBY CAREY: Yep.
And now click that little Login button to the right.
MARTIN OMANDER: Ah.
This means logging.
Oh, view logs, it says as a tooltip.
ABBY CAREY: Mm-hmm.
MARTIN OMANDER: All right.
So I get to set up filters, what logs I want to view.
These look like reasonable defaults.
I want to see my Cloud Run logs, and that
has been selected here.
ABBY CAREY: Yep, it also grabbed it for your service.
So these are all the logs from your service.
MARTIN OMANDER: Aha!
And look at that, there is my good friend trigonometry.
And there is calculus.
It works.
Hey, Abby, thanks for showing me how to run and debug
my Cloud Run service locally and how to deploy it with one
click.
ABBY CAREY: Yeah, the Cloud Code extension
makes things pretty simple.
Be sure to install the Cloud Code extension from the VS Code
Marketplace and give it a try.
Let us know in the comments what you think about it.
MARTIN OMANDER: Sounds good.
See you next time.
[MUSIC PLAYING]