Héberger un site web dynamique sur Firebase

Dynamic web site deployed on Firebase hosting

Cette page explique pas à pas comment configurer, déployer et héberger un site web avec une URL dynamique sur Firebase.

Avant de commencer, j'ai franchement galéré pour écrire cette page. La doc de FireBase n'est pas très claire. Au moment où j'ai fait mes recherches, je n'ai pas trouvé de blogs ou de vidéos qui expliquait clairement comment créer des URLs dynamiques sur FireBase. Si cette page vous aide et vous fais gagner du temps, un petit message ou un don, ça me ferait vachement plaisir !

Le guide présenté sur cette page a été testé avec les versions suivantes :

Nous supposerons que Node.js et npm sont déjà installés. Dans mon cas, j'ai utilisé Volta avec lequel vous pouvez sélectionner une version de Node.js en fonction du projet sur lequel vous travaillez.

Si vous débutez avec FireBase, je vous recommande de commencer par cette page qui explique comment créer un site web statique. Comme ce guide prolonge le précédent, je recommande fortement de comprendre les bases de l'hébergement FireBase.

Créer un projet Firebase

La première chose à faire est de créer un compte et un projet Firebase.

Comme cela est déjà expliqué ici, je vais passer rapidement.

L'ID du projet (fir-dynamic-c68ee dans mon cas) est fourni. Nous en aurons besoin plus tard, mais ne vous inquiétez pas, il est facile de récupérer l'ID dans la console Firebase.

Page du projet Firebase

Créez un nouveau dossier sur votre machine locale pour stocker votre projet. Ouvrez un terminal et allez dans votre nouveau dossier. Exécutez la commande suivante pour installer le paquet Firebase :

npm install firebase

Si les outils CLI de Firebase ne sont pas encore installés, exécutez la commande suivante :

npm install -g firebase-tools

Connectez-bous à votre compte Firebase:

$ firebase login

Hébergement

Le projet est créé en deux étapes :

  1. installer l'hébergement statique
  2. installer les fonctions

Pour créer et initialiser le projet, exécutez la commande suivante à partir du répertoire racine de votre projet pour préparer l'hébergement :

firebase init hosting

La commande ci-dessus devrait afficher quelque chose comme :

$ firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/project/firebase-dynamic

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

Sélectionnez Use an existing project et le projet Firebase que vous avez créé précédemment.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: fir-dynamic-c68ee (firebase-dynamic)
i  Using project fir-dynamic-c68ee (firebase-dynamic)

Quelques questions supplémentaires vous sont posées, voici mes réponses :

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  Wrote public/index.html

Un nouveau dossier public doit être créé avec un fichier index.html par défaut.

Pour être sûr que tout est correctement installé, vous pouvez déployer votre partie statique :

firebase deploy

La dernière ligne contient l'URL publique de votre projet.

Fonctions

La philosophie de Firebase est que certaines URL seront redirigées vers des fonctions. Vous devez maintenant initialiser Cloud Functions avec la commande suivante :

firebase init functions

Répondez aux questions, puis l'outil installera les fichiers dont nous aurons besoin :

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.js
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore

Installer les dépendances avec npm.

Vous devriez maintenant avoir un nouveau dossier functions dans le répertoire de votre projet.

Créez votre première fonction

Plus tard, les URL dynamiques seront redirigées vers notre fonction. Commençons par écrire une fonction app :

// Firebase functions
const functions = require("firebase-functions");

// Create an app with Express
const express = require("express");
const app = express();

// Any URL starting with /app/id will call this function
app.get("/", (req, res) => {
    res.send("This is a function");
});

// Export the app
exports.app = functions.https.onRequest(app);

Pour tester votre fonction, vous pouvez lancer firebase deploy en ligne de commande, mais nous allons d'abord l'essayer en local.

Vous avez probablement remarqué que l'outil CLI de Firebase crée un fichier package.json dans le dossier functions. Déplacez-vous dans le dossier functions, et lancez npm install.

