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şlevselliğini kullanabilirsiniz.

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 CLI'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ı kutudan çıktığı haliyle desteklemiyorsa Rendertron gibi bir araç kullanmayı düşünebilirsiniz. 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) kitaplığınız npm ile 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 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.