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.
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.
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).
COMMENTS ()
Tweet