, ,

Preview Web Apps with Azure Cloud Shell Web Preview

Cloud Shell Configure Port Web Preview

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.

YouTube video (YouTube video)

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.

Cloud Shell Web Preview dotnet


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.

Cloud Shell Configure Web Preview

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.

Cloud Shell Configure Port Web Preview

Now you can access the application running inside your Cloud Shell container through the gateway, to preview your application.

Web Preview

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.

2 responses

  1. Stack Avatar

    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.

  2. Stack Avatar

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.