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

npx create-next-app my-microapp

​
React

npx create-react-app my-microapp

​
Vue.js

npm init vue@latest my-microapp

​
SvelteKit

npm create svelte@latest my-microapp

​
Astro

npm create astro@latest my-microapp

After initializing your project, navigate to your project directory:

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:

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