If you are building a Whop app inside of our website, you can use this proxy to run your local setup inside of a Whop iFrame. You can use this proxy with any application written in any language and any framework.

​
NextJS / Javascript app

  1. Add the proxy as a dev dependency.
pnpm add -D @whop-apps/dev-proxy
  1. Update your package.json dev script to include the proxy.
"scripts": {
	"dev": "whop-proxy --command 'next dev --turbopack'",
}

You can update the dev command to match your framework requirements. You can also other commands wrapped by the proxy in a similar way.

  1. Run the proxy.
pnpm dev

​
Standalone mode (other frameworks)

  1. Run you app on your local machine on some port, for example 5000.

  2. Run the proxy in standalone mode.

pnpm dlx @whop-apps/dev-proxy --standalone --upstreamPort=5000 --proxyPort=3000

This will run the proxy as an independent process. It will start a server on port 3000 and forward requests to port 5000 and append the user token in the headers.

​
Proxy Command Options

The proxy can be configured using the following command line options:

Usage: pnpm dlx @whop-apps/dev-proxy [options]

Options:

--proxyPort <port>      The port the proxy should listen on (3000 by default)
--upstreamPort <port>   The port the upstream server is listening on (set automatically by default)
--npmCommand <command>  The npm command to run to start the upstream server (dev by default)
--command <command>     The command to run to start the upstream server (npm run dev by default)
--standalone            Run the proxy as an independent process proxying requests from one port to another port. Ignores the command / npmCommand options.