DEV Community

Cover image for Firebase Project Setup: Your Complete Getting Started Guide 🔥
This is Learning profile image Domenico Tenace
Domenico Tenace for This is Learning

Posted on

Firebase Project Setup: Your Complete Getting Started Guide 🔥

#firebase #google #tutorial #beginners

Overview

Hi everyone 👋

In this article I will explain how to create and set up a Firebase project from scratch, walking through each step to get you up and running with Google's powerful backend platform. Whether you're building a web app, mobile app, or just want to explore Firebase's capabilities, this guide will give you a solid foundation.

Let's start 🤙🏼​

What is Firebase?

Before diving into the setup, let's quickly understand what Firebase is:

Firebase is Google's Backend-as-a-Service (BaaS) platform that provides developers with a variety of tools and services to build, improve, and grow their applications. It handles the backend complexity so you can focus on creating amazing user experiences.

Some of the key features include:

  • Real-time database and Cloud Firestore
  • Authentication
  • Cloud storage
  • Hosting
  • Cloud functions
  • Analytics

Prerequisites

Before we start, make sure you have:

  • A Google account (Gmail account works perfectly)
  • Node.js installed on your machine
  • Basic knowledge of JavaScript/web development
  • Your favorite code editor ready to go (VS Code for example 🥇)

Step 1: Create Your Firebase Project

First things first - we need to create a new Firebase project in the Firebase Console.

  1. Go to Firebase Console
  2. Click on "Create a project" or "Add project"
  3. Enter your project name
  4. Choose whether to enable Google Analytics (optional)
  5. If you enabled Analytics, select or create a Google Analytics account
  6. Click "Create project"

Wait a few moments while Firebase sets up your project.
Grab a coffee ☕, this won't take long!

Step 2: Set Up Your Web App

Now that your Firebase project is ready, let's add a web app to it:

  1. In your Firebase project dashboard, click on the web icon </>
  2. Register your app by entering an app nickname
  3. Choose whether to set up Firebase Hosting (we'll skip this for now)
  4. Click "Register app"

Firebase will generate a configuration object that looks something like this:

const firebaseConfig = { apiKey: "your-api-key", authDomain: "your-project.firebaseapp.com", projectId: "your-project-id", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "your-app-id" };
Enter fullscreen mode Exit fullscreen mode

Important: Keep this configuration safe! You'll need it to connect your app to Firebase.

Step 3: Install Firebase SDK

Time to get Firebase into your project! There are two main ways to do this:

Option 1: Using npm (Recommended)

If you're using a modern JavaScript framework or build tool:

npm install firebase
Enter fullscreen mode Exit fullscreen mode

Option 2: Using CDN

If you prefer to include Firebase directly in your HTML:

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js"></script>
Enter fullscreen mode Exit fullscreen mode

For this guide, we'll use the npm approach as it's more flexible and maintainable.

Step 4: Initialize Firebase in Your App

Create a new file called firebase.js (or firebase.config.js) in your project root:

// Import the functions you need from the SDKs you need import { initializeApp } from 'firebase/app'; import { getAnalytics } from 'firebase/analytics'; // Your web app's Firebase configuration const firebaseConfig = { apiKey: "your-api-key", authDomain: "your-project.firebaseapp.com", projectId: "your-project-id", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "your-app-id" }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Analytics (optional) const analytics = getAnalytics(app); export { app, analytics };
Enter fullscreen mode Exit fullscreen mode

Step 5: Understanding Firebase Console

Now that your project is set up, let's explore the Firebase Console:

Project Overview

This is your main dashboard where you can see:

  • Project settings
  • App registrations
  • Usage statistics
  • Quick access to all Firebase services

Project Settings

Here you can:

  • Manage your apps
  • View and regenerate API keys
  • Set up custom domains
  • Configure integrations

Usage and Billing

Monitor your Firebase usage and set up billing if needed for production apps.

Step 6: Environment Variables (Security Best Practice)

For production apps, never expose your Firebase config directly in your code. Use environment variables:

Create a .env file:

VITE_FIREBASE_API_KEY=your-api-key VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your-project-id VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=123456789 VITE_FIREBASE_APP_ID=your-app-id
Enter fullscreen mode Exit fullscreen mode

Then update your firebase.js:

import { initializeApp } from 'firebase/app'; const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET, messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID, appId: import.meta.env.VITE_FIREBASE_APP_ID }; const app = initializeApp(firebaseConfig); export { app };
Enter fullscreen mode Exit fullscreen mode

Troubleshooting Common Issues

"Firebase app not initialized" Error

Make sure you're calling initializeApp() before using any Firebase services.

CORS Issues

If you're getting CORS errors, make sure you're serving your files through a local server, not opening them directly in the browser.

API Key Issues

Double-check that you've copied the configuration correctly from the Firebase Console.

Next Steps

Congratulations! 🎉
You now have a basic Firebase project set up and ready to go. Here's what you can explore next:

  • Firebase Hosting: Deploy your app to Firebase's CDN
  • Cloud Firestore: Add a NoSQL database to your app
  • Firebase Auth: Implement user authentication
  • Cloud Storage: Store and serve user-generated content
  • Cloud Functions: Add server-side logic

Conclusion

Setting up a Firebase project is the first step in building modern, scalable web applications. The platform provides an incredible foundation that grows with your needs, from simple static sites to complex real-time applications.

The beauty of Firebase lies in its simplicity - you can start small and gradually add more features as your project grows. Whether you're building a personal project or the next big startup, Firebase has got you covered.

Happy coding!✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

dvalin99 image

Domenico Tenace

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Buy Me A Coffee

Top comments (0)