Deployer Nuxt sur Firebase

Pourquoi Déployer Nuxt sur Firebase ?

Au quotidien, les développeurs web ont besoin d'outils puissants et faciles à utiliser pour déploiement rapide et facile des applications web. Firebase est l'une de ces plateformes, offrant une solution complète pour le développement, le test et le déploiement des applications web. Cependant, Nuxt.js, un framework robuste basé sur Vue.js avec une structure optimisée pour les SEO, nécessite une approche différente pour le déploiement en raison de son côté server-side rendering (SSR).

Un cas d'utilisation concret est la création d'un site web e-commerce. Les clients doivent être capables de voir des produits et acheter immédiatement sans être déconnectés. Firebase permet de gérer les utilisateurs, les commandes et le stockage de manière sécurisée et facile à mettre à jour.

Prerequis

• Connaissances en JavaScript ES6+
• Connaissance de base de Vue.js
• Un compte Firebase (https://firebase.google.com/)
• Node.js (v12+)
• Nuxt CLI (npm install -g @nuxt/cli)

Concepts fondamentaux

1. Firebase Hosting

Firebase Hosting est un service qui permet de déployer des applications web statiques et server-rendered. Il offre une mise à jour instantanée, une sécurité accrue et des performances optimisées.

## Installer Firebase CLI si ce n'est pas déjà fait
npm install -g firebase-tools

## Initialiser Firebase dans votre projet Nuxt.js
firebase init

## Sélectionnez Hosting et suivez les instructions pour configurer le déploiement

2. Functions Firestore

Firestore est une base de données NoSQL qui offre des performances élevées, des transactions atomiques et un modèle de développement orienté document.

## Installez Firebase Functions
npm install firebase-functions --save

## Créez une fonction pour ajouter un document à Firestore
mkdir functions
cd functions
firebase init functions

3. Cloud Storage

Cloud Storage est un service d'objets de stockage simple et durable qui peut être utilisé pour héberger des fichiers statiques, des applications web, des images et vidéos.

## Installez Firebase Storage
npm install firebase-admin --save

## Configurer Firebase Admin SDK pour accéder à Cloud Storage

Mise en pratique : Projet fil rouge - Mini-gestionnaire de tâches

Étape 1: Création du projet Nuxt.js

## Initialiser un nouveau projet Nuxt.js
npx create-nuxt-app nuxt-firebase-todo
cd nuxt-firebase-todo

Étape 2: Configuration Firebase

## Initialiser Firebase dans votre projet Nuxt.js
firebase init

## Sélectionnez Hosting et suivez les instructions pour configurer le déploiement

Étape 3: Création d'une fonction Firestore

Créez un fichier addTask.js dans le dossier functions.

// functions/addTask.js
const admin = require('firebase-admin');
admin.initializeApp();

exports.addTask = (req, res) => {
    const db = admin.firestore();
    const taskData = req.body;

    if (!taskData.title || !taskData.description) {
        return res.status(400).send({ message: 'Title and description are required' });
    }

    db.collection('tasks').add(taskData)
        .then(ref => {
            res.status(201).json({ id: ref.id, ...taskData });
        })
        .catch(error => {
            res.status(500).send(error);
        });
};

Étape 4: Configuration des routes API

Créez un fichier index.js dans le dossier api.

// api/tasks/index.js
export default (req, res) => {
    if (req.method === 'POST') {
        require('@/functions/addTask')(req, res);
    } else {
        res.status(405).send({ message: 'Method not allowed' });
    }
};

Étape 5: Création de la page pour ajouter des tâches

Créez un fichier tasks.vue dans le dossier pages.

<!-- pages/tasks.vue -->
<template>
  <div>
    <h1>Ajouter une tâche</h1>
    <form @submit.prevent="addTask">
      <input v-model="task.title" placeholder="Titre" required />
      <textarea v-model="task.description" placeholder="Description" required></textarea>
      <button type="submit">Ajouter</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      task: {
        title: '',
        description: ''
      }
    };
  },
  methods: {
    async addTask() {
      try {
        const response = await this.$axios.post('/api/tasks', this.task);
        alert('Tâche ajoutée avec succès!');
        this.task = { title: '', description: '' };
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

Erreurs fréquentes et debugging

1. Erreur : "Functions directory is not set"

## Solution : Assurez-vous que le fichier functions/index.js existe et est correctement configuré.

2. Erreur : "Error: Firebase Admin SDK requires service account credentials."

// Correction : Configurez Firebase Admin SDK avec les bonnes clés de service.
const admin = require('firebase-admin');
admin.initializeApp({
    credential: admin.credential.applicationDefault()
});

3. Erreur : "Error: No such file or directory, open 'functions/index.js'"

## Correction : Assurez-vous que le dossier functions existe et contient un fichier index.js.

Pour aller plus loin

1. Authentification Firebase : Découvrez comment ajouter une authentification utilisateur à votre application Nuxt.js avec Firebase Authentication.

   • Documentation Firebase Auth

2. Déploiement continu avec GitHub Actions : Automatisez le déploiement de votre application sur Firebase avec GitHub Actions.

   • Documentation Firebase CI/CD

3. Monitoring et logging : Utilisez Firebase Performance Monitoring et Logging pour surveiller les performances et le comportement des utilisateurs de votre application.

   • Documentation Firebase Performance
   • Documentation Firebase Analytics

Défi pratique

Créez une petite application Nuxt.js qui utilise Firebase pour stocker des notes à faire et les afficher en temps réel. Utilisez Firestore pour la base de données et Functions pour gérer les opérations CRUD. Assurez-vous que l'application est sécurisée avec Firebase Authentication.

Ce tutoriel couvre les bases du déploiement de Nuxt.js sur Firebase, incluant la configuration des services Firebase, la création de fonctions et le développement d'une application simple. Il fournit également des ressources pour approfondir votre connaissance et explorer de nouveaux domaines dans Firebase.