Mengintegrasikan framework lain dengan Express.js

Dengan beberapa konfigurasi tambahan, Anda dapat mem-build fungsi CLI dasar berbasis framework untuk memperluas dukungan integrasi ke framework selain Angular dan Next.js.

Sebelum memulai

Sebelum Anda mulai men-deploy aplikasi Next.js ke Firebase, tinjau persyaratan dan opsi berikut:

• Firebase CLI versi 11.14.2 atau yang lebih baru. Pastikan untuk menginstal CLI menggunakan metode pilihan Anda.
• Opsional: Penagihan diaktifkan di project Firebase Anda (wajib jika Anda berencana menggunakan SSR)

Menginisialisasi Firebase

Untuk memulai, lakukan inisialisasi Firebase untuk project framework Anda. Gunakan Firebase CLI untuk project baru, atau ubah firebase.json untuk project yang sudah ada.

Menginisialisasi project baru

1. Di Firebase CLI, aktifkan pratinjau framework web:

   firebase experiments:enable webframeworks

2. Jalankan perintah inisialisasi dari CLI, lalu ikuti petunjuknya:

   firebase init hosting

3. Pilih direktori sumber hosting Anda; ini bisa berupa aplikasi web yang sudah ada.
4. Pilih "Hosting web dinamis dengan framework web".
5. Pilih Express.js / custom

Menginisialisasi project yang sudah ada

Ubah konfigurasi hosting Anda di firebase.json agar memiliki opsi source, bukan opsi public. Contoh:

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

Menayangkan konten statis

Sebelum men-deploy konten statis, Anda harus mengonfigurasi aplikasi.

Mengonfigurasi

Untuk mengetahui cara men-deploy aplikasi, Firebase CLI harus mampu mem-build aplikasi Anda dan mengetahui tempat alat Anda menempatkan aset yang ditetapkan untuk Hosting. Hal ini dilakukan dengan skrip build npm dan perintah direktori CJS di package.json.

Dengan package.json berikut:

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

Firebase CLI hanya memanggil skrip build, sehingga Anda harus memastikan bahwa skrip build sudah lengkap.

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

Jika framework Anda tidak menyediakan dukungan siap pakai untuk pra-render, pertimbangkan untuk menggunakan alat seperti Rendertron. Rendertron akan memungkinkan Anda membuat permintaan Chrome headless terhadap instance lokal aplikasi, sehingga Anda dapat menyimpan HTML yang dihasilkan untuk ditayangkan di Hosting.

Terakhir, framework dan alat build yang berbeda menyimpan artefaknya di tempat yang berbeda. Gunakan directories.serve untuk memberi tahu CLI tempat skrip build Anda menghasilkan artefak yang didapatkan:

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

Men-deploy

Setelah mengonfigurasi aplikasi, Anda dapat menayangkan konten statis dengan perintah deployment standar:

firebase deploy

Menayangkan Konten Dinamis

Untuk menayangkan aplikasi Express di Cloud Functions for Firebase, pastikan aplikasi Express (atau pengendali URL bergaya Express) diekspor sedemikian rupa sehingga Firebase dapat menemukannya setelah library Anda penuh dengan npm.

Untuk melakukannya, pastikan perintah files Anda menyertakan semua yang diperlukan untuk server, dan titik entri utama disiapkan dengan benar di package.json:

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

Ekspor aplikasi Express Anda dari fungsi bernama app:

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

Atau jika Anda lebih suka mengekspor pengendali URL bergaya Express, beri nama handle:

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

Men-deploy

firebase deploy

Tindakan ini akan men-deploy konten statis Anda ke Firebase Hosting dan memungkinkan Firebase kembali ke aplikasi Express Anda yang dihosting di Cloud Functions for Firebase.

Opsional: mengintegrasikan dengan Firebase Authentication

Alat deployment Firebase berbasis framework web akan otomatis menyinkronkan status klien dan server menggunakan cookie. Untuk mengakses konteks autentikasi, objek res.locals Express secara opsional berisi instance Aplikasi Firebase yang diautentikasi (firebaseApp) dan Pengguna yang sedang login (currentUser).