Deployer Laravel sur Firebase

Pourquoi Deployer Laravel sur Firebase ?

Deployer Laravel sur Firebase offre un ensemble d'avantages réels pour les développeurs et les entreprises. Il permet une mise en œuvre rapide et flexible, tout en offrant un hébergement serverless qui réduit la maintenance et les coûts. Par exemple, imaginez que vous ayez une application de gestion de projets interne qui nécessite une mise à jour régulière. Avec Firebase, vous pouvez déployer cette application rapidement et en toute sécurité, sans avoir à gérer le serveur lui-même.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissances en Laravel
• Un compte Firebase (https://firebase.google.com/)
• Composer pour installer les dépendances Laravel
• Node.js et npm pour la gestion des packages JavaScript (facultatif, mais recommandé)
• Terminal

Concepts fondamentaux

1. Firebase Hosting

Firebase Hosting est un service qui permet de héberger une application web statique ou serverless. Il offre des accès à l'internet public et facilite le déploiement continu.

## Installation du CLI Firebase
npm install -g firebase-tools

Structure d'un projet Firebase

Un projet Firebase est structuré comme suit :

my-firebase-project/
├── public/
│   ├── index.html
│   └── ...
└── functions/
    ├── package.json
    └── src/
        └── index.js

2. Firebase Functions

Firebase Functions permet de créer des fonctions backend serverless qui réagissent aux événements comme les requêtes HTTP, les publications dans Firestore, etc.

## Initialisation d'un projet Firebase Function
firebase init functions

Structure d'un projet Firebase Functions

Un projet Firebase Functions est structuré comme suit :

my-firebase-project/
└── functions/
    ├── package.json
    └── src/
        └── index.js

3. Firestore Database

Firestore est une base de données NoSQL serverless qui permet d'effectuer des lectures et écritures en temps réel.

## Installation du SDK Firebase pour Node.js dans les fonctions
npm install firebase-admin

Structure d'une collection Firestore

Une collection Firestore est structurée comme suit :

firestore/
└── users/
    ├── user1/
    │   ├── name: "John Doe"
    │   └── email: "john.doe@example.com"
    └── user2/
        ├── name: "Jane Doe"
        └── email: "jane.doe@example.com"

Mise en pratique : projet fil rouge

Nous allons créer un gestionnaire de tâches basé sur Laravel et déployer celui-ci sur Firebase. Ce mini-projet comprendra :

• Un formulaire pour ajouter des tâches
• Une liste affichant les tâches
• La possibilité de marquer une tâche comme terminée

Étape 1 : Initialisation du projet Laravel

## Création d'un nouveau projet Laravel
composer create-project --prefer-dist laravel/laravel task-manager "8.*"

## Accès au projet
cd task-manager

Étape 2 : Configuration de Firebase

1. Initialisez le CLI Firebase et suivez les instructions pour connecter votre projet Firebase.
2. Ajoutez Firebase Hosting à votre projet.

firebase init hosting

3. Ajoutez Firebase Functions à votre projet.

firebase init functions

Étape 3 : Création du formulaire d'ajout de tâches

1. Créez une nouvelle route et un contrôleur pour gérer l'affichage du formulaire et la création des tâches.

## routes/web.php
Route::get('/tasks', [TaskController::class, 'index']);
Route::post('/tasks', [TaskController::class, 'store']);

2. Créez le contrôleur TaskController.

php artisan make:controller TaskController

3. Implémentez les méthodes du contrôleur.

## app/Http/Controllers/TaskController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Firebase\Firestore\Client;

class TaskController extends Controller
{
    private $firestore;

    public function __construct(Client $firestore)
    {
        $this->firestore = $firestore;
    }

    public function index()
    {
        return view('tasks.index');
    }

    public function store(Request $request)
    {
        $taskData = [
            'name' => $request->input('name'),
            'completed' => false,
        ];

        $this->firestore->collection('tasks')->add($taskData);

        return redirect()->route('tasks');
    }
}

4. Créez la vue index.blade.php pour afficher le formulaire et la liste des tâches.

<!-- resources/views/tasks/index.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Manager</title>
</head>
<body>
    <h1>Task Manager</h1>
    <form action="route('tasks.store')" method="POST">
        @csrf
        <input type="text" name="name" placeholder="New task">
        <button type="submit">Add Task</button>
    </form>

    <ul>
        @foreach ($tasks as $task)
            <li>$task->name - $task->completed ? 'Completed' : 'Pending'</li>
        @endforeach
    </ul>
</body>
</html>

Étape 4 : Configuration de Firestore dans Firebase Functions

1. Créez une fonction pour récupérer les tâches.

## functions/src/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp();

exports.getTasks = functions.https.onRequest(async (req, res) => {
    const tasksRef = admin.firestore().collection('tasks');
    const snapshot = await tasksRef.get();
    const tasks = [];

    snapshot.forEach(doc => {
        tasks.push({
            id: doc.id,
            name: doc.data().name,
            completed: doc.data().completed
        });
    });

    res.json(tasks);
});

2. Déployez les fonctions Firebase.

firebase deploy --only functions

Étape 5 : Configuration de Firebase Hosting

1. Mettez à jour le fichier public/index.html pour inclure le script pour récupérer les tâches.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Manager</title>
    <script src="/__/firebase/9.10.0/firebase-app.js"></script>
    <script src="/__/firebase/9.10.0/firebase-firestore.js"></script>
    <script>
        var 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"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        var db = firebase.firestore();
    </script>
</head>
<body>
    <h1>Task Manager</h1>
    <form id="taskForm">
        <input type="text" id="newTask" placeholder="New task">
        <button type="submit">Add Task</button>
    </form>

    

    <script>
        document.getElementById('taskForm').addEventListener('submit', function(e) {
            e.preventDefault();
            var newTask = document.getElementById('newTask').value;
            db.collection("tasks").add({
                name: newTask,
                completed: false
            })
            .then(function(docRef) {
                console.log("Document written with ID: ", docRef.id);
            })
            .catch(function(error) {
                console.error("Error adding document: ", error);
            });
        });

        db.collection("tasks").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                var task = doc.data();
                var li = document.createElement('li');
                li.textContent = task.name + ' - ' + (task.completed ? 'Completed' : 'Pending');
                document.getElementById('tasksList').appendChild(li);
            });
        });
    </script>
