Better together: Developing web apps with Astro and Alpine

The gear shop page

The gear-shop page is mainly server-side data with client-side filtering. For this page, we want to take a chunk of data that is available on the back end and render it in such a way that the client can filter it. That means we’ll want to server-side render the data with Astro and create an Alpine component that can consume it, providing the dynamic UI interaction.

First up is the page itself:

---
// src/pages/gear-shops.astro
import Layout from '../layouts/Layout.astro';
import GearShopList from '../components/GearShopList.astro';

const gearShops = [
  { name: "Adventure Outfitters", category: "Hiking" },
  { name: "Peak Performance Gear", category: "Climbing" },
  { name: "River Rat Rentals", category: "Kayaking" },
  { name: "The Trailhead", category: "Hiking" },
  { name: "Vertical Ventures", category: "Climbing" }
];
---

<Layout title="Gear Shops - Coast Mountain Adventures">
  <main class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4">Local Gear Shops</h1>
    <GearShopList shops={JSON.stringify(gearShops)} />
  </main>
</Layout>

We’ll see the GearShopList component in just a minute. The data is in the gearShops variable. This could come from a database or an external API. It could come from a local filesystem or Astro’s built-in content collections. The point is, this data is produced on the server. The trick now is to make it available as live JSON on the client, where Alpine can use it.