How can I expose my Vite project in WSL2?

Question

I'm using the --host tag that gives me the Ip address of my pc with the exposed port 5173, but when I try to connect from the same network with my phone, I get the CONNECTION_TIMED_OUT error.

Answer 1

After searching the internet I put together a complete solution for this. It consists of 3 steps:

TL;DR;

• Add netsh rule on Windows side
• Add Windows firewall rule for the port forward
• Run vite with --host option

---

It's very simple, and I'll leave some references on the end to safe links to double-check all this info.

Add netsh rule on Windows side

As said in the first portion of the Vite docummentation

Accessing the server on WSL2 from your LAN

When running Vite on WSL2, it is not sufficient to set host: true to access the server from your LAN. See the WSL document for more details.

The link basically explain that you should use the netsh command below to make the port accessible from your local IP to the WSL IP

netsh interface portproxy add v4tov4 listenport=<yourPortToForward> listenaddress=0.0.0.0 connectport=<yourPortToConnectToInWSL> connectaddress=(wsl hostname -I)

Where:

• <yourPortToForward>: the port you want to access on you machine, default for vite is 5173
• <yourPortToConnectToInWSL>: the port from wsl that will be exposed to outside, default for vite is 5173
• (wsl hostname -I): which is the command to get the WSL ip

Add Windows firewall rule for the port forward

Here is a simple Windows Firewall Tutorial to guide you through openning the port on the windows firewall.

If this part is not done, you only be able to access the page through you own computer, this will open the actual port 5173 to the rest of you lan.

🚨 Just be careful with this configuration, on the last step, do not select the "Public" option, if you have a laptop, that you carry around, as this could be a major breach into your system. 🚨

Run vite with --host option

This is just straight forward...

Run you vite app with

npm run dev -- --host

or add the --host option to your package.json

References:

• Vite docummentation
• WSL document
• Windows Firewall Tutorial