Créez une Application Full-Stack Complète Sans Backend Avec Nuxt Server Routes

Construire une application full-stack peut sembler complexe, impliquant souvent la gestion séparée d'un frontend et d'un backend. Mais imaginez pouvoir créer une application complète, sans vous soucier de la configuration d'un backend distinct. Grâce aux Nuxt Server Routes, c'est possible !

Cet article vous dévoile la magie des Nuxt Server Routes et vous montre comment créer une application full-stack simple, capable de communiquer directement avec une base de données, sans besoin d'un serveur séparé.

Nuxt Server Routes : Votre Backend Simplifié

Dans Nuxt 3, tout ce que vous exportez dans le répertoire /server se transforme automatiquement en route API côté serveur. C'est une simplification radicale du développement full-stack.

Prenons cet exemple simple. Créez un fichier comme /server/api/hello.ts :

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

Ensuite, visitez /api/hello dans votre navigateur et… magie ! Vous obtenez :

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

Cette simplicité étonnante offre plusieurs avantages :

• Élimination du backend séparé : Plus besoin d'un dépôt séparé pour votre backend.
• Développement API accéléré : Créez et modifiez vos API rapidement avec une syntaxe simple.
• Parfait pour JAMstack: Idéal pour les déploiements JAMstack, optimisés pour la performance et la sécurité.
• Support TypeScript Intégré : Bénéficiez du typage statique et de la robustesse de TypeScript sans configuration supplémentaire.
• Idéal pour les applications "backend-lite" : Parfait pour les blogs, tableaux de bord et MVP SaaS, où un backend complet n'est pas forcément nécessaire.

Prêt à essayer ? Construisons une application ensemble.

Démonstration Pratique: Créer une Simple Application de Notes avec Nuxt 3

Concevons une petite application de "Notes" où les utilisateurs peuvent créer et lister des notes. Pour notre stack technologique, nous utiliserons Nuxt à la fois pour le frontend et le backend, Prisma (ORM) et SQLite pour une base de données ultra-légère.

Voici les étapes à suivre :

1. Initialisation du projet Nuxt :

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

   Copy

2. Installation et initialisation de Prisma avec SQLite :

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

   Copy

3. Configuration du fichier 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ération du client Prisma et création de la base de données :

   npx prisma generate
   npx prisma db push
   

   Copy

   Votre base de données est maintenant opérationnelle.

5. Création de 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()
   })
   

   Copy

6. Création de 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,
       },
     })
   })
   

   Copy

7. Création de 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>
   

En ce qui concerne le déploiement, des plateformes comme Vercel ou Netlify reconnaissent automatiquement le répertoire /server, ce qui simplifie grandement le processus. Pour la base de données, privilégiez des solutions comme Railway, PlanetScale ou Supabase au lieu de SQLite local.

Apprenez-en Davantage Sur NuxtJS

Si vous souhaitez approfondir vos connaissances sur Vue, Nuxt, JavaScript et d'autres technologies utiles, consultez VueSchool. Vous y trouverez des informations sur les concepts les plus importants pour le développement d'applications Vue et Nuxt modernes.

En Résumé : Nuxt Server Routes, Un Atout Majeur Pour un Développement Plus Simple

Les Nuxt Server Routes peuvent sembler presque trop belles pour être vraies. Si vous travaillez sur des projets personnels, des MVP (Minimum Viable Product) ou même des applications de production qui n'ont pas besoin d'un backend complexe, Nuxt est un excellent choix. Gagnez du temps et simplifiez votre développement web avec Nuxt Server Routes. Et happy coding comme toujours 🖥️