Published on

Firebase Deployment Guide: 4 Steps to Launch Your App in 2026

Deploying a web application with Firebase Hosting allows you to get your project live on a secure, global content delivery network (CDN) in less than 10 minutes. By using a few simple commands in your terminal, you can host static files or dynamic web apps with a free SSL certificate (a security protocol that encrypts data) and a custom domain. Most beginners can complete their first deployment using the Firebase CLI (Command Line Interface) with just four primary steps: installation, initialization, building, and deploying.

Why should you choose Firebase for your first deployment?

Firebase Hosting is a managed service provided by Google that handles the infrastructure for you. This means you do not have to worry about setting up servers, managing security patches, or configuring complex networking rules. It automatically scales to handle traffic spikes and delivers your content from the nearest server to your user, making your site load faster.

For beginners, the most significant advantage is the free tier. You can host multiple projects without a credit card, provided you stay within the generous storage and bandwidth limits. It also integrates perfectly with other Google services like Authentication (logging users in) and Firestore (a flexible database).

What do you need before getting started?

Before you run your first command, ensure you have a few basic tools ready on your computer. Having these set up beforehand prevents errors during the deployment process.

  • A Google Account: You will need this to log into the Firebase Console.
  • Node.js (Version 20+): This is a JavaScript runtime environment that lets you run code outside a browser. Download it here.
  • A Project Folder: You should have a simple HTML file or a framework project like React 19 or Next.js 15 ready to go.
  • Terminal Access: You will use the Command Prompt (Windows) or Terminal (Mac/Linux) to type commands.

How do you set up a Firebase project in the console?

The first step happens in your web browser, not your code editor. You need to tell Google that a new project exists.

  1. Go to the Firebase Console.
  2. Click "Add project" and give it a name like "my-first-deploy".
  3. Decide if you want Google Analytics enabled (you can turn this off for simple practice projects).
  4. Click "Create project" and wait about 30 seconds for the dashboard to load.

What you see now is your project headquarters. From here, you can monitor your site's usage and manage your hosting settings later.

How do you install the Firebase tools on your computer?

To talk to Google's servers from your computer, you need the Firebase CLI (Command Line Interface - a tool where you type text commands to perform tasks).

Step 1: Open your terminal and type the following command:

# This installs the firebase tools globally on your computer
npm install -g firebase-tools

Step 2: Once the installation finishes, you need to log in. Type:

# This opens a browser window to link your Google account
firebase login

Step 3: Follow the prompts in your browser to give the tools permission to access your Firebase projects. After successful login, your terminal will display a "Success" message.

How do you prepare your project for the web?

Now, navigate to your project folder in the terminal using the cd (change directory) command. You are ready to initialize (set up the initial configuration for) your project.

Step 1: Run the initialization command:

# This starts the setup wizard in your folder
firebase init

Step 2: Use your arrow keys to highlight "Hosting: Configure files for Firebase Hosting" and press the Spacebar to select it. Press Enter to continue.

Step 3: Choose "Use an existing project" and select the project name you created in the Firebase Console earlier.

Step 4: The CLI will ask what you want to use as your "public directory." If you are using a framework like React, this is usually dist or build. If you just have a single HTML file, type public.

Step 5: It will ask if you want to configure as a single-page app. If you are using React or Vue, type y (yes). Otherwise, type n (no).

How do you launch your site to the live internet?

This is the final step where your files move from your local computer to Google's global servers.

Step 1: If you are using a framework like Next.js 15, make sure you run your build command first:

# Creates a production-ready version of your app
npm run build

Step 2: Run the deployment command:

# This uploads your files to Firebase Hosting
firebase deploy

What you should see: The terminal will show a progress bar as it uploads your files. Once finished, it will provide a "Hosting URL" that looks like https://your-project-id.web.app. You can click this link to see your live website immediately.

What are some common mistakes to avoid?

It is normal to run into a few bumps when deploying for the first time. In our experience, most issues stem from small configuration errors rather than broken code.

  • Wrong Public Directory: If you see a "404 Not Found" page after deploying, you likely told Firebase to look in the wrong folder. Check your firebase.json file to ensure the public property matches your build folder name.
  • Permission Denied: On Mac or Linux, you might need to add sudo before your install command if you get a permission error.
  • Caching Issues: If you update your site and don't see the changes, try refreshing your browser with Cmd+Shift+R (Mac) or Ctrl+F5 (Windows) to clear the cache (stored temporary files).

We've found that keeping your Firebase CLI updated to the latest version solves roughly 90% of strange connection errors. You can update it anytime by running the install command again.

Next Steps

Now that your site is live, you can explore adding a custom domain name or setting up GitHub Actions. GitHub Actions allows you to automatically deploy your site every time you save your code and push it to GitHub. Don't worry if the terminal feels intimidating at first; the more you use these commands, the more natural they will become.

For more advanced configurations and features, check out the official Firebase Hosting documentation.

Read the Deploy Documentation