By the end of this Firebase JavaScript tutorial, you’re going to learn how to add Firebase SDK via NPM (node package manager) in your JavaScript project.

This is a great option when you want to test database queries to Firebase databases quickly without using a browser or any user interface.

Setting Up Firebase via NPM (Node Client) in 10 mins - Firebase JavaScript Tutorial - YouTube

Tap to unmute

Setting Up Firebase via NPM (Node Client) in 10 mins - Firebase JavaScript Tutorial SoftAuthor

SoftAuthor2.12K subscribers

1 Install Node.js & NPM

The first step is to install the Node JS and NPM package on the computer.

Go to nodejs.dev and you can see the Node LTS button in the middle of the page.

The current version is v18.15.2, you may see a later version depending on when you are reading this tutorial.

Click to download and you can see I’ve the .pkg file downloaded in my downloads folder.

Double-click it to install, which will open up the Node JS installer, then click continue…continue…and agree, click install which may ask you for the admin password.

Once I entered the password, it started the installation process.

Once it’s done, it shows “The installation was completed successfully” and then hit close.

Then it asks me what to do with the installer, because I’ve installed Node and I no longer need the installer, I’m going to move it to the Trash folder.

The good news is that when you install Node JS, the NPM (node package manager) is also installed successfully.

Now I’m going to quickly test it to make sure both Node and NPM have been installed properly.

To check that, go to Finder in MAC → Application → Utilities → Terminal

Then type node -v which gives the version I’ve currently installed.

To check the NPM version, you’ve guessed it right… type npm -v.

At this stage, I’ve successfully installed Node & NPM on my computer.

2 Create A Project Folder

The second step is to create a project folder on my desktop and I’m going to call it firebase-npm-javascript.

Then go to Visual Studio Code Editor and choose File → Open Folder and select the folder

3 Install Firebase via NPM Package

The third step is to install the firebase NPM package to the JavaScript project.

To install it, I’ll have to use a Terminal or command prompt application. Luckily Visual Studio Code has an in-built terminal/command prompt.

To open up the terminal window inside the Visual Studio Code Editor, go to the menu bar at the top and choose Terminal → New Terminal which will open up the terminal window at the bottom.

It also takes me straight to the project folder as you can see here…

Now all I have to do is type the npm install firebase command to install the Firebase NPM package to the project.

Once it’s done, you can see two files called package.json and package-lock.json as well as a folder called node_modules.

You most likely won’t be touching anything inside the node_modules folder or the package-lock.json file.

But one thing worth pointing out here is that I can check the version of the Firebase module that I’ve just installed inside package.json.

In my case version 9.17.2 at the time of this recording.

4 Get Firebase SDK Code Snippet

The fourth step is to connect my javascript app to one of the Firebase projects from the Firebase Dashboard.

To do that, I’ll need to get a Firebase SDK code snippet from the Firebase Dashboard that I want to connect to.

So go to the firebase dashboard and project overview → project settings and scroll down. Under the SDK setup and configuration title…make sure npm is selected.

As you know I’ve already installed Firebase using the first line of command.

Now all I have to do is just copy the second part of the code snippet.

Come back to the JavaScript project…and create a file called index.js and a Firebase SDK code snippet inside it.

5 Run The JavaScript Project

The fifth step is to run the JavaScript project from the Terminal window to test if Firebase is working properly.

In order to see the output when I run the JavaScript project, console.log the app object inside the index.js file.

Then, inside the terminal, type the node index.js command to run the JavaScript project.

And you can see I’ve got an error: which says:

Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.

What that means is, in order to use the import statement of the Firebase SDK code snippet inside the index.js file, I need to add a property called type=”module” inside package.json file.

So go to the package.json file. Right inside the first curly braces, add “type”:”module”,

Run the index.js file inside the terminal by using the node index.js command and you can see the Firebase app object console logged in the terminal window.

6 Access A Specific Firebase Product

Firebase 9 is a modular-based approach, unlike its previous version, so you only import or include the Firebase products that you intend to use which makes the app not only lighter but also faster.

Let’s say I want to connect the Firebase Cloud Firestore database to my project.

The first step is to import Cloud Firestore inside my project in order to use it

Go to Firebase Libraries page, In there you can see all the Firebase services available for the web

Click on Cloud Firestore for web

Go to the Initialize Cloud Firestore section and make sure that you’re inside the Firebase version 9 tab then.

Copy the import statement for Firestore and paste it at the top inside index.js file

The second line of code that we need is a reference to the Cloud Firestore database.

Copy the last line from the Firebase website and paste it inside index.js, right below the app object at the bottom.

Change the app to db inside console.log

Run the app again so inside the terminal… node index.js

And you can see the firebase cloud firestore database object that we can create queries on.

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

6 years ago
1 comment

Build a simple MVC ( Model-View-Controller) pattern CRUD Web App …

5 years ago
2 comments

Learn how to get up and running with the VueJS 3 project from scratch with …

5 years ago
3 comments

Add an image as a background of an HTML element then resizing and …

5 years ago
8 comments

Learn how to create reusable and scalable form validation for Signup and login …

4 years ago
1 comment

In this short Firebase tutorial, you're going to see a side by side comparison of …

4 years ago
1 comment

If you want to learn how to fix the CORS issue permanently, no matter …

4 years ago
2 comments

Learn how to add document data to Firebase version 9 Firestore database using …

4 years ago
5 comments

Learn how to create a custom pop up modal window absolutely from …

❯

tempest.services.disqus.com

tempest.services.disqus.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Start the discussion…

Comment

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
Contact me or enable others to contact me by email with offers for goods or services
Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

Favorite this discussion
Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Best
- Newest
- Oldest

Be the first to comment.

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Twitter Widget Iframe

Firebase Version 9 Tutorial (Modular)

Firebase Version 8 Tutorial (Namespaced)

1 Install Node.js & NPM

2 Create A Project Folder

3 Install Firebase via NPM Package

4 Get Firebase SDK Code Snippet

5 Run The JavaScript Project

6 Access A Specific Firebase Product

tempest.services.disqus.com is blocked

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Discussion Favorited!

live.rezync.com is blocked

pippio.com is blocked