Higher collectively: Growing internet apps with Astro and Alpine

The gear store web page

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

First up is the web page itself:

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


  

    
    
  

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 may come from a neighborhood filesystem or Astro’s built-in content material collections. The purpose is, this information is produced on the server. The trick now’s to make it obtainable as dwell JSON on the consumer, the place Alpine can use it.