Adicionar EmDash a um Projeto Astro Existente

Nesta página

npm create emdash@latest fornece um projeto pré-configurado, mas EmDash também se integra em um site Astro existente. Este guia percorre cada requisito que o template inicial normalmente gerencia para você.

Pré-requisitos

  • Astro 6 ou posterior — atualize primeiro se estiver em uma versão major anterior (npx @astrojs/upgrade)
  • Node.js v22.12.0 ou superior (versões ímpares não são suportadas)
  • Saída servidor — EmDash serve conteúdo em tempo de execução, seu projeto precisa de output: "server" e um adaptador

Instalar os pacotes

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

Para um banco de dados SQLite local:

npm install better-sqlite3

Registrar as integrações

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

Adicionar o loader de coleções ao vivo

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

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

Verificar a instalação

  1. Inicie o servidor de desenvolvimento:

    npm run dev
  2. Abra http://localhost:4321/_emdash/admin e complete o Assistente de Configuração.

  3. Crie e publique um post, depois consulte-o de uma página:

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

Implantar no Cloudflare

Siga Implantar no Cloudflare para a configuração completa.

Solução de problemas

SintomaCausaSolução
Admin travado em “Loading EmDash…”@astrojs/react não registradoAdicionar react() às integrations
Could not resolve "astro:content"Astro anterior à 6Atualizar Astro
getEmDashCollection retorna errosrc/live.config.ts ausenteAdicionar o loader
Erros de buildDependências peer não instaladasInstalar @astrojs/react, react, react-dom
Alterações de conteúdo não aparecemPágina pré-renderizadaDefinir export const prerender = false

Próximos passos