If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Cette page a été traduite par l'API Cloud Translation.

Intégrer d'autres frameworks avec Express.js

Avec une configuration supplémentaire, vous pouvez vous appuyer sur la fonctionnalité de base de la CLI compatible avec le framework pour étendre la prise en charge de l'intégration à d'autres frameworks qu'Angular et Next.js.

Avant de commencer

Avant de commencer à déployer votre application sur Firebase, consultez les exigences et les options suivantes:

CLI Firebase version 12.1.0 ou ultérieure. Veillez à installer la CLI en utilisant la méthode de votre choix.
Facultatif : Facturation activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le SSR)

Initialiser Firebase

Pour commencer, initialisez Firebase pour votre projet de framework. Utilisez la CLI Firebase pour un nouveau projet ou modifiez firebase.json pour un projet existant.

Initialiser un nouveau projet

Dans la CLI Firebase, activez l'aperçu des frameworks Web:
```
firebase experiments:enable webframeworks
```
Exécutez la commande d'initialisation à partir de la CLI, puis suivez les instructions:
```
firebase init hosting
```
Répondez "Oui" à la question "Voulez-vous utiliser un framework Web ? (expérimental)"
Choisissez le répertoire source d'hébergement. Il peut s'agir d'une application Web existante.
Si vous y êtes invité, sélectionnez Express.js/personnalisé.

Initialiser un projet existant

Modifiez la configuration d'hébergement dans firebase.json pour utiliser une option source plutôt qu'une option public. Exemple :

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

Diffuser du contenu statique

Avant de déployer du contenu statique, vous devez configurer votre application.

Configurer

Pour savoir comment déployer votre application, la CLI Firebase doit pouvoir à la fois compiler votre application et savoir où vos outils placent les éléments destinés à Hosting. Pour ce faire, utilisez le script de compilation npm et la directive de répertoires CJS dans package.json.

Compte tenu du fichier package.json suivant :

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

La CLI Firebase n'appelle que votre script de compilation. Vous devez donc vous assurer que votre script de compilation est exhaustif.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Si votre framework n'est pas compatible avec le prérendu, envisagez d'utiliser un outil tel que Rendertron. Rendertron vous permet d'envoyer des requêtes Chrome headless à une instance locale de votre application. Vous pouvez ainsi enregistrer le code HTML généré pour être diffusé sur Hosting.

Enfin, les différents frameworks et outils de compilation stockent leurs artefacts à différents endroits. Utilisez directories.serve pour indiquer à la CLI où votre script de compilation génère les artefacts résultants :

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

Déployer

Après avoir configuré votre application, vous pouvez diffuser du contenu statique à l'aide de la commande de déploiement standard:

firebase deploy

Diffuser du contenu dynamique

Pour diffuser votre application Express sur Cloud Functions for Firebase, assurez-vous qu'elle (ou le gestionnaire d'URL de style Express) est exportée de manière à ce que Firebase puisse la trouver une fois votre bibliothèque empaquetée avec npm.

Pour ce faire, assurez-vous que votre directive files inclut tout ce dont le serveur a besoin et que votre point d'entrée principal est correctement configuré dans package.json :

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

Exportez votre application Express à partir d'une fonction nommée app :

// server.js
export function app() {
  const server = express();
   …
   return server;
}

Si vous préférez exporter un gestionnaire d'URL de style express, nommez-le handle:

export function handle(req, res) {
   res.send(‘hello world’);
}

Déployer

firebase deploy

Cela permet de déployer votre contenu statique sur Firebase Hosting et de permettre à Firebase de revenir à votre application Express hébergée sur Cloud Functions for Firebase.

Facultatif : Intégrer à Firebase Authentication

L'outil de déploiement Firebase compatible avec le framework Web synchronise automatiquement l'état du client et du serveur à l'aide de cookies. Pour accéder au contexte d'authentification, l'objet res.locals Express peut contenir une instance d'application Firebase authentifiée (firebaseApp) et l'utilisateur actuellement connecté (currentUser).