Integrare altri framework con Express.js

Con alcune configurazioni aggiuntive, puoi sfruttare la funzionalità dell'interfaccia a riga di comando di base sensibile al framework per estendere il supporto dell'integrazione a framework diversi da Angular e Next.js.

Prima di iniziare

Prima di iniziare a eseguire il deployment dell'app su Firebase, esamina i seguenti requisiti e opzioni:

  • Firebase CLI versione 12.1.0 o successive. Assicurati di installare l'interfaccia a riga di comando utilizzando il metodo che preferisci.
  • (Facoltativo) Fatturazione abilitata sul progetto Firebase (obbligatoria se prevedi di utilizzare SSR)

Inizializza Firebase

Per iniziare, inizializza Firebase per il progetto del framework. Utilizza l'interfaccia a riga di comando Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializzare un nuovo progetto

  1. Nell'interfaccia a riga di comando Firebase, attiva l'anteprima dei framework web: 
    firebase experiments:enable webframeworks

  2. Esegui il comando di inizializzazione dall'interfaccia a riga di comando e segui le istruzioni: 

    firebase init hosting

  3. Rispondi sì alla domanda "Vuoi utilizzare un framework web? (sperimentale)"

  4. Scegli la directory di origine dell'hosting. Potrebbe trattarsi di un'app web esistente.

  5. Se richiesto, scegli Express.js / personalizzato

Inizializzare un progetto esistente

Modifica la configurazione di hosting in firebase.json in modo da avere un'opzione source anziché un'opzione public. Ad esempio:

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

Pubblicare contenuti statici

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

Configura

Per sapere come eseguire il deployment dell'applicazione, Firebase CLI deve essere in grado di compilare l'app e sapere dove lo strumento posiziona gli asset destinati a Hosting. Questo viene eseguito con lo script di compilazione npm e la direttiva directory CJS in package.json.

Dato il seguente file package.json:

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

L'interfaccia a riga di comando Firebase chiama solo lo script di compilazione, quindi dovrai assicurarti che 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 pronto all'uso, valuta di utilizzare uno strumento come Rendertron. Rendertron ti consentirà di effettuare richieste di Chrome headless a un'istanza locale della tua app, in modo da poter salvare il codice HTML risultante da pubblicare su Hosting.

Infine, diversi framework e strumenti di compilazione memorizzano i propri elementi in luoghi diversi. Utilizza directories.serve per indicare all'interfaccia a riga di comando dove lo script di compilazione 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 deployment

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

firebase deploy

Pubblicazione di contenuti dinamici

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

Per farlo, assicurati che la direttiva files includa tutto ciò che è necessario per il server e che il punto di contatto 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, assegnagli il nome handle:

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

Esegui deployment

firebase deploy

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

(Facoltativo) Eseguire l'integrazione con Firebase Authentication

Gli strumenti di deployment di Firebase che supportano il framework web manterranno automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. Per accedere al contesto di autenticazione, l'oggetto Express res.locals contiene facoltativamente un'istanza di app Firebase autenticata (firebaseApp) e l'utente che ha eseguito l'accesso correntemente (currentUser).