Configure your Vite project and add required variables to your local and deployment environments.

​
Configure Vite

Update vite.config.ts to add React and ensure Node globals are defined.
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {},
    global: 'globalThis'
  }
})
This prevents runtime errors when libraries expect process.env or global.

​
Get a Client API Key

Get your Client API Key from the Coinbase Developer Platform.
Copy the key to use in your project.
These variables are essential for your MiniKit app to function:
​
VITE_PUBLIC_ONCHAINKIT_PROJECT_NAME
string
required
The name of your Mini App as it appears to users
​
VITE_PUBLIC_URL
string
required
The deployed URL of your application (must be HTTPS)
​
VITE_PUBLIC_ONCHAINKIT_API_KEY
string
required
Your Coinbase Developer Platform API key
​
FARCASTER_HEADER
string
required
Generated during manifest creation for account association
​
FARCASTER_PAYLOAD
string
required
Generated during manifest creation for account association
​
FARCASTER_SIGNATURE
string
required
Generated during manifest creation for account association

​
Setup Environment Variables

Create a .env file in your project’s root directory and add your API key.
.env
# Required
VITE_PUBLIC_ONCHAINKIT_PROJECT_NAME=YourAppName
VITE_PUBLIC_URL=https://your-app.vercel.app
VITE_PUBLIC_ONCHAINKIT_API_KEY=your_client_api_key_here

# Generated by `npx create-onchain --manifest`
FARCASTER_HEADER=base64_header
FARCASTER_PAYLOAD=base64_payload
FARCASTER_SIGNATURE=hex_signature

# Optional (appearance and metadata)
VITE_PUBLIC_APP_ICON=https://your-app.vercel.app/icon.png
VITE_PUBLIC_APP_SUBTITLE=Short subtitle
VITE_PUBLIC_APP_DESCRIPTION=Describe what your app does
VITE_PUBLIC_APP_SPLASH_IMAGE=https://your-app.vercel.app/splash.png
VITE_PUBLIC_SPLASH_BACKGROUND_COLOR=#000000
VITE_PUBLIC_APP_PRIMARY_CATEGORY=social
VITE_PUBLIC_APP_HERO_IMAGE=https://your-app.vercel.app/og.png
VITE_PUBLIC_APP_TAGLINE=Play instantly
VITE_PUBLIC_APP_OG_TITLE=Your App
VITE_PUBLIC_APP_OG_DESCRIPTION=Fast, fun, social
VITE_PUBLIC_APP_OG_IMAGE=https://your-app.vercel.app/og.png
Ensure all referenced assets are publicly accessible via HTTPS.