Bolt ➜ Vercel Deployment Studio
PUZZLE #10 · THE REAL WORLD LANDING PAGE
PRODUCTION VERIFIED · VITE + VERCEL EDGE

Puzzle me this #10: Deploy a Bolt Landing Page to Vercel

Take a modern landing page generated in Bolt.new ("The Real World"), purge internal WebContainer metadata (.bolt), initialize git hygiene, connect GitHub to Vercel, and configure the project root directory.

The Clue: Connect your Github repo to Vercel, select the right project root, and deploy.
https://demo-mu-one-81.vercel.app/
⚡ Transform Your Future Today

Master Real-World Skills
That Actually Matter

Stop learning theory. Start building real skills with actionable courses taught by successful entrepreneurs who've done it themselves.

No Prerequisites
Lifetime Access
Community Support
250K+
Active Students
50+
Expert Instructors

Explore Our Campuses

Multi-disciplinary training programs designed for independent income generation.

🛍️

E-Commerce

Direct-to-consumer store creation, supplier sourcing, high-converting product selection, and funnel optimization.

✍️

Copywriting

Master psychological sales copy, direct email marketing campaigns, and high-ticket client acquisition scripts.

🤖

AI Automation

Build autonomous business workflows with n8n, Make, and LLM integrations that deliver enterprise value.

📈

Financial Mastery

Risk management, market dynamics, technical charting, and asymmetric wealth preservation strategies.

Step 1: Inspect Bolt Export & Strip .bolt

Bolt.new projects include an internal .bolt folder holding WebContainer configuration, prompt tokens, and local cache. Leaving this in git can cause build cache pollution, security leaks, or linter crashes on CI.

Explorer: the-real-world
📁 .bolt (MUST REMOVE)
📁 src
📄 .env
📄 .gitignore
📄 eslint.config.js
📄 index.html
📄 package.json
📄 postcss.config.js
📄 tailwind.config.js
📄 tsconfig.json
📄 vite.config.ts
index.html 1,420 bytes 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Real World Landing Page</title>
  </head>
  <body class="bg-white text-slate-900 antialiased">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

The 5 Critical Deployment Traps in Bolt ➜ Vercel

Deploying an AI-generated web app to production requires avoiding these specific failure modes:

01
Wrong Project Root Directory (The Clue)

When exporting a zip or organizing multiple challenge folders, package.json may be nested inside a subdirectory (e.g. ./project/). Vercel looks at ./ by default, failing with Error: No package.json found.

Solution: In Vercel Import / Project Settings → General → Root Directory, click Edit and select the exact subfolder containing package.json and vite.config.ts.
02
Leaving the .bolt Folder in Git

Bolt writes internal WebContainer configuration, session telemetry, and prompt history into .bolt/. Committing it risks prompt leakage, unnecessary bundle bloat, and TypeScript compiler confusion on CI.

Solution: Run rm -rf .bolt before staging files, and add .bolt to .gitignore so it is never tracked.
03
Vite SPA Routing 404s on Refresh

In client-side single page applications (React Router, etc.), navigating to /pricing works internally, but a browser refresh requests /pricing.html from Vercel's edge, resulting in a fatal 404 NOT_FOUND.

Solution: Create a vercel.json in the project root with a wildcard rewrite: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }.
04
Missing VITE_ Environment Variables

Vite strictly ignores any environment variables not prefixed with VITE_. Also, local .env files are ignored by git, meaning production builds will have undefined keys unless configured in Vercel.

Solution: Prefix variables with VITE_SUPABASE_URL, etc., and manually add them under Vercel Project Settings → Environment Variables.
05
TypeScript Strict Check Failures (`tsc -b`)

Bolt's in-browser preview transpiles with fast esbuild, ignoring subtle TypeScript errors. However, Vercel's default build command runs tsc -b && vite build, failing on minor typing mismatches.

Solution: Test npm run build locally first. If rapid prototyping without strict types, change the build script in package.json to "build": "vite build".
📄 vercel.json (SPA Rewrites & Caching) 
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "cleanUrls": true,
  "trailingSlash": false,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}
⚡ deploy-prep.sh (Automated Clean & Push) 
#!/usr/bin/env bash
set -e

echo "🚀 Preparing Bolt project for Vercel deployment..."

# 1. Strip Bolt internal folder
if [ -d ".bolt" ]; then
  rm -rf .bolt
  echo "✅ Purged .bolt internal directory"
fi

# 2. Ensure .gitignore exists and ignores .bolt
if ! grep -q "^\.bolt" .gitignore 2>/dev/null; then
  echo -e "\n# Bolt internal state\n.bolt" >> .gitignore
  echo "✅ Added .bolt to .gitignore"
fi

