DEV Community

Gerald Hamilton Wicks
Gerald Hamilton Wicks

Posted on

How to Create a Live Preview of Your Local App Quickly

Before deploying changes to production, it's common to have a dedicated environment where developers, QA testers, designers, and others can check how the system is behaving. However, there are times when you just want to quickly share your local changes without the hassle of deploying to a separate environment. Maybe you need a designer to review a component you just built to make sure it looks perfect, or perhaps you want to test your app on a different device, like a mobile phone or tablet.

Wouldn't it be amazing if you could spin up a live environment directly from your local server, without all the fuss of setting up a staging area or waiting on deployment pipelines? Well, you're in luck! In this tutorial, I'm going to show you how to create a live environment using Dev Tunnels, so you can share your local changes effortlessly.

What Are Dev Tunnels?

Dev Tunnels is a powerful tool that lets developers securely share their local web services across the internet. Imagine connecting your local development environment to the cloud, sharing work-in-progress with your teammates, or even testing webhooks, all without moving a muscle (well, maybe one or two). 🚀

It's important to note that Dev Tunnels is meant for development and testing purposes only, not for production workloads.

Setting Up Dev Tunnels

Let’s dive in! To get started, we’ll need to install the DevTunnel CLI (Command Line Interface) tool. I’ll be focusing on the Linux installation for this tutorial, but don’t worry—if you’re using a different operating system, you can check out the official installation guide.

Here’s how to install it on Linux:

curl -sL https://aka.ms/DevTunnelCliInstall | bash
Enter fullscreen mode Exit fullscreen mode

After installation, be sure to close and reopen your terminal so you can start using the devtunnel commands right away.

Logging into Your Account

Before you can create a dev tunnel, you’ll need to log in using either a Microsoft Entra ID, Microsoft Account, or GitHub Account. Unfortunately, hosting tunnels anonymously isn’t supported at this time. Don’t worry—it’s a quick step!

Simply run:

devtunnel user login
Enter fullscreen mode Exit fullscreen mode

And voilà, you’re in!

Creating Your Live Environment

Now that you're logged in, it’s time to create your live environment. First, make sure your application is running locally. For this example, I’ll assume my app is running on port 5500, but you'll need to replace that with your app’s actual port.

Run the following command to host your local server:

devtunnel host -p 5500
Enter fullscreen mode Exit fullscreen mode

Be sure to replace 5500 with your app's port number. Once you run this command, you’ll see a log output similar to this:

Hosting port: 5500
Connect via browser: https://t64f7c1f.brs.devtunnels.ms:5500 
Inspect network activity: https://t64f7c1f-5500-inspect.brs.devtunnels.ms
Ready to accept connections for tunnel: tidy-fog-hjzvgvk
Enter fullscreen mode Exit fullscreen mode

✨ Boom! Just like that, your environment is live! You can now access your local environment from anywhere using a URL like https://t64f7c1f.brs.devtunnels.ms:5500.

Note: By default, for security reasons, only you (logged into Dev Tunnel) can access this environment. Pretty neat, right?

Going Public: Sharing Your Environment with Others

Need to share your work with others, like teammates or clients? No problem! If your application doesn’t contain sensitive information, you can make your environment public. To do that, use the --allow-anonymous flag in the command:

devtunnel host -p 5500 --allow-anonymous
Enter fullscreen mode Exit fullscreen mode

After running the command, you’ll see another log message similar to the previous one, with your live URL ready to share with anyone who needs it.

Hosting port: 5500
Connect via browser: https://t64f7c1f.brs.devtunnels.ms:5500 
Inspect network activity: https://t64f7c1f-5500-inspect.brs.devtunnels.ms
Ready to accept connections for tunnel: tidy-fog-hjzvgvk
Enter fullscreen mode Exit fullscreen mode

Now, anyone with the link can check out your application—no login required!

For additional security, if needed, you can limit access to specific Microsoft Entra tenants or GitHub organizations using the appropriate flags (--tenant or --organization). Be sure to check out the official documentation for more details on advanced security settings.

Wrapping It Up

And there you have it! With Dev Tunnels, sharing your local environment has never been easier. No more waiting on deployment pipelines, no more setting up complicated environments—just quick, seamless collaboration. Whether you’re testing your app on a different device or showing off your latest UI work to your design team, Dev Tunnels makes it all possible in a flash.

Top comments (0)