Introducing Google Cloud Shell’s new code editor

Open the code editor from the Cloud Shell toolbar. You’ll also notice that we’ve introduced the ability to upload and download files from your Cloud Shell home directory.

Start editing your code and configuration files.

Cloud Shell code editor in action

Here's an example of how you can use the Cloud Shell code editor to create a sample app, push your changes to Google Cloud Source Repository, deploy the app to Google App Engine Standard, and use Stackdriver Debugger:

Create a sample app

1. On the Cloud Console website, select an existing project or create a new one from the toolbar.
2. Open Cloud Shell and the code editor as described above and create a new folder (File->New->Folder). Name it ‘helloworldapp’.
3. Inside the helloworldapp folder, create a new file and name it ‘app.yaml’.  Paste the following:

   runtime: python27
   api_version: 1
   threadsafe: yes
   
   handlers:
   - url: .*
   script: main.app
   
   libraries:
   - name: webapp2
   version: "2.5.2"

   
   
4. Create another file in the same directory, name it ‘main.py’, and paste the following:

   #!/usr/bin/env python
   
   import webapp2
   
   class MainHandler(webapp2.RequestHandler):
   def get(self):
   self.response.write('Hello world!')
   
   app = webapp2.WSGIApplication([
   ('/', MainHandler)
   ], debug=True)

Save your source code in Cloud Source Repositories

1. Switch to the tab with the open shell pane and go to your app’s directory:
   cd helloworldapp
2. Initialize git and your repo. The first two steps aren't necessary if you've done them before:
   git config --global user.email "you@example.com"
   git config --global user.name "Your Name"
   git init
   git add . -A
   git commit -m "Initial commit"
   
3. Authorize Git to access GCP:
   git config credential.helper gcloud.sh
4. Add the repository as a remote named ‘google’ to your local Git repository, first replacing [PROJECT_ID] with the name of your Cloud project:

   git remote add google https://source.developers.google.com/p/[PROJECT_ID]/r/default

   git push google master

Deploy to App Engine

1. From the ~/helloworldapp directory, type: gcloud app deploy app.yaml
2. Type ‘Y’ to confirm
3. Visit your newly deployed app at https://[PROJECT_ID].appspot.com

Use Stackdriver Debugger

You can now go to the Debug page, take a snapshot and debug incoming traffic without actually stopping the app.

1. Open main.py and click on a line number to set the debug snapshot location
2. Refresh the website displaying the hello world page, and you'll see the request snapshot taken in the debugger
3. Note that the Debug page displays the source code version of your deployed app

Summary

Now you know how to use Cloud Shell and the code editor to write a sample app, push it into a cloud source repository, deploy it to App Engine Standard, and debug it with Stackdriver Debugger — all without leaving your browser. Note that the new Cloud Shell code editor is just a first step toward making Cloud Shell developers’ go-to environment for everything from simple DevOps tasks to end-to-end software development. We welcome your feedback (click on the gear icon in Shell toolbar->Send Feedback) on how to improve Google Cloud Shell. Stay tuned for new features and functionality.