Share a React app from localhost, hot reload included

How you share a React app depends on what runs its dev server. On Vite, it works through a ouicu link with nothing changed. On Create React App, the page loads but hot reload never connects, until you set WDS_SOCKET_PORT=0.

React on Vite

npm create vite@latest -- --template react-ts makes a React 19.3.0 app on Vite 8.3.3. Start it and share its port; Getting started has the install:

npm run dev# in a second terminalouicu share 5173

Fast Refresh works through the link: an edit to src/App.tsx shows on every screen with the link open, without a reload. The Blocked request error other tunnels get, and the fix for a pinned hot reload port, are in share a Vite dev server.

Create React App: hot reload doesn't connect

npx create-react-app still makes a project, with a note that it is deprecated. The React team's announcement:

The project runs react-scripts 5.0.1 on webpack-dev-server 4.15.2, with React 19.3.0.

Through a link the page loads, but its hot reload socket dials the dev server's own port on the public name, which a link doesn't have. The browser's console says WebSocket connection to 'wss://calm-otter-4821.ouicu.app:3000/ws' failed, and edits don't show, on your screen through the link or theirs.

Fix it: WDS_SOCKET_PORT=0

The docs say of the setting: “Normally, webpack-dev-server defaults to window.location.port for the SockJS port.” Set to 0, it does just that: 443 through the link, your own port on your laptop. Put it in .env.development.local, next to package.json. A file works the same on any system:

WDS_SOCKET_PORT=0

Or, on macOS and Linux, for one run:

WDS_SOCKET_PORT=0 npm start

Restart npm start. The socket connects to wss://calm-otter-4821.ouicu.app/ws, and Fast Refresh shows each edit in place.

Invalid Host header

Create React App checks the Host header only when package.json has a proxy for your API. Then a tunnel that passes the public name on gets a page that says only this, with 200 OK:

Invalid Host header

ouicu hands the dev server localhost, so the page loads with a proxy too. The docs' way to turn the check off, DANGEROUSLY_DISABLE_HOST_CHECK=true, isn't needed here, and they don't recommend it.

Share npm start with ouicu

npm start# in a second terminalouicu share 3000

“By default, the development web server binds to all hostnames on the device (localhost, LAN network address, etc.).” So a phone on the same Wi-Fi reaches it too. The link works on any network: scan the QR code ouicu prints (QR codes, how to open localhost on your phone).

Next.js and other React set-ups

On Next.js, whose dev server refuses other origins by default, see share a Next.js dev server: it needs no settings through ouicu either. We haven't tested Parcel, Rsbuild or React Router's framework mode here, so this page doesn't vouch for them.

Whatever runs it, a client preview can carry a password on Hobby and Pro: ouicu share 3000 --password. On Pro, name the people who may open it with --allow instead.

Upload the build

For a link that stays up with your laptop closed, upload the build. Create React App writes it to build, Vite to dist:

npm run build# Create React Appouicu deploy build --spa# Viteouicu deploy dist --spa

--spa answers paths with no file with index.html, for React Router and other routing in the browser (Uploading a built site). For sending it to a client, see show a client a website before it goes live.