Introducing Google Cloud Shell’s new code editor

Posted by Sachin Kotwani, Product Manager

We’ve heard from a lot of Google Cloud Platform (GCP) users that they like to edit code and configuration files without leaving their browser. We're now making that easier by offering a new feature: an integrated code editor.

The new code editor is based on Eclipse Orion, and is part of Google Cloud Shell, a command line interface to manage GCP resources. You can access Cloud Shell via the browser from any computer with an internet connection, and it comes with the Cloud SDK and other essential tools pre-installed. The VM backing Cloud Shell is temporary, but each user gets 5GB of persistent storage for files and projects.

To open the new Cloud Shell code editor:
  1. Go to the Google Cloud Console
  2. Click on the Cloud Shell icon on the top right section of the toolbar
  3. 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.
  4. 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 "[email protected]"
    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.