<100 subscribers
This comprehensive guide walks you through deploying a Farcaster mini application using the JumpboxTech template and Vercel hosting platform.
Before starting, ensure you have:
Node.js installed (version 16 or higher)
Git installed on your system
A GitHub account
Basic command line knowledge
Download the Farcaster mini app template from GitHub:
git clone https://github.com/jumpboxtech/farcaster-miniapp-exampledemo.git
cd farcaster-miniapp-exampledemo
Create two essential images for your mini app and place them in the /public/images/ directory:
Dimensions: Minimum 600x400px (recommended 1200x630px)
Purpose: Displayed when your mini app is shared in Farcaster
Content: Should clearly represent your app with high contrast
Requirements: Include your app name/logo for brand recognition
Dimensions: 512x512px (square format)
Purpose: Shown while your mini app is loading
Content: Your logo or app icon
Requirements: Simple design that works on both dark and light backgrounds
Visit vercel.com and create a free account
Connect your GitHub account for seamless deployment
Verify your email address to activate your account
Navigate to your project directory and install the required packages:
Install the Vercel CLI globally for deployment:
npm install -g vercel
Run the deployment process with the Vercel CLI:
During the interactive setup, you'll be prompted to configure:
Deploy confirmation: Select "yes" to proceed
Scope selection: Choose your personal account or team
Project linking: Select "no" to create a new project
Project name: Enter a descriptive name (e.g., "miniapp-exampledemo")
Code directory: Use "./" for the current directory
Settings modification: Select "no" to use auto-detected Next.js settings
The CLI will automatically detect your Next.js configuration:
Build Command: next build
Development Command: next dev --port $PORT
Install Command: npm install
Output Directory: Next.js default
After the initial deployment, push your app to production:
vercel --prod
This command will:
Build your application for production
Deploy to Vercel's global CDN
Provide you with a production URL
Your deployment process should look similar to this:
Vercel CLI 37.4.0
๐ Linked to [youraccount]-projects/miniapp-exampledemo (created .vercel)
๐ Inspect: vercel.com/[youraccount]...
โ
Production: https://miniapp-exampledemo-[hash]-[youraccount]-projects.vercel.app
๐ Deployed to production. Run `vercel --prod` to overwrite later
Before your mini app is ready for use, update these critical files:
Replace placeholder URLs with your production domain:
const frameMetadata = {
imageUrl: 'https://your-domain.vercel.app/images/frame-preview.png',
button: {
title: 'View Profile',
action: {
name: 'Your App Name',
url: 'https://your-domain.vercel.app',
splashImageUrl: 'https://your-domain.vercel.app/images/splash.png',
splashBackgroundColor: '#000000'
}
}
};
Personalize your app's branding:
<h1 className="text-4xl md:text-5xl font-bold text-blue-600">
Your App Name<br />Your Tagline
</h1>
Access your local development server: npm run dev
Open http://localhost:3000 in your browser
Verify all components load correctly
Visit your Vercel production URL
Share the URL in a Farcaster cast
Interact with the mini app to ensure proper functionality
To make your mini app discoverable:
Share in Farcaster: Post your production URL in a cast
Use Developer Tools: Access Farcaster's mini app validation tools
Test Interactions: Verify buttons, data display, and user experience
The template includes built-in security features:
HTTPS enforcement: All URLs must use HTTPS in production
Input validation: Frame context data is properly validated
XSS protection: No dangerous innerHTML usage
Type safety: Full TypeScript coverage prevents runtime errors
Mini app not loading
Check browser console for SDK errors
Verify all URLs use HTTPS
Ensure images are publicly accessible
Images not displaying
Confirm image dimensions meet requirements
Verify CORS headers are properly configured
Test image URLs directly in browser
Buttons not functioning
Check mini app SDK initialization
Verify button URLs are valid and accessible
Review console logs for JavaScript errors
After successful deployment:
Monitor Performance: Use Vercel Analytics to track usage
Customize Features: Modify user stats, colors, and functionality
Add Analytics: Integrate tracking tools for user insights
Scale Up: Consider adding external APIs for dynamic content
You now have a fully functional Farcaster mini app deployed on Vercel. The template provides a secure foundation for building engaging Farcaster experiences. Continue customizing the design, functionality, and user experience to match your specific use case.

