Quickstart

​

Deploy Your First Microapp

This guide walks through the initialization and deployment of a simple microapp.

​

1. Initialize Your Microapp

You can start building a microapp with any of our supported frameworks. Here are a few popular options to get started:

​

Next.js

npx create-next-app my-microapp
cd my-microapp

​

React

npx create-react-app my-microapp
cd my-microapp

​

Vue.js

npm init vue@latest my-microapp
cd my-microapp
npm install

​

SvelteKit

npm create svelte@latest my-microapp
cd my-microapp
npm install

​

Astro

npm create astro@latest my-microapp
cd my-microapp

Choose the framework you’re most comfortable with. The examples in this guide will use Next.js, but the principles apply to any framework.

​

2. Customize Your Microapp

Let’s make a basic change to your microapp and test it locally before pushing to GitHub.

​

Update Page Content

The exact file to edit will depend on your chosen framework:

​

For Next.js

Open the file app/page.tsx (or pages/index.js for older versions) and update it with:

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen text-4xl font-bold">
      Hello, Microapp!
    </div>
  );
}

​

For React

Open the file src/App.js and update it with:

function App() {
  return (
    <div className="App" style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '100vh',
      fontSize: '2rem',
      fontWeight: 'bold'
    }}>
      Hello, Microapp!
    </div>
  );
}

export default App;

​

For Vue.js

Open the file src/App.vue and update it with:

<template>
  <div class="app">
    <h1>Hello, Microapp!</h1>
  </div>
</template>

<style>
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 2rem;
  font-weight: bold;
}
</style>

​

Test Locally (Optional)

To verify your changes before pushing to GitHub, run your microapp’s development server:

# For most frameworks (Next.js, React, SvelteKit, Astro, Vue 3)
npm run dev

# For Vue 2
npm run serve

Your microapp should open in your default web browser, typically at http://localhost:3000.

​

3. Push Your Code to GitHub

Microapp integrates with GitHub for seamless deployment. If you don’t already have a GitHub account, create one, then follow these steps:

​

a. Initialize Git Repository

git init .

​

b. Add and Commit Your Files

git add .
git commit -m "Initial commit"

​

c. Create a New Repository on GitHub

Go to GitHub and create a new repository.

​

d. Link and Push to Your GitHub Repository

git remote add origin https://github.com/yourusername/my-microapp.git
git branch -M main
git push -u origin main

​

4. Install and Integrate the Microapp SDK

For React-based frameworks (Next.js, React, etc.), install the React SDK:

npm install @microapp-io/react

Then integrate it into your application:

import { 
  AuthProvider, 
  UserPreferencesProvider 
} from '@microapp-io/react';

function App() {
  return (
    <AuthProvider>
      <UserPreferencesProvider>
        {/* Your app components */}
      </UserPreferencesProvider>
    </AuthProvider>
  );
}

For more detailed information on each SDK, check out these specific guides:

• Authentication - Learn how to implement user authentication
• Localization - Display content in the user’s preferred language
• Theming - Support light and dark mode in your microapp

For other frameworks, we support installing our JavaScript SDKs directly without the React wrapper. Check our Core Concepts documentation for framework-specific integration guides.

​

5. Deploy Your Microapp

Once your microapp is ready, deploy it to the Microapp marketplace:

1. Create an account on the Creator Dashboard
2. Create a new microapp project
3. Follow the deployment instructions provided in the dashboard

For a detailed walkthrough of the deployment process, check out the Distribution Guide.

​

6. Explore Additional Features

Congratulations! You’ve created and deployed your first microapp. Now, add functionalities to your microapp: