Zephyr Cloud Docs

    Ember.js

    Deploy your Ember.js applications to Zephyr Cloud using Vite and Embroider. This setup combines Ember's powerful conventions with Vite's fast build system and Zephyr's deployment capabilities.

    Prerequisites
    Quick Setup with Codemod
    npm
    yarn
    pnpm
    bun
    npx with-zephyr

    This detects your bundler and configures Zephyr automatically. Learn more →

    For manual setup, continue below.

    Installation

    Install the Vite plugin in your Ember project:

    npm
    yarn
    pnpm
    bun
    deno
    npm add --dev vite-plugin-zephyr

    Configuration

    Add the Zephyr plugin to your Vite configuration:

    // vite.config.mjs
import { defineConfig } from 'vite';
import { extensions, classicEmberSupport, ember } from '@embroider/vite';
import { babel } from '@rollup/plugin-babel';
import { withZephyr } from 'vite-plugin-zephyr';

export default defineConfig({
  plugins: [
    classicEmberSupport(),
    ember(),
    babel({
      babelHelpers: 'runtime',
      extensions,
    }),
    withZephyr(),
  ],
  resolve: {
    preserveSymlinks: false,
  },
  optimizeDeps: {
    disabled: false,
    esbuildOptions: {
      preserveSymlinks: false,
    },
  },
});

    Project Structure

    Your Ember application should follow this structure when using Embroider with Vite:

    my-ember-app/
├── app/
│   ├── components/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── templates/
├── config/
├── tests/
├── vite.config.mjs
└── package.json

    Development Workflow

    Start your development server:

    npm
    yarn
    pnpm
    bun
    deno
    npm start

    Build for production:

    npm
    yarn
    pnpm
    bun
    deno
    npm build

    Embroider Requirements

    This configuration requires Embroider, Ember's modern build system. Ensure your package.json includes:

    {
  "devDependencies": {
    "@embroider/vite": "^1.1.5",
    "@embroider/core": "^4.1.0",
    "@embroider/compat": "^4.1.0",
    "@embroider/router": "^3.0.1",
    "vite": "^6.3.5",
    "vite-plugin-zephyr": "latest"
  }
}

    Key Features

    • Fast Development: Leverages Vite's instant HMR for rapid development
    • Modern Build System: Uses Embroider for optimized production builds
    • Ember Conventions: Maintains Ember's file-based routing and component structure
    • TypeScript Support: Full TypeScript support through Ember's TypeScript integration

    Next Steps