In this tutorial, you will learn how to use Firebase Hosting to host your web applications. Firebase Hosting provides fast and secure web hosting for your static and dynamic content. At the end of this tutorial, you will have a live web app that is deployed on Firebase Hosting.
Learning Outcomes:
- Initialize a Firebase project
- Deploy a web app to Firebase Hosting
- View your live web app on Firebase Hosting
Prerequisites:
- Basic understanding of web development (HTML, CSS, JavaScript)
- Node.js and npm installed on your local development machine
- A Firebase account
Firebase CLI (Command Line Interface) allows you to interact with Firebase from your terminal. Install it by running the following command in your terminal:
npm install -g firebase-tools
After installing the Firebase CLI, you need to log in to your Firebase account. In your terminal, run:
firebase login
A browser window will open for you to log in to your Firebase account. After login, return to the terminal.
Navigate to your project's directory and run:
firebase init
Follow the prompts. Select 'Hosting', then choose an existing project or create a new one. For the public directory, input the directory that holds your web app's production build (usually build, public, or dist).
After initializing your Firebase project, you can deploy your app with:
firebase deploy
Your web app is now live on Firebase Hosting!
Code Example 1: Initialize Firebase Project
cd my-web-app # Navigate to your project directory
firebase init # Initialize your Firebase project
cd my-web-app changes your current directory to your project directory.firebase init initializes your Firebase project.Code Example 2: Deploy Your Web App
firebase deploy # Deploy your web app
firebase deploy deploys your web app.In this tutorial, we have covered how to initialize a Firebase project, deploy a web app to Firebase Hosting, and view your live web app. Keep practicing by deploying different web apps or explore more Firebase features.
Exercise 1: Initialize and deploy a simple "Hello World" web app.
Solution 1: Create a new directory, initialize a Firebase project, create an index.html file with "Hello World", and deploy it.
Exercise 2: Deploy a web app that includes CSS and JavaScript files.
Solution 2: Create a new directory, initialize a Firebase project, create index.html, styles.css, and script.js files, and deploy it.
Exercise 3: Update your deployed web app.
Solution 3: Make changes to your web app, then run firebase deploy again to update it.
Remember, practice is key when learning new tools and technologies. Happy coding!