Integra altri framework con Express.js

Con qualche configurazione aggiuntiva, puoi basarti sulla funzionalità CLI di base compatibile con il framework per estendere il supporto dell'integrazione a framework diversi da Angular e Next.js.

Prima di iniziare

Prima di iniziare a distribuire la tua app su Firebase, esamina i seguenti requisiti e opzioni:

CLI Firebase versione 12.1.0 o successiva. Assicurati di installare la CLI utilizzando il tuo metodo preferito.
Facoltativo: fatturazione abilitata sul tuo progetto Firebase (obbligatorio se prevedi di utilizzare SSR)

Inizializza Firebase

Per iniziare, inizializza Firebase per il tuo progetto framework. Utilizza la CLI Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializzare un nuovo progetto

Nella CLI di Firebase, abilita l'anteprima dei framework Web:
```
firebase experiments:enable webframeworks
```
Eseguire il comando di inizializzazione dalla CLI e quindi seguire le istruzioni:
```
firebase init hosting
```
Rispondi sì a "Vuoi utilizzare un framework web? (sperimentale)"
Scegli la directory di origine del tuo hosting; potrebbe trattarsi di un'app Web esistente.
Se richiesto, scegli Express.js/custom

Inizializza un progetto esistente

Modifica la configurazione del tuo hosting in firebase.json per avere un'opzione source , anziché un'opzione public . Per esempio:

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

Offri contenuto statico

Prima di distribuire contenuto statico, dovrai configurare la tua applicazione.

Configura

Per sapere come distribuire la tua applicazione, la CLI Firebase deve essere in grado sia di creare la tua app sia di sapere dove i tuoi strumenti posizionano le risorse destinate all'hosting. Ciò si ottiene con lo script di build npm e la direttiva sulle 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"
    },
    …
}

La CLI di Firebase chiama solo il tuo script di build, quindi dovrai 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 immediato, considera l'utilizzo di uno strumento come Rendertron . Rendertron ti consentirà di effettuare richieste Chrome headless rispetto a un'istanza locale della tua app, in modo da poter salvare l'HTML risultante per essere servito sull'hosting.

Infine, framework e strumenti di creazione diversi archiviano i propri artefatti in luoghi diversi. Utilizza directories.serve per indicare alla CLI dove lo script di build sta emettendo 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"
    },
    …
}

Distribuire

Dopo aver configurato la tua app, puoi fornire contenuto statico con il comando di distribuzione standard:

firebase deploy

Offri contenuto dinamico

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

Per fare ciò, assicurati che la direttiva files includa tutto il necessario per il server e che il punto di ingresso principale sia impostato 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 la tua app Express da una funzione denominata app :

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

Oppure, se preferisci esportare un gestore URL in stile rapido, chiamalo handle :

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

Distribuire

firebase deploy

Questo distribuisce il tuo contenuto statico su Firebase Hosting e consente a Firebase di ricorrere alla tua app Express ospitata su Cloud Functions for Firebase.

Facoltativo: integrazione con l'autenticazione Firebase

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