If you have worked with the Azure Cloud Shell in the last couple of days, you might have seen a new button called Web Preview. The Azure Cloud Shell Web preview feature allows you to run web applications on the Cloud Shell container instance and preview them before you deploy them. You can run web applications that listen to HTTP requests on the Cloud Shell from port 1025-8079 and 8091-49151.
If you are running for example a .NET Core application in Cloud Shell, you can preview this to the Cloud Shell gateway.
I have created a short video tutorial to show you the Azure Cloud Shell Web preview feature.
How to use the Cloud Shell Web Preview
First you need to run your application, in my case I run a simple .NET Core web application. This also works with other applications which can run in Cloud Shell and can map a local port.
dotnet run
By default, this will use port 5000. Now you can create a simple port mapping by clicking on the Web Preview button in Cloud Shell.
This will open up the configuration menu to create the port mapping, where you can select port to use from 1025-8079 and 8091-49151.
Now you can access the application running inside your Cloud Shell container through the gateway, to preview your application.
I hope this was helpful and gave you a quick overview about the Web Preview feature in Cloud Shell. If you have any questions, please let me know in the comments.
You can run Azure Cloud Shell from in the Azure Portal or directly from shell.azure.com.
If you want to learn more about Cloud Shell, check out my video about Mastering Azure using Cloud Shell.
Tags: Azure, Azure Cloud Shell, Cloud Shell, Cloud Shell Web Preview, dotnet, Microsoft, Ports, Web Application, Web Application Preview, Web Apps, Web Preview Last modified: May 2, 2019
Hi,
For writing, running, and debugging code with just a browser, and a sample Node.js Web App as in the following Code Snippet:
const express = require(‘express’);
const app = express();
const port = 3000;
app.get(‘/’, (req, res) => {
res.send(“Node.js Version: ” + process.version + “\n”);
});
app.listen(port, () => {
console.log(`Server started on port: ${port}`);
});
Terminal Output:
$ curl http://localhost:3000
Node.js Version: v16.20.2
For writing, running, and debugging code with just a browser, and a sample Node.js Web App as in the following Code Snippet:
const express = require(‘express’);
const app = express();
const port = 3000;
app.get(‘/’, (req, res) => {
res.send(“Node.js Version: ” + process.version + “\n”);
});
app.listen(port, () => {
console.log(`Server started on port: ${port}`);
});
Terminal Output:
$ curl http://localhost:3000
Node.js Version: v16.20.2
Screenshot:
enter image description here
Azure Cloud Shell Web Preview opens: https://ux.console.azure.com//proxy/3000/ only to show this error:
Cannot GET /proxy/3000/
After the following steps:
Configure port to preview Valid ports include [1025-8079] and [8091-49151]
3000
Open and browse
What’s missing apart from Google Cloud, perhaps?
Thanks.
Hi Thomas Maurer,
Azure questions on Stack Overflow seldom get constructive insight or quality reply.
Perhaps, you are be the right person to answer this Stack Overflow question as suggested by “Know someone who can answer? ” triage:
https://stackoverflow.com/questions/77605976/azure-cloud-shell-web-preview
Thanks.