</body>
</html>

2. Déployez Firebase Hosting.

firebase deploy --only hosting

Erreurs frequentes et debugging

1. Erreur : Error: Cannot find module 'firebase-admin'

Code incorrect :

const admin = require('firebase-admin');

Code correct :

const admin = require('firebase-admin');
admin.initializeApp();

2. Erreur : Error: Firebase project not found or you do not have permission to access it.

Code incorrect :

firebase deploy --only functions

Code correct :

1. Assurez-vous que vous êtes connecté à Firebase avec la commande suivante :

   firebase login
   

2. Vérifiez que votre projet Firebase est bien configuré.

3. Erreur : Error: Failed to load resource: the server responded with a status of 404 (Not Found)

Code incorrect :

<script src="firebase-app.js"></script>

Code correct :

1. Assurez-vous que les fichiers de Firebase sont bien configurés dans votre projet Firebase.
2. Vérifiez que les fichiers sont bien publiés sur Firebase Hosting.

Pour aller plus loin

1. Ajout d'authentification Firebase

Apprenez à ajouter une couche d'authentification pour sécuriser vos données et fonctionnalités.

• Tutoriel : https://firebase.google.com/docs/auth/web/password-auth

2. Utilisation de Firestore Security Rules

Découvrez comment mettre en place des règles de sécurité sur votre base de données Firestore pour contrôler les accès aux données.

• Tutoriel : https://firebase.google.com/docs/firestore/security/get-started

3. Déploiement continu avec GitHub Actions

Intégrez Firebase Hosting et Functions dans un pipeline de déploiement continu avec GitHub Actions.

• Tutoriel : https://firebase.google.com/docs/hosting/github-integration

Défi pratique

Créez une application API RESTful utilisant Laravel pour gérer des utilisateurs. Implémentez les fonctionnalités suivantes :

• Ajouter un nouvel utilisateur
• Mettre à jour les informations d'un utilisateur
• Supprimer un utilisateur
• Récupérer la liste des utilisateurs

En suivant ce tutoriel, vous devriez être en mesure de déployer une application Laravel complète sur Firebase, offrant une solution flexible et performante pour vos projets web.