Create an app
You’re ready to create a new app. You want to set up your development environment so that you can start coding.
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.
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
- 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
- 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.
cd my-new-app
- 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
WHOP_API_KEY=YOUR_API_KEY
NEXT_PUBLIC_WHOP_APP_ID=YOUR_APP_ID
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: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.
- 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.
- 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
Was this page helpful?