Integra altri framework con Express.js

Con alcune configurazioni aggiuntive, 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:

• Firebase CLI 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)

• 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 l'interfaccia a riga di comando di Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializza un nuovo progetto

1. Nella CLI di Firebase, abilita l'anteprima dei framework web:

   firebase experiments:enable webframeworks

2. Eseguire il comando di inizializzazione dalla CLI e quindi seguire le istruzioni:

   firebase init hosting

3. Rispondi sì a "Vuoi usare un framework web? (sperimentale)"

4. Scegli la directory di origine dell'hosting; questa potrebbe essere un'app Web esistente.

5. Se richiesto, scegli Express.js / custom

Inizializza un progetto esistente

Modifica la tua configurazione di hosting in firebase.json per avere un'opzione source , piuttosto che un'opzione public . Per esempio:

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

Servi contenuti statici

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

Configura

Per sapere come distribuire la tua applicazione, l'interfaccia a riga di comando di 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"
    },
    …
}

L'interfaccia a riga di comando di Firebase chiama solo il tuo script di build, quindi dovrai assicurarti che lo script di build sia completo.

{
    "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 predefinito, prendi in considerazione l'utilizzo di uno strumento come Rendertron . Rendertron ti consentirà di effettuare richieste Chrome headless su un'istanza locale della tua app, in modo da poter salvare l'HTML risultante da servire su Hosting.

Infine, diversi framework e strumenti di compilazione memorizzano i propri artefatti in luoghi diversi. Utilizza directories.serve per indicare alla CLI dove il tuo script di compilazione emette 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"
    },
    …
}

Distribuisci

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

firebase deploy

Servire contenuti dinamici

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

Per fare ciò, assicurati che la tua direttiva files includa tutto il necessario per il server e che il tuo 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 di URL in stile espresso, chiamalo handle :

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

Distribuisci

firebase deploy

Questo distribuisce i tuoi contenuti statici su Firebase Hosting e consente a Firebase di ricorrere alla tua app Express ospitata su Cloud Functions for Firebase.

Facoltativo: integrazione con Firebase Authentication

Gli strumenti di distribuzione di 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 ).