Mini Apps

Appearance

Deployment ​

Deploy your Mini App to make it accessible in MiniPay. This guide covers deployment requirements, build configuration, and how to verify your deployment.

Requirements ​

HTTPS Required ​

MiniPay requires all Mini Apps to be served over HTTPS. Your deployment must:

  • ✅ Use HTTPS (not HTTP)
  • ✅ Have a valid SSL certificate
  • ✅ Be publicly accessible

CORS Configuration ​

If your app makes API calls, ensure CORS is properly configured:

javascript
// Example CORS headers (adjust for your server)
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

Build Configuration ​

Vite ​

For Vite projects, ensure your build is configured correctly:

ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist",
    sourcemap: false, // Set true only if you use error reporting (e.g. Sentry) that needs source maps; otherwise keeps builds smaller and avoids exposing source
  },
});

Build your app:

bash
npm run build

Environment Variables ​

Set environment variables for your deployment:

bash
# Production
VITE_API_URL=https://api.example.com
VITE_CHAIN_ID=42220

Access in your app:

ts
const apiUrl = import.meta.env.VITE_API_URL;

Testing Your Deployment ​

  1. Test HTTPS: Verify your app loads over HTTPS
  2. Test in MiniPay: Use Developer Mode to load your deployed URL
  3. Test wallet connection: Ensure auto-connect works
  4. Test transactions: Verify transactions work on the deployed version

Performance Optimization ​

Optimize your deployment for performance:

  1. Enable compression: Gzip/Brotli compression
  2. Cache static assets: Set appropriate cache headers
  3. Minify code: Ensure build process minifies JavaScript/CSS
  4. Optimize images: Compress and optimize images
  5. Code splitting: Use dynamic imports for code splitting

Security Considerations ​

  1. Environment variables: Never commit secrets to your repository
  2. HTTPS only: Ensure all traffic uses HTTPS
  3. Content Security Policy: Configure CSP headers if needed
  4. Dependencies: Keep dependencies up to date

Troubleshooting ​

App not loading in MiniPay ​

  • ✅ Check HTTPS is enabled
  • ✅ Verify URL is publicly accessible
  • ✅ Check browser console for errors
  • ✅ Ensure CORS is configured correctly

Build errors ​

  • ✅ Check Node.js version matches requirements
  • ✅ Verify all dependencies are installed
  • ✅ Check build configuration
  • ✅ Review build logs for specific errors

Environment variables not working ​

  • ✅ Use the same VITE_ prefix as in Environment variables above (if using Vite)
  • ✅ Rebuild after changing environment variables
  • ✅ Check hosting provider's environment variable configuration

Next Steps ​