Vercel Have Finally Killed Port Numbers (Portless)

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00This is Portless, a CLI tool from Versil Labs, the same team that brought you Agent Browser,
00:00:05JSON Render and Skills that replaces localhost port numbers with stable named ones,
00:00:10making it easy for humans and AI agents to always go to the right place and prevent conflicts.
00:00:15But how does this really work under the hood and will it mess up my system?
00:00:20Hit subscribe and let's get into it.
00:00:21Let's go through how to use Portless with a simple example.
00:00:26So right now I have a project running on port 3001.
00:00:30And if I had this running in the background and completely forgot about it,
00:00:33and wanted to run a different project that had a similar port,
00:00:37then I would get this error saying address is already in use.
00:00:40And this is the exact problem that Portless was designed to fix.
00:00:44Because imagine if you had different agents running in different tabs for different projects
00:00:48and they ran into this issue.
00:00:50They can of course fix it, but it would be better if a port was always available
00:00:55for them to run on, so this wouldn't happen in the first place.
00:00:58Now with Portless installed and the Portless proxy running,
00:01:01then I can run the command portless followed by my hostname, which in this case is xdlapi,
00:01:06but this can be anything you want.
00:01:08Then the command you want to run, which is bun run devapi.
00:01:12And if I hit enter, it finds a random free port number in the 4000 range.
00:01:16Since that's a range that's less likely to be used by other programs.
00:01:20And it exposes my app with my hostname on .localhost 1355.
00:01:25By default it will be 1355, which stands for less because it's Portless. Get it?
00:01:30Now if I click here, you can see we have a working app.
00:01:34And if I went to this other app and did the exact same thing,
00:01:37now it's found a different free port and it's using the hostname.
00:01:40But this number at the end will always stay the same.
00:01:42In fact, if we wanted to, we could change it.
00:01:44And if we changed it to Port 80, we could just omit this colon and number altogether.
00:01:49So if I start the Portless proxy on Port 80, remembering to use sudo,
00:01:53and also using sudo to start the Portless process,
00:01:55then we can just use the subdomain with .localhost.
00:01:59In fact, we could even get HTTPS support on top of using Port 80
00:02:03by using the HTTPS flag, which will allow us to use HTTPS.
00:02:08But if you use feet, you're going to have to set the port variable in the port key,
00:02:13as well as the hosts set to this value.
00:02:15I'll explain why later on in the video.
00:02:17But there are a bunch of other options you get with Portless,
00:02:21like being able to run the proxy in the foreground for debugging
00:02:25and being able to run a command without the proxy again for debugging or as an escape hatch.
00:02:30But why does it use a random port number each time?
00:02:33And why does it even need a proxy?
00:02:35Let's get into how it works.
00:02:36So we'll be going through two processes.
00:02:39What happens when the main Portless command is run in a terminal?
00:02:42And what happens when a browser views a Portless URL?
00:02:46So over here, when you run a Portless command, in this case,
00:02:49Portless my app with the command of barn start,
00:02:52what happens is the host and the command are first extracted.
00:02:56Then the next thing it does is check if the proxy is running.
00:02:59And if it's not, it will start it.
00:03:01But there is a caveat because you can set the port you want the proxy to run on.
00:03:06By default, it's 1355.
00:03:08But if you set it to a value that's below 1024,
00:03:12then it's going to ask for your confirmation before it runs.
00:03:15But if it's above that number, then it will run automatically.
00:03:19Next, it finds a free port between the number 4000 and 4999.
00:03:25And this port is random to make the finding process faster.
00:03:29Because if it were sequential, it would have to check all the ports one by one,
00:03:33which could take a long time if you have lots of processes running.
00:03:35Then after it finds a port, it adds the details to a root store JSON file.
00:03:40Then it runs your command on that port and adds that port to the port environment variable,
00:03:47which is accessible to most JavaScript applications.
00:03:50Now let's focus on this bit.
00:03:52So when a browser visits a portless URL, in this case, it will be myapp.
00:03:56And if we're sticking to the default port, it will be 1355.
00:04:00Then of course, it does the whole DNS resolution before creating a TCP connection to the proxy,
00:04:06which just extracts the host name, so myapp,
00:04:09and then uses that to look up the port of your application inside the root JSON file.
00:04:15Then once it has the correct port number, it forwards the request to your actual app,
00:04:21which sends a response back to the proxy before going to the browser,
00:04:26since the browser expects a response from 1355
00:04:30and not the number that the proxy randomly assigned at this stage of the process.
00:04:35This also magically works with WebSockets.
00:04:38All of this is very impressive for a weekend project.
00:04:40However, if you use portless on a non Next.js project like Vite, then you may run into some issues.
00:04:47First of all, because it uses a random port number assigned to the port variable
00:04:52and not a hard-coded number, you have to make sure your app can run from that port
00:04:56so that the proxy can know where to redirect traffic to.
00:05:00And for Vite or an equivalent bundler, you may have to add this host key and set it to this value,
00:05:06since it rejects requests from unrecognised origins, and this disables that check.
00:05:10I did try to use the allowed host key with different values, but that didn't seem to work.
00:05:16So although this solution does seem extreme,
00:05:19there really is nothing to worry about if you're running things locally.
00:05:22But like most other projects from Vercel Labs, portless will continue to get updates,
00:05:26meaning most of these features would be ironed out in the future,
00:05:30and so will things like Windows support.
00:05:32Speaking of Vercel Labs, if you haven't yet tried out Agent Browser,
00:05:36the best way for your agent to interact with a browser,
00:05:39you can learn all about it in the next video.

