Fast React Website Deployment With Firebase

and today I'm gonna show you guys how I like to deploy my react apps so right here you can see I recently just built this it's part of my portfolio and I want to actually deploy this app so what I'm gonna do is use firebase to deploy my app now there's other options I've tried on many different ones and I find that firebase is the easiest and the most convenient for me if you guys have any other ways of the point of react app that's easy and works well with react router please tell me and let me know so let's get started so the first thing you need to do is just to have a firebase account so it's really easy just go to firebase google.com sign up for an account and what you need to do next is just go to the console here okay so I'm waiting for the console to load so I have many projects here already if you guys are doing this for the first time you shouldn't see anything so what you need to do is just to add a project so I'm just gonna do call this a demo project and then accept the terms and then this will create your project so the reason why you need to do this to create a project here is later on in the command line you're going to connect what you the code that you built to this project that you just created here right here so okay so as you see this is created now what you need to do is go into your command line and we need to install firebase tools so the easiest way to do this is through NPM so you could do MPM install firebase tools and also throw a dash G on there so you can use it globally okay all right so we finally installed the fire based tools and after you install the tools what you need to do is go into your project folder so this is this is the project folder for me right now I'm running a server so I'm just gonna cancel out of it so in order so to start deployment what you actually need to do first is to log in to firebase so what you can do is run this command firebase log in and what this should do is open up a browser window let's see okay so what this should do is open up a browser window it just basically how do you choose account and verify information so so after this part is done you can go back to your that was just like a small little aside now you can go back to your command line so now I am logged in to firebase okay so after you're logged in we need to play the site but before we deploy a react site what we need to do is actually run this command NPM run build and what npm run build does for us is create a bill folder of static files of your project because when you're working with react there's something called web pack which bundles a bunch of configurations and also what and one that's really important is called Babel that trans piles all your recent es6 plus JavaScript code down to yes es5 which works is compatible with older browsers so you definitely want all of that to be compiled once you have your bill folder what you now can do is start initializing firebase and inside your project so to do that you would run firebase in it in your command line okay and now there's a whole bunch of options here what we're gonna be working with is hosting today so what we're gonna do is go down to hosting and then spacebar enter and then so after you selected hosting you're probably coming to the firebase is probably going to ask you which project folder you want to employee this project into so you actually want to select the project that he created inside the firebase console remember when we so back in Google Chrome when we were in our console wares okay so remember when you're in our console and created project we actually want to use that project now it's okay if it doesn't show up there I'll show you how to add it later just go ahead and scroll down to create a new project and then go through these configurations that I'm going to show you right now so the first question is ask what do you want to use as your public directory you want to use the build folder that we just created this is configured as a single page app yes okay and okay this parts a little bit tricky it says file bill slash index.html are exists overwrite you actually want to say no because if if you click yes what firebase is going to do is basically create its own index dot HTML page and it's gonna use that instead of what you have in your bill folder so you won't definitely want to choose no as an option here okay in this realization is complete that was very quick as you can see so right now so if you want okay so here's how you add the project if you didn't see it earlier from the drop down so you would do firebase use and then your project ID okay so I'm going to show you guys how to find your project ID right now so all you have to do is click on this Settings tab and go to project settings and then you would have a project ID right here so just copy that ID and then go back into the terminal and firebase use project ID and then press Enter so now it's switched over now he knows where to deploy all these files to okay so now what you can do is just do firebase deploy and now that should take a little while depending on how much stuff you have inside your and inside your project so we're just gonna sit here and wait until this deploys and I'm going to I'll show you guys where you can find your site so after your files are done deploying to firebase you can actually just go over to the firebase website so this is the overview screen what you can do is scroll down to hosting and you can see here that this is deployed and you can see your deployment history and you can either even roll back to like a previous version if you if you have like a newer version that breaks or something so that's super useful and also you can access your site just through this domain here so you can just click it and then it opens it opens the site so yep that's it it's super easy hope you guys enjoy this video and if if it helped you at all please give me a thumbs up thank you and see you next time

Channel: Andy Wang

Views: 73,409

Rating: 4.9698772 out of 5

Keywords: React, Javascript, Deployment, Firebase

Id: IDHfvpsYShs

Length: 7min 11sec (431 seconds)

Published: Tue Jan 15 2019