Example: Adding a Counter API

This example shows how to add a new API endpoint with backend logic.

// backend/services/counter.js
let count = 0;

export function increment() {
  count++;
  return count;
}

export function getCount() {
  return count;
}

export function reset() {
  count = 0;
  return count;
}

In core/routes.js, add:

import { increment, getCount, reset } from '../backend/services/counter.js';

// Inside setupRoutes function:
app.get('/api/counter', (c) => {
  return c.json({ count: getCount() });
});

app.post('/api/counter/increment', (c) => {
  return c.json({ count: increment() });
});

app.post('/api/counter/reset', (c) => {
  return c.json({ count: reset() });
});

In frontend/index.html, add Alpine.js code:

<div x-data="{ 
  serverCount: 0,
  async fetchCount() {
    const res = await fetch('/api/counter');
    const data = await res.json();
    this.serverCount = data.count;
  },
  async incrementServer() {
    const res = await fetch('/api/counter/increment', { method: 'POST' });
    const data = await res.json();
    this.serverCount = data.count;
  }
}" x-init="fetchCount()">
  <div>Server count: <span x-text="serverCount"></span></div>
  <button @click="incrementServer()">Increment on server</button>
</div>

Now you have a counter that persists on the server side!