This comprehensive guide walks you through deploying a Farcaster mini application using the JumpboxTech template and Vercel hosting platform.
Before starting, ensure you have:
Node.js installed (version 16 or higher)
Git installed on your system
A GitHub account
Basic command line knowledge
Download the Farcaster mini app template from GitHub:
git clone https://github.com/jumpboxtech/farcaster-miniapp-exampledemo.git
cd farcaster-miniapp-exampledemo
Create two essential images for your mini app and place them in the /public/images/ directory:
Dimensions: Minimum 600x400px (recommended 1200x630px)
Purpose: Displayed when your mini app is shared in Farcaster
Content: Should clearly represent your app with high contrast
Requirements: Include your app name/logo for brand recognition
Dimensions: 512x512px (square format)
Purpose: Shown while your mini app is loading
Content: Your logo or app icon
Requirements: Simple design that works on both dark and light backgrounds
Visit vercel.com and create a free account
Connect your GitHub account for seamless deployment
Verify your email address to activate your account
Navigate to your project directory and install the required packages:
Install the Vercel CLI globally for deployment:
npm install -g vercel
Run the deployment process with the Vercel CLI:
During the interactive setup, you'll be prompted to configure:
Deploy confirmation: Select "yes" to proceed
Scope selection: Choose your personal account or team
Project linking: Select "no" to create a new project
Project name: Enter a descriptive name (e.g., "miniapp-exampledemo")
Code directory: Use "./" for the current directory
Settings modification: Select "no" to use auto-detected Next.js settings
The CLI will automatically detect your Next.js configuration:
Build Command: next build
Development Command: next dev --port $PORT
Install Command: npm install
Output Directory: Next.js default
After the initial deployment, push your app to production:
vercel --prod
This command will:
Build your application for production
Deploy to Vercel's global CDN
Provide you with a production URL
Your deployment process should look similar to this:
Vercel CLI 37.4.0
๐ Linked to [youraccount]-projects/miniapp-exampledemo (created .vercel)
๐ Inspect: vercel.com/[youraccount]...
โ
Production: https://miniapp-exampledemo-[hash]-[youraccount]-projects.vercel.app
๐ Deployed to production. Run `vercel --prod` to overwrite later
Before your mini app is ready for use, update these critical files:
Replace placeholder URLs with your production domain:
const frameMetadata = {
imageUrl: 'https://your-domain.vercel.app/images/frame-preview.png',
button: {
title: 'View Profile',
action: {
name: 'Your App Name',
url: 'https://your-domain.vercel.app',
splashImageUrl: 'https://your-domain.vercel.app/images/splash.png',
splashBackgroundColor: '#000000'
}
}
};
Personalize your app's branding:
<h1 className="text-4xl md:text-5xl font-bold text-blue-600">
Your App Name<br />Your Tagline
</h1>
Access your local development server: npm run dev
Open http://localhost:3000 in your browser
Verify all components load correctly
Visit your Vercel production URL
Share the URL in a Farcaster cast
Interact with the mini app to ensure proper functionality
To make your mini app discoverable:
Share in Farcaster: Post your production URL in a cast
Use Developer Tools: Access Farcaster's mini app validation tools
Test Interactions: Verify buttons, data display, and user experience
The template includes built-in security features:
HTTPS enforcement: All URLs must use HTTPS in production
Input validation: Frame context data is properly validated
XSS protection: No dangerous innerHTML usage
Type safety: Full TypeScript coverage prevents runtime errors
Mini app not loading
Check browser console for SDK errors
Verify all URLs use HTTPS
Ensure images are publicly accessible
Images not displaying
Confirm image dimensions meet requirements
Verify CORS headers are properly configured
Test image URLs directly in browser
Buttons not functioning
Check mini app SDK initialization
Verify button URLs are valid and accessible
Review console logs for JavaScript errors
After successful deployment:
Monitor Performance: Use Vercel Analytics to track usage
Customize Features: Modify user stats, colors, and functionality
Add Analytics: Integrate tracking tools for user insights
Scale Up: Consider adding external APIs for dynamic content
You now have a fully functional Farcaster mini app deployed on Vercel. The template provides a secure foundation for building engaging Farcaster experiences. Continue customizing the design, functionality, and user experience to match your specific use case.

Share Dialog
Share Dialog
No comments yet