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.
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.
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
Le projet est créé en deux étapes :
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.
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.
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 :
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 :
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.
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à :
Vous pouvez télécharger le projet final sur Github :