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
).