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

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

Başlamadan önce

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

• Firebase KSA 12.1.0 veya sonraki sürümleri. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.
• İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirilmiş olmalıdır (SSR kullanmayı planlıyorsanız gereklidir).

Firebase'i başlatma

Başlamak için çerçeve projenizde Firebase'i başlatın. Yeni bir proje için Firebase CLI'yı kullanın veya mevcut bir proje için firebase.json'ı değiştirin.

Yeni bir projeyi başlatma

1. Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:

   firebase experiments:enable webframeworks

2. Başlatma komutunu CLI'dan çalıştırın ve istemleri uygulayın:

   firebase init hosting

3. "Web çerçevesi kullanmak istiyor musunuz?" sorusuna evet yanıtını verin. (deneysel)"

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

5. İstenirse Express.js/custom'ı (Express.js/özel) seçin.

Mevcut bir projeyi başlatma

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

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

Statik içerik sunma

Statik içeriği 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ı oluşturabilmesi hem de araçlarınızın Hosting için ayrılmış öğeleri nereye yerleştirdiğini bilmesi gerekir. Bu, package.json içinde npm derleme komut dosyası ve CJS dizinleri yönergesiyle gerçekleştirilir.

Aşağıdaki package.json dosyasını dikkate alın:

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

Firebase KSA yalnızca derleme komut dosyanızı çağırır. Bu nedenle, derleme komut dosyanızın kapsamlı olduğundan emin olmanız 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 önceden oluşturmayı desteklemiyorsa Rendertron gibi bir araç kullanabilirsiniz. Rendertron, uygulamanızın yerel bir örneğine karşı gözetimsiz Chrome istekleri göndermenize olanak tanır. Böylece, sonuçta elde edilen HTML'yi Hosting üzerinde yayınlanacak şekilde kaydedebilirsiniz.

Son olarak, farklı çerçeveler ve derleme araçları, yapılarını farklı yerlerde depolar. KSA'ya derleme komut dosyanızın sonuçlanan yapıları nereye çıkardığını bildirmek için directories.serve 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 yayınlayabilirsiniz:

firebase deploy

Dinamik İçerik Sunma

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

Bunu yapmak için files yönergenizin sunucu için gereken her şeyi içerdiğinden ve ana giriş noktanızın package.json içinde 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;
}

Alternatif olarak, hızlı stil URL işleyiciyi dışa aktarmak isterseniz handle olarak adlandırın:

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

Dağıt

firebase deploy

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

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

Web çerçevesiyle uyumlu Firebase dağıtım aracı, ç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 App örneği (firebaseApp) ve şu anda oturum açmış olan kullanıcıyı (currentUser) içerir.