# 3. Test Vite production build locally
echo "📦 Testing Vite production build..."
npm run build

echo "✨ Project is clean, validated, and ready for GitHub & Vercel deployment!"
🤖 Bolt.new Master Prompt: The Real World Landing Page 
Build a high-converting, modern landing page for 'The Real World' education platform.

Design Requirements:
- Modern minimalist layout with dark and light balanced sections.
- Brand logo with graduation cap icon and bold title 'The Real World'.
- Nav links: Features, Benefits, Pricing, and a high-contrast 'Join Now' CTA button.
- Hero Section:
  * Pill badge: '⚡ Transform Your Future Today'
  * Impactful headline: 'Master Real-World Skills That Actually Matter'
  * Subtitle: 'Stop learning theory. Start building real skills with actionable courses taught by successful entrepreneurs who've done it themselves.'
  * Action buttons: 'Start Learning Now →' (emerald primary) and 'Watch Demo' (clean border secondary).
  * Trust row with green checkmarks: 'No Prerequisites', 'Lifetime Access', 'Community Support'.
  * Social proof counters: '250K+ Active Students' and '50+ Expert Instructors'.
- Features grid highlighting 4 core campuses: E-Commerce, Copywriting, AI Automation, and Financial Literacy.
- Clean pricing tier comparison table.

