Integrare altri framework con Express.js

Con alcune configurazioni aggiuntive, puoi basarti sulla funzionalità di base dell'interfaccia a riga di comando compatibile con i framework per estendere il supporto dell'integrazione ad altri framework oltre ad 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 la CLI utilizzando il tuo metodo preferito.
• (Facoltativo) Fatturazione abilitata nel tuo progetto Firebase (obbligatorio se prevedi di utilizzare il rendering lato server)

Inizializza Firebase

Per iniziare, inizializza Firebase per il progetto del framework. Utilizza la CLI 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 dalla CLI 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 dell'hosting in firebase.json per 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, la CLI Firebase deve essere in grado di creare l'app e sapere dove gli strumenti posizionano gli asset destinati a Hosting. Ciò si ottiene con lo script di build npm e la direttiva delle 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 build, quindi devi assicurarti che lo 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 di Chrome headless a un'istanza locale della tua app, in modo da poter salvare l'HTML risultante da pubblicare su Hosting.

Infine, framework e strumenti di compilazione diversi memorizzano 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 deployment

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

firebase deploy

Pubblicare contenuti dinamici

Per pubblicare la tua app Express su Cloud Functions for Firebase, assicurati che l'app Express (o il 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;
}

Se preferisci esportare un gestore di URL in stile express, chiamalo handle:

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

Esegui deployment

firebase deploy

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

(Facoltativo) Integrare con Firebase Authentication

Gli strumenti di deployment di Firebase compatibili con i 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 Firebase App autenticata (firebaseApp) e l'utente attualmente connesso (currentUser).