Visionner la vidéo

Comprendre Astro DB et Drizzle

  Astro

Introduction

Astro DB est une base de données légère et puissante, parfaitement intégrée à l’écosystème Astro. Si vous êtes développeur web ou simplement curieux de découvrir de nouvelles façons de gérer vos données, cet article est fait pour vous ! 🚀

Comment utiliserAstro DB ?

Astro DB est une base de données conçue spécifiquement pour fonctionner avec Astro, un framework de développement web moderne. Elle se distingue par sa simplicité et son intégration fluide dans vos projets. Que vous travailliez en local ou sur un serveur distant, Astro DB s’adapte parfaitement à vos besoins.

Installation

Pour commencer à utiliser Astro DB, il vous suffit d’exécuter la commande suivante dans votre projet :

npx astro add db

Cette commande installe la dépendance nécessaire et configure une base de données locale en utilisant LibSQL, un fork open source de SQLite. Les données sont stockées dans un simple fichier .db, ce qui rend Astro DB léger et facile à utiliser.

Astro propose également un ORM (Object-Relational Mapping) nommé Drizzle. Cet ORM simplifie la gestion des requêtes SQL, rendant votre code plus propre et plus maintenable.

Activation du SSR

Afin de pouvoir utiliser Astro DB vous devez utiliser le SSR (Server-Side Rendering) dans votre projet Astro. Pour ce faire, il suffit de modifier le fichier astro.config.mjs comme ceci :

import { defineConfig } from "astro/config";
import db from "@astrojs/db";

export default defineConfig({
  output: "server", 
  integrations: [db()],
});

Déclaration des Tables SQL

Ensuite, vous devez déclarer des tables SQL afin de pouvoir stocker vos données. Pour ce faire, il suffit d’éditer le fichier db/config.ts :

import { defineDb } from "astro:db";
import { defineTable, column } from "astro:db";

const Meal = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    title: column.text(),
    description: column.text(),
    image: column.text(),
    imageAlt: column.text(),
    published: column.date(),
    authorId: column.number({ references: () => Author.columns.id }),
  },
});

const Author = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
  },
});

// https://astro.build/db/config
export default defineDb({
  tables: {
    Meal,
    Author,
  },
});

Dans cet exemple, nous ajoutons deux tables : Meal et Author. Il est nécessaire d’utiliser la fonction defineTable pour définir les colonnes de chaque table.

Nous avons aussi une relation entre les tables Meal et Author qui est définie par la colonne authorId. Il est nécessaire de passer un objet qui contient un champ references à la méthode number, qui contient la colonne id de la table Author.

Pour terminer, veillez à bien ajouter l’objet Meal et Author dans le champ tables de la fonction defineDb.

Jeu de données en développement

Grâce au fichier db/seed.ts, il est possible d’insérer automatiquement des données de test lors du démarrage du serveur de développement :

import { db, Meal, Author } from "astro:db";

export default async function seed() {
  await db.insert(Author).values([{ id: 1, name: "Thibaud D." }]); 

  await db.insert(Meal).values([ 
    { 
      id: 1, 
      title: "Tacos", 
      description: 
        "Découvrez notre taco croustillant, garni de bœuf assaisonné, de laitue fraîche, de tomates juteuses, de fromage cheddar râpé, et surmonté d'une touche de crème sure. Une explosion de saveurs dans chaque bouchée, agrémentée de coriandre et accompagnée d'une tranche de lime.", 
      image: "https://www.example.fr/images/tacos.jpg", 
       imageAlt: "Tacos", 
      published: new Date(), 
      authorId: 1, 
   }, 
  ]); 
}

L’objet db encapsule l’ORM Drizzle. Il est ainsi possible d’utiliser la fonction insert pour insérer des données.

Dans cet exemple, nous insérons un auteur dans la table Author et un plat dans la table Meal.

Affichage des Données

Pour afficher des données depuis une page Astro, il suffit d’utiliser l’ORM Drizzle depuis la zone de script :

---
import Hero from "../components/common/Hero.astro";
import Layout from "../layouts/Layout.astro";
import MealList from "../components/meal/MealList.astro";

import { db, Meal } from "astro:db";

const meals = await db.select().from(Meal); 
---

<Layout title="Liste des plats">
  <Hero />
  <h2>Liste des plats</h2>
  <p class="paragraph">
    Retrouvez la liste de nos délicieux plats proposés par la communauté.
  </p>
  <MealList meals={meals} />
</Layout>

L’appel pour récupérer les données est effectué du côté serveur (SSR).

Connexion à la base distante

Astro DB ne se limite pas à une utilisation locale. Lors du déploiement de votre application, une base de données distante est utilisée, hébergée sur les serveurs d’Astro en mode cloud. Pour accéder à cette base distante, il suffit de créer un compte Astro Studio et d’obtenir une clé API.

Vous pouvez même accéder à la base de données distante en local. J’ai ajouté un script start:remote dans le fichier package.json pour démarrer le serveur de développement en utilisant la base distante. En utilisant l’option --remote, votre projet se connecte automatiquement à la base de données cloud :

{
  "name": "astro-db-ssr",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "start:remote": "astro dev --remote", 
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/check": "^0.7.0",
    "@astrojs/db": "^0.11.6",
    "astro": "^4.10.2",
    "typescript": "^5.4.5"
  }
}

Enfin, il ne vous reste plus qu’a lancer la commande :

npm run start:remote

Conclusion

Astro DB est un outil puissant et flexible qui s’intègre parfaitement à l’écosystème d’Astro. Que vous soyez un développeur chevronné ou un débutant, Astro DB vous offre une solution simple pour gérer vos données, tant en local qu’en cloud.

Si vous souhaitez aller plus loin et maîtriser Astro, j’ai une formation complète à vous proposer. Tous les détails sont disponibles ici.

N’hésitez pas à regarder la vidéo pour voir Astro DB en action et à me faire part de vos questions ou commentaires !

Commentaires