This quickstart sample application demonstrates how to use the Firebase JavaScript SDK and the Firebase Realtime Database to build and deploy a simple social blogging app for the web.
The Firebase CLI requires Node.js and npm (the Node Package Manager).
-
Install Node.js for your computer's operating system. Installing Node.js automatically installs npm.
- For macOS/Linux, use nvm (the Node Version Manager)
- For Windows, use nvm-windows.
Note: The Firebase CLI requires Node.js v6.0.0 or later. Some Firebase services might require specific versions of Node.js, so check each Firebase service's getting started page for any specific Node.js requirements.
-
Install the Firebase CLI using npm by running the following command:
$ npm install -g firebase-tools
This command installs the globally available
firebasecommand. To update to the latest version of the Firebase CLI, re-run the samenpm installcommand.
-
To get the sample code from GitHub, use the
git clonecommand to get a local copy of the remote repository. To clone the sample code, run the following command:$ git clone https://github.com/chrisoung/web-database-quickstart
-
Create a Firebase Project in the Firebase console.
-
Add the Firebase SDKs and initialize Firebase.
- Enable Firebase Realtime Database.
- Enable Firebase Authentication.
-
To add Firebase SDKs (Firebase Realtime Database and Authentication) to your web app, select the SDKs as scripts to the bottom of your
<body>tag. For more information about the supported Firebase SDKs, see Additional Firebase JS SDKs.<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="/__/firebase/5.5.7/firebase-app.js"></script> <script src="/__/firebase/5.5.7/firebase-auth.js"></script> <script src="/__/firebase/5.5.7/firebase-database.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#reserved-urls --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> -
Initialize Firebase in your web app
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
-
On the command line, navigate to your project's root directory; then, run the following command to login to Firebase:
$ firebase login
This command connects your local machine to Firebase and grants you access to your Firebase projects.
-
Initialize your Firebase project. Run the following command from the root of your local app directory:
$ firebase init
This initialization command does all of the following:
- Links your local app directory with Firebase.
- Generates a firebase.json file (a required file for Firebase Hosting).
- Prompts you to specify a public root directory which contains your public static files (HTML, CSS, JS, etc.).
The default name for the directory that Firebase looks for is "public". You can also set the public directory later by directly modifying your firebase.json file.
-
Next, run the
use --addcommand to select a Firebase project:$ firebase use --add
-
To run a sample app locally, use the following command to serve over a local port number:
$ firebase serve --only hosting
© Chris Oung, 2018. Apache 2.0 License