Build a waitlist sign-up mini app for your company. Prerequisites
  • Base app account
  • Vercel account for hosting the application
1

Install template app

Terminal
git clone https://github.com/base/demos.git
Once you have installed the template, change directories to the folder and install the dependencies:
Terminal
cd demos/minikit/waitlist-mini-app-qs
npm install
2

Update .env file

NEXT_PUBLIC_PROJECT_NAME="AppName"
NEXT_PUBLIC_ONCHAINKIT_API_KEY=<Replace-WITH-YOUR-CDP-API-KEY>
NEXT_PUBLIC_URL=
3

Update Manifest configuration

The minikit.config.ts file is responsible for configuring your manifest located at app/.well-known/farcaster.json.Skip the accountAssociation object for now.
If you would like to make this more personalized, change the name, subtitle, and description fields and add images to your /public folder. Then update their URLs in the file.
minikit.config.ts
export const minikitConfig = {
  accountAssociation: {
    "header": "",
    "payload": "",
    "signature": ""
  },
  miniapp: {
    version: "1",
    name: "Cubey", 
    subtitle: "Your AI Ad Companion", 
    description: "Ads",
    screenshotUrls: [`${ROOT_URL}/screenshot-portrait.png`],
    iconUrl: `${ROOT_URL}/blue-icon.png`,
    splashImageUrl: `${ROOT_URL}/blue-hero.png`,
    splashBackgroundColor: "#000000",
    homeUrl: ROOT_URL,
    webhookUrl: `${ROOT_URL}/api/webhook`,
    primaryCategory: "social",
    tags: ["marketing", "ads", "quickstart", "waitlist"],
    heroImageUrl: `${ROOT_URL}/blue-hero.png`, 
    tagline: "",
    ogTitle: "",
    ogDescription: "",
    ogImageUrl: `${ROOT_URL}/blue-hero.png`,
  },
} as const;
See our docs for the mapping of what each miniapp property is responsible for.
4

Deploy your Application

terminal
vercel --prod
You should have a URL deployed to a domain similar to: https://your-vercel-project-name.vercel.app/
5

Add URL to local .env file

Terminal
NEXT_PUBLIC_PROJECT_NAME="App Name"
NEXT_PUBLIC_ONCHAINKIT_API_KEY=<Replace-WITH-YOUR-CDP-API-KEY>
NEXT_PUBLIC_URL=https://sample-url.vercel.app/
6

Upload .env files to Vercel

These commands add environment variables to the production environment of your hosted website.
Terminal
vercel env add NEXT_PUBLIC_PROJECT_NAME production
vercel env add NEXT_PUBLIC_ONCHAINKIT_API_KEY production
vercel env add NEXT_PUBLIC_URL production
7

Sign Your Manifest

Now that you have a public domain for your application, you are ready to associate your mini app with your Farcaster account.Sign manifest
  1. Navigate to the Account Association tab on Base Build
  2. Paste your domain in the App URL field (ex: sample-url.vercel.app)
  3. Click the verify button and follow the on screen instructions for signing with your Farcaster wallet
  4. Copy the accountAssociation object
The Base Account used to verify your mini app must have a Farcaster user associated with it for proper signing to occur
8

Update `minikit.config.ts`

Update your minikit.config.ts file to include the accountAssociation object
minikit.config.ts
export const minikitConfig = {
    accountAssociation: {
        "header": "eyJmaBBiOjE3MzE4LCJ0eXBlIjoiY3VzdG9keSIsImtleSI6IjB4NzYwQjA0NDc5NjM4MTExNzNmRjg3YDPBYzA5OEJBQ0YxNzNCYkU0OCJ9",
        "payload": "eyJkb21haW4iOiJ4BWl0bGlzdC1xcy52ZXJjZWwuYXBwIn7",
        "signature": "MHhmNGQzN2M2OTk4NDIwZDNjZWVjYTNiODllYzJkMjAwOTkyMDEwOGVhNTFlYWI3NjAyN2QyMmM1MDVhNzIyMWY2NTRiYmRlZmQ0NGQwOWNiY2M2NmI2B7VmNGZiMmZiOGYzNDVjODVmNmQ3ZTVjNzI3OWNmMGY4ZTA2ODYzM2FjZjFi"
    },
    miniapp: {
        ...
    },
  }
9

Push updates to production

Terminal
vercel --prod
Ensure that Vercel’s Deployment Protection is off by going to the Vercel dashboard for your project and navigating to Settings -> Deployment Protection and toggling “Vercel Authentication” to off and click save.
10

Preview Your App

Go to base.dev/preview to validate your app.
  1. Add your app URL to view the embeds and click the launch button to verify the app launches as expected.
  2. Use the “Account association” tab to verify the association credentials were created correctly.
  3. Use the “Metadata” tab to see the metadata added from the manifest and identify any missing fields.
11

Post to Publish

To publish your app, create a post in the Base app with your app’s URL.Posting an app to Base app