Higher collectively: Creating net apps with Astro and Alpine

The gear store web page

The gear-shop web page is principally server-side knowledge with client-side filtering. For this web page, we need to take a piece of knowledge that’s out there on the again finish and render it in such a means that the consumer can filter it. Meaning we’ll need to server-side render the information with Astro and create an Alpine part that may devour it, offering the dynamic UI interplay.

First up is the web page itself:

---
// src/pages/gear-shops.astro
import Structure from '../layouts/Structure.astro';
import GearShopList from '../parts/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" }
];
---

<Structure title="Gear Retailers - Coast Mountain Adventures">
  <predominant class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4">Native Gear Retailers</h1>
    <GearShopList outlets={JSON.stringify(gearShops)} />
  </predominant>
</Structure>

We’ll see the GearShopList part in only a minute. The information is within the gearShops variable. This might come from a database or an exterior API. It might come from an area filesystem or Astro’s built-in content material collections. The purpose is, this knowledge is produced on the server. The trick now could be to make it out there as reside JSON on the consumer, the place Alpine can use it.