In my previous post, I discussed the reasons why we built Visual Studio Live Share, and the various ways it can improve the collaboration experience for developers, regardless of the type of app you’re building (e.g. desktop, mobile, games, web). However, in this post, I want to drill into a capability that Live Share provides, which is targeted specifically at web developers: sharing localhost servers.
Sharing port 8080, and having that be immediately available to guests (left) in a Live Share session
Collaboration should be easy
When you’re collaborating with another developer, it’s important that they can visually see the application you’re working on. That way, they can repro a bug you’re encountering, provide feedback on some UI changes you made and/or verify a fix you did together. However, if the app you’re building is a web front-end or API (REST, GraphQL, etc.), and it’s running locally on your dev machine, then how do you actually share it with them? So that they can interact with it, independently of you and using their favorite tools (i.e. not a screen share)? You could…
Push your changes to version control, and ask them to pull them down and run the app locally? However, that would require everyone to have their environment setup to run the app, and this workflow wouldn’t support iterating on the codebase in real-time (blah!).
Deploy the app to the cloud, and then send everyone the publicly-available URL? However, you might not be ready to deploy yet, and this workflow suffers from the same iteration issue as #1, since you’d have to re-deploy the app on every code change (not cool!).
Configure your router to forward the application port, and then send everyone your IP address? That would support making real-time updates to the code, however, it requires you to expose your machine over the internet, which may be undesirable or even impossible (depending on your network proxy/firewall settings).
So how can you share a running web application, in a way that is not only secure, but also enables you and your team to edit the code in real-time, and immediately see the changes? That’s where Live Share comes in!
Share all the things
When you connect to a Live Share session, an SSH connection is established between you and the “host", which ensures that all communication (e.g. file edits, debug steps) is end-to-end encrypted. That secure connection can then be used to enable all kinds of collaborative context, including the ability for "guests" to view shared web apps, as if they were running on their own machines. But they’re not. It’s…kind of magical 😎
Kamran ⛄ Ayub
Doing a 4 person hack session with @code Live Share, with two shared servers and two codebases 🔥🔥🔥
14:41 PM – 18 Jan 2019
When hosting a Live Share session, you can share a server at any time, by simply clicking the Share server… command within the Live Share view, and then specifying the respective port (e.g. 8080). It will immediately become available to all guests in your session, and they can open it in their favorite browser or API development tool (e.g. Postman).
From there, you can both make edits, and immediately view the changes. Even better, if your web app is setup to use "live reload", then when you or a guest saves a file, everyone’s local browser will automatically update, regardless if you’re on opposite ends of the world (or on a plane)! 🛫
Current status: #LiveCoding with @phermens and messing with #VSLiveShare at 36k feet.
15:23 PM – 16 Mar 2019
Easy peasy lemon squeezy
While sharing a server enables a powerful form of collaborative web development, it still requires you to perform a manual gesture, which can become a little repetitive over time. Since our goal is for collaboration to feel like a natural extension of your existing developer workflow, we thought we could do better. And so we did.
Using the Live Server VS Code extension to serve static HTML, and having the server port automatically shared
Whether you’re using the Live Server extension to host static HTML files, running your front-end via a CLI like create-react-app, Django, Phoenix, etc., or pressing F5 in Visual Studio from an ASP.NET project, Live Share will automatically detect the server and share it. That way, you don’t need to do anything special to use Live Share. You simply work the way you prefer, and let the tools take care of the rest 👍
Using the create-react-app CLI to spin up a dev server, and having the server port automatically shared
To keep things secure, we only auto-share ports that are commonly used by web frameworks (e.g. 3000, 8080), which prevents us from accidentally sharing something you wouldn’t expect. Additionally, if you want to disable the auto-sharing behavior, and stick with manual sharing, you can disable the liveShare.autoShareServers setting as well. This way, we can provide a simple, out-of-the-box experience, while still giving developers the control they need to feel confident.
Now that sharing localhost servers is simply a click away (the Live Share button that is…), we’re eager to hear any and all feedback on how we could improve the experience even further. Web and API development is one of the core scenarios for Live Share, and so we look forward to evolving the collaborative development experience, and accomodating the needs of every developer, regardless of their language or platform. If you run into any issues, or have questions/comments, please don’t hesitate to ping our team on GitHub.