Key Takeaway

Portless by Vercel Labs simplifies local development by using a proxy to map stable, named hostnames to dynamic ports, effectively eliminating port conflicts for both humans and AI agents.

Highlights

Vercel Labs introduced Portless

Timeline

Introduction to Portless and the Problem It Solves

The speaker introduces Portless as a new CLI tool from the Vercel Labs team, known for projects like Agent Browser and JSON Render. It primarily aims to replace traditional localhost port numbers with stable, named ones to prevent port conflicts during development. This is especially helpful when multiple AI agents or projects are running in different tabs and might otherwise encounter the "address is already in use" error. By ensuring a port is always available, it provides a more seamless experience for developers and automated processes. The video promises to explain how this works under the hood and whether it might interfere with your system.

Using Portless: Commands, Subdomains, and HTTPS

The speaker demonstrates how to use the Portless proxy by running the "portless" command followed by a custom hostname and the application start command. By default, Portless exposes the app on a subdomain of .localhost using port 1355, which is a play on the word "less." Users can customize this behavior by starting the proxy on Port 80, which allows for clean URLs without port numbers, though this requires sudo permissions. The tool also supports HTTPS through a specific flag, which is useful for modern web development environments. Advanced options such as running the proxy in the foreground for debugging and escaping the proxy for standard command execution are also discussed.

Internal Workings: The Two-Step Proxy Process

This section dives into the technical details of how Portless operates through two distinct processes. First, when a Portless command is run, it checks if a proxy is active and finds a random free port between 4000 and 4999 to speed up the finding process. These details are stored in a root store JSON file, and the application is then started on that specific port using environment variables. Second, when a browser visits a Portless URL, the proxy performs DNS resolution and a TCP connection to look up the correct port in the JSON file. The proxy then forwards requests to the application and sends the response back to the browser, which even works for WebSockets.

Configuration Tips for Vite and Future Outlook

The speaker addresses potential issues when using Portless with non-Next.js projects like Vite, which might reject unrecognized origins. To fix this, developers may need to set a specific host key in their configuration to disable origin checks and ensure the proxy can redirect traffic. While these solutions might seem extreme, they are manageable for local environments and likely to be refined in future updates. Vercel Labs intends to continue updating Portless, with planned improvements including native Windows support and better integration with other bundlers. The video concludes by encouraging viewers to explore other Vercel Labs projects like Agent Browser for better AI interaction with web browsers.

Community Posts

View all posts