Complete React Website with Firebase By Thapa Technical

 Complete React Website with Firebase By Thapa Technical

Here are the Prerequisite and Important must watch videos 😀

1: Learn Complete React JS with 5 Projects in Hindi with Free Code

2: Learn Complete MERN STACK in Hindi 2021

3: Create a React Navbar with Free Source Code.

 

 ****************** BEST OFFER ON SERVER  *****************

Guy's If you are thinking of buying a Server(Web Hosting) then this is the time because I have special offer for you ❤

If you buy through the Link given below, then you will get 😍

Minimum 30% to 50% Discount(Depends on Plan) + 7% Extra Special Coupon Code + 200₹ Cashback after the return period is over. 

I know you love the Offer right It's better then Black Friday Sale ✌ Only for Thapa Technical Family.

❤ Click Here For Server Link : http://www.hostinger.com/thapa7

❤ For Thapa Family Use Special Discount Coupon :   THAPA7

When you buy through my Link then Join Our Telegram Group For 200₹ Cashback 👉 https://t.me/thapatechnicalserver

****************** BEST OFFER ON SERVER  👆*****************

😍 Check my Instagram to Connect with me: https://www.instagram.com/thapatechnical

👉 Join Thapa Technical Telegram Link 🎉: https://t.me/thapaTechnicalOfficial

After working on ReactJS for so long, It's time to move our knowledge to more advanced part. Where we will see How to Create a Complete Multipage Website using 

React JS and Firebase. Also, how to use the React Hooks and how to use Hooks in our applications. We will go through each concept line by line and understand the meaning and the output of it in a practically manner.

First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.

How to Deploy React Apps for Free With Firebase

Prerequisites:

 A firebase project set up. If you don't have one, create one using the firebase console.

Click Here : https://console.firebase.google.com/

Getting Your React App Ready for Deployment  

Run the following command to create a build directory with a production build of your app:

$ npm run build

Configuring Firebase

Install Firebase CLI

To host your site with Firebase Hosting, you need the Firebase command-line tool (CLI). Run the following npm command to install the CLI on your system globally:

$ npm install -g firebase-tools

Login to Firebase

Make sure you're in the root directory of your React app and run the following command to login to firebase in your terminal:

$ firebase login

If you're not logged in, you'll be asked to enter the credentials for your google account.

Initiate your project

Now that you've got the firebase CLI configured, it's time to initialize firebase in your react app. Run the following command:

$ firebase init

You will now enter the firebase tools shell and will be prompted with a sequence of questions and various configuration options. Let's go through these questions together step by step to achieve our desirable configuration.

Select - Hosting: Configure and deploy Firebase Hosting sites.

Select - Use an existing project

Select the firebase project that you created (e.g.  reactfirebaseWebsite)

********* Here is My Data **********

E:\REACT\react2021\reactWebsiteAugust\reactpay>firebase login

Already logged in as xyz@gmail.com

E:\REACT\react2021\reactWebsiteAugust\reactpay>firebase init

     ######## #### ########  ######## ########     ###     ######  ########

     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##      

     ######    ##  ########  ######   ########  #########  ######  ######  

     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##      

     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  E:\REACT\react2021\reactWebsiteAugust\reactpay

? Are you ready to proceed? Yes

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: reactwebsite-e7aeb (reactwebsite)

i  Using project reactwebsite-e7aeb (reactwebsite)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

+  Wrote build/index.html

i  Writing configuration info to firebase.json...

i  Writing project information to .firebaserc...

+  Firebase initialization complete!

Deploy to Firebase

Just run the following command to deploy your app:

$ firebase deploy

Here is the code:

Complete Code Complete React Website

Hope you love the video.