Cara alternatif untuk menambahkan Firebase ke project JavaScript Anda
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Untuk sebagian besar aplikasi web Firebase, sebaiknya gunakan
SDK melalui npm.
Namun, bagi pengguna dengan persyaratan khusus, Firebase menyediakan
cara alternatif untuk menambahkan SDK.
Halaman ini memberikan petunjuk penyiapan mendetail untuk metode alternatif tersebut:
Anda dapat mengonfigurasi impor parsial FirebaseJavaScript SDK dan hanya memuat
Produk Firebase yang Anda butuhkan. Firebase menyimpan setiap library
FirebaseJavaScript SDK di CDN (jaringan penayangan konten) global kami.
Untuk menyertakan hanya produk Firebase tertentu (misalnya, Authentication dan Cloud Firestore), tambahkan skrip berikut ke bagian bawah tag <body>, tetapi sebelum Anda menggunakan layanan Firebase apa pun:
<body>
<!--InsertthisscriptatthebottomoftheHTML,butbeforeyouuseanyFirebaseservices-->
<scripttype="module">
import{initializeApp}from'https://www.gstatic.com/firebasejs/12.1.0/firebase-app.js'// If you enabled Analytics in your project, add the Firebase SDK for Google Analyticsimport{getAnalytics}from'https://www.gstatic.com/firebasejs/12.1.0/firebase-analytics.js'// Add Firebase products that you want to useimport{getAuth}from'https://www.gstatic.com/firebasejs/12.1.0/firebase-auth.js'import{getFirestore}from'https://www.gstatic.com/firebasejs/12.1.0/firebase-firestore.js'</script>
</body>
Tambahkan objek konfigurasi Firebase, lalu inisialisasi Firebase di aplikasi Anda:
<body>
<scripttype="module">
// ...// TODO: Replace the following with your app's Firebase configurationconstfirebaseConfig={// ...};// Initialize Firebaseconstapp=initializeApp(firebaseConfig);</script>
</body>
Aplikasi Node.js
Menginstal FirebaseJavaScript SDK:
Jika Anda belum memiliki file package.json, buat dengan
menjalankan perintah berikut dari root project
JavaScript Anda:
npm init
Instal paket npm firebase dan simpan ke file
package.json Anda dengan menjalankan:
npm install --save firebase@12.1.0
Pilih salah satu opsi berikut untuk menggunakan modul Firebase di aplikasi Anda:
Anda dapat menerapkan require pada modul dari file JavaScript mana pun
// Firebase App (the core Firebase SDK) is always required and// must be listed before other Firebase SDKsvarfirebase=require("firebase/app");// Add the Firebase products that you want to userequire("firebase/auth");require("firebase/firestore");
Sertakan seluruh FirebaseJavaScript SDK, bukan tiap-tiap SDK secara terpisah (tidak disarankan untuk aplikasi produksi)
varfirebase=require("firebase");
Anda dapat menggunakan sintaksis ESM ke modul import
// Firebase App (the core Firebase SDK) is always required and// must be listed before other Firebase SDKsimportfirebasefrom"firebase/app";// Add the Firebase services that you want to useimport"firebase/auth";import"firebase/firestore";
Sertakan seluruh FirebaseJavaScript SDK, bukan tiap-tiap SDK secara terpisah (tidak disarankan untuk aplikasi produksi)
importfirebasefrom"firebase";
Tambahkan objek konfigurasi Firebase, lalu inisialisasi Firebase di aplikasi Anda:
import{initializeApp}from'firebase/app';// TODO: Replace the following with your app's Firebase configurationconstfirebaseConfig={//...};// Initialize Firebaseconstapp=initializeApp(firebaseConfig);
[null,null,["Terakhir diperbarui pada 2025-08-14 UTC."],[],[],null,["\u003cbr /\u003e\n\nFor most Firebase web apps we strongly recommend using\n[the SDK via npm](/docs/web/setup).\nHowever, for users with special requirements, Firebase provides alternative\n[ways to add the SDK](/docs/web/learn-more#ways-to-add-web-sdks).\nThis page provides detailed setup instructions for these alternative methods:\n\n- CDN (content delivery network)\n- npm for Node.js apps\n\nUsing these methods, you can add any of the\n[available libraries](/docs/web/learn-more#available-libraries)\nto your app. \n\nFrom the CDN\n\nYou can configure partial import of the Firebase JavaScript SDK and only load the\nFirebase products that you need. Firebase stores each library of the\nFirebase JavaScript SDK on our global CDN (content delivery network).\n\n1. To include only [specific Firebase products](/docs/web/learn-more#libraries-cdn)\n (for example, Authentication and Cloud Firestore), add the following\n script to the bottom of your `\u003cbody\u003e` tag, but before you use any\n Firebase services:\n\n ```javascript\n \u003cbody\u003e\n \u003c!-- Insert this script at the bottom of the HTML, but before you use any Firebase services --\u003e\n \u003cscript type=\"module\"\u003e\n import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.1.0/firebase-app.js'\n\n // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics\n import { getAnalytics } from 'https://www.gstatic.com/firebasejs/12.1.0/firebase-analytics.js'\n\n // Add Firebase products that you want to use\n import { getAuth } from 'https://www.gstatic.com/firebasejs/12.1.0/firebase-auth.js'\n import { getFirestore } from 'https://www.gstatic.com/firebasejs/12.1.0/firebase-firestore.js'\n \u003c/script\u003e\n \u003c/body\u003e\n ```\n | You can optionally [delay loading of Firebase SDKs](/docs/web/learn-more#delay-sdks-cdn) until the entire page has loaded.\n2. Add your Firebase configuration object, and then initialize Firebase in\n your app:\n\n ```javascript\n \u003cbody\u003e\n \u003cscript type=\"module\"\u003e\n // ...\n\n // TODO: Replace the following with your app's /docs/web/learn-more#config-object\n const firebaseConfig = {\n // ...\n };\n\n // Initialize Firebase\n const app = initializeApp(firebaseConfig);\n \u003c/script\u003e\n \u003c/body\u003e\n ```\n\nNode.js apps**Caution:** The following instructions are for using the Firebase JavaScript SDK as a client for end-user access (for example, in a Node.js desktop or IoT application). To set up administrative access from privileged environments (such as servers), [set up the Firebase Admin SDK](/docs/admin/setup) instead.\n\n1. Install the Firebase JavaScript SDK:\n\n 1. If you don't already have a `package.json` file, create one by\n running the following command from the root of your JavaScript\n project:\n\n ```\n npm init\n ```\n 2. Install the `firebase` npm package and save it to your\n `package.json` file by running:\n\n ```\n npm install --save firebase@12.1.0\n ```\n2. Use one of the following options to use the Firebase module in your app:\n\n - **You can `require` modules from any JavaScript file**\n\n To include only [specific Firebase products](/docs/web/learn-more#libraries-nodejs)\n (like Authentication and Cloud Firestore): \n\n // Firebase App (the core Firebase SDK) is always required and\n // must be listed before other Firebase SDKs\n var firebase = require(\"firebase/app\");\n\n // Add the Firebase products that you want to use\n require(\"firebase/auth\");\n require(\"firebase/firestore\");\n\n Include the entire Firebase JavaScript SDK, rather\n than individual SDKs\n *(not recommended for production apps)*\n | Loading the entire SDK is not efficient for production web apps. \n Use this option for development purposes only. \n\n ```javascript\n var firebase = require(\"firebase\");\n ```\n\n \u003cbr /\u003e\n\n - **You can use ESM syntax to `import` modules**\n\n To include only [specific Firebase products](/docs/web/learn-more#libraries-nodejs)\n (like Authentication and Cloud Firestore): \n\n // Firebase App (the core Firebase SDK) is always required and\n // must be listed before other Firebase SDKs\n import firebase from \"firebase/app\";\n\n // Add the Firebase services that you want to use\n import \"firebase/auth\";\n import \"firebase/firestore\";\n\n Include the entire Firebase JavaScript SDK, rather\n than individual SDKs\n *(not recommended for production apps)*\n | Loading the entire SDK is not efficient for production web apps. \n Use this option for development purposes only. \n\n ```python\n import firebase from \"firebase\";\n ```\n3. Add your Firebase configuration object, and then initialize Firebase in\n your app:\n\n ```javascript\n import { initializeApp } from 'firebase/app';\n\n // TODO: Replace the following with your app's /docs/web/learn-more#config-object\n const firebaseConfig = {\n //...\n };\n\n // Initialize Firebase\n const app = initializeApp(firebaseConfig);\n ```"]]