Installation

Mettez EmberKit en route en quelques minutes.

Prérequis

  • Node.js 18+ (Bun et Deno pris en charge pour exécuter les outils)
  • pnpm (recommandé), npm ou yarn

Installation rapide

# Scaffolder un nouveau projet (starter kit avec Tailwind)
npx @emberkit/cli@latest create my-app
cd my-app
pnpm install
pnpm dev

Le CLI génère vite.config.ts, src/index.tsx, src/routes/ et des scripts branchés sur emberkit dev, emberkit build et emberkit preview.

Configuration manuelle

mkdir my-app && cd my-app
pnpm init

pnpm add @emberkit/core
pnpm add -D @emberkit/cli vite typescript

vite.config.ts

import { defineConfig } from 'vite';
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';

export default defineConfig({
  plugins: [emberkitVitePlugin()],
  server: { port: 3000, host: 'localhost' },
  esbuild: { jsxImportSource: '@emberkit/core' },
});

emberkit.config.ts

Optionnel mais recommandé pour le mode de build et les paramètres serveur :

import { defineConfig } from '@emberkit/core';

export default defineConfig({
  mode: 'hybrid', // 'static' | 'ssr' | 'spa' | 'hybrid'
  server: { port: 3000, host: 'localhost' },
  build: { outDir: 'dist', target: 'esnext' },
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
</head>
<body id="app">
  <script type="module" src="/src/index.tsx"></script>
</body>
</html>

src/index.tsx

import { render } from '@emberkit/core';
import { routes } from 'virtual:emberkit-routes';
import App from './routes/_layout';

const root = document.getElementById('app');
if (root) {
  render(App, root, { routes });
}

Scripts package.json

{
  "scripts": {
    "dev": "emberkit dev",
    "build": "emberkit build",
    "preview": "emberkit preview"
  }
}

Utilisez emberkit serve après build pour un serveur de type production avec routage du manifest SSR (voir SSR et SSG).

Structure du projet

my-app/
├── emberkit.config.ts    # mode, server, build (optionnel)
├── vite.config.ts        # Vite + emberkitVitePlugin()
├── index.html
├── src/
│   ├── index.tsx         # Entrée client
│   └── routes/
│       ├── index.tsx     # → /
│       ├── about.tsx     # → /about
│       └── _layout.tsx   # Enveloppe les routes
└── package.json

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "@emberkit/core",
    "strict": true,
    "noEmit": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"]
  },
  "include": ["src"]
}

Vérifier l'installation

pnpm dev

Ouvrez http://localhost:3000. En mode hybrid ou SSR, affichez le code source de la page — vous devriez voir du HTML rendu dans #app, pas une coquille vide.

Dépannage