In this tutorial, you’ll create an app that users can access in the Whop dashboard.
What you’ll learn
In this tutorial, you’ll learn how to do the following tasks:
- Initialize a Next.js app with the Whop SDK
- Configure your app on the Whop dashboard
- Start your development server
- You’ve created a Whop company
- You’ve installed Node.js 16 or higher.
- You’ve installed a Node.js package manager: either npm, Yarn 1.x, or pnpm.
- You’ve installed Git
- You’re using the latest version of Chrome
Note: Safari will not work with development mode. Please use Chrome
Step 1: Create a Whop company
In order to build an app, you must have made a company. To make a company, go to our business dashboard and click start selling.
Step 2: Join the App Developer Alpha
Once you are signed in to our business dashboard with your company, you will need to enroll in our App Developer Alpha. If you are not currently enrolled, you can apply to join here.
If you have been accepted, check out the Slack Channel for information on how to enable the beta on your company.
Step 3: Create a new app
Now that you are part of the App Developer Alpha, you can create a new app. You can do this by clicking here. You can also watch the video below for a step-by-step guide.
Step 4: Setup your development environment
Follow the guide to create a Whop App using Next.js
- Navigate to the directory where you want to create your app. Your app will be created in a new subdirectory.
- Run the following command to create a new Next.js application
yarn create next-app
- When prompted, enter a name for your app, then answer the remaining questions. We recommend using the default answers. You can read more from Next.js if you have questions.
Step 5: Install the Whop SDK
We have created an SDK to make it easier to build apps on Whop. It allows you to easily make requests to the Whop API, interact with the browser, open a local port for development, and more. Let’s install it.
- Navigate to your newly created app directory.
- Install the Whop SDK
yarn add @whop-apps/sdk
Step 6: Setup your environment variables
Please add the following environment variables to your project. These are needed for the Whop SDK to function.
Example ENV file
WHOP_API_KEY: The API key used to authenticate with the Whop API. Get this from the app’s settings page on the Whop Dashboard.
NEXT_PUBLIC_WHOP_APP_ID: The ID of your app. Get this from the app’s settings page on Whop dashboard. Looks like:
Make sure not to commit your API key to a public repository, this could lead to your app being compromised.
Step 7: Installing Frosted UI (optional)
Frosted UI is a UI library created by Whop, it contains all the components used to build Whop. Although it is not required, we recommend you use it to keep the same look and feel as the rest of the platform.
For information on how to install Frosted UI, click here
We recommend using Frosted as it will sync color preferences with the user’s Whop preference.
Step 8: Start a local development server
After your app is created and the SDK is installed, you can start your local development server.
Whop SDK will open up a secure port on your computer which will allow your development server to be shown in the iFrame.
- Run the following command to start a local server for your app:
If you are using NPM, you need to add
"whop-proxy": "whop-proxy" to
the scripts section of your
This will start a proxy server on port
3000. If you would like to change the port, you can do so by running
yarn whop-proxy --proxyPort <port>. Be sure to save your correct development URL on the app settings.
- Now you can open your app in its iFrame. Depending on the type of app you are creating, you will need to open it in a different location.
- Learn how to configure your page routes to work within the iFrame
- Use the Whop API to pull company and user-specific data
- Set up webhooks to get notified in real-time