Vue.js & FireStore – Build & Deploy

Vue.js & Firestore App – Build & Deploy [Part 6]

alright guys so our application is done up to this point and I want to show you how to deploy it to github pages now github pages as a service that's used to

basically host static websites or storefront ends now since we're using firebase it is separate from our application it's a cloud database so it's not something that we need on our

own server so we don't need like a like digitalocean our Heroku or something where we need a back-end we're using firebase a separate cloud database as our back-end or I should say fire store

so we can use a service like github pages we can use a hostgator shared account we can use stuff like that we could even use firebase which offers hosting but I do have a video on that

already so I wanted to do something different now before we get into github pages we need to compile our application because we don't take all this stuff here and upload it okay what we need to

do is just run a command so I'm gonna go down here and stop the server with ctrl C and let's just clear this out here and we need to run NPM run build and what this does is it takes our application

and it compiles it into static assets that we can deploy okay you see it says building for production and what it's going to do is it's going to create a dist folder with the index.html file

along with all the static assets you can see right here dist and it has the index file with a static folder and this is what we upload to our web host so what I'd like to do is make this dist folder

our actual git repository for our github pages website excuse me so if I open up the github pages homepage here it tells us how to do this so we need to create a repository in

github named after your user name dot github dot oh okay once you do that you can simply clone it to a local folder on your machine and then you can add your

website or whatever it is you want and then you can push to it okay you can just do get add commit and then push so that's what we're gonna do now I'm gonna go to my github account

and create a new repository and you want to make sure you call it your username – Brad Travis e and then you want to do dot github dot that you name it that okay and then description I'm just gonna

say testing deployment and create repository alright so now we have the repository created so we're gonna go back over here and we're gonna open up I'm just gonna open up my folder my

project folder and this is the dist now in order to clone it we want this dist folder to be empty so we can simply delete these these folders and files because once we've run npm run build

they'll come right back it'll recompile everything back but we want this empty right now and then we want to open a command line in the dist folder so you can either either navigate

to disk down here and your editor or you can just open up a command line or terminal in the dist folder which is what i'm gonna do all right and then what we want to do is just like

the github pages says which is right here we want to get clone and then this URL okay I'm just gonna copy this and we'll go back over here now we're gonna paste this in and there's some things we

need to change so obviously we want to change user name to whatever your user name and then right here as well and then one other thing I want to do is just at the end we want to do space dot

if we don't do the dot what it's going to do is it's gonna create a new folder called your user name dot github dot I don't want that I want it's right in the dist folder so if we put a dot it

tells it to do that so let's go ahead and run this alright so it says you appear to have cloned into an empty repository that's fine it is empty but now what we want to

do is recompile our application if we look in our disk for door we now have a git folder meaning it's now a git repository so let's recompile we'll go back to vs code and let's go ahead and

run NPM run build again and now if we go over to our folder it should do this the files should show up once it's done so we should get our index.html and the static folder ok so now there's our

application so this is essentially our website so what we're gonna do now is go back to the command line inside the dist and let's clear this out and we'll go ahead and we'll say git add dot I want

to add all clear it out then I'm gonna say git commit I'm gonna put the am flag here and just say initial commit and then we want to say git push so I'll clear this out first so you can see so

get push – u origin and then master ok we want to push to the master branch okay so that's what that what it's doing is it's taking our site our application and it's adding it to the repository so

now if I reload the repository you'll see the files there and now if I go to the URL brad traversée github I oh there's our application so it's now live on the internet and you can add your own

domain you do not have to use this okay so notice that it's the same data because we're still connected to the same firebase so if we were to go ahead and add a new employee here say Tom

Jackson Department will say IT will say tech lead submit and that works okay Tom Jackson if we want to visit that employee we can if we want to edit him say Tom Jackson's submit ok we're able

to edit if we want to delete them we can delete so we now have our view jeaious and firestore application live on the internet now you've also created a very easy workflow where you can build on to

your application go in your source and add new components new functionality maybe add view X out of state manager and then you can just simply compile it npm run build it goes to the dist folder

you go to your dist folder command line and you push it to your repository and it uploads your your website so it's a very nice and smooth workflow alright so that's gonna be it guys

hopefully you enjoyed this little series and if you did please leave a like please you know subscribe and follow me on social media maybe consider patreon whatever you guys can do is great even

if you just watch the videos I really really appreciate it and thank you and I will see you next time

In this final video we will compile our application source code and deploy to Github Pages for hosting the frontend.

CODE: Final Project
https://github.com/bradtraversy/vue_firestore_employeemanager

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia