Skip to main content
This page takes you from nothing to a working local preview and a built add-on file, in about ten minutes.

Before you start

Step 1: Get the SDK

Each add-on lives on its own branch, always started from main.
Build one add-on per branch, and never start a branch from an example add-on’s branch. You would carry its pages and libraries into yours.

Step 2: Name your add-on file

Open rsbuild.config.ts and change one line near the top:
This becomes the name of the file you upload. Use lowercase letters and underscores, and keep it unique in your organization.

Step 3: Connect the preview to your account

Edit .env: Your add-on saves real settings and permissions, so build against sandbox. To try it against production, use https://apiweb.mile.app/ and https://v4web.mile.app/host-globals.js with a production token. Always change both addresses together.
Replace the API address that comes in .env.example. It no longer answers, and the preview would show “not signed in”.
.env stays on your computer. Never commit it or share the token in it.

Step 4: Open the preview

Open http://localhost:3001. The starter page shows your name, your organization and the add-on name. Your preview now talks to your real account, with the app’s own components and styles. If the app was updated while the preview was running, stop it and run pnpm dev again. Reloading the page is not enough.

Step 5: Build your add-on file

The build checks your code first and stops on any error. On success it produces one file:
That file is your add-on. Next, replace the starter page with your own: see Building an Add-on.
Keep the SDK in its own folder. If a copy of the app’s own source code sits in the folder next to it, the build also checks that code and can fail on errors that are not yours.