How to Host React Website With Firebase Hosting | React Firebase Deploy

hey everyone this is because from small academy and in this video today we are going to talk about firebase and react particularly we'll talk about firebase hosting and how to host our website in firebase hosting we'll also see the process required to upload react application into firebase hosting by uploading a sample react application but before we begin i'm just going to show you one example so this is one of my website that is hosted in firebase hosting you can see it is a simple blog that i'm currently working on and i plan to make this blog open source so in the coming days you may be able to see the source code of this blog in my github so watch out for that but right now i'm working on this and you can see it is serving the content from the firestore database and all other static files are stored in firebase hosting okay so it is really fast you can see as compared to other hosting services so i prefer using fire resourcing okay so this is completely developed in react okay and it also has stuff like uh admin panel uh we can log in using firebase authentication and so on okay so this is one of the example now in this video today what we'll do is we'll just upload the simple uh hello world react application into the firebase okay and step to be able to upload our react application into firebase there are a few things that we need first thing is we the first things we need is firebase command line interface that we need to install using npm and second thing is the project itself we need the project obviously and third thing is a we need a firebase project okay so we're gonna go ahead and see step by step guide to create firebase account and to install the firebase command and interface so let's get started before we begin let's create our sample react application so i'm gonna go to my directory here and i have new directory created for our sample react application so i'm gonna open my terminal in this particular folder and i'll create the react application using create react app command so create react app in the current directory okay while this command is executing and creates our react application i'm gonna go to the firebase and create new project okay let's go to the console of firebase and here i want to select the gmail account that i want to use so let me select the another one now this is a brand new firebase account so i want to create new project so click on create project and here you can give the name of your particular firebase project name so i'm gonna give react demo as a name click on continue you can either enable this google analytics or disable it it's up to you so i'm just gonna i'll let it be enable and i'm gonna click on create project once you click on that it's going to start the process to create the project and it's gonna take some time so i'm just gonna pause and come back when this is finished okay we are nearly done okay our project is ready so we can continue now once you get into this dashboard of the firebase project you can go to the hosting okay and here you can click on get started before that if you want to learn about learn more about firebase hosting then you can watch the videos and so on the first thing is we need to install the firebase tools so copy this go back to your terminal here and here you can see our project is already created now what you need to do is you need to install these firebase tools cli okay so this is the command line interface that we need to deploy or redeploy our firebase our react application into firebase all right so now you need to install this so npm install g firebase tools okay so as a global plugin we are installing this firebase tools so it's going to install and it's gonna take some time okay the command line tool is installed now we can click on next here click on next now here we need to follow two more steps okay that is firebase login and finally we need to initialize our firebase so come back here let me clear this i want to start my react application just to see how it looks like so npm start okay so it's gonna start our newly created project and we'll see how it looks like in the browser so this is the default react application that we have just created i'm not gonna add or remove anything but here instead of using default application you can use your uh fully developed website okay so it's up to you i'm just uh using this sample react application to show the demo of our pro step anyway let me go back to here and disable this all right i'm gonna clear this logs okay now we'll follow the step-by-step guide okay so from here first we need to login so let me use firebase login command and now i have used this before so it says that i'm already logged in so let me log out first firebase log out okay and select the correct account okay now i have logged out from my previously logged in account so i'm now again i'm gonna log in and this time it's gonna let me choose the account that i want to log into so yes all right now it's gonna open the dialog and from here you need to choose your uh correct gmail account where you have just created this project so let me click on this okay now i need to allow the permissions to access my account okay now you'll see this firebase cli login successful message okay once that message is displayed you can close that window and if you go back to your cli or command prompt you can see we have successfully logged in okay as a email okay all right so now we need to follow another step that is we need to need the uh firebase but before the this command i want to build our react application now so to deploy the react application we need to provide one page application we need to provide the public or build a folder where all of our codes are converted into the proper html and css or proper static content okay i will run the command npm run and it's going to create the optimization build to deploy into our firebase okay so let me go back here and here you can see we have this build folder and in this build folder we have all the static contents that is html css images and so on and this is the directory from where we are going to serve our website okay so if somebody visit our website then they are going to get the content from this build folder so that's why we're creating the build folder here uh that's where creating the build first uh we have successfully created our build it says that build is successful now we'll initialize the firebase so firebase init so once you hit the firebase in it it's going to ask few questions so first it says are you ready to proceed you just need to enter yes after that it's going to show you all these options and all you have to do is use your arrow key okay so down arrow key to set up the correct hosting platform so i'm gonna select uh hosting configure file for firebase hosting and setup github action deploys that is optional so we're gonna select this and to select this option you need to hit the space bar so once you hit the space bar it's going to display this asterisk sign here green aztec shrine and now you can hit enter okay once you hit enter it's going to give you a few more options it says please select an option now here either you can create new firebase project or you can use existing firewall project all right so we already have existing firebase project that we have created you need to select this one and hit enter once you click on that it's going to show you all the list of firebase project that currently is in your firebase console so right now i have only one that is react demo i'm gonna select this one so by uh you can use arrow key here as well i'm gonna hit enter okay now it says what do you want to use as your public directory now we have already run our build command and we have this build folder here so i want to use this build folder as a public directory that means from this build folder all of my content is served to the user okay when they request when they when a request is made to our website all right now uh let me go back to my command here i'm gonna write build so you make sure you have uh you write this build correctly without any typos and hit enter now configure as a single page app yes our react application is single page app so i want to make it i want to configure this for a single page and hit yes and setup automatic build deploys with github no we are not going to do that so n okay so file build index.html already exists overwrite no we are not going to overwrite right now because that html index.html content contains our website files okay so i'm just gonna i'm not gonna override that it says the firebase initialization is complete now what we can do is we can deploy this to deploy the react website into firebase we can write the command firebase deploy okay now let me hit that once i hit the firebase deploy if everything is correct then it's going to deploy our website into the firebase hosting okay so it's going to take some time let's see if the process is going to be successful or not okay it is finalizing the version it is really the new version all right now you can see we have this two uh link provided to us first one is for the console second one is for the website that we have just deployed into our firebase hosting now you can open this link and it should display your react application so this is our react application all right so guys this is how we uh deploy our react application into firebase and one more thing i want to show you guys how to redeploy this application or how to update this deploy okay so let's say we made some changes into our files we added some new pages we added some new features then uh you want to uh release that version or you want to update the website into the firebase hosting we can easily do that all we have to do is write two commands that is first we need to rebuild our react application and after that we need to deploy it so let me go ahead and make some changes okay so let me open my bs code and i'll just copy paste this folder so let me open this folder so where the folder is okay this one i'm just gonna drag and drop here okay and now in our source folder in app.js i want to make some changes here so okay so this is the message that i want to display all right and i also want to change the title of our application to react from the react app to small academy demo okay so this is the thing that i want to change so once we make the changes we can see that in our local browser by using the npm restart okay so let me see the changes in our local browser first and once that is done we will uh deploy that into our firebase so you can see the changes here we have this welcome to small academy message and we also have this small academy demo title for our website okay so now what i want to do is i want to redeploy or update this deploy or update this website into the firebase hosting so let me go ahead and show you how to do that let me clear this first now we are in the same uh react directory so this is the directory that i'm talking about so you can see uh new volume f and inside this small academy we have all these uh files for our react application right so you need to be inside that folder in your cli now you can what you can do is you can perform the npm run build so what it's going to do is it's going to uh create new build for your react application which will contain all the changes that you have made so you need to follow this every time when you want to update your firebase hosting website okay so now build is finished all we have to do is firebase deploy so when you click on firebase deploy it's going to create a build of your website and deploy into your firebase hosting website okay into the live server now it is finalizing the version and it's releasing the new version once the release is complete you can go back to your website so this is our website you can see here react demo dot web dot app okay let me refresh this okay once i refresh this you can see the changes that is welcome to small academy and small account academy demo is displayed here okay how cool is that you can just update your website in just two commands right so this is one of the uh advantage of using firebase hosting to deploy your react application so i hope you guys were able to learn something new today and i hope to see you in the next one till then bye bye have a good day

Channel: SmallAcademy

Views: 12,444

Keywords: firebase hosting, free hosting react, firebase free hosting, firebase react app, firebase hosting website, firebase hosting tutorial, host react app on firebase, host react app on github, host react app on netlify, firebase react deploy, firebase hosting setup complete after deploy react, deploy react native app to firebase, smallacademy react, host website for free, free website hosting, how to host react app, how to use firebase hosting

Id: 98TXDLZLyNs

Length: 14min 5sec (845 seconds)

Published: Mon Apr 04 2022