Skip to main content

​
Deploy Your First Microapp

This guide walks through the initialization and deployment of a simple microapp.
For a more detailed tutorial that walks through Microapp’s core features, check out the Create New Microapp tutorial.

​
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. 
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:

Distribution

Distribute your microapp to a global audience, with built-in marketing and analytics.

Identity

Authenticate and authorize users with secure, easy-to-implement identity services.

Localization

Display content in the user’s preferred language for a global reach.

Theming

Support light and dark mode preferences for better user experience.

Monetization

Earn revenue from your microapp through various monetization strategies.

UI

Leverage beautiful and consistent design elements for your microapp.