Introducing Google Cloud Shell’s new code editor

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:

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.

Start editing your code and configuration files.

Cloud Shell code editor in action

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

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