Deployer Express sur Firebase

Pourquoi Deployer Express sur Firebase ?

Deployer une application Express sur Firebase offre plusieurs avantages pratiques et économiques :

1. Accès à Google Cloud Services : Firebase est un service d'infrastructure cloud de Google, ce qui vous donne accès à une variété de services tels que Firestore (base de données NoSQL), Authentication, Hosting, Functions et Realtime Database.
2. Facilité du déploiement : Firebase offre un processus de déploiement simplifié et rapide via la ligne de commande ou l'interface web, permettant d'éviter les complexities des serveurs traditionnels.
3. Echelle automatique : Firebase gère automatiquement la mise à l'échelle de votre application, vous ne devrez pas vous soucier du déploiement et de l'hébergement manuel.

Un cas concret d'utilisation est un site web de gestion de projet où les utilisateurs peuvent créer des tâches, assigner des responsables et suivre leur progression en temps réel.

Prerequis

• Connaissance de base de JavaScript ES6+
• Compréhension de l'architecture MVC (Model-View-Controller)
• Familiarité avec MongoDB ou une autre base de données NoSQL
• Installation de Node.js v12+ et npm/yarn
• Firebase CLI (firebase-tools) installé : npm install -g firebase-tools
• Un compte Firebase

Concepts fondamentaux

1. Firebase Hosting

Firebase Hosting permet d'héberger votre application web statique ou une application basée sur Express.

Schema Mental :

+-------------------+
|                   |
|  App.js           |
|                   |
+---------+---------+
          |
          v
+---------+---------+
|                   |
|  server.js        |
|                   |
+---------+---------+
          |
          v
+---------+---------+
|                   |
|  Firebase Hosting |
|                   |
+-------------------+

Code fonctionnel :

// App.js
import express from 'express';
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

export default app;
javascript
// server.js
import http from 'http';
import app from './App';

const PORT = process.env.PORT || 3000;
const server = http.createServer(app);

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2. Firebase Functions

Firebase Functions vous permettent d'exécuter du code sur le cloud en réponse à des événements déclenchés.

Schema Mental :

+-------------------+
|                   |
|  index.js         |
|                   |
+---------+---------+
          |
          v
+---------+---------+
|                   |
|  Firebase Cloud   |
|       Functions     |
|                   |
+-------------------+

Code fonctionnel :

// index.js
exports.helloWorld = (req, res) => {
  res.send('Hello from Firebase Functions!');
};

Mise en pratique : projet fil rouge

Nous allons créer un simple API de blog utilisant Express et Firebase.

Étape 1 : Initialisation du Projet

mkdir firebase-blog-api
cd firebase-blog-api
npm init -y

Code fonctionnel :

// package.json
{
  "name": "firebase-blog-api",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Étape 2 : Configuration de Firebase

firebase init

Sélectionnez les options suivantes :

• Hosting: Configure and publish a web app
• Functions: Configure a Cloud Functions directory, create functions and deploy them

Code fonctionnel :

// .firebaserc
{
  "projects": {
    "default": "your-project-id"
  }
}

Étape 3 : Création du Serveur Express

Code fonctionnel :

// server.js
import express from 'express';
const app = express();

app.use(express.json());

app.get('/posts', (req, res) => {
  res.send([
    { id: 1, title: 'Post 1', content: 'Content of post 1' },
    { id: 2, title: 'Post 2', content: 'Content of post 2' }
  ]);
});

app.post('/posts', (req, res) => {
  const newPost = req.body;
  res.status(201).send(newPost);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Étape 4 : Déploiement sur Firebase Hosting

firebase deploy --only hosting

Code fonctionnel :

// firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "**/.*"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  }
}

Étape 5 : Déploiement des Functions Firebase

firebase deploy --only functions

Erreurs frequentes et debugging

1. Error: Cannot find module 'express'

Code incorrect :

const express = require('express');

Code correct :

import express from 'express';

2. Error: listen EADDRINUSE: address already in use

Code incorrect :

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Code correct :

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. Error: Firebase functions deployment failed

Code incorrect :

exports.helloWorld = (req, res) => {
  res.send('Hello from Firebase Functions!');
};

Code correct :

exports.helloWorld = (req, res) => {
  res.status(200).send('Hello from Firebase Functions!');
};

Pour aller plus loin

1. Authentification Firebase avec Express : Ajoutez une authentification utilisateur à votre application.
2. Firestore Integration : Utilisez Firestore pour stocker et récupérer des données de blog.
3. Realtime Updates with Firebase Database : Mettez en œuvre des mises à jour en temps réel pour la gestion des tâches.

Défi pratique

Créez une application CLI (Command Line Interface) utilisant Express qui permet aux utilisateurs d'ajouter, modifier et supprimer des notes dans un fichier JSON.