Zintegruj inne frameworki z Express.js

Dzięki dodatkowej konfiguracji można wykorzystać podstawową funkcjonalność CLI obsługującą platformę, aby rozszerzyć obsługę integracji na platformy inne niż Angular i Next.js.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, przejrzyj następujące wymagania i opcje:

• Firebase CLI w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs CLI przy użyciu preferowanej metody.
• Opcjonalnie: włączone rozliczenia w projekcie Firebase (wymagane, jeśli planujesz korzystać z SSR)

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase dla swojego projektu frameworkowego. Użyj interfejsu wiersza polecenia Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Zainicjuj nowy projekt

1. W interfejsie CLI Firebase włącz podgląd frameworków internetowych:

   firebase experiments:enable webframeworks

2. Uruchom polecenie inicjowania z interfejsu CLI, a następnie postępuj zgodnie z instrukcjami:

   firebase init hosting

3. Odpowiedz „tak” na pytanie „Czy chcesz używać platformy internetowej? (eksperymentalnie)”

4. Wybierz katalog źródłowy hostingu; może to być istniejąca aplikacja internetowa.

5. Jeśli pojawi się monit, wybierz Express.js / niestandardowy

Zainicjuj istniejący projekt

Zmień konfigurację hostingu w firebase.json , aby mieć opcję source , a nie opcję public . Na przykład:

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

Podawaj treści statyczne

Przed wdrożeniem zawartości statycznej należy skonfigurować aplikację.

Skonfiguruj

Aby wiedzieć, jak wdrożyć aplikację, interfejs CLI Firebase musi zarówno móc zbudować aplikację, jak i wiedzieć, gdzie Twoje narzędzia umieszczają zasoby przeznaczone do hostingu. Osiąga się to za pomocą skryptu kompilacji npm i dyrektywy katalogów CJS w package.json .

Biorąc pod uwagę następujący pakiet.json:

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

Interfejs wiersza polecenia Firebase wywołuje tylko skrypt kompilacji, więc musisz upewnić się, że skrypt kompilacji jest wyczerpujący.

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

Jeśli Twój framework nie obsługuje wstępnego renderowania, rozważ użycie narzędzia takiego jak Rendertron . Rendertron umożliwi Ci wysyłanie bezgłowych żądań Chrome do lokalnej instancji Twojej aplikacji, dzięki czemu będziesz mógł zapisać wynikowy kod HTML do wyświetlenia na Hostingu.

Wreszcie, różne frameworki i narzędzia do kompilacji przechowują swoje artefakty w różnych miejscach. Użyj directories.serve , aby poinformować CLI, gdzie skrypt kompilacji generuje wynikowe artefakty:

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

Wdrożyć

Po skonfigurowaniu aplikacji możesz udostępniać zawartość statyczną za pomocą standardowego polecenia wdrażania:

firebase deploy

Obsługuj zawartość dynamiczną

Aby udostępnić aplikację Express w Cloud Functions dla Firebase, upewnij się, że aplikacja Express (lub moduł obsługi adresów URL w stylu ekspresowym) jest wyeksportowany w taki sposób, aby Firebase mogła ją znaleźć po spakowaniu biblioteki npm.

Aby to osiągnąć, upewnij się, że dyrektywa files zawiera wszystko, co jest potrzebne serwerowi, i że główny punkt wejścia jest poprawnie skonfigurowany w 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",
    ...
}

Wyeksportuj swoją aplikację ekspresową z funkcji o nazwie app :

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

Lub jeśli wolisz wyeksportować moduł obsługi adresów URL w stylu ekspresowym, nazwij go handle :

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

Wdrożyć

firebase deploy

Spowoduje to wdrożenie zawartości statycznej w Firebase Hosting i umożliwi Firebase powrót do aplikacji Express hostowanej w Cloud Functions for Firebase.

Opcjonalnie: zintegruj z uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase obsługujące platformę internetową automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Aby uzyskać dostęp do kontekstu uwierzytelniania, obiekt Express res.locals opcjonalnie zawiera uwierzytelnioną instancję aplikacji Firebase ( firebaseApp ) i aktualnie zalogowanego użytkownika ( currentUser ).