Quick Start

Video Setup Guide

Special thanks to Diseyi Philomena for putting together this guide.

Setup Instructions

What if I’m using a monorepo?

If you're using a monorepo, your project root is where you build/run your React app (e.g. /frontend). Run these commands and place your configuration files there.

1. Install MightyMeld’s npm package:

   npm

   npm install --save-dev @mightymeld/runtime

   Yarn

   yarn add --dev @mightymeld/runtime

   pnpm

   pnpm add --save-dev @mightymeld/runtime

2. Create a mightymeld.json file in your project root.

   Adjust the values as needed (more details here):

   {
     // Command to launch your app in dev mode, e.g. "npm start" for CRA
     "run": "npm run dev",
   
     // Source file location, e.g. ["pages", "components"] for Next.js
     "include": ["src"],
   
     // For best formatting, make sure your .prettierrc’s location is included above
     "run_prettier": true,
   
     // Url of your running app. e.g. "http://localhost:5173" for Vite
     "web_server_url": "http://localhost:3000"
   }

3. Add the Babel Plugin to your project

   What frameworks are supported?

   Pretty much all of them: Vite, Next.js, Create React App. We haven’t found a framework we can’t support. :::

4. Create a .env file containing the following:

   MM_SECRET=YOUR_SECRET
   MM_INSTANCE_ID=YOUR_INSTANCE_ID
   What’s an Instance?

   Each app running in MightyMeld is powered by an instance. You can create an instance on the MightyMeld Portal and then access its secret and instance ID. Please get in touch with us if you need access to the portal.

5. Start MightyMeld:

   npx mightymeld

   This starts the MightyMeld Envoy, which uses the run command you specified in mightymeld.json to launch your project.

6. Open MightyMeld Studio at https://studio.mightymeld.app.