Créez des applications Full-Stack complètes sans Backend avec Nuxt Server Routes

Vous rêvez de créer une application full-stack rapidement et facilement ? Nuxt Server Routes rend ce rêve possible ! Dites adieu aux configurations backend complexes et plongez dans un développement simplifié et ultra-rapide.

Ce guide vous dévoile comment Nuxt Server Routes vous permet de construire des applications complètes, interagissant directement avec une base de données, le tout sans serveur backend distinct.

Qu'est-ce que Nuxt Server Routes et pourquoi c'est magique ?

Dans Nuxt 3, chaque fichier exporté dans le répertoire /server se transforme automatiquement en une route API côté serveur. C'est aussi simple que ça !

Exemple concret :

Créez un fichier /server/api/hello.ts avec le contenu suivant :

export default defineEventHandler(() => {
  return { message: 'Hello from the server!' }
})

Accédez ensuite à /api/hello dans votre navigateur :

{ "message": "Hello from the server!"}

Magique, n'est-ce pas ? Avec Nuxt Server Routes, développer des API devient un jeu d'enfant.

Les avantages irrésistibles de Nuxt Server Routes

• Gain de temps considérable: Plus besoin de créer et de maintenir un dépôt backend séparé.
• Développement API ultra-rapide: Concentrez-vous sur la logique métier, pas sur la plomberie.
• Idéal pour JAMstack: Parfait pour les déploiements rapides et efficaces.
• TypeScript intégré: Bénéficiez de la sécurité et de la robustesse de TypeScript sans configuration supplémentaire.
• Applications "Backend-Lite" : Idéal pour les blogs, dashboards, et MVPs SaaS.

Envie de tester tout ça en pratique ? Passons à un exemple concret !

Créez votre application de notes avec Nuxt et Prisma

Construisons ensemble une simple application de "Notes" où les utilisateurs peuvent créer et consulter leurs notes. Nous utiliserons :

• Nuxt: Pour le frontend et (roulements de tambours...) le backend !
• Prisma (ORM): Un ORM léger pour interagir avec notre base de données.
• SQLite: Une base de données légère et facile à configurer.

1. Initialisez votre application Nuxt

npx nuxi init nuxt-notes-app
cd nuxt-notes-app
npm install

2. Installez Prisma et initialisez SQLite

npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

3. Configurez votre prisma/schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Note {
  id    Int     @id @default(autoincrement())
  title String
  body  String
}

4. Générez le client Prisma

npx prisma generate
npx prisma db push

Votre base de données est maintenant prête à être utilisée !

5. Créez la route serveur /server/api/notes/index.ts pour la lecture des notes

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  return await prisma.note.findMany()
})

Cette route renverra la liste de toutes les notes en base de données. Profitez de la rapidité de Nuxt !

6. Créez la route serveur /server/api/notes/create.ts pour la création des notes

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return await prisma.note.create({
    data: {
      title: body.title,
      body: body.body,
    },
  })
})

Cette route permettra de créer de nouvelles notes dans la base de données.

7. Créez la page d'accueil /pages/index.vue

<script setup lang="ts">
const notes = ref([])
const newNote = ref({ title: '', body: '' })

async function fetchNotes() {
  notes.value = await useFetch('/api/notes')
}

async function createNote() {
  await useFetch('/api/notes/create', {
    method: 'POST',
    body: newNote.value,
  })
  newNote.value = { title: '', body: '' }
  await fetchNotes()
}

onMounted(fetchNotes)
</script>

<template>
  <div>
    <h1>My Notes</h1>
    <form @submit.prevent="createNote">
      <input v-model="newNote.title" placeholder="Title" />
      <input v-model="newNote.body" placeholder="Body" />
      <button type="submit">Add Note</button>
    </form>
    <div v-for="note in notes" :key="note.id">
      <h2>{{ note.title }}</h2>
      <p>{{ note.body }}</p>
    </div>
  </div>
</template>

Ce composant Vue affiche la liste des notes et permet d'en créer de nouvelles. Grâce à useFetch, la communication avec les routes Nuxt est simplifiée.

Déploiement simplifié

Pour déployer votre application, utilisez des plateformes comme Vercel ou Netlify. Elles reconnaissent automatiquement le répertoire /server et ne nécessitent aucune configuration supplémentaire. Pensez simplement à utiliser un service de base de données en ligne comme Railway, PlanetScale ou Supabase au lieu de SQLite local pour un déploiement en production.

Conclusion : Nuxt Server Routes, l'arme secrète du développeur Full-Stack

Nuxt Server Routes simplifie radicalement le développement d'applications full-stack. C'est un choix excellent pour les projets personnels, MVPs et applications qui n'ont pas besoin d'un backend complexe. Alors n'hésitez plus, lancez-vous et simplifiez votre flux de travail avec les Nuxt Server Routes. Découvrez comment gagner du temps en utilisant Nuxt comme backend et développez votre application full-stack plus vite.