THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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.

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










Hope you love the video.

16 comments:

  1. where is todo list style.css code...canuuh plz tell me

    ReplyDelete
    Replies
    1. Follow this link : https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css

      Delete
  2. good afternoon thapa sir you are great sir in my life i learnt so much from you thanku sir for making videos its will help me alot

    ReplyDelete
  3. sir, your website take much time to load content almost 1 and 2 half time take time place do work it because I visit your website in someday many time.it giving performant is not good

    ReplyDelete
  4. and thank you for the helpful video I really appreciate you
    and hope may you will make video in the future

    ReplyDelete
  5. Hello thapa sir, I know how to upload normal html, css website on live server but can you tell me how can I upload my react website in hostinger server. Please make the complete video for this

    ReplyDelete
  6. thapa sir images strech ho rahi hai on adding more services how to prevent that

    ReplyDelete
  7. Sir u r amazing and specially ur teaching way. I learn so much from u.. so billion thanks for everything.

    ReplyDelete
  8. Sir, css for Thapapay is not updated after video number 16 i.e after making it responsive please share that one too

    ReplyDelete
  9. hello update your index.css in complete react website with firebase. in this file we responsive media query is not available.

    ReplyDelete
  10. where I can find source code of react application

    ReplyDelete