Engineering Requirements:
- Build with React, TypeScript, Vite, and Tailwind CSS.
- Ensure strict TypeScript compliance with zero build errors during 'npm run build'.
- Configure mobile responsive layouts using Tailwind utility classes.
- Ensure clean separation of concerns and self-contained mock data.
Action completed successfully
\n \n', 'package.json': '{\n "name": "the-real-world-landing",\n "private": true,\n "version": "0.0.0",\n "type": "module",\n "scripts": {\n "dev": "vite",\n "build": "vite build",\n "preview": "vite preview"\n },\n "dependencies": {\n "react": "^18.3.1",\n "react-dom": "^18.3.1",\n "lucide-react": "^0.344.0"\n },\n "devDependencies": {\n "@vitejs/plugin-react": "^4.2.1",\n "typescript": "^5.2.2",\n "vite": "^5.4.2"\n }\n}', 'postcss.config.js': 'export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};', 'tailwind.config.js': '/** @type {import(\'tailwindcss\').Config} */\nexport default {\n content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],\n theme: {\n extend: {\n colors: {\n emerald: { 600: "#059669", 700: "#047857" }\n }\n },\n },\n plugins: [],\n};', 'tsconfig.json': '{\n "compilerOptions": {\n "target": "ES2020",\n "useDefineForClassFields": true,\n "lib": ["ES2020", "DOM", "DOM.Iterable"],\n "module": "ESNext",\n "skipLibCheck": true,\n "moduleResolution": "bundler",\n "allowImportingTsExtensions": true,\n "isolatedModules": true,\n "moduleDetection": "force",\n "noEmit": true,\n "jsx": "react-jsx",\n "strict": true\n },\n "include": ["src"]\n}', 'vite.config.ts': 'import { defineConfig } from "vite";\nimport react from "@vitejs/plugin-react";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n build: {\n outDir: "dist",\n sourcemap: false\n }\n});' }; function previewFile(path) { document.querySelectorAll('.file-tree-sidebar .tree-item').forEach(i => i.classList.remove('selected')); const codeViewer = document.getElementById('preview-code'); const filenameEl = document.getElementById('preview-filename'); const sizeEl = document.getElementById('preview-size'); const content = fileMocks[path] || '// File content not available'; if (codeViewer) codeViewer.textContent = content; if (filenameEl) filenameEl.textContent = path; if (sizeEl) sizeEl.textContent = content.length + ' bytes'; } // Step 2: Terminal simulation function appendTermCmd(cmd, output) { const logs = document.getElementById('term-logs'); if (!logs) return; const cmdDiv = document.createElement('div'); cmdDiv.className = 'term-line'; cmdDiv.innerHTML = `➜ ~/the-real-world ${cmd}`; logs.appendChild(cmdDiv); const outDiv = document.createElement('div'); outDiv.className = 'term-line term-success'; outDiv.innerHTML = output.replace(/\n/g, '
'); logs.appendChild(outDiv); logs.scrollTop = logs.scrollHeight; } function runAllTerminalCommands() { appendTermCmd('rm -rf .bolt', '✅ Successfully purged .bolt folder.'); setTimeout(() => { appendTermCmd('git init && git add .', '✅ Staged clean project files.'); }, 300); setTimeout(() => { appendTermCmd('git commit -m "feat: clean build without .bolt"', '[master (root-commit) 8f3a9e1] feat: clean build without .bolt'); }, 600); setTimeout(() => { appendTermCmd('git push origin master', '✅ Successfully pushed to https://github.com/your-username/demo.git (branch: master)'); showToast('Repository synced to GitHub!'); }, 900); } // Step 3: Vercel Root Directory Selection (The Clue) let selectedRoot = './'; function toggleRootOptions() { const grid = document.getElementById('root-options-grid'); if (grid) grid.style.display = grid.style.display === 'none' ? 'grid' : 'none'; } function selectRootPath(path, el) { selectedRoot = path; document.querySelectorAll('.root-opt').forEach(opt => opt.classList.remove('selected')); if (el) el.classList.add('selected'); const display = document.getElementById('active-root-display'); if (display) { if (path === './') display.innerHTML = './ (Repository Root) — Valid'; else if (path === './landing-page') display.innerHTML = './landing-page (Subfolder) — Valid'; else display.innerHTML = './wrong-folder — Missing package.json'; } showToast(`Selected project root: ${path}`); } // Step 3: Simulate Vercel Build function simulateVercelDeploy() { const logsBox = document.getElementById('build-logs'); const btn = document.getElementById('btn-deploy-trigger'); if (!logsBox || !btn) return; logsBox.style.display = 'block'; logsBox.innerHTML = '
[Vercel Build Runner] Initializing build...
'; btn.innerHTML = 'Building...'; btn.disabled = true; const steps = [ { msg: 'Cloning github.com/your-username/the-real-world-demo (Branch: final, Commit: 8f3a9e1)...', delay: 400 }, { msg: `Evaluating project root: "${selectedRoot}"...`, delay: 800 }, ]; if (selectedRoot === './wrong-folder') { steps.push({ msg: 'Error: No package.json found at root directory "./wrong-folder". Build aborted.', delay: 1300 }); steps.push({ msg: 'CLUE HINT: Connect your GitHub repo to Vercel and select the right project root!', delay: 1800 }); } else { steps.push({ msg: 'Detected Vite Framework Preset (found package.json & vite.config.ts)', delay: 1200 }); steps.push({ msg: 'Running "npm install"... (added 84 packages in 1.8s)', delay: 1700 }); steps.push({ msg: 'Running "vite build"...', delay: 2200 }); steps.push({ msg: '✓ 42 modules transformed. dist/index.html (1.42 kB), dist/assets/index.js (142 kB)', delay: 2700 }); steps.push({ msg: 'Deployment Complete! Live at: https://demo-mu-one-81.vercel.app', delay: 3200 }); } steps.forEach(s => { setTimeout(() => { const div = document.createElement('div'); div.innerHTML = s.msg; logsBox.appendChild(div); logsBox.scrollTop = logsBox.scrollHeight; }, s.delay); }); setTimeout(() => { btn.disabled = false; btn.innerHTML = 'Deploy to Vercel'; if (selectedRoot !== './wrong-folder') { showToast('Deployment Successful! Ready on Vercel.'); setTimeout(() => goToStep(4), 800); } else { showToast('Build Failed: Please select the correct root directory!'); } }, selectedRoot === './wrong-folder' ? 2200 : 3600); } // Modal Handling function openModal(title) { const modal = document.getElementById('enroll-modal'); const modalTitle = document.getElementById('modal-title'); if (modalTitle && title) modalTitle.textContent = title; if (modal) modal.style.display = 'flex'; } function closeModal(e) { const modal = document.getElementById('enroll-modal'); if (modal) modal.style.display = 'none'; } function handleEnrollSubmit(e) { e.preventDefault(); closeModal(); showToast('Enrollment application received! Welcome to The Real World.'); } // Toast Notification let toastTimeout; function showToast(msg) { const toast = document.getElementById('toast'); const text = document.getElementById('toast-text'); if (!toast || !text) return; text.textContent = msg; toast.classList.add('show'); clearTimeout(toastTimeout); toastTimeout = setTimeout(() => toast.classList.remove('show'), 3500); } // Copy Snippet function copySnippet(elementId) { const el = document.getElementById(elementId); if (!el) return; navigator.clipboard.writeText(el.textContent).then(() => { showToast('Copied code snippet to clipboard!'); }); } // Explicit window bindings window.switchTab = switchTab; window.setViewport = setViewport; window.goToStep = goToStep; window.removeBoltFolder = removeBoltFolder; window.previewFile = previewFile; window.appendTermCmd = appendTermCmd; window.runAllTerminalCommands = runAllTerminalCommands; window.toggleRootOptions = toggleRootOptions; window.selectRootPath = selectRootPath; window.simulateVercelDeploy = simulateVercelDeploy; window.openModal = openModal; window.closeModal = closeModal; window.handleEnrollSubmit = handleEnrollSubmit; window.showToast = showToast; window.copySnippet = copySnippet;