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.