Firebase / Firebase Hosting
Deploying Static Websites on Firebase
In this tutorial, you'll learn how to deploy static websites using Firebase Hosting. We'll cover the process from setting up your project to deploying and managing your static web…
Section overview
5 resourcesCovers deploying web applications with Firebase Hosting, including security and domain management.
Introduction
In this tutorial, we'll learn how to deploy a static website on Firebase Hosting. Firebase Hosting is a developer-focused hosting solution for web app content. It is primarily used for hosting static websites, which are sites with fixed content, but can also serve dynamic content through Cloud Functions.
By the end of this tutorial, you will be able to:
- Setup and initialize a Firebase project
- Deploy a static website to Firebase Hosting
Prerequisites:
- Basic knowledge of HTML, CSS, and JavaScript
- Firebase CLI installed. If not, you can install it via npm by running
npm install -g firebase-tools - Node.js and npm installed on your system. If not, download and install Node.js from its official website.
Step-by-Step Guide
1. Setting up Firebase Project
First, we need to create a Firebase project. Go to the Firebase console, click on Add Project, enter a name for your project, and follow the prompts to create the project.
2. Initializing Firebase in the Project
After creating the Firebase project, navigate to your project's directory from the terminal and login to Firebase using the command firebase login.
Next, initialize Firebase in your project using firebase init. Select Hosting using the space bar and press enter. Choose the Firebase project you created and for the public directory, type public. Respond yes to configure as a single-page app.
A firebase.json file will be created in the root of your project. This file describes the deployment configuration.
3. Preparing the Static Website
Place your website's static files (HTML, CSS, JS, images) into the public directory. Make sure you have an index.html file in the root of the public directory as it serves as the default webpage.
4. Deploying the Website
To deploy the website, simply use the command firebase deploy. Once the deployment is successful, Firebase will provide a URL to the deployed website.
Code Examples
Example: Deploying a Simple Static Website
Let's say we have a simple static website with an index.html file.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Static Site on Firebase Hosting</title>
</head>
<body>
<h1>Welcome to my static site!</h1>
<p>This site is hosted on Firebase.</p>
</body>
</html>
Deploy this website using the following command:
firebase deploy
After successful deployment, you'll see a message like this:
=== Deploying to 'my-static-site'...
...
✔ Deploy complete!
And a URL to your deployed site, like https://my-static-site.web.app.
Summary
In this tutorial, we learned how to deploy a static website on Firebase Hosting. We covered setting up a Firebase project, initializing Firebase in the project, preparing the static website, and deploying the website.
Next, you might want to learn about adding dynamic content through Firebase's Cloud Functions, or using Firebase's other features like authentication and database.
Practice Exercises
Exercise 1: Create a simple static website with an index.html, style.css, and main.js file. Deploy this website to Firebase.
Exercise 2: Add a form to your static website and handle form submission using JavaScript. Deploy your updated website to Firebase.
Exercise 3: Create a static website that pulls data from a public API and displays it. Deploy this website to Firebase.
Remember, practice is key to mastering any skill. Happy coding!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article