Intégrez d'autres frameworks avec Express.js

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

Remarque : L'hébergement compatible avec le framework est une version préliminaire publique. Cela signifie que la fonctionnalité peut changer de manière incompatible avec les versions antérieures. Une version préliminaire n'est soumise à aucun contrat de niveau de service ou politique d'obsolescence et peut bénéficier d'une assistance limitée ou inexistante.

Avant que tu commences

Avant de commencer à déployer votre application Next.js sur Firebase, passez en revue les exigences et options suivantes :

• Firebase CLI version 11.14.2 ou ultérieure. Assurez-vous d' installer la CLI en utilisant votre méthode préférée.
• Facultatif : facturation activée sur votre projet Firebase (obligatoire si vous prévoyez d'utiliser 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

1. Dans la CLI Firebase, activez l'aperçu des frameworks Web :

   firebase experiments:enable webframeworks

2. Exécutez la commande d'initialisation à partir de la CLI, puis suivez les invites :

   firebase init hosting

3. Choisissez votre répertoire source d'hébergement ; il peut s'agir d'une application Web existante.
4. Choisissez "Hébergement Web dynamique avec framework Web".
5. Choisissez Express.js / personnalisé

Initialiser un projet existant

Modifiez votre configuration d'hébergement dans firebase.json pour avoir une option source plutôt qu'une option public . Par exemple:

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

Servir du contenu statique

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

Configurer

Afin de savoir comment déployer votre application, la CLI Firebase doit pouvoir à la fois créer votre application et savoir où vos outils placent les actifs destinés à l'hébergement. Ceci est accompli avec le script de construction npm et la directive des répertoires CJS dans package.json .

Étant donné le 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 appelle uniquement votre script de construction, vous devrez donc vous assurer que votre script de construction est exhaustif.

Conseil : vous pouvez ajouter des étapes supplémentaires à l'aide de && . Si vous avez beaucoup d'étapes, envisagez un script shell ou un outil comme npm-run-all ou wireit .

{
    "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 ne prend pas en charge le pré-rendu prêt à l'emploi, envisagez d'utiliser un outil comme Rendertron . Rendertron vous permettra d'effectuer des requêtes Chrome sans tête sur une instance locale de votre application, afin que vous puissiez enregistrer le code HTML résultant à diffuser sur l'hébergement.

Enfin, différents frameworks et outils de construction 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 avec la commande de déploiement standard :

firebase deploy

Servir du contenu dynamique

Pour diffuser votre application Express sur Cloud Functions for Firebase, assurez-vous que votre application Express (ou votre gestionnaire d'URL de style express) est exportée de manière à ce que Firebase puisse la trouver une fois que votre bibliothèque a été compressé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 depuis une fonction nommée app :

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

Ou 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 déploie votre contenu statique sur Firebase Hosting et permet à Firebase de revenir à votre application Express hébergée sur Cloud Functions pour Firebase.

Facultatif : intégrer à Firebase Authentication

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