Cloud Shell’s code editor now in beta
By Sachin Kotwani, Product Manager
Last October we added an experimental web-based code editor to Cloud Shell that makes it easier to edit source code within the browser. Today we’re happy to announce that this feature is in beta, and we’ve made additional improvements that will make writing code in Cloud Shell even more delightful.
The editor now lives side-by-side with the Cloud Shell window, so you don’t have to switch between tabs when going from editing to building and testing. You can launch the editor by clicking on the icon in Cloud Shell, or going directly to this URL.
Whether you’re working on an existing software project, learning or exploring a new API or open-source library, Cloud Shell makes it extremely easy to start writing code, all from within your browser.
The editor is based on the open-source Eclipse Orion project, which comes with several convenience features. Here are just a few:
Key bindings to navigate, format or edit code. To see the available key bindings go to Options > Keyboard Shortcuts or type Alt+Shift+? (or Ctrl+Shift+? on Mac OS X).
Syntax highlighting for JavaScript, HTML, CSS and Java; basic content assist for JavaScript, CSS and HTML files. Type Ctrl+Space to open content assist at the current cursor position in the editor.
Find and replace
Font and UI customization
The Cloud Shell code editor in action
In the previous blogpost we showed you how to deploy and debug an App Engine application using Cloud Shell. Here’s a quick tutorial on how to test and modify a NodeJS app written with the Express.js framework.
Open Cloud Shell by clicking on the Shell icon on the top right section of the toolbar.
Get sample code. Clone the repository that contains the Google Cloud Platform (GCP) Node samples by typing the following command in the prompt, and navigate to the directory for the Hello World code:
git clone
https://github.com/GoogleCloudPlatform/nodejs-docs-samples
cd nodejs-docs-samples/appengine/hello-world
Install dependencies and start the app.
npm install
npm start
Preview the app. Click on the web preview icon on the top right of the screen, and click to open port 8080:
Modify the app to show the current time.
Open the code editor from the Cloud Shell toolbar.
In the file tree to the left of the editor navigate to the directory ~/nodejs-docs-samples/appengine/hello-world and, click on app.js
Starting at line 23, replace the contents of the app.get function to the snippet below (changes are indicated in bold). As you start to type date.toTimeString(), you’ll see the autocomplete functionality suggest all the functions available under the Date object.
app.get(‘/’, (req, res) => {
var date = new Date();
var time = date.toTimeString();
res.status(200).send(‘Hello, world! It is now ‘ + time).end();
});
On the bottom shell panel, type ctrl+c to stop the previously running app, and then restart the app
npm start
Refresh the tab showing the “Hello World” message to see the new output.
Congratulations! You’ve just successfully created a new NodeJS application — all without ever once leaving your browser. If you’d like to learn more about this example, including how to deploy the app to run App Engine flexible environment, click here. To learn more about Cloud Shell, click here.
Quelle: Google Cloud Platform
