Diğer çerçeveleri Express.js ile entegre etme

Bazı ek yapılandırmalarla, entegrasyon desteğini Angular ve Next.js dışındaki çerçevelere genişletmek için temel çerçeveye duyarlı CLI işlevini temel alabilirsiniz.

Başlamadan önce

Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki koşulları ve seçenekleri inceleyin:

  • Firebase 12.1.0 veya daha yeni bir KSA sürümü. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.
  • İsteğe bağlı: Firebase projenizde faturalandırma etkin (SSR kullanmayı planlıyorsanız gereklidir)

Firebase'i başlatma

Başlamak için Firebase'i çerçeve projeniz için ilk olarak hazırlayın. Yeni bir proje için Firebase CLI'yi kullanın veya mevcut bir proje için firebase.json dosyasını değiştirin.

Yeni projeyi başlatma

  1. Firebase CLI'de web çerçeveleri önizlemesini etkinleştirin: 
    firebase experiments:enable webframeworks

  2. KSA'dan başlatma komutunu çalıştırın ve ardından talimatları uygulayın: 

    firebase init hosting

  3. "Web çerçevesi kullanmak ister misiniz? (deneysel)"

  4. Barındırma kaynak dizininizi seçin. Bu, mevcut bir web uygulaması olabilir.

  5. İstenirse Express.js / özel'i seçin.

Mevcut bir projeyi başlatma

firebase.json'teki barındırma yapılandırmanızı public yerine source seçeneği olacak şekilde değiştirin. Örneğin:

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

Statik içerik sunma

Statik içerik dağıtmadan önce uygulamanızı yapılandırmanız gerekir.

Yapılandır

Uygulamanızı nasıl dağıtacağınızı bilmek için Firebase KSA'nın hem uygulamanızı derleyebilmesi hem de araçlarınızın Hosting için amaçlanan öğeleri nereye yerleştirdiğini bilmesi gerekir. Bu işlem, package.json içindeki npm derleme komut dosyası ve CJS dizinleri yönergesiyle gerçekleştirilir.

Aşağıdaki package.json dosyasını ele alalım:

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

Firebase CLI yalnızca derleme komut dosyanızı çağırır. Bu nedenle, derleme komut dosyanızı kapsamlı hale getirmeniz gerekir.

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

Çerçeveniz hazır olarak ön oluşturmayı desteklemiyorsa Rendertron gibi bir araç kullanmayı düşünebilirsiniz. Rendertron, uygulamanızın yerel bir örneğine gözetimsiz Chrome istekleri göndermenize olanak tanır. Böylece, elde edilen HTML'yi Hosting'te yayınlanacak şekilde kaydedebilirsiniz.

Son olarak, farklı çerçeveler ve derleme araçları yapılarını farklı yerlerde depolar. Derleme komut dosyanızın oluşturulan yapıları nereye çıkardığını KSA'ya bildirmek için directories.serve öğesini kullanın:

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

Dağıt

Uygulamanızı yapılandırdıktan sonra standart dağıtım komutuyla statik içerik sunabilirsiniz:

firebase deploy

Dinamik İçerik Yayınlama

Express uygulamanızı Cloud Functions for Firebase üzerinde yayınlamak için Express uygulamanızın (veya ekspres stildeki URL işleyicinizin), kitaplığınız npm paketlendikten sonra Firebase'in bulabileceği şekilde dışa aktarıldığından emin olun.

Bunu başarmak için files yönergenizin sunucu için gereken her şeyi içerdiğinden ve ana giriş noktanızın package.json ürününde doğru şekilde ayarlandığından emin olun:

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

Express uygulamanızı app adlı bir işlevden dışa aktarın:

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

Dilerseniz hızlı stil URL işleyici dışa aktarmak için handle adını verin:

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

Dağıt

firebase deploy

Bu işlem, statik içeriğinizi Firebase Hosting'e dağıtır ve Firebase'in Cloud Functions for Firebase'te barındırılan Express uygulamanıza geri dönmesine olanak tanır.

İsteğe bağlı: Firebase Authentication ile entegrasyon

Web çerçevesi uyumlu Firebase dağıtım araçları, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. Kimlik doğrulama bağlamına erişmek için Express res.locals nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase uygulaması örneği (firebaseApp) ve oturumu açık olan kullanıcıyı (currentUser) içerir.