Intégrer d'autres frameworks avec Express.js

Avec quelques configurations supplémentaires, vous pouvez vous appuyer sur la fonctionnalité de base de la CLI compatible avec les frameworks pour étendre la prise en charge de l'intégration à d'autres frameworks qu'Angular et Next.js.

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 Firebase CLI doit pouvoir la compiler et savoir où votre outil place les éléments destinés à Hosting. Pour ce faire, utilisez le script de compilation npm et l'instruction des répertoires CJS dans package.json.

Compte tenu du 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 ne prend pas en charge le prérendu prêt à l'emploi, 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 obtenu pour le diffuser sur Hosting.

Enfin, 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 obtenus :

{
    "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 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 votre bibliothèque empaquetée avec npm.

Pour ce faire, assurez-vous que votre instruction files inclut tout ce qui est nécessaire au serveur 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;
}

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 for Firebase.

Facultatif : intégrer Firebase Authentication

L'outil de déploiement Firebase compatible avec les frameworks Web synchronise 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 d'application Firebase authentifiée (firebaseApp) et l'utilisateur actuellement connecté (currentUser).