Diğer çerçeveleri Express.js ile entegre edin, Diğer çerçeveleri Express.js ile entegre edin, Diğer çerçeveleri Express.js ile entegre edin

Bazı ek yapılandırmalarla, entegrasyon desteğini Angular ve Next.js dışındaki çerçevelere genişletmek için temel çerçeve uyumlu CLI işlevselliğini geliştirebilirsiniz.

Sen başlamadan önce

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

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

Firebase'i başlat

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

Yeni bir proje başlatın

Firebase CLI'de web çerçeveleri önizlemesini etkinleştirin:
```
firebase experiments:enable webframeworks
```
CLI'den başlatma komutunu çalıştırın ve ardından istemleri izleyin:
```
firebase init hosting
```
"Bir web çerçevesi kullanmak istiyor musunuz? (deneysel)" sorusuna evet yanıtı verin.
Barındırma kaynağı dizininizi seçin; bu mevcut bir web uygulaması olabilir.
İstenirse Express.js / özel'i seçin

Mevcut bir projeyi başlat

firebase.json barındırma yapılandırmanızı, public bir seçenek yerine bir source seçeneğine sahip olacak ş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 CLI'nin hem uygulamanızı oluşturabilmesi hem de araçlarınızın Barındırma için kullanılacak varlıkları nereye yerleştirdiğini bilmesi gerekir. Bu, package.json dosyasındaki npm build betiği ve CJS dizinleri yönergesi ile gerçekleştirilir.

Aşağıdaki package.json göz önüne alındığında:

{
    "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; dolayısıyla 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ç kullanmayı düşünün. Rendertron, uygulamanızın yerel bir örneğine karşı denetimsiz Chrome istekleri yapmanıza olanak tanır, böylece elde edilen HTML'yi Hosting'de sunulmak üzere kaydedebilirsiniz.

Son olarak, farklı çerçeveler ve derleme araçları, yapıtlarını farklı yerlerde saklar. Derleme betiğinizin ortaya çıkan yapıtları nerede çıkardığını CLI'ye 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ğıtmak

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

firebase deploy

Dinamik İçerik Sunma

Express uygulamanızı Cloud Functions for Firebase'de sunmak 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 dosyasında 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;
}

Veya ekspres stilde bir URL işleyicisini dışa aktarmayı tercih ederseniz, bunu handle adlandırın:

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

Dağıtmak

firebase deploy

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

İsteğe bağlı: Firebase Authentication ile entegre edin

Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize halde tutacaktır. 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ğini ( firebaseApp ) ve şu anda oturum açmış olan Kullanıcıyı ( currentUser ) içerir.