Dans le dossier racine de votre projet, exécutez la commande suivante pour servir vos fonctions localement :

firebase serve

Cette commande crée deux serveurs locaux sur votre ordinateur. Le premier est votre hébergement local :

✔  hosting[fir-dynamic-c68ee]: Local server: http://localhost:5000

Le lien devrait afficher le fichier par défaut index.html dans le dossier public ;

Le deuxième lien est votre dossier de fonctions :

✔  functions[us-central1-app]: http function initialized (http://localhost:5001/fir-dynamic-c68ee/us-central1/app).

Ce dernier lien devrait afficher :

This is a function

Votre projet fonctionne correctement. Notez que le /app à la fin de l'URL spécifie quelle fonction est appelée. Ici, nous n'avons qu'une seule fonction app.

A partir de là, nous avons deux problèmes :

URL dynamiques

C'est là que les choses se compliquent, d'ou ma remarque introductive!

Pour servir des URL dynamiques, nous allons éditer le fichier firebase.json à la racine du projet. Le fichier devrait ressembler à quelque chose comme ça :

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Ajoutez les lignes suivantes pour spécifier que toute URL commençant par /app/ sera redirigée vers notre fonction `app``.

{    
  "functions": [
  {
      "source": "functions",
      "codebase": "default",
      "ignore": [
          "node_modules",
          ".git",
          "firebase-debug.log",
          "firebase-debug.*.log"
      ]
    }
  ],

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

La première partie configure les fonctions, la dernière partie spécifie que toute URL commençant par /app sera redirigée vers notre fonction. Notez que la première partie peut être ajoutée par la commande précédente firebase init functions.

Editez le fichier index.js dans le dossier functions, et changez le premier paramètre de la méthode app.get() :

// Firebase functions
const functions = require("firebase-functions");

// Create an app with Express
const express = require("express");
const app = express();

// Any URL starting with /app/id will call this function
app.get("/app/:id", (req, res) => {
    res.send("ID = " + req.params.id);
});

// Export the app
exports.app = functions.https.onRequest(app);

Dans votre navigateur, allez à l'URL racine de votre hébergement statique. Si vous n'avez pas modifié le fichier index.html, vous devriez avoir une page intitulée Firebase Hosting Setup Complete.

A la fin de l'URL, ajoutez /app/12, dans mon cas : http://localhost:5000/app/12 :

URL dynamique redirigée vers les fonctions Firebase

Notez que le dernier paramètre de l'URL (12) est envoyé à la fonction Express get().

Vous pouvez maintenant déployer votre application pour vérifier qu'elle fonctionne toujours une fois déployée.

Déploiement

Les fonctions ne fonctionnent pas avec le plan gratuit. Vérifiez que votre projet est configuré avec l'offre blaze. Si ce n'est pas le cas, vous devrez mettre à jour votre projet dans la console Firebase.

Exécutez la commande suivante pour déployer sur l'hébergement Firebase :

firebase deploy

Cela peut prendre un certain temps, en particulier lors de la création des fonctions Node.js 18. Soyez patient !

i  functions: creating Node.js 18 function app(us-central1)...

Notez que votre version de Node.js peut empêcher la commande de fonctionner correctement. Si nécessaire, changez la version dans le fichier package.json :

"engines": {
  "node": "18"
},

Une fois la commande terminée, la dernière ligne devrait afficher votre URL publique :

Hosting URL: https://fir-dynamic-c68ee.web.app

Allez à cette URL, vous devriez avoir une fois de plus votre page d'accueil index.html.

Comme précédemment, ajoutez /app/7 à la fin de l'URL : https://fir-dynamic-c68ee.web.app/app/7

Et voilà :

Site web dynamique déployé sur un hébergement Firebase

Téléchargement

Vous pouvez télécharger le projet final sur Github :

Projet sur GitHub.

Voir aussi

Dernière mise à jour : 28/04/2023
 Soutenez le blog de Lulu sur Tipee. Support Lulu's blog on Tipeee