Integrar outros frameworks com Express.js

Com alguma configuração adicional, você pode desenvolver a funcionalidade CLI básica com reconhecimento de estrutura para estender o suporte de integração a estruturas diferentes de Angular e Next.js.

Antes de você começar

Antes de começar a implantar seu aplicativo no Firebase, revise os seguintes requisitos e opções:

  • CLI do Firebase versão 12.1.0 ou posterior. Certifique-se de instalar a CLI usando seu método preferido.
  • Opcional: faturamento ativado no seu projeto do Firebase (obrigatório se você planeja usar SSR)

Inicializar Firebase

Para começar, inicialize o Firebase para seu projeto de estrutura. Use a Firebase CLI para um novo projeto ou modifique firebase.json para um projeto existente.

Inicialize um novo projeto

  1. Na CLI do Firebase, ative a visualização de estruturas da web:
    firebase experiments:enable webframeworks

  2. Execute o comando de inicialização na CLI e siga as instruções:

    firebase init hosting

  3. Responda sim para "Deseja usar um framework web? (experimental)"

  4. Escolha o diretório de origem da hospedagem; este poderia ser um aplicativo da web existente.

  5. Se solicitado, escolha Express.js/custom

Inicializar um projeto existente

Altere sua configuração de hospedagem em firebase.json para ter uma opção source , em vez de uma opção public . Por exemplo:

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

Servir conteúdo estático

Antes de implantar conteúdo estático, você precisará configurar seu aplicativo.

Configurar

Para saber como implantar seu aplicativo, a CLI do Firebase precisa ser capaz de construir seu aplicativo e saber onde suas ferramentas colocam os ativos destinados à hospedagem. Isso é feito com o script de construção npm e a diretiva de diretórios CJS em package.json .

Dado o seguinte package.json:

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

A CLI do Firebase chama apenas seu script de build, portanto, você precisará garantir que seu script de build seja 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 sua estrutura não oferece suporte à pré-renderização pronta para uso, considere usar uma ferramenta como Rendertron . O Rendertron permitirá que você faça solicitações headless do Chrome em uma instância local do seu aplicativo, para que você possa salvar o HTML resultante para ser veiculado na hospedagem.

Finalmente, diferentes frameworks e ferramentas de construção armazenam seus artefatos em locais diferentes. Use directories.serve para informar à CLI onde seu script de construção está gerando os artefatos resultantes:

{
    "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"
    },
    …
}

Implantar

Depois de configurar seu aplicativo, você poderá fornecer conteúdo estático com o comando de implantação padrão:

firebase deploy

Servir conteúdo dinâmico

Para veicular seu aplicativo Express no Cloud Functions para Firebase, certifique-se de que seu aplicativo Express (ou manipulador de URL de estilo expresso) seja exportado de forma que o Firebase possa encontrá-lo depois que sua biblioteca for compactada com npm.

Para fazer isso, certifique-se de que sua diretiva files inclua tudo o que é necessário para o servidor e que seu ponto de entrada principal esteja configurado corretamente em 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",
    ...
}

Exporte seu aplicativo expresso de uma função chamada app :

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

Ou se você preferir exportar um manipulador de URL de estilo expresso, nomeie-o handle :

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

Implantar

firebase deploy

Isso implanta seu conteúdo estático no Firebase Hosting e permite que o Firebase retorne ao seu aplicativo Express hospedado no Cloud Functions for Firebase.

Opcional: integre com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de estrutura da web manterão automaticamente o estado do cliente e do servidor sincronizados usando cookies. Para acessar o contexto de autenticação, o objeto Express res.locals contém opcionalmente uma instância autenticada do aplicativo Firebase ( firebaseApp ) e o usuário atualmente conectado ( currentUser ).