Firebase Hosting Tutorial #4 - Deploying a Vue Site

Key Takeaways

all right there so now we've seen how to deploy a static website to firebase hosting now I'd like to show you how to deploy something slightly different a single page application now we can create a single page application or an SP a with something like react or angular or view I've chosen to use of UJS and the way we deploy these to firebase is ever so slightly different not much but ever so slightly so I've already used view GS to create this project right here mário code club and this is where I am in the terminal down at the bottom now I did this I just basically same view create and then the name of the application mario code club and it generated this boilerplate project for me with all these different folders and files now I don't want to get bogged down too much with view Jas and how to use view if you want to learn all about that then I do have a completely free tutorial series here on YouTube view Jas for beginners so I'll leave that link down below and you also have a udemy course which goes into view Jas and firebase in-depth as well but anyway just very quickly inside the router J's file we can see I have two different routes set up one for the home page just forward slash and one for about I also have the mode set to history so we don't see those little hashes inside the URLs now the way a single page application works is that we always serve up a single index dot HTML file that's the only thing that's ever served to the browser and then JavaScript takes over and when we visit a certain URL then we still serve up that single index page and dependent on the URL we load a different component into that page now this is important because when we come to initialize our firebase project shortly we're going to set up an option so that firebase always sends back the index file to the browser regardless of what URL we visit okay so we have two different routes hit home and about and I can open those up inside views so we have the home page right here and we have the about page right here very very simple it's just a boilerplate project and I've just changed the colors and the text a little bit so anyway that is our view project now the first thing we need to do is initialize a fire based project inside this directory Meriel code club so make sure you're in the right directory and then we say firebase in it or like so now again this is going to ask us a couple of different questions first of all are you ready to proceed yep and then what do we want to use we want to use the hosting press ENTER now we want to apply it to the firebase hosting ninja project on the back end so we're going to overwrite the stuff that we've previously deployed so I'm going to select this one now what do you want as your public directory now previously we left this as default which is public and remember that was the folder that firebase then generated and then we deployed it to firebase now if you notice over here we already have a public folder and view j/s uses this for something else now when we build a view j/s project it builds it into a dist folder and that dist folder is the thing that then we're meant to deploy so I'm going to change the public directory down here for firebase to dist so when we use firebase deploy it's going to look for the dist folder and deploy that instead of the default value of public so I'm going to press ENTER now now configure it as a single page application rewrite all URLs to indexed or HTML well this time we want to select yes now when we created a static website we said no because we don't just want to send everyone to index dot HTML regardless of what URL they visit we want to load up the correct page but now since we're using a single page application using view or it could be react or it could be angular now we only ever want to serve up index.html because then JavaScript takes over and it loads in the components that we want to show but we always civil the same index dot HTML so this is going to take care of the server-side configuration to do this for us so this time we press yes and then enter and that is it we've initialized this project now so we can see now we have this file firebase are see also firebase Jason down here and we have get ignore as well we can also see this dist folder over here with indexed or HTML inside it now notice now we don't have a 404 page because this has been configured as a single page application so even if they go to forward slash something-or-other that doesn't exist it's still gonna route them to the index page and then javascript takes over so now we would configure our 404 inside of UJS itself not in this disk folder as a separate file so anyway this is the dummy index page now we don't want to deploy this we now want to build our view application so that all the files go inside this dist folder and then we want to deploy it so let me cross this off down here I'm just gonna say Claire to give us a bit of room then I'm gonna say NPM run build this is what we use to build our view application so press ENTER that's just gonna take a few seconds to do ok now that's done an inside disk now we should see some different things now we see the CSS for our project the JavaScript and we also see a new index file so let's just preview this before we actually deploy so I'm gonna say firebase serve now and now because we specified before that we want to use the dist folder instead of public it's going to serve up whatever is inside disk and it says that we'll write down here so let's view this in a browser I'm going to just control click over here and now we can see this application if we click on about it goes to /a bount we're still serving up the index page because we've configured this as a single page application but now we get this different component loaded in so that's the preview everything's looking good now we want to deploy it to firebase so let's do that over here I'm going to cancel out of this project by pressing ctrl C terminate yes and now we want to deploy this project now to do that remember we say firebase deploy like so and that will deploy this folder to firebase right here alright then so now that's done let's come over to our project on the backend and flesh and fingers crossed let's hope this works we should see another deployment over here when it eventually loads and we can see now April 11th 6 p.m. which is 2 hours later that I did the other video so now we can see this new deployment and if we open this up in a browser then we should see this new application and we can do and notice even though we're going to different URLs we're still getting the same HTML page back there's no loading time here it's not serving up and about dot HTML page it's always index dot HTML and even if I go to something like this it's going to serve up index dot HTML now we don't see any component loaded here we just see the nav because our view project isn't correctly set up to handle these different 404 cases but it's still serving up the same index file and that's why that option was so important when it said configure this as a single page application and the same would apply if it was react or angular or some other kind of framework so there we go my friends that's how we deploy a single page application to firebase in the next video I'm going to go through some final configuration options and also show you how to set up some redirects as well