Giving your Client a Sneak Peak of what they can expect from you, with Developer Tunnels!

Ever wondered if there was a way to have your client review the progress you’ve made on an app without deploying it? “Containers are the perfect solution!” you might be thinking. However, when it comes to non-technical clients, there can’t be a more complex way to test things out than to install docker, run “docker-compose build” and “docker-compose up”. Not to mention the thousands of dependency errors and careless mistakes one can encounter during installation.

If you’re this guy or you’ve had a client face discomfort because of the way you make them test their UI, I have the perfect solution for you. But wait… There’s more! The solution is packed into your all-time favorite code editor/IDE- Visual Studio Code!

The solution is as simple as forwarding a port. Now keep in mind that you could use tools like Ngrok which are designed to forward local ports over the internet. However, seeing how much easier this method is (after this tutorial), you’d never want to go through the hassle of setting up a specific tool just to expose your port! Microsoft calls this a developer tunnel.

Use Cases

• Client review
• Real-time “test and fix” QA sessions
• Peer review

Advantages

1. Effortless Progress Review: Developer tunnels allow you to provide clients with a sneak peek of your app’s progress without the need for complex deployment procedures.

2. User-Friendly: Unlike container solutions that may be intimidating for non-technical clients, developer tunnels are straightforward and don’t require clients to install additional software.

3. Enhanced Client Experience: By offering a simple way for clients to test the UI without hassle, you can improve the overall client experience and build trust.

4. Built-In Feature: Visual Studio Code, a popular code editor/IDE, integrates this feature seamlessly, eliminating the need to install and configure third-party tools like Ngrok.

5. Time-Saving: Setting up a developer tunnel is quick and easy, saving you time compared to configuring external port-forwarding solutions.

6. Secure Collaboration: Developer tunnels can be configured with public or private visibility, ensuring that only authorized collaborators can access the forwarded port for security purposes.

7. Client Accessibility: Clients can access the forwarded link directly, simplifying the process and avoiding potential confusion.

8. Realistic Testing: Clients can interact with the application as if it were running on your local machine, facilitating realistic testing and feedback.

9. Streamlined Communication: Sending clients a direct link to the development version of the app streamlines communication and reduces the risk of miscommunication.

10. Client-Centric Approach: Using developer tunnels demonstrates a commitment to a “Client First” approach, making the development process smoother and more transparent for clients.

Requirements

• Visual Studio Code
• An application with a local development server (For this tutorial, we’ll be using a React application)
  

Instructions

1. Run the development server using npm start

2. We can visit that http://localhost:3000 to ensure your website is running correctly (to avoid embarrassment in front of our client).

3. Now that we have got the website up and running (locally), we need to start the port forwarding process. To do that, we can come back to Visual Studio Code, click on the “PORTS” option next to the terminal and click on “Forward a Port”.

4. Since we’re running our application on port 3000, we want to forward that port so we’ll type the port number in and press enter. Please note that we will be prompted to authorize Visual Studio Code to port forward (using GitHub).

5. That’s basically it. We’ve successfully forwarded our port over the internet. Here’s the link we can use to access the website.

6. But wait. Since our forwarded address has “Private” visibility, only collaborators of that repository will be able to access our website. That is completely fine if, for some reason, our client is a collaborator on the repository. However, that is usually not the case.

7. To address that issue, we’ll simply right click, navigate to “Port Visibility” and toggle it to “Public”.

8. Now, we can finally send the link to our client. To avoid confusing the client, we’ll inform them to hit continue on a security prompt they’ll be facing before being forwarded to the actual website.

9. Viola! We’re done. The client can now view the website and test it as you would on your local computer.

Conclusion

This is no doubt an amazing new feature that Microsoft has provided with its latest release for Visual Studio Code. However, it comes with its problems. An attacker could have a malicious website set up using a developer tunnel and single spelling mistake with the domain name could lead your client to a malicious website. Before letting your client navigate to the developer tunnel, ensure that the link you send to them has no spelling mistakes and matches exactly with the link shown to you on the “PORTS” panel in Visual Studio Code. Politely ask your client to copy and paste the link into their browser (instead of trying to copy manually) to avoid any inconvenience.

I hope this helps all of you amazing coders and also makes things easier for your client because remember, at Folio3, we’re always “Client First”!

Abdullah Irfan