Config & Integrations

ไฟล์ config

ทุกโปรเจกต์ Astro ตั้งค่าจาก astro.config.mjs ผ่าน defineConfig ครั้งเดียว มีไม่กี่ key ที่รับน้ำหนักส่วนใหญ่:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import react from '@astrojs/react';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://example.com',   // absolute site URL (used for sitemap, canonical, RSS)
  base: '/docs',                 // path prefix if not served at the domain root
  output: 'static',              // 'static' (default) or 'server' for on-demand
  adapter: cloudflare(),         // runtime for on-demand rendering
  integrations: [mdx(), sitemap(), react()],
  vite: { /* escape hatch to raw Vite config */ },
});

site คือ URL ที่ deploy จริง จำเป็นสำหรับอะไรก็ตามที่ต้องออก absolute URL (sitemap, canonical tag, RSS) base ตั้ง path prefix เมื่อเว็บอยู่ใต้ subpath (เหมือนคอร์สนี้อยู่ใต้ /astro)
output เลือก rendering mode เริ่มต้น adapter ให้ runtime เมื่อใช้ on-demand rendering (จากบทเรียน rendering)
integrations คือ list ของ plugin ที่ขยายความสามารถของ Astro

ระบบ integrations

integration คือ plugin ทางการหรือของ community ที่ hook เข้ากับ build ของ Astro เพื่อเพิ่มความสามารถ — render UI framework, generate sitemap, เพิ่ม MDX support, ต่อ adapter คุณติดตั้งแล้วเพิ่มลงใน array integrations หลายตัวมีตัวติดตั้งแบบคำสั่งเดียวที่แก้ config ให้:

# astro add writes the import + integrations entry for you, and installs deps
npx astro add react
npx astro add mdx sitemap

integration ทางการที่พบบ่อย (@astrojs/*): react / vue / svelte / solid / preact (UI framework island), mdx (component ใน Markdown), sitemap และ adapter ของแต่ละ platform (cloudflare, node, vercel, netlify) หมายเหตุ: @astrojs/rss ไม่ใช่ integration — เป็น helper package ที่ import ใน endpoint เพื่อ generate feed จึงไม่มี astro add rss และไม่ต้องใส่ใน array integrations

Astro สร้างบน Vite

ข้างใต้นั้น dev server และ build ของ Astro ขับเคลื่อนด้วย Vite นั่นคือเหตุผลที่ dev server เริ่มทันที, HMR เร็ว และคุณใช้ plugin จาก ecosystem ของ Vite/Rollup ได้เกือบทั้งหมด เมื่อต้องการอะไรที่ Astro ไม่ได้เปิดให้ตรง ๆ ก็ลงไปที่ key vite แล้วตั้งค่า Vite เอง:

export default defineConfig({
  vite: {
    plugins: [/* any Vite plugin */],
    resolve: { alias: { '@': '/src' } },
  },
});

flowchart TB
  cfg["astro.config.mjs (defineConfig)"] --> integ["integrations: UI frameworks, mdx, sitemap, adapter"]
  cfg --> vite["vite: raw Vite/Rollup plugins and config"]
  integ --> build["Astro build"]
  vite --> build

Astro ประกอบ integrations บน Vite

การเพิ่ม Tailwind (แบบปัจจุบัน)

Tailwind ใน Astro ปัจจุบันติดตั้งเป็น Vite plugin (@tailwindcss/vite, Tailwind v4) — ไม่ใช่ integration @astrojs/tailwind แบบเก่า ตัวติดตั้งคำสั่งเดียวต่อให้เรียบร้อย:

npx astro add tailwind

คำสั่งนั้นติดตั้ง plugin, เพิ่มลง Vite config และสร้าง CSS entry ให้ จากนั้น import CSS ครั้งเดียว (เช่นใน layout) แล้วใช้ Tailwind utility class ใน markup ได้ ถ้าเจอ guide ที่อ้างถึง integration @astrojs/tailwind นั่นคือวิธีเก่า วิธีปัจจุบันคือ Vite plugin ผ่าน astro add tailwind