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

Biraz ek yapılandırmayla, temel çerçeveye duyarlı CLI işlevini geliştirerek entegrasyon desteğini Angular ve Next.js dışındaki çerçeveleri de kapsayacak şekilde genişletebilirsiniz.

Başlamadan önce

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

• Firebase CLI 12.1.0 veya sonraki sürümler. Tercih ettiğiniz yöntemi kullanarak KSA'yı 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 çerçeve projenizde Firebase'i başlatın. Yeni bir proje için Firebase CLI'ı kullanın veya mevcut bir proje için firebase.json ayarını değiştirin.

Yeni bir projeyi başlatma

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

   firebase experiments:enable webframeworks

2. KSA'dan başlatma komutunu çalıştırın, ardından istemleri 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 seçeneğini belirleyin

Mevcut projeyi başlatma

firebase.json ürünündeki barındırma yapılandırmanızı public seçeneği yerine source seçeneğine sahip olacak şekilde değiştirin. Örnek:

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

Statik içerik yayınlama

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ı öğrenmek için Firebase CLI'ın, hem uygulamanızı derleyebilmesi hem de araçlarınızın, Hosting'e yönelik öğeleri nereye yerleştirdiğini bilebilmesi gerekir. Bu, package.json içindeki 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 CLI, 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 kullanıma hazır ön işlemeyi desteklemiyorsa Rendertron gibi bir araç kullanabilirsiniz. Rendertron, uygulamanızın yerel bir örneğine karşı gözetimsiz Chrome istekleri yapmanıza olanak tanır. Böylece, oluşturulan HTML'yi Hosting'de sunulmak üzere kaydedebilirsiniz.

Son olarak, farklı çerçeveler ve derleme araçları eserlerini farklı yerlerde depolar. CLI'a, derleme komut dosyanızın oluşturulan yapıları nerede çıkardığını bildirmek için directories.serve komutunu 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ğıtma

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

firebase deploy

Dinamik İçerik Sunma

Express uygulamanızı Firebase için Cloud Functions'da sunmak üzere, Express uygulamanızın (veya ekspres stilde URL işleyicinin), kitaplığınız npm paketlendikten sonra Firebase'in 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 ü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",
    ...
}

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

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

Ekspres stilde bir URL işleyiciyi dışa aktarmak isterseniz bunu handle olarak adlandırın:

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

Dağıtma

firebase deploy

Bu işlem, statik içeriğinizi Firebase Hosting'e dağıtır ve Firebase'in Cloud Functions for Firebase'de barındırılan Express uygulamanıza dönmesini sağlar.

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

Web çerçevesine duyarlı 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 uygulaması örneği (firebaseApp) ve oturumu açık olan kullanıcıyı (currentUser) içerir.