Integrare altri framework con Express.js

Con un po' di configurazione aggiuntiva, puoi basarti sulla funzionalità di base dell'interfaccia a riga di comando che riconosce i framework per estendere il supporto dell'integrazione ad altri framework oltre ad Angular e Next.js.

Pubblicare contenuti statici

Prima di eseguire il deployment di contenuti statici, devi configurare l'applicazione.

Configura

Per sapere come eseguire il deployment dell'applicazione, la CLI Firebase deve essere in grado sia di creare l'app sia di sapere dove gli strumenti inseriscono gli asset destinati a Hosting. Questa operazione viene eseguita con lo script di build npm e la direttiva delle directory CJS in package.json.

Dato il seguente package.json:

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

L'Firebase CLI chiama solo lo script di build, quindi devi assicurarti che il tuo script di build sia esaustivo.

{
    "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"
    },
    …
}

Se il tuo framework non supporta il pre-rendering out-of-the-box, valuta la possibilità di utilizzare uno strumento come Rendertron. Rendertron ti consentirà di effettuare richieste headless Chrome a un'istanza locale della tua app, in modo da poter salvare il codice HTML risultante da pubblicare su Hosting.

Infine, framework e strumenti di build diversi archiviano gli artefatti in posizioni diverse. Utilizza directories.serve per indicare all'interfaccia a riga di comando dove lo script di build genera gli artefatti risultanti:

{
    "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"
    },
    …
}

Esegui il deployment

Dopo aver configurato l'app, puoi pubblicare contenuti statici con il comando di deployment standard:

firebase deploy

Pubblicare contenuti dinamici

Per pubblicare l'app Express su Cloud Functions for Firebase, assicurati che l'app Express (o gestore di URL in stile Express) venga esportata in modo che Firebase possa trovarla dopo che la libreria è stata compressa con npm.

Per farlo, assicurati che la direttiva files includa tutto il necessario per il server e che il punto di ingresso principale sia configurato correttamente in 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",
    ...
}

Esporta l'app Express da una funzione denominata app:

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

In alternativa, se preferisci esportare un gestore di URL in stile Express, chiamalo handle:

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

Esegui il deployment

firebase deploy

In questo modo, i contenuti statici vengono sottoposti a deployment su Firebase Hosting e Firebase può eseguire il fallback all'app Express ospitata su Cloud Functions for Firebase.

(Facoltativo) Integrare con Firebase Authentication

Lo strumento di deployment di Firebase che riconosce i framework web manterrà automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. Per accedere al contesto di autenticazione, l'oggetto res.locals di Express contiene facoltativamente un'istanza dell'app Firebase autenticata (firebaseApp) e l'utente attualmente autenticato (currentUser).