PWA Tutorial for Beginners #29 - Deploying to Firebase

Key Takeaways

okay then so now we have all of this offline functionality for our app we have offline assets like pages images and CSS but also access to offline data now which is really cool so the next step is to then deploy this to firebase so it can be hosted online and I'm going to show you how to do that in a second but first of all to do this you're going to need node.js installed on your computer so to get that head over to no js2 org and click on this button go through the installation steps and then you should have node installed on your computer now to check that it's work properly open up a terminal and just type in node - V and if it gives you back a version number it means it's installed correctly ok then so if we go over to our app at the back end and then go to hosting over here then we're gonna see get started click on that this is the first step we have to install firebase tools globally on our computer so just copy this and paste it in your terminal over here and press enter and that will install this package global it on your computer now I've already done that so I'm not going to do it again but once you've done that the next step if we continue is to login to the service now you just type out here firebase login and press enter and that's going to throw up a little pop-up so you can log in now again I've already done this so I don't need to do it again but now the next step if we go back over here is to initialize a new project a new firebase project inside our application over here so that I am gonna do so make sure you're in the correct directory I am PW a tutorial that's my folder over here then we say firebase in it to initialize this new project now I'm going to move this up here so we can see a bit more of it are you ready to proceed yep and then it's going to ask us which services we want now we just want hosting yeah we've used the firestore but we've already set that up on back-end over here we don't need to do anything else over there so I'm just gonna say hosting for now and by the way you select that using spacebar then press ENTER to select it and it's going to ask us to link up with a particular back-end project now we created one called food PWA over here on firebase so select that and then it says what do you want to use as your public directory this will be the folder we deploy I'm just gonna leave it as default which is public do you want to configure this as a single page app no we don't and then this has initialized now so when we deploy this in a second what's going to happen is everything inside this public folder will be deployed and notice it's already given us a 404 page right here and an index page these are dummy pages now we don't want the index page first of all so I'm going to actually delete that and I also want to put everything that we want to deploy inside this public folder so that it gets pushed up to firebase hosting so first of all we want the index file that we created inside that then we want the manifesto JSON file inside that we want our service work inside that as well and also all of these folders so CSS and then image and also J s and pages now I for some reason have trouble putting any kind of image folder into another folder in V s code like this so what I'm gonna actually do is just pause this now and go to the folder where it's kept and do it that way okay then so now everything is inside this public folder that we want to deploy we don't have to worry about these being inside the public folder these are just some files that firebase created for us when we initialize the project so now what we need to do is just say firebase deploy like so press Enter that's going to take this public folder and push it up to firebase hosting on the backend and in a second down here we're gonna see that this has worked so now we get a hosting URL but also if we go to our project over here and refresh on the hosting page we should see this deployment over here in a second as well so we can see this is our domain over here so we see this deployment as well right here and what I'm gonna do is just open this up in it browse by clicking this and we should see this in a browser now inspect it and everything has been deployed so everything works the about page the contact page etc the home page let me just try adding a new item over here and just smooth it I'm putting banana and orange and lemon press add and this still works try deleting it still works awesome so there we got my friends now we have deployed our application to firebase hosting if you want to learn more about firebase hosting I've got a whole series on my channel about this so I'll leave a link to that series down below