> ## 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.

# Initialize microapp

> Initialize your microapp project.

Let's start by creating a new microapp project using your preferred framework.

## Choose a Framework

Here are initialization commands for some popular frameworks:

### Next.js

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

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

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

### React

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

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

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

### Vue.js

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

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

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

### SvelteKit

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

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

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

### Astro

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

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

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

After initializing your project, navigate to your project directory:

```bash theme={null}
cd my-microapp
```

## Backend and API Considerations

Microapp encourages you to use your own API for backend functionality. This gives you complete control over your backend implementation and allows you to:

* Use any backend technology or service you prefer
* Host your API on your own infrastructure
* Implement custom authentication and authorization
* Handle data storage and processing according to your needs
* Scale your backend independently from your frontend

You can connect your microapp to your API using standard HTTP requests or any client libraries appropriate for your chosen framework.

For example, in a React or Next.js application, you might use fetch or axios:

```javascript theme={null}
// Example of connecting to your own API
async function fetchData() {
  try {
    const response = await fetch('https://your-api.example.com/data');
    const data = await response.json();
    // Process the data
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
```

Now your microapp project is ready for development. In the next section, we'll focus on styling your microapp.