When it comes to learning programming, Firebase offers a range of services, including databases and hosting, that can be incredibly beneficial. In this article, we will focus on Firebase Hosting, a convenient solution for hosting your first web application and sharing it with others, whether they are friends or fellow programming enthusiasts.
Getting Started with Firebase Hosting
To begin, you need to create a project on Firebase. Head over to Firebase website and register for an account. Once registered, access the console by clicking either "Go to console" in the upper right corner or "Get started."
In the console, select "Add project" and provide a suitable name.
Under the Google Analytics option, choose not to enable it, as it's not essential for educational or personal projects. You can always integrate it later if necessary. Once the project is created, click "Continue."
On the project screen, navigate to the left menu and select "All products." From the available options, choose "Hosting" and then click "Get started."
Setting Up Firebase CLI and Project Connection
Next, install the Firebase Command Line Interface (CLI) on your computer, an essential tool for executing commands via the terminal. The necessary steps are detailed on the project page, but here's a quick rundown with screenshots.
Open your terminal and run the command npm install -g firebase-tools. If you are using a MacBook and encounter a permission denied error, try using sudo npm install -g firebase-tools, and enter your laptop's password. 'Sudo' grants users the ability to execute commands that require additional security privileges, as in this case, installing something globally on the laptop rather than locally in the project folder.
Connect your local project to the Firebase project by ensuring the terminal is in the directory of the project you want to deploy.
Before proceeding, ensure you update your npm version to the latest one, as Firebase has specific requirements. This is crucial to prevent any errors during the subsequent steps.
Invoke the command firebase login and log in using the same credentials used during your Firebase registration.
Then, run firebase init and respond to the prompts as they appear.
During this step, your projects from Firebase will be pulled. If you've recently signed up, you'll likely see only one project available for selection.
Specify the folder name where you will later build and deploy your project. If you already have a build folder, provide its name, such as "public," "dist," or any other relevant name. For instance, in my case, utilizing React and Vite, the build is stored in the "dist" folder, which I specify.
On this step, it's crucial to configure your application settings. If you're using a router in your application, make sure to select "y" (yes) to enable it; otherwise, your routing might not function correctly. Additionally, for the question about GitHub build and deployment, choose "N" (no) as it's not relevant to this tutorial. If prompted about overwriting files, select "N" to avoid Firebase overwriting your build files with its default ones.
Building and Deploying Your Web Application
The next step involves building your application if you haven't done so already. Run the appropriate command based on the technologies used in your project. In my case, with React and Vite, the command is npm run build.
After building the project, it's time to deploy it. Issue the command firebase deploy.
Upon successful deployment, you will receive a notification and a link to view your website. Alternatively, you can revisit the Firebase website, access your project, and find the link in the "Hosting" tab, along with additional information about your site.
Initially, you might see "0 files" and encounter errors when accessing the link. Don't worry; this is normal. Give it a few minutes, and everything should be up and running smoothly.
Conclusion and Cost Considerations
In conclusion, Firebase Hosting is an excellent choice for hosting simple websites or pet projects, especially for educational purposes, as it offers a free tier with ample limits. However, it's important to be aware of their usage thresholds, as exceeding these limits may incur charges. For more details, check the "Pricing" tab on their website. For educational projects, the free tier should more than suffice.
Start your hosting journey with Firebase today, and effortlessly showcase your projects to the world!
Top comments (0)