Complete React Website with Firebase By Thapa Technical
Here are the Prerequisite and Important must watch videos 😀
How to Deploy React Apps for Free With Firebase
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
where is todo list style.css code...canuuh plz tell me
ReplyDeleteFollow this link : https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css
Deletegood 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
ReplyDeleteWelcome :)
Deletesir, 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
ReplyDeleteand thank you for the helpful video I really appreciate you
ReplyDeleteand hope may you will make video in the future
gh
ReplyDeleteHello 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
ReplyDeletethapa sir images strech ho rahi hai on adding more services how to prevent that
ReplyDeletecan i get returntent webiste link
ReplyDeleteSir u r amazing and specially ur teaching way. I learn so much from u.. so billion thanks for everything.
ReplyDeleteSir, css for Thapapay is not updated after video number 16 i.e after making it responsive please share that one too
ReplyDeletewhere is the code link
ReplyDeletehello update your index.css in complete react website with firebase. in this file we responsive media query is not available.
ReplyDeleteNice sir Very Nice
ReplyDeletewhere I can find source code of react application
ReplyDeletenice
ReplyDeletenice
ReplyDeleteVery Nice Post. This article contains a lot of valuable info. Keep sharing this kind of information. Thank you. Read more info about Best Dmca Ignore Hosting
ReplyDelete