Hosting and Deploying Step by Step Explained: Firebase 2021

Here I will be showing you step by step: How to host and deploy any web app using firebase ->

What is Firebase?

Firebase is a Backend as a Service - Baas platform that helps you build your Full-stack web app, Android, and Ios by providing their backend service with tools like Firestore storage, Realtime Database, hosting, and much more

Hosting and Deployment: Firebase

Step 1: Open your terminal

Open the Web app file or folder (directory) in your VS code terminal or your OS terminal. If you are not in your correct folder where your exact files are, you can do the below command to go to the same folder:

cd foldername

cd is the inbuilt command in the terminal used to open the directory.

Step 2: Creating production build of the app

wtf? is build, sure!

See when we break JavaScript and CSS out into separate files, these files require an additional HTTP request which will make your web app/site slower to load.

So to cure this, this creates a build folder of the app, that merges all the files into one file to make the site load much faster than ever. To do this run this command in the same directory:

npm run build

You will notice in the file sidebar of the VS code, an additional file named build has been added

Step 3: Adding Firebase tools

To manage, test, and deploy your firebase web app project, we use firebase tools.

Helps deploy all assets and files into your Firebase projects

Run a local web server for your Firebase Hosting site

Interact with Firestore as the firebase database

Import or Export users from/into Firebase Auth

To add firebase tools, run this command:

npm install firebase-tools

Step 4: logging into Firebase console using terminal

To choose which web app we have to deploy, we need to login into firebase.

Note: Please choose the same email in which you have added the web app in the firebase console. To login, run this command:

firebase login

If it shows, you are already signed in 'xyz@xyz.com'. Then, you need to skip this and move to Step 5

Step 5: Initializing Firebase for Hosting and Deployment

This is the most important part which you need to do carefully. This command steps you through setting up your project directory and some Firebase products.

Run this command to initialize firebase deployment:

firebase init

Then follow these substeps after running the above command:

You will see a nice, little diagram of FIREBASE in the terminal, which means you have successfully run the command.
Then, proceed with 'yes'
To select the hosting feature, go to (Hosting) with 'down arrow' and press 'spacebar' to confirm it.
Select the existing default project and select ur app named 'xyz-123'. (use arrow keys)
For the public directory, enter 'build' so that it will select the optimized form of the app.
Enter 'no' for a single-page app.

Finally, you will see 'firebase initialization complete!'

Final Step:

This command will deploy the app and provide a domain yourappname.web.app

You will go to the link by hovering the link and 'ctrl + mouseclick'

Make sure, you drop a like If u learned something here...

✌🏻✌🏻☮Peace☮✌🏻✌🏻