Astro + RaisFast

Build a full-stack Astro site with RaisFast as the backend. Server-side rendering, API routes, and dynamic features.

Overview

Astro is a modern web framework that supports both static generation and server-side rendering. RaisFast integrates seamlessly as the backend for data fetching, comments, search, auth, and ecommerce.

Astro    → renders pages (static or SSR)
RaisFast → provides data, auth, comments, search, payment

Prerequisites

Astro project set up
RaisFast installed (Installation Guide →)

Step 1: Start RaisFast

raisfast

Step 2: Fetch Data at Build Time

In Astro, you can fetch data from RaisFast during the build:

---
// src/pages/index.astro
const res = await fetch("http://localhost:9898/api/v1/posts");
const { data } = await res.json();
---

<h1>Blog</h1>
<ul>
  {data.items.map(post => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.title}</a>
      <time>{new Date(post.published_at).toLocaleDateString()}</time>
    </li>
  ))}
</ul>

Step 3: Dynamic Comments Component

Create an interactive Astro island for comments:

---
// src/components/Comments.astro
---
<div id="comments" data-api="/api/v1/comments"></div>
<script>
  const container = document.getElementById('comments')!;
  const apiBase = container.dataset.api;

  async function loadComments() {
    const url = new URL(apiBase);
    url.searchParams.set('post_id', location.pathname);
    const res = await fetch(url);
    const { data } = await res.json();

    container.innerHTML = data.items.map((c: any) => `
      <div class="comment">
        <strong>${c.author_name}</strong>
        <p>${c.content}</p>
      </div>
    `).join('') + `
      <form id="comment-form">
        <input name="author_name" placeholder="Name" required>
        <textarea name="content" placeholder="Comment" required></textarea>
        <button type="submit">Post</button>
      </form>`;

    document.getElementById('comment-form')!.addEventListener('submit', async (e) => {
      e.preventDefault();
      const form = e.target as HTMLFormElement;
      await fetch(apiBase, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          post_id: location.pathname,
          author_name: (form.author_name as HTMLInputElement).value,
          content: (form.content as HTMLTextAreaElement).value,
        }),
      });
      loadComments();
    });
  }

  loadComments();
</script>

Step 4: Search Component

---
// src/components/Search.astro
---
<div id="search-widget">
  <input type="text" id="search-input" placeholder="Search..." />
  <div id="search-results"></div>
</div>

<script>
  const input = document.getElementById('search-input') as HTMLInputElement;
  const results = document.getElementById('search-results')!;

  input.addEventListener('input', () => {
    if (input.value.length < 2) return;
    fetch(`/api/v1/search?q=${encodeURIComponent(input.value)}`)
      .then(r => r.json())
      .then(({ data }) => {
        results.innerHTML = data.items.map((p: any) => `
          <a href="${p.url}">${p.title}</a>
          <p>${p.excerpt}</p>
        `).join('');
      });
  });
</script>

Step 5: SSR Mode (Optional)

If you want server-side rendering, switch Astro to SSR mode and use RaisFast as the data layer:

// astro.config.mjs
export default defineConfig({
  output: 'server',
});

In SSR mode, every request fetches fresh data from RaisFast, so content updates appear instantly without rebuilding.

Step 6: Deploy

# Static mode
astro build
# Deploy the dist/ folder to your CDN

# SSR mode
astro build
# Deploy to Node.js adapter, Vercel, or Cloudflare

Configure CORS in RaisFast if frontend and API are on different domains:

RAISFAST_CORS_ORIGINS=https://yourdomain.com