Cara Menghubungkan EmDash CMS dengan Astro
Berbeda dengan menghubungkan EmDash ke Next.js atau Nuxt — yang berarti menjalankannya sebagai backend terpisah dan decoupled — Astro adalah integrasi sesungguhnya dan didesain-untuk EmDash. Tidak ada round trip REST API, tanpa deployment terpisah, dan tanpa strategi revalidasi manual yang perlu dibangun. Begini cara koneksinya sesungguhnya bekerja di baliknya, dan cara meng-query serta me-render konten begitu sudah terpasang.
Daftar Isi
- Titik Integrasi: astro.config.mjs
- Bagaimana Konten Sesungguhnya Mengalir
- Meng-Query Konten: Dua Fungsi yang Kamu Butuhkan
- Ambil Semua Entry di Collection
- Ambil Satu Entry berdasarkan Slug
- Me-render Konten Kaya
- Memakai Astro Content Collections Berdampingan dengan EmDash
- Menambahkan Komponen React atau Vue di dalam Situs EmDash-mu
- Pertanyaan yang Sering Diajukan
- Apakah saya butuh server database terpisah buat development lokal?
- Apakah setiap halaman perlu memakai getEmDashCollection atau getEmDashEntry?
- Apa yang terjadi kalau query gagal?
- Bisakah saya mendapatkan autocomplete TypeScript pada field yang saya definisikan di admin?
- Kesimpulan
Titik Integrasi: astro.config.mjs
EmDash mendaftar sebagai integrasi Astro standar. Setup lokal minimal dengan SQLite dan penyimpanan file lokal terlihat seperti ini:
import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";
export default defineConfig({
output: "server",
integrations: [
emdash({
database: sqlite({ url: "file:./data/emdash.db" }),
storage: local({
directory: "./data/uploads",
baseUrl: "/_emdash/api/media/file",
}),
}),
],
});Itu seluruh koneksinya — adapter database dan adapter storage dikirim ke integrasi `emdash()`. Semua yang lain (admin panel di `/_emdash/admin`, model konten, query API) jadi tersedia buat sisa proyek Astro-mu secara otomatis.
Bagaimana Konten Sesungguhnya Mengalir
EmDash melayani konten lewat Live Collections milik Astro saat runtime, jadi perubahan yang dibuat editor terlihat segera. Halamanmu membaca konten yang sama lewat fungsi query seperti yang ditulis admin panel.
Secara konkret: konten hidup di database yang kamu konfigurasi. Editor menulis ke situ lewat admin UI. Halaman Astro-mu membaca dari database yang sama, di proses yang sama, lewat dua fungsi yang diekspor — tanpa cache yang perlu diinvalidasi, tanpa webhook yang perlu dikonfigurasi, tanpa langkah build antara sebuah edit dan kemunculannya di situs live.
Meng-Query Konten: Dua Fungsi yang Kamu Butuhkan
Import keduanya dari package `emdash` top-level:
import { getEmDashCollection, getEmDashEntry } from "emdash";Ambil Semua Entry di Collection
---
import { getEmDashCollection } from "emdash";
const { entries: posts, error } = await getEmDashCollection("posts", {
status: "published",
limit: 10,
});
if (error) {
console.error("Failed to load posts:", error);
}
---
<ul>
{posts.map((post) => (
<li><a href={`/posts/${post.slug}`}>{post.data.title}</a></li>
))}
</ul>Ambil Satu Entry berdasarkan Slug
---
import { getEmDashEntry } from "emdash";
const { slug } = Astro.params;
const { entry: post, error } = await getEmDashEntry("posts", slug);
if (!post) {
return Astro.redirect("/404");
}
---
<h1>{post.data.title}</h1>Me-render Konten Kaya
Konten post yang disimpan di field `portableText` adalah array JSON terstruktur, bukan HTML mentah. Render dengan komponen `<PortableText>` milik EmDash, yang menangani gambar, code block, embed, dan formatting sejak awal:
---
import { PortableText } from "emdash/ui";
---
<PortableText value={post.data.content} />Buat me-render tipe block kustom (block yang didefinisikan plugin, atau `htmlBlock` yang ingin kamu styling berbeda), kirim map `components` — ini persis pola yang dipakai di tempat lain di situs ini buat mengustomisasi bagaimana link eksternal di-render di dalam body post.
Memakai Astro Content Collections Berdampingan dengan EmDash
Kamu tidak harus memilih satu atau yang lain. Collection berbasis-file `astro:content` milik Astro dan collection database-backed milik EmDash hidup berdampingan dengan bersih — pembagian yang umum adalah konten yang dikelola-developer (dokumentasi, changelog) di collection Astro, dan konten yang dikelola-editor (post blog, halaman marketing) di EmDash:
---
import { getCollection } from "astro:content";
import { getEmDashCollection } from "emdash";
// Developer-managed docs from files
const docs = await getCollection("docs");
// Editor-managed posts from the database
const { entries: posts } = await getEmDashCollection("posts", {
status: "published",
limit: 5,
});
---Menambahkan Komponen React atau Vue di dalam Situs EmDash-mu
Kalau kamu ingin komponen interaktif di luar apa yang dicakup templating Astro sendiri, integrasi framework resmi Astro bekerja persis dengan cara yang sama di dalam situs bertenaga-EmDash seperti proyek Astro lain mana pun — tambahkan `@astrojs/react` atau `@astrojs/vue` berdampingan dengan integrasi `emdash()`, dan pakai komponen itu sebagai island di halaman `.astro`-mu sementara query konten EmDash bekerja tak berubah di sekitarnya.
Pertanyaan yang Sering Diajukan
Apakah saya butuh server database terpisah buat development lokal?
Tidak — setup development lokal memakai file SQLite secara default, tanpa proses database eksternal yang perlu dijalankan. Deployment produksi bisa pindah ke libSQL, Cloudflare D1, atau PostgreSQL tergantung target hosting-mu.
Apakah setiap halaman perlu memakai getEmDashCollection atau getEmDashEntry?
Cuma halaman yang me-render konten yang dikelola-EmDash. Halaman marketing statis, layout, dan apa pun lain di proyek Astro-mu bekerja persis seperti yang seharusnya tanpa EmDash sama sekali.
Apa yang terjadi kalau query gagal?
Kedua fungsi query mengembalikan field `error` berdampingan dengan hasilnya alih-alih throw — cek secara eksplisit (seperti ditunjukkan di atas) supaya hiccup database tidak menghasilkan exception yang tidak tertangani di tengah render.
Bisakah saya mendapatkan autocomplete TypeScript pada field yang saya definisikan di admin?
Ya — EmDash menghasilkan type TypeScript dari model konten saat ini, memberi autocomplete di `post.data.whateverField` dari query hingga template, diregenerasi setiap kali schema-mu berubah.
Kesimpulan
Menghubungkan EmDash ke Astro sesungguhnya bukan langkah terpisah — itu mode native platform-nya. Dua fungsi query, satu komponen `<PortableText>` buat konten kaya, dan edit admin-mu muncul di situs live tanpa rebuild di antaranya. Kalau kamu butuh komponen React atau Vue di dalam situs yang sama, integrasi framework Astro sendiri menangani itu tanpa konfigurasi EmDash khusus apa pun. Lihat panduan setup 10-menit kami kalau kamu belum menge-scaffold proyek, atau panduan kami soal mengustomisasi model konten buat mendefinisikan apa yang kamu query.
Komentar