Ajouter EmDash à un projet Astro existant

Sur cette page

npm create emdash@latest fournit un projet pré-configuré, mais EmDash se greffe aussi sur un site Astro existant. Ce guide parcourt chaque exigence que le template de démarrage gère normalement pour vous.

Prérequis

  • Astro 6 ou ultérieur — mettez à jour d’abord si vous êtes sur une version majeure antérieure (npx @astrojs/upgrade)
  • Node.js v22.12.0 ou supérieur (les versions impaires ne sont pas supportées)
  • Sortie serveur — EmDash sert du contenu au runtime, votre projet a besoin de output: "server" et d’un adaptateur

Installer les packages

npm

npm install emdash @astrojs/react react react-dom

pnpm

pnpm add emdash @astrojs/react react react-dom

yarn

yarn add emdash @astrojs/react react react-dom

Pour une base de données SQLite locale :

npm install better-sqlite3

Enregistrer les intégrations

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	output: "server",
	adapter: node({ mode: "standalone" }),
	integrations: [
		react(),
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

Ajouter le loader de collections en direct

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

Vérifier l’installation

  1. Démarrez le serveur de développement :

    npm run dev
  2. Ouvrez http://localhost:4321/_emdash/admin et complétez l’assistant de configuration.

  3. Créez et publiez un article, puis interrogez-le depuis une page :

    ---
    import { getEmDashCollection } from "emdash";
    
    const { entries: posts } = await getEmDashCollection("posts", {
    	status: "published",
    });
    ---
    
    <ul>{posts.map((post) => <li>{post.data.title}</li>)}</ul>

Déployer sur Cloudflare

Suivez Déployer sur Cloudflare pour la configuration complète.

Dépannage

SymptômeCauseSolution
Admin bloqué sur “Loading EmDash…”@astrojs/react non enregistréAjouter react() aux integrations
Could not resolve "astro:content"Astro antérieur à 6Mettre à jour Astro
getEmDashCollection retourne une erreursrc/live.config.ts manquantAjouter le loader
Erreurs de buildDépendances peer non installéesInstaller @astrojs/react, react, react-dom
Les changements de contenu n’apparaissent pasPage pré-rendueDéfinir export const prerender = false

Prochaines étapes