Firebase Hosting Tutorial #3 - Deploying a Static Website

Key Takeaways

okay then my friends so now we've initialized our Firebase project on the front end locally on our computer we've created this public folder with all our different files in and we've also used Firebase serve to preview locally what the website looks like and it looks something like this so now the next step is to actually deploy this to Firebase now if I go to my Firebase console and go to the project that I created I'm going to go over to hosting again and when it pops up click get started go to continue we've done this we've done this we've done this now we need to do this Firebase deploy and that will take whatever is in the public folder and deploy it to the Firebase server so let me now come over here and by the way when you click finish after going through those steps you're going to notice this different panel here and it says it's waiting for our first release so it knows at the minute that nothing has been uploaded but but when it has been uploaded and we've made a deployment this will be the URL to our website right here so then let's now deploy this what I'm going to do is make sure everything is inside public right here we have index about 404 and the Styles now I'm literally just going to say Firebase deploy and make sure I have this in Focus Firebase deploy and then press enter and this will deploy our website so once that that is done you're going to notice down here that we have the project console this is this URL and if we clicked on that it would just open up this page we also have the hosting URL which is where our app has actually been deployed to and this is the URL we would visit if we wanted to preview that in a browser so first of all I'm going to go back over here and I'll click refresh just to see if it now recognizes that we've made a deployment and it does so we can see down here the current version which we've deployed and the time it was deployed and who deployed it now the file say zero at the minute but it will go up to I think four 1 2 3 4 soon enough so let's just wait a second in fact if I refresh we might see this go to four no we don't just yet but it will after a time but what I'm going to do now is try previewing this in the browser so let me now click on this URL and now we can see this site right here so this has successfully deployed if you see something else it might be some kind of placeholder page by Firebase you just have to wait for an extra minute or two eventually it will update as long as you see this deployment right here then it will eventually be shown here okay so this right here this shows the latest release now if I was to make a change and do another release it would show that release instead but sometimes it's nice to see several different releases that we've made for example the last four so what I can do is go over to these three dots right here and go to version history settings now it's going to say that older versions are going to be deleted after one version so it's not really going to show us a list of different versions so what we could do is change this to four for example then we could deploy up to four different versions and each time we deploy one it's going to update over here but then we could view the previous ones and even roll back to those if we wanted to so let me save this and now what I'm going to do is come over here and make some kind of change to the website so inside public let's go to the Styles and instead of crimson I'm just going to say royal blue and we'll do the same down here where we have another crimson color so change that to Royal Blue so all we're doing is changing the color of the title at the top and the little bars on the links so now we've done that change let's deploy this again I'm just going to say Firebase deploy again right here and press enter and then when that's done let me come over here and refresh the this page and if we scroll down here you can see by the way now files is six that's some extra files that Firebase will have thrown in there as well as our files but anyway we can see now the current one is this that we just deployed at 4:02 p.m. and this is the previous one now if I go over here and hard refresh then we can see that update as well so that has worked now what if I wanted to roll back to a previous version well I could find version for example this I could click this and go to roll back and then that is going to roll back to that version right here okay you can see the ID of this deployment matches this one right here the current one so now let me go back over to the browser and refresh and we should be able to see nope we just have to wait a minute I think because it just takes a second let me hard refresh again there we go now it's rolled back to the previous version and if I wanted to delete a previous version then I could do as well I could click on the little three dots again and delete that version so there we go my friends that is how we deploy a static site to Firebase hosting so now we've seen that the next thing I'd like to do is show you something slightly different and that is how to deploy a vue.js website this time to Firebase hosting