Deployer Vue sur Firebase

Pourquoi Deployer Vue sur Firebase ?

Le déploiement d'une application Vue.js sur Firebase offre plusieurs avantages. Il permet de déployer rapidement et facilement une application web complète, sans avoir besoin d'infrastructure serveur dédiée. Firebase offre également des services comme le stockage de fichiers, les bases de données réactives et l'authentification utilisateurs intégrées, qui peuvent être très utiles pour diverses applications.

Un cas concret est une application de gestion de tâches où les utilisateurs doivent pouvoir créer, mettre à jour et supprimer des tâches en temps réel. Firebase peut faciliter la mise en place d'une telle application en offrant un backend réactif pour stocker les tâches et en gérant l'authentification des utilisateurs.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Une account Firebase (gratuite)
• Node.js et npm installés sur votre machine
• Vue CLI installé : npm install -g @vue/cli

Concepts fondamentaux

1. Firebase Project

Firebase est un ensemble d'outils et de services qui permettent de développer des applications web et mobiles rapidement. Avant de pouvoir déployer une application sur Firebase, vous devez créer un projet Firebase.

## Créer un nouveau projet Firebase
firebase init

2. Vue.js Project

Vue CLI est un outil en ligne de commande pour initialiser rapidement des projets Vue.js.

## Créer un nouveau projet Vue.js
vue create my-project
cd my-project

3. Configurant Firebase dans Vue.js

Vous devez installer le SDK Firebase et configurer votre application Vue.js pour utiliser Firebase.

## Installer Firebase
npm install firebase --save

Créez un fichier firebase-config.js dans le répertoire src/.

// src/firebase-config.js
import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, createUserWithEmailAndPassword, signInWithEmailAndPassword };

4. Utilisation de Firebase dans une Vue.js Component

Voici un exemple simple d'utilisation de Firebase pour créer un utilisateur.

<!-- src/components/Register.vue -->
<template>
  <div>
    <h2>Register</h2>
    <form @submit.prevent="register">
      <input v-model="email" type="email" placeholder="Email" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Register</button>
    </form>
  </div>
</template>

<script>
import { createUserWithEmailAndPassword } from '../firebase-config';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async register() {
      try {
        const userCredential = await createUserWithEmailAndPassword(this.email, this.password);
        console.log('User registered:', userCredential.user);
      } catch (error) {
        console.error('Error registering user:', error);
      }
    }
  }
};
</script>

Mise en pratique : projet fil rouge

Nous allons créer une application simple de gestion de tâches. L'application permettra aux utilisateurs de créer, lire, mettre à jour et supprimer des tâches.

Étape 1 : Créer le Projet Vue.js

## Créer un nouveau projet Vue.js
vue create todo-app
cd todo-app

Étape 2 : Installer Firebase

## Installer Firebase
npm install firebase --save

Étape 3 : Configurer Firebase dans Vue.js

Créez un fichier firebase-config.js dans le répertoire src/.

// src/firebase-config.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, setDoc, collection, onSnapshot, deleteDoc } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db, doc, setDoc, collection, onSnapshot, deleteDoc };

Étape 4 : Créer la Structure des Composants

Créez les composants TaskList.vue et TaskForm.vue.

<!-- src/components/TaskList.vue -->
<template>
  <div>
    <h2>Tasks</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        task.text
        <button @click="deleteTask(task.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { onSnapshot, collection, doc, deleteDoc } from '../firebase-config';

export default {
  data() {
    return {
      tasks: []
    };
  },
  created() {
    const tasksRef = collection(db, 'tasks');
    onSnapshot(tasksRef, (snapshot) => {
      this.tasks = snapshot.docs.map(doc => ({
        id: doc.id,
        text: doc.data().text
      }));
    });
  },
  methods: {
    async deleteTask(id) {
      await deleteDoc(doc(db, 'tasks', id));
    }
  }
};
</script>
vue
<!-- src/components/TaskForm.vue -->
<template>
  <div>
    <h2>Add Task</h2>
    <form @submit.prevent="addTask">
      <input v-model="text" type="text" placeholder="Task text" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import { setDoc, collection } from '../firebase-config';

export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    async addTask() {
      const tasksRef = collection(db, 'tasks');
      await setDoc(doc(tasksRef), { text: this.text });
      this.text = '';
    }
  }
};
</script>

Étape 5 : Intégrer les Composants dans la Vue App

Mettez à jour src/App.vue pour inclure les composants TaskList et TaskForm.

<!-- src/App.vue -->
<template>
  <div id="app">
    <header>
      <h1>Todo App</h1>
    </header>
    <main>
      <TaskForm />
      <TaskList />
    </main>
  </div>
</template>

<script>
import TaskForm from './components/TaskForm.vue';
import TaskList from './components/TaskList.vue';

export default {
  name: 'App',
  components: {
    TaskForm,
    TaskList
  }
};
</script>

Étape 6 : Exécuter et Déployer l'Application

## Lancer l'application
npm run serve

Pour déployer sur Firebase :

## Initialiser Firebase dans le projet
firebase init

## Sélectionnez Hosting et suivez les instructions pour déployer votre application.
firebase deploy

Erreurs frequentes et debugging

1. Firebase SDK Non Trouvé

Code incorrect :

import { initializeApp } from 'firebase/app';

Code correct :

import { initializeApp } from 'firebase/app';

2. Collection non trouvée

Code incorrect :

const tasksRef = collection(db, 'tasks');

Code correct :

const tasksRef = collection(db, 'tasks');

3. Erreur d'authentification

Code incorrect :

await createUserWithEmailAndPassword(this.email, this.password);

Code correct :

try {
  const userCredential = await createUserWithEmailAndPassword(auth, this.email, this.password);
  console.log('User registered:', userCredential.user);
} catch (error) {
  console.error('Error registering user:', error);
}

Pour aller plus loin

1. Apprendre Firebase Authentication : Explorez les différentes options d'authentification Firebase pour sécuriser votre application.

   • Firebase Authentication Documentation

2. Utiliser Firestore pour Stocker des Données en Réalité En-Time : Apprenez à stocker et lire des données dans Firestore de manière réactive.

   • Firestore Documentation

3. Ajouter des Services Supplémentaires à Firebase : Explorez d'autres services Firebase comme Cloud Functions, Hosting et Analytics pour développer une application complète.

   • Firebase Services

Défi Pratique

Créez une application de chat simple qui permet aux utilisateurs de s'inscrire, de se connecter et de postuler des messages en temps réel. Utilisez Firebase pour gérer les utilisateurs et les messages.