Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

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
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
npm start

Build for production:

npm
yarn
pnpm
bun
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