Astro Just Got Better

Thanks to the new, groundbreaking features frameworks like Astro are offering, developing, deploying, and maintaining web products can now be achieved by one-man dev teams. Development gets cheaper and easier by the day, so managers must be really happy since replacing you with AI is starting to sound like an achievable idea.

We’ll review these new features in a second, but first, let’s address the elephant in the room. Web development sucks! Your usual stack contains a JS library to build UIs, toopith backend APIs usually written in languages like Java or Go, some sort of data storage solution, and scalable infrastructure somewhere in the cloud. All these so that your 5 customers can enjoy the premium, state-of-the-art experience they deserve. And, who knows, maybe you’ll get lucky and they’ll pay for your service one day.

So let’s see how Astro is addressing all these in a simpler, yet powerful manner with concepts that are quickly becoming the industry norm.

Astro is what we call a meta-framework, which is a fancy way of saying that it is extending the usual UI capabilities offered by JS frameworks with server features like hydration strategies, server-side rendering (SSR), and support for REST endpoints. So, we can replace part of the stack with Astro.

Note that the components are server-side rendered by default, so they are computed to static HTML on the server and then sent to the client. If we need client interactivity, we can easily do it via one of Astro’s best features - its UI integrations.

---
interface Props {
  name: string;
  email: string;
}

const { name, email } = Astro.props;
---

<li>
  <h1>Hi there, {name}</h1>
  <h3>Email: {email}</h3>
</li>

<style>
  h1 {
    color: red;
  }
</style>

With a simple command, we’ll add Solid to our project (or any other UI library for that matter),

    npc astro add solid

and then define interactive components which will be first served as static HTML, and then hydrated on demand on the client.

import { createEffect, createSignal } from "solid-js";

export default function Header() {
  const [name, setName] = createSignal("Astro");

  createEffect(() => {
    console.log("The best" + name());
  });

  return (
    <header>
      <h1>{name()} is the best!</h1>
      <button onClick={() => setName("Astro DB")}>Astro DB</button>
    </header>
  );
}

This is a great step towards simplifying the previous stack, but we can do better. Thanks to Astro’s new fully managed SQL database, we can remove the storage dependency, and let Astro handle the whole stack from UI to data persistence.

Astro DB is built on top of LibSQL, which is a fork of SQLite, created and maintained by the team behind Turso. A local database is created whenever you run npx astro dev, and you can connect to the Astro Studio platform to access a cloud-hosted DB in production.

Implementation-wise, things are straightforward. We’ll add the database integration in our project apx astro add db, and then jump into the newly created database config file to define our tables.

export default defineDb({
    tables: {ToDo}
});

const ToDo = defineTable({
    columns: {
      id: column.number({ primaryKey: true }),
      description: column.text(),
      created: column.date({ default: NOW }),
    },
});

Now, when the dev server is restarted, local types will be generated according to our schema, and we can start interacting with the database via the built-in Drizzle ORM. Remember that this is SQLite, so there are a few limitations, but CRUD operations,

if (!!description) {
  await db.insert(ToDo).values({ description })
}

relationships,

await db.select()
  .from(ToDo)
  .innerJoin(Creator, eq(ToDo.authorId, Creator.id));

and batch transactions

for (let i = 0; i < 100; i++) {
  entries.push(db.insert(ToDo).values({
    body: `Test todo ${i}`,
  }));
}

await db.batch(entries);

should cover most of your needs in small to mid-sized projects.

With this feature, Astro is entering the realm of the backend as a service solutions, so we can probably expect more useful tools built on top of DB moving forward.

Products like Supa Base or the Deno platform are already getting established in the space, so one thing’s for certain - web development was never this easy, and there is no better time than now to start yet another project that you’ll probably never finish.

If you liked this article, you should watch some of my youtube videos or subscribe to the newsletter.

Until next time, thank you for reading!