既存のAstroプロジェクトにEmDashを追加する

npm create emdash@latest は事前設定済みのプロジェクトを提供しますが、EmDashは既存のAstroサイトにも統合できます。このガイドでは、スターターテンプレートが通常処理する各要件を順に説明します。

前提条件

Astro 6以降 — 以前のメジャーバージョンの場合は先にアップグレード（npx @astrojs/upgrade）
Node.js v22.12.0以上（奇数バージョンはサポートされていません）
サーバー出力 — EmDashはランタイムでコンテンツを配信するため、プロジェクトには output: "server" とアダプターが必要です

パッケージのインストール

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

ローカルSQLiteデータベースの場合：

npm install better-sqlite3

インテグレーションの登録

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",
			}),
		}),
	],
});

ライブコレクションローダーの追加

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

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

インストールの確認

開発サーバーを起動：
```
npm run dev
```
http://localhost:4321/_emdash/admin を開き、セットアップウィザードを完了します。

投稿を作成して公開し、ページからクエリします：

---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts", {
	status: "published",
});
---

<ul>{posts.map((post) => <li>{post.data.title}</li>)}</ul>

Cloudflareへのデプロイ

完全な設定はCloudflareへのデプロイを参照してください。

トラブルシューティング

症状	原因	解決策
管理画面が”Loading EmDash…”で止まる	`@astrojs/react`が未登録	`react()`を`integrations`に追加
`Could not resolve "astro:content"`	Astro 6より古い	Astroをアップグレード
`getEmDashCollection`がエラーを返す	`src/live.config.ts`がない	ローダーを追加
ビルドエラー	peerの依存関係が未インストール	`@astrojs/react`、`react`、`react-dom`をインストール
コンテンツの変更が反映されない	ページがプリレンダリングされている	`export const prerender = false`を設定