# Deploy a Farcaster Mini App: Complete Tutorial > Build Your First Farcaster Mini App in Under 30 Minutes **Published by:** [jumpbox](https://paragraph.com/@jumpbox/) **Published on:** 2025-08-21 **Categories:** farcaster, miniapp, vercel, github, examples, tutorial **URL:** https://paragraph.com/@jumpbox/deploy-a-farcaster-mini-app-complete-tutorial ## Content This comprehensive guide walks you through deploying a Farcaster mini application using the JumpboxTech template and Vercel hosting platform.PrerequisitesBefore starting, ensure you have:Node.js installed (version 16 or higher)Git installed on your systemA GitHub accountBasic command line knowledgeStep 1: Clone the RepositoryDownload the Farcaster mini app template from GitHub:git clone https://github.com/jumpboxtech/farcaster-miniapp-exampledemo.git cd farcaster-miniapp-exampledemo Step 2: Prepare Required ImagesCreate two essential images for your mini app and place them in the /public/images/ directory:App Preview Image (frame-preview.png)Dimensions: Minimum 600x400px (recommended 1200x630px)Purpose: Displayed when your mini app is shared in FarcasterContent: Should clearly represent your app with high contrastRequirements: Include your app name/logo for brand recognitionSplash Screen Image (splash.png)Dimensions: 512x512px (square format)Purpose: Shown while your mini app is loadingContent: Your logo or app iconRequirements: Simple design that works on both dark and light backgroundsStep 3: Set Up Vercel AccountVisit vercel.com and create a free accountConnect your GitHub account for seamless deploymentVerify your email address to activate your accountStep 4: Install Dependencies and Vercel CLINavigate to your project directory and install the required packages:Install the Vercel CLI globally for deployment:npm install -g vercel Step 5: Deploy to VercelRun the deployment process with the Vercel CLI:During the interactive setup, you'll be prompted to configure:Deploy confirmation: Select "yes" to proceedScope selection: Choose your personal account or teamProject linking: Select "no" to create a new projectProject name: Enter a descriptive name (e.g., "miniapp-exampledemo")Code directory: Use "./" for the current directorySettings modification: Select "no" to use auto-detected Next.js settingsThe CLI will automatically detect your Next.js configuration:Build Command: next buildDevelopment Command: next dev --port $PORTInstall Command: npm installOutput Directory: Next.js defaultStep 6: Production DeploymentAfter the initial deployment, push your app to production:vercel --prod This command will:Build your application for productionDeploy to Vercel's global CDNProvide you with a production URLExpected OutputYour 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 Step 7: Configure Your Mini AppBefore your mini app is ready for use, update these critical files:Update Metadata (app/layout.tsx)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' } } }; Customize Content (app/components/Demo.tsx)Personalize your app's branding:

Your App Name
Your Tagline

Step 8: Test Your Mini AppDevelopment TestingAccess your local development server: npm run devOpen http://localhost:3000 in your browserVerify all components load correctlyProduction TestingVisit your Vercel production URLShare the URL in a Farcaster castInteract with the mini app to ensure proper functionalityStep 9: Integration with FarcasterTo make your mini app discoverable:Share in Farcaster: Post your production URL in a castUse Developer Tools: Access Farcaster's mini app validation toolsTest Interactions: Verify buttons, data display, and user experienceSecurity ConsiderationsThe template includes built-in security features:HTTPS enforcement: All URLs must use HTTPS in productionInput validation: Frame context data is properly validatedXSS protection: No dangerous innerHTML usageType safety: Full TypeScript coverage prevents runtime errorsTroubleshootingCommon IssuesMini app not loadingCheck browser console for SDK errorsVerify all URLs use HTTPSEnsure images are publicly accessibleImages not displayingConfirm image dimensions meet requirementsVerify CORS headers are properly configuredTest image URLs directly in browserButtons not functioningCheck mini app SDK initializationVerify button URLs are valid and accessibleReview console logs for JavaScript errorsNext StepsAfter successful deployment:Monitor Performance: Use Vercel Analytics to track usageCustomize Features: Modify user stats, colors, and functionalityAdd Analytics: Integrate tracking tools for user insightsScale Up: Consider adding external APIs for dynamic contentConclusionYou 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. ## Publication Information - [jumpbox](https://paragraph.com/@jumpbox/): Publication homepage - [All Posts](https://paragraph.com/@jumpbox/): More posts from this publication - [RSS Feed](https://api.paragraph.com/blogs/rss/@jumpbox): Subscribe to updates - [Twitter](https://twitter.com/_seehad): Follow on Twitter - [Farcaster](https://farcaster.xyz/jumpbox.eth): Follow on Farcaster