Skip to main content

​
Building for Production

Meelio supports multiple build targets: a web application and browser extensions for various platforms. This guide covers the build process for all targets.

​
Prerequisites

Requirements:
  • Node.js >= 22.0.0
  • pnpm 9.15.4
  • All dependencies installed (pnpm install)

​
Build Commands

​
Building Everything

# Build all apps (web + extension)
pnpm build
This uses Turborepo to build all packages and apps in the correct dependency order.

​
Building Specific Apps

# Build only the web application
pnpm build:web

# Equivalent to:
# turbo run build --filter=web --filter=!extension

​
Web App Build Process

1

Navigate to Web App

cd apps/web
2

Run Build

pnpm build
This uses Vite to build the React application.
3

Build Output

The production build is created in apps/web/dist/:
  • Optimized JavaScript bundles
  • Minified CSS
  • Static assets
  • Service worker (PWA support via vite-plugin-pwa)
4

Preview Build (Optional)

Test the production build locally:
pnpm preview
# or from root: pnpm preview
The preview server runs on http://localhost:4000

​
Web App Build Configuration

The web app uses Vite with these plugins:
  • @vitejs/plugin-react-swc - Fast React refresh with SWC
  • vite-plugin-pwa - Progressive Web App support
  • vite-plugin-compression - Gzip compression
  • vite-plugin-static-copy - Copy static files

​
Extension Build Process

1

Navigate to Extension

cd apps/extension
2

Build for Default Target

pnpm build
By default, this builds for Chrome using Plasmo.
3

Build Output

The extension is built to apps/extension/build/chrome-mv3-prod/:
  • Manifest v3 files
  • Compiled JavaScript
  • Assets and icons
  • Ready to load in Chrome

​
Building for Specific Browsers

Meelio supports multiple browser targets: 
pnpm build:chrome
# Output: build/chrome-mv3-prod/

​
Building for All Browsers

cd apps/extension
pnpm build:all
This runs builds for Firefox, Edge, Chrome, Opera, and Safari sequentially.
Building for all browsers can take several minutes. Use specific browser builds during development.

​
Packaging Extensions

After building, you can package extensions into distributable formats (ZIP files) for store submission.
1

Package Default (Chrome)

# From root
pnpm package

# Or from extension directory
cd apps/extension && pnpm package
2

Package Specific Browser

cd apps/extension
pnpm package:chrome
3

Package All Browsers

cd apps/extension
pnpm package:all
Creates ZIP files for all supported browsers.
4

Locate Package Files

Packaged extensions are created in apps/extension/build/ as .zip files:
  • chrome-mv3-prod.zip
  • firefox-mv3-prod.zip
  • edge-mv3-prod.zip
  • etc.

​
Build Outputs and Artifacts

​
Directory Structure After Build

apps/
├── web/
│   └── dist/                    # Web app production build
│       ├── assets/              # JS, CSS bundles
│       ├── index.html           # Entry HTML
│       └── manifest.webmanifest # PWA manifest
│
└── extension/
    └── build/                   # Extension builds
        ├── chrome-mv3-prod/     # Chrome unpacked extension
        ├── firefox-mv3-prod/    # Firefox unpacked extension
        ├── edge-mv3-prod/       # Edge unpacked extension
        ├── chrome-mv3-prod.zip  # Chrome package (after packaging)
        └── ...

​
What Gets Built

Web App (apps/web/dist/):
  • Optimized JavaScript bundles with code splitting
  • Minified CSS with Tailwind optimizations
  • Service worker for offline support
  • Static assets (images, fonts, sounds)
  • PWA manifest
Extension (apps/extension/build/):
  • Manifest v3 JSON file with permissions
  • Background service worker
  • Content scripts
  • Popup HTML and scripts
  • New tab page
  • Extension icons and assets

​
Environment Variables

Meelio supports environment-specific configuration through .env files.

​
Creating Environment Files

# Development environment
.env.local

# Production environment (gitignored)
.env.production.local
Never commit .env files with sensitive data. All .env* files are gitignored.

​
Environment Variables in Builds

Turborepo automatically includes .env* files as build inputs (see turbo.json): 
"build": {
  "inputs": ["$TURBO_DEFAULT$", ".env*"]
}
This ensures builds are invalidated when environment variables change.

​
Accessing Variables

In Vite (Web App): 
// Only variables prefixed with VITE_ are exposed
const apiUrl = import.meta.env.VITE_API_URL;
In Plasmo (Extension): 
const apiKey = process.env.PLASMO_PUBLIC_API_KEY;

​
Extension Manifest Configuration

The extension manifest is defined in apps/extension/package.json: 
"manifest": {
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage",
    "notifications"
  ],
  "optional_permissions": [
    "tabs",
    "tabGroups",
    "bookmarks"
  ],
  "host_permissions": [
    "https://*.meelio.io/*"
  ]
}

​
Key Permissions

  • storage - Required for local data storage
  • notifications - For timer and task notifications
  • tabs (optional) - Tab management features
  • tabGroups (optional) - Tab organization
  • bookmarks (optional) - Bookmark management

​
Loading Built Extension Locally

After building the extension, you can load it in your browser for testing:
1

Build the Extension

pnpm build:extension
2

Open Browser Extensions Page

Navigate to:
  • Chrome: chrome://extensions
  • Edge: edge://extensions
  • Firefox: about:debugging#/runtime/this-firefox
3

Enable Developer Mode

Toggle “Developer mode” in the top right corner (Chrome/Edge)
4

Load Unpacked Extension

Click “Load unpacked” and select:
apps/extension/build/chrome-mv3-prod
(Or the appropriate browser build directory)
5

Test the Extension

Open a new tab to see Meelio in action!
For Firefox, use “Load Temporary Add-on” and select the manifest.json file from the build directory.

​
Cleaning Build Artifacts

Remove all build outputs and caches: 
# Clean all build artifacts
pnpm clean

# Clean specific app
cd apps/extension && pnpm clean
This removes:
  • dist/ directories
  • build/ directories
  • .turbo/ cache
  • .plasmo/ cache
  • node_modules/ (extension clean script)

​
Build Optimization Tips

Faster Builds:
  • Use pnpm build:web or pnpm build:extension to build only what you need
  • Turborepo caches builds - subsequent builds are much faster
  • Use pnpm dev during development instead of repeated builds

​
Turborepo Caching

Turborepo automatically caches build outputs. Builds are only re-run when:
  • Source code changes
  • Dependencies change
  • Environment variables change (.env* files)
  • Build configuration changes

​
Parallel Builds

When building multiple packages, Turborepo builds them in parallel when possible, respecting dependency order.

​
Troubleshooting Builds

​
Build Fails

# Clear all caches and node_modules
pnpm clean

# Reinstall dependencies
pnpm install

# Try building again
pnpm build

​
Extension Not Loading

  • Ensure you selected the correct build/{browser}-mv3-prod directory
  • Check browser console for errors
  • Verify all permissions in manifest are granted
  • Try rebuilding: pnpm build:extension

​
Build Output Missing

  • Check for TypeScript errors: pnpm lint
  • Ensure all dependencies are installed
  • Look for error messages in build output

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us