Integrar outros frameworks com o Express.js

Com uma configuração adicional, é possível criar com base na funcionalidade básica da CLI com reconhecimento do framework para estender o suporte à integração em frameworks que não sejam Angular e Next.js.

Antes de começar

Antes de começar a implantação do app Next.js no Firebase, confira os seguintes requisitos e opções:

  • CLI do Firebase versão 11.14.2 ou mais recente. Instale a CLI usando seu método preferido.
  • Opcional: ative o faturamento no seu projeto do Firebase (obrigatório se você planeja usar a SSR).

Inicializar o Firebase

Para começar, inicialize o Firebase para seu projeto de framework. Use a CLI do Firebase para um novo projeto ou modifique firebase.json para um projeto que já existe.

Inicializar um novo projeto

  1. Na CLI do Firebase, ative a visualização de frameworks da Web: 
    firebase experiments:enable webframeworks
  2. Execute o comando de inicialização da CLI e siga as instruções: 
    firebase init hosting
  3. Escolha o diretório de origem de hospedagem, que pode ser um app já usado.
  4. Escolha "Hospedagem na Web dinâmica com framework da Web".
  5. Escolha Express.js / personalizado

Inicializar um projeto que já existe

Altere a configuração de hospedagem em firebase.json para que haja uma opção source, em vez de uma opção public. Exemplo:

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

Disponibilizar conteúdo estático

Antes de implantar o conteúdo estático, configure seu aplicativo.

Configurar

Para saber como implantar o aplicativo, a CLI do Firebase precisa da capacidade de criar o app e saber onde as ferramentas colocam os recursos destinados ao Hosting. Isso é feito com o script de build do npm e a diretiva de diretórios CJS em package.json.

Considerando 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 o script de compilação. Portanto, é necessário garantir que ele esteja 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"
    },
    …
}

Caso o framework não seja compatível com a pré-renderização, use uma ferramenta como o Rendertron. Com ele, você poderá fazer solicitações headless do Chrome a uma instância local do app para que você possa salvar o HTML resultante para ser exibido no Hosting.

Por fim, frameworks e ferramentas de compilação diferentes armazenam os artefatos em locais diferentes. Use directories.serve para informar à CLI para onde o script de compilação está enviando 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 o app, é possível exibir conteúdo estático com o comando de implantação padrão:

firebase deploy

Disponibilizar conteúdo dinâmico

Para disponibilizar o app Express no Cloud Functions para Firebase, exporte o app Express (ou o gerenciador de URL no estilo do Express) de maneira que ele possa ser encontrado pelo Firebase depois que a biblioteca tiver sido empacotada pelo npm.

Para fazer isso, verifique se a diretiva files inclui tudo necessário para o servidor e se o ponto de entrada principal está 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 o app Express de uma função chamada app:

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

Ou, se preferir exportar um gerenciador de URLs de estilo do Express, nomeie-o como handle:

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

Implantar

firebase deploy

Isso implanta o conteúdo estático no Firebase Hosting e permite que o Firebase volte ao app Express hospedado no Cloud Functions para Firebase.

Opcional: integrar com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de framework da Web manterão automaticamente o estado do cliente e do servidor em sincronia usando cookies. Para acessar o contexto de autenticação, o objeto res.locals do Express pode conter uma instância autenticada do app do Firebase (firebaseApp) e o usuário conectado (currentUser).