Getting Started

Build your first SynApp Mini App in 5 minutes. This guide will walk you through creating, developing, and deploying a Mini App.

Prerequisites

• Node.js 18+ (Download)
• npm or yarn
• Basic knowledge of React

Step 1: Create Project

Use our CLI tool to scaffold a new project:

npm create synapp-miniapp my-first-app

You'll be prompted to choose:

• Template: Basic / Game / Dashboard
• TypeScript: Yes / No

🚀 Create SynApp Mini App

? Project name: my-first-app
? Select a template: › Basic App
? Use TypeScript? › Yes

✔ Project created successfully!

Step 2: Install Dependencies

cd my-first-app
npm install

This installs:

• react & react-dom
• @synapp/ui (SynApp SDK)
• vite (Build tool)

Step 3: Start Development Server

npm run dev

Open http://localhost:5173 in your browser.

You should see a welcome screen with a counter demo.

Step 4: Explore the Code

Project Structure

App.tsx (Simplified)

import { SynAppProvider, SynAppPage, SynAppButton } from '@synapp/ui';

function App() {
  return (
    <SynAppProvider>
      <SynAppPage requireAuth={false} title="My First App">
        <div className="p-8">
          <h1 className="text-4xl font-bold mb-4">
            Welcome to SynApp! 👋
          </h1>
          <SynAppButton variant="primary">
            Click Me
          </SynAppButton>
        </div>
      </SynAppPage>
    </SynAppProvider>
  );
}

export default App;

Step 5: Build for Production

npm run build

This creates dist/bundle.js - your production-ready Mini App.

Step 6: Deploy to CDN

Option 1: Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
cd dist
vercel --prod

Result: https://your-app.vercel.app/bundle.js

Step 7: Submit to SynApp

1. Go to SynApp Submit App
2. Fill in the form:
   • Name: My First App
   • Category: Utilities
   • Architecture: v2 Mini App
   • Bundle URL: https://your-cdn.com/bundle.js
3. Click Submit

Next Steps

Troubleshooting

"Module not found: @synapp/ui"

Solution:

npm install @synapp/ui

"Bundle does not export a default component"

Solution: Ensure your App.tsx has:

export default App;  // ✅ Correct

// Not:
export { App };  // ❌ Wrong