> ## Documentation Index
> Fetch the complete documentation index at: https://docs.microapp.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Deploy your first microapp in under 5 minutes.

## Deploy Your First Microapp

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

<Info>
  For a more detailed tutorial that walks through Microapp's core features, check out the [Create New Microapp](/tutorials/create-new-microapp) tutorial.
</Info>

## 1. Initialize Your Microapp

You can start building a microapp with any of our [supported frameworks](/getting-started/supported-frameworks). Here are a few popular options to get started:

### Next.js

<CodeGroup>
  ```bash npm theme={null}
  npx create-next-app my-microapp
  cd my-microapp
  ```

  ```bash yarn theme={null}
  yarn create next-app my-microapp
  cd my-microapp
  ```

  ```bash pnpm theme={null}
  pnpm create next-app my-microapp
  cd my-microapp
  ```
</CodeGroup>

### React

<CodeGroup>
  ```bash npm theme={null}
  npx create-react-app my-microapp
  cd my-microapp
  ```

  ```bash yarn theme={null}
  yarn create react-app my-microapp
  cd my-microapp
  ```

  ```bash pnpm theme={null}
  pnpm create react-app my-microapp
  cd my-microapp
  ```
</CodeGroup>

### Vue.js

<CodeGroup>
  ```bash npm theme={null}
  npm init vue@latest my-microapp
  cd my-microapp
  npm install
  ```

  ```bash yarn theme={null}
  yarn create vue my-microapp
  cd my-microapp
  yarn install
  ```

  ```bash pnpm theme={null}
  pnpm create vue my-microapp
  cd my-microapp
  pnpm install
  ```
</CodeGroup>

### SvelteKit

<CodeGroup>
  ```bash npm theme={null}
  npm create svelte@latest my-microapp
  cd my-microapp
  npm install
  ```

  ```bash yarn theme={null}
  yarn create svelte my-microapp
  cd my-microapp
  yarn install
  ```

  ```bash pnpm theme={null}
  pnpm create svelte my-microapp
  cd my-microapp
  pnpm install
  ```
</CodeGroup>

### Astro

<CodeGroup>
  ```bash npm theme={null}
  npm create astro@latest my-microapp
  cd my-microapp
  ```

  ```bash yarn theme={null}
  yarn create astro my-microapp
  cd my-microapp
  ```

  ```bash pnpm theme={null}
  pnpm create astro my-microapp
  cd my-microapp
  ```
</CodeGroup>

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:

```tsx theme={null}
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:

```jsx theme={null}
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:

```vue theme={null}
<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:

<CodeGroup>
  ```bash npm theme={null}
  # For most frameworks (Next.js, React, SvelteKit, Astro, Vue 3)
  npm run dev

  # For Vue 2
  npm run serve
  ```

  ```bash yarn theme={null}
  # For most frameworks (Next.js, React, SvelteKit, Astro, Vue 3)
  yarn dev

  # For Vue 2
  yarn serve
  ```

  ```bash pnpm theme={null}
  # For most frameworks (Next.js, React, SvelteKit, Astro, Vue 3)
  pnpm dev

  # For Vue 2
  pnpm serve
  ```
</CodeGroup>

Your microapp should open in your default web browser, typically at [http://localhost:3000](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](https://github.com/), then follow these steps:

### a. Initialize Git Repository

```bash theme={null}
git init .
```

### b. Add and Commit Your Files

```bash theme={null}
git add .
git commit -m "Initial commit"
```

### c. Create a New Repository on GitHub

Go to [GitHub](https://github.com/new) and create a new repository.

### d. Link and Push to Your GitHub Repository

```bash theme={null}
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:

<CodeGroup>
  ```bash npm theme={null}
  npm install @microapp-io/react
  ```

  ```bash yarn theme={null}
  yarn add @microapp-io/react
  ```

  ```bash pnpm theme={null}
  pnpm add @microapp-io/react
  ```
</CodeGroup>

Then integrate it into your application:

```jsx theme={null}
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](/core-concepts/identity/react) - Learn how to implement user authentication
* [Localization](/core-concepts/localization/react) - Display content in the user's preferred language
* [Theming](/core-concepts/theming/react) - 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](/core-concepts/overview) 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](https://creator.microapp.io)
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](/core-concepts/distribution).

## 6. Explore Additional Features

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

<CardGroup cols={2}>
  <Card title="Distribution" icon="rocket" href="/core-concepts/distribution">
    Distribute your microapp to a global audience, with built-in marketing and analytics.
  </Card>

  <Card title="Identity" icon="fingerprint" href="/core-concepts/identity/overview">
    Authenticate and authorize users with secure, easy-to-implement identity services.
  </Card>

  <Card title="Localization" icon="language" href="/core-concepts/localization/overview">
    Display content in the user's preferred language for a global reach.
  </Card>

  <Card title="Theming" icon="palette" href="/core-concepts/theming/overview">
    Support light and dark mode preferences for better user experience.
  </Card>

  <Card title="Monetization" icon="coins" href="/core-concepts/monetization">
    Earn revenue from your microapp through various monetization strategies.
  </Card>

  <Card title="UI" icon="paintbrush" href="/core-concepts/ui/overview">
    Leverage beautiful and consistent design elements for your microapp.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.