Démarrage rapide

Créez votre première app EmberKit en quelques minutes.

1. Créer un projet

npx @emberkit/cli@latest create my-app
cd my-app && pnpm install && pnpm dev

2. Ajouter une route

Les routes vivent dans src/routes/. Modifiez index.tsx ou ajoutez de nouveaux fichiers :

// src/routes/index.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to EmberKit</h1>
      <p>Fast, light, and zero-JS by default.</p>
    </main>
  );
}

Le layout dans src/routes/_layout.tsx enveloppe chaque page. L'entrée client (src/index.tsx) appelle render() avec virtual:emberkit-routes.

3. Routes dynamiques

// src/routes/blog/[slug].tsx
import type { RouteParams } from '@emberkit/core';

export default function PostPage({ params }: RouteParams<{ slug: string }>) {
  return <h1>Post: {params.slug}</h1>;
}

Naviguez vers /blog/hello-world — params.slug est disponible côté serveur et client.

4. Signals et hydratation

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

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <p>
        Count: <span data-ek-bind={count}>{count()}</span>
      </p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

5. Navigation

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

function Nav() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <button type="button" onClick={() => navigate('/contact')}>
        Contact
      </button>
    </nav>
  );
}

Utilisez des <a href> standard pour des liens compatibles SSR, ou navigate() pour un routage programmatique avec View Transitions optionnelles.

6. Métadonnées de page

export const metadata = {
  title: 'About — My App',
  description: 'About our team',
};

export default function About() {
  return <h1>About</h1>;
}

Ou utilisez <Head> de @emberkit/core dans les composants — voir Head.

7. Build pour la production

pnpm build      # Sortie dans dist/ (mode depuis emberkit.config.ts)
pnpm preview    # Serveur de preview local

Définissez mode: 'static' dans emberkit.config.ts pour une exportation entièrement statique, ou hybrid (par défaut) pour des pages statiques plus du SSR sur les routes dynamiques. Voir SSR et SSG.

Prochaines étapes