[MUSIC PLAYING]
RYAN MATSUMOTO: Cloud Shell Editor
makes it easy for you to write code directly
in your web browser and deploy it to the cloud.
Powered by the Eclipse Theia IDE Platform,
Cloud Shell Editor provides a rich experience
that makes it easy for you to debug your applications
before deploying to the cloud.
In this video, we'll walk through an example
of how to run and debug a local deployment of a Cloud Run
service.
Cloud Run makes it easy to deploy
highly scalable containerized applications on a fully
managed server-less platform.
But before you deploy to Cloud Run,
you may want to run your app locally
to simplify the debugging process.
First, visit ide.cloud.google.com
to launch the Cloud Shell Editor.
On the status bar at the bottom of your screen,
click Cloud Code.
From the Cloud Code menu, click New Application,
and then select the Cloud Run Application
for the type of sample app we want to create.
After that, we'll get a list of Cloud Run templates
to choose from.
Let's go with the Node.js option.
Next, select a folder and your Cloud Shell environment
to save your application to, and give it a name.
If that looks good, click Create New Application.
Cloud Shell Editor clones the files
for your sample application from GitHub into a new workspace.
You can see the list of files in the Explorer panel located
on the left side of the screen.
Now let's go ahead and run this application locally.
From the Cloud Code menu, click Run on Cloud Run Emulator.
In the run debug on Cloud Run Emulator dialogue,
you can choose your Builder and adjust Build and Service
settings.
We'll leave everything as their default values for now.
After defining your preferred settings, click Run.
Right now, Cloud Code is spinning up
an environment that emulates Cloud Run's production
environment.
You can monitor the progress of your application
in the output window.
You may need to click Authorize to authorize
Cloud Shell to make Google Cloud Platform API calls.
Once your app is built, you can launch it
by hovering over the URL link displayed in the output panel
and clicking Open Web Preview.
Congratulations.
If you see this page, that means you've successfully
run your Cloud Run app locally.
Once your service is running, there
are some other options you can access from the Cloud Code
Status Bar.
You can open deployment logs, open the service URL,
or turn watch mode on or off.
With watch mode, Cloud Code continually
watch watches the file system for changes to your files.
If changes are detected, it will redeploy your application
so that your edits are reflected in near real time.
Once you're done, you can click the Stop button
to stop running your service.
Now that you've learned how to develop locally with Cloud Run,
let's take a look at how you can debug a Cloud Run application.
Click the Explorer icon in the upper left
to display all the code files.
Let's double-click on index.js to open it.
Lets go ahead and add some code to the app's root directory.
We'll create two variables and give them initial values.
A third variable will be set to equal to sum of the first two
variables.
Finally, we'll increment the first variable.
To add a break point, just click in the editor margin
of the file you're debugging.
Once it's added, the break point will appear as a red circle.
We'll go ahead and add 5 break points,
starting with our first line of extra code.
Now let's go ahead and run our service locally
with the debugger session attached.
From the Cloud Code menu, click debug on Cloud Run Emulator.
Next, press Enter to confirm that the application you
would like to debug can be found in the listed directory.
Once you see the orange bar at the bottom,
you are now in debug mode.
Launch the app by hovering over the URL link displayed
in the output panel and clicking Open Web Preview.
Now go back to the Cloud Shell Editor window.
You'll see that the application has paused at the first break
point, which is now a red dot outlined in yellow.
In the debug sidebar, you can manage the debugging session
with the debugging action icons--
continue, step over, step into, step out, restart, and stop.
The debug sidebar also include sections for you
to view information about the call stack, variable values,
and break points.
If we open up the local variable section,
we see that our three variables start out as undefined.
Let's go ahead and click the Continue icon.
This advances us to the next break point.
We see in the variable section that the value of foo
has changed to 5.
If we keep clicking Continue, the values
of the other variables change as well.
We can also hover over the variables in the code
to see what their updated values are.
In this case, the foo variable now
equals 6 because it was incremented.
Once we get to the last break point,
we can click Continue to run through the rest
of the program.
Since there aren't any errors, this
results in a functional web page.
Once you're done, you can click the Stop button
to stop your debugging session.
And there you have it.
Cloud Shell Editor provides a full IDE experience
that makes it easy for you to develop and debug
all kinds of applications right from your web browser.
To get started with Cloud Shell Editor,
visit ide.cloud.google.com.
Make sure to subscribe to the channel,
and stay tuned for more Cloud Shell Editor videos.
[MUSIC PLAYING]