Not long ago, I wrote a post titled " " In that post, I promised to show you how to deploy your project on Firebase and use it for free. I am keeping my promise! . How to Improve Website Performance Scores from 35 to 100 What Is Firebase? Probably, some of you are not familiar with Firebase yet, so let me briefly explain to you what it is. is a mobile and web application development platform that provides a set of tools and services to help developers build and scale their applications more easily. Firebase It offers features such as a real-time database, authentication, hosting, cloud storage, and more. Firebase also provides backend functionalities and infrastructure, allowing developers to focus on building their apps without worrying about server management or complex infrastructure setup. Overall, Firebase simplifies the development process and enables developers to create high-quality applications quickly. Today, we'll use its 'Hosting' feature to store our Next.JS project. In this example, I'll show you how to host the static version of your project. The first thing you have to do is register an account. How to Register an Account of Firebase To register an account on Firebase, open and click on "Get started." , https://firebase.google.com/ Afterward, you need to create a Google account or use an existing one. Once you're done with the first step, you'll land on the Firebase control panel. The next step is to create a project. How to Create a Project on Firebase To create a project, you have to make 3 simple steps: Click on "Add project", and give it a name in the new window. Enable or disable Google Analytics functionality for the project, and click on "Create project" After a couple of minutes, your project will be created. How to Use Firebase for Free Once you have created a project, you'll be able to see it in your dashboard. By default, you'll be on the . If you are not, you need to change it to the . Spark Plan Spark Plan The is a . It has some limitations, but it is more than enough to start your project, especially if you plan to use it as a hosting platform for your static website. Spark Plan free plan without any monthly costs To see the full description of the plan, please visit this . link Time to set up Firebase hosting. How to Set Up Firebase Hosting Setting up Firebase hosting is also pretty simple. Log into your account, and select your project. Then, in the left menu, click on "Build", and select "Hosting" from the dropdown. In the new window, you'll see a welcome screen. Click on "Get started." To host your project, you need to set up Firebase CLI first. Open your terminal window, and enter the following command: npm install -g firebase-tools Once the setup is finished, type the following in your terminal: firebase login It will take you to the login screen to authorize access. The next step is to navigate to your project folder inside the terminal window, where you have stored your static website. Run the following command: firebase init If you have done everything correctly, you should see the following in your terminal window. In the list of options, select "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys." Use the arrow keys on your keyboard to navigate, to select, and then press enter. press space Next, select an account from the list, and press enter. Since we already have a project, select "Use an existing project" from the list, and choose the project you created in the previous step. By default, the public directory is set to "public." If you want to specify another directory, you can do so in the next step. For example, my Next.js project produces a static version of the website in the 'out' directory, so I specify it at this step. The last two configuration questions will be about your website settings. "Configure as a single-page app (rewrite all URLs to /index.html)" - Yes "Set up automatic builds and deploys with GitHub?" - No We are finished with the setup. Now, it's time to deploy our project to Firebase. How to Deploy the Website to Firebase After you have completed all the configurations, you can deploy your website to Firebase hosting. In the terminal window, inside your project directory, enter the following command: firebase deploy --only hosting If everything goes well, you will see the URLs that you can use to access your website. I hope you found this article useful! In the next one, I'll show you how to set up a custom domain name for your Firebase project. Stay tuned! Also published here

Setting Up a Custom Domain and Claiming a Free SSL Certificate on Firebase

Deploying a Website on Firebase and Using It for Free: A Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Git Commands Senior Devs Should Know (and Use Daily)

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

All the Firebase Functions you Need to Build Your Next Serverless Application

10 Git Commands Senior Devs Should Know (and Use Daily)

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

All the Firebase Functions you Need to Build Your Next Serverless Application

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps