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

Requirements

  • 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 as this allows you to test your app. To make a company, go to our business dashboard and click start selling.

If you already have a company, you can skip this step.

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

If you are using our pre-built app template, you can skip this step and go directly to Step 6 to set up your ENV

  1. Navigate to the directory where you want to create your app. Your app will be created in a new subdirectory.
  2. Run the following command to create a new Next.js application
  1. 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.

  1. Navigate to your newly created app directory.
cd my-new-app
  1. Install the Whop 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

.env.local
WHOP_API_KEY=YOUR_API_KEY
NEXT_PUBLIC_WHOP_APP_ID=YOUR_APP_ID
  1. 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.
  1. NEXT_PUBLIC_WHOP_APP_ID: The ID of your app. Get this from the app’s settings page on Whop dashboard. Looks like: app_XXXXXXXX

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.

  1. 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 package.json file.


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.

  1. 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.

Next steps

  • 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