Vue.js & FireStore – Build & Deploy

[Music] hey what's going on guys welcome to another project series in this series we're gonna be building and deploying a

view j/s application that uses firestore on its back-end so firestore is similar to the real time database that firebase offers but it's supposed to be more scalable so it's supposed to have a more

of an intuitive data model it's also easier to administer so once we build this application we're gonna compile it for production and we're gonna push it to github pages for hosting okay since

we're using firebase which is a cloud database it's not an actual back-end that we have to manage we can use just a simple shared hosting account or something like github pages so we're

gonna set up a workflow where you can easily update the app and then you can compile it and then easily push it to your live site okay and as you can see I already have it deployed but I'm gonna

delete this after and we're gonna start from scratch you can see it's on my brad traversée github do and I just want to give you a quick demo so we just list our employees here and each employee has

a department so we have IT and sales and we're ordering them by department and if we go down over here you'll see we have this eye icon if I click that it takes us to the employee page where it shows

us the employee ID the department there in the position we can delete the employee if we want so if I go ahead and click delete click ok and you can see that employee was deleted we can edit

the employee by clicking this button down here and and as I should mention we're using materialized CSS so let's say we want to change Karen's position to let's say senior

sales person I don't even know if that's a real position but doesn't matter we'll click Submit and you can see it redirects us back to her page and she's now a senior sales person we can of

course add a new employee so we'll say zero zero six for the ID name let's just say white Department will say IT position will say say software engineer and

submit and you can see that now Harry has been added okay so that's what we'll be building guys will be building it deploying it meant creating a fire store which you can see here this is the

firebase back-end using the the new fire store platform and we have all of our employees here alright so that's what we building hopefully you guys enjoy it I apologize

if my voice is still a little raspy it's taken me forever to get over this infection or whatever the hell this is but hopefully you enjoy the series and let's get started hey guys if you've

been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep

bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below

for more info alright so the very first thing we're gonna do is create our fire store database so you want to make sure you're logged in to Google and go to consult firebase google.com and we're

gonna go ahead and create a new project you can see I have this view FS dev this is the initial project I created so I'm going to create a new one called view FS - prod and we're gonna create that

project okay so now that's been created and what we want to do from here is go over to database now I'm not going to implement authentication we can look into that in another video or possibly a

course I do plan on doing a view and view X course but what we're gonna choose here is the cloud firestore option not the real time database so I'm gonna say try fire store beta at the

time you're watching this it might not still be in beta and we're gonna use test mode okay so that we don't have to authenticate or anything like that and we'll click enable

and if you guys watched my angular firestore series this is all the same thing we're just setting up fire store and you'll probably if you did watch that and now you're gonna do this series

you'll notice that that view is actually much easier to work with in angular I love both frameworks but I think angular is really good for a large projects I think view is great for smaller projects

they're both great frameworks so let's say add collection and we want to add a collection called employees okay that's gonna be our only collection and each employee will have a couple different

fields so the disc document ID this is basically the unique ID that firestore uses this is auto-generated we don't want to mess with this we do want an employee ID though that we enter so

we're gonna say employee underscore ID that's the field for this one we're gonna just do 0 0 1 it doesn't really matter what you use I'm just going from 0 0 1 0 0 2 and so on so the next thing

we want for this employee is the name and let's do I will just say John Doe he'll do another field this is gonna be the department so dep t and we'll say John Doe is in IT and then we'll do his

position and for the position will say database admin and save and we should get one we have our employees collection here and we have one document in that collection and you can see the different

fields so let's create another one so we'll go add document and again employee underscore ID we'll say 0 0 2 let's do name I'll say Sara Johnson just making up names here and then departments for

Sara let's say she's in sales and position we'll just say sales Sales Lead and save will go ahead and add one more document so add document ploy Eid zero zero three say name Sam

Smith Department is gonna be IT excuse me and position let's say server admin and save alright so now we have our database at least an our initial database that we

want to work with so now we're ready to begin on our application alright guys so first thing we're gonna do is we're going to install the view CLI which is the command line interface to create

view applications to compile them and build them out to run the server and a whole bunch of other stuff so we need to install that globally and you're gonna need nodejs installed because no js'

comes with the node package manager and that's what we use to install it so if you don't have node installed just go to node.js org and download and install it then you're gonna want to just do NPM

install - g4 global and then view - CLI and I actually already have it installed so mine may go faster than yours all right so we'll clear that out next thing we want to do is you want to go to

wherever you want to create your project folder I'm in I'm in a folder called projects this is where I want to create it so I'm gonna just go ahead and save you in it

I want to use webpack and then I'm gonna call this employee manager okay so you want view in it the template which we're using webpack and then the name of the application so that'll create a folder

called employee manager I will actually have to go through these questions first but it will create the application folder for us so project name description will say simple employee

spilt arrow whatever doesn't matter author so that's fine let's see so you want to choose runtime and compiler you can install you can install without the

compiler but it's only 6k lighter which is nothing so you always want to choose the compiler and we want the router so we're gonna say yes yes lint I'm gonna say no to that I don't like to use

linters and tutorials because I don't want unnecessary errors that aren't really errors they're just you know formatting recommendations we're not gonna use unit testing so we'll say no

no end-to-end testing and then I'm gonna use NPM for my package manager but you can also use yarn and then that's it all right so this spawn II NPM II net error I'm not sure exactly what that means it

doesn't effect anything but if you guys know what that is then you can let us know but let's go ahead and clear this out so now we we've initialized our projects let's CD into employee manager

and from here we're just gonna run npm install and that will install all the dependencies that we need so it'll take a look at the package.json file all the dependencies which we'll take a look at

and it's installing all those for us well I'm really losing my voice it's been like I don't almost a week okay so now we want to do is one more thing to install and that is firebase so npm

install firebase if you're using NPM less than version 5 you want to make sure you do - - save and it doesn't hurt even if you are using version 5 but that'll make sure that it's included in

your dependencies all right so that should be all set now what I want to do is open this folder up in my code editor I'm using Visual Studio code so I can simply say code dot

if you're using atom you can do atom dot or you can just open it up you know manually from within the editor close the welcome page and there we go so now this is our our application structure so

if we look at package dot Jason we have in our main dependencies view itself the view router and firebase and then all of our dev dependencies including web pack including tools to minify

tools to compile es6 and ES 6 plus with babel so just a bunch of dev dependencies and to start our server we can do npm run dev or npm start to build we can do NPM run build and that will

build it all out into static assets and we'll do that towards the end all right so close that up and if we look in source that's our main application so we have our main JS file

this is like the entry point where we bring in view we bring in our main app component we bring in the router we instantiate view with a main element so this is saying look for the div with the

ID of app or the element with the ID of app and then insert the app template and if we look at our index.html file excuse me we have a div with the ID of app so this is essentially where our view app

goes all right I'm just going to change the title here look a little better all right we'll save that and we should be able to start our server up to this point so what I'm going to do is open my

inline terminal or my integrated terminal with control tilde or you can go to view integrated terminal and we're gonna run npm run dev and it should open I believe on localhost 80 its 8080 by

default but I think I have something open on that port so mine's 8080 one so I'm gonna go ahead and just grab a browser and we'll go to localhost 8080 one and

here's our default view application I'm just gonna snap it to the side here well I have a lot of stuff open all right and we'll go ahead and open up our chrome console with f12 now you may you may

want to install the view extension for your from chrome dev tools it can be really helpful I'm not going to get into that I want this to be kind of a quick series focusing on just firestore and

view we're also not going to be using view X which is the state manager I do plan on doing more videos on view because it's been a while I actually am actually considering it

for either my next udemy course or the one after the next because it is a great framework I actually prefer view overreact and I know a lot of you guys are gonna hate me

for that but I do I prefer a view and angular overreact but it's all preference you know there is no best framework it's it's all about preference it's also about the the particular

project you're working on now what we're looking at here is if you look in the source and components it's this hello world view dot view file and this is the hello world component that comes

standard with the CLI and you can see we basically just have a template a template needs to have one single element and then every everything inside of that single element and down here you

can see where we have our script tags we have the name of the component and then the data object and then down here are some simple styling all right so a view component is very simple and that's what

I really like about it this message right here this is this welcome to your view j/s app and that's coming from this right here okay so we're not going to use this hello world component this is

just the the boilerplate what I want to do now before we stop and get into the next video is just create our firebase config files so we're basically going to need two files firebase config and

firebase and knit and I'm gonna put those right in the components folder so let's say new file and we'll say firebase config dot J s and let's also create a file called

firebase and knit dot J s ok camelcase so we'll start with the let's start with the config so we'll open that up and then you need all your specific firebase info or firestore info in here and you

need to export it as a default object so we're gonna say export default and then if we go to our fire store and let's go just to the project overview and then click Add firebase to your web app

you'll get all this information it'll be completely different from mine but you want to get everything that's in this config object so I'm just gonna grab all of these key value pairs copy that and

then I'm gonna paste it in this export default and that's all we need in this file so we'll save that that's our config so now we'll go to our init file and we want to do a couple things here

we first want to import firebase remember we did NPM install firebase that's what we're bringing in here so we're saying import firebase from firebase and we're using our es6 module

syntax here we also want to import the firestore so let's say import you know what I'm gonna do I'm not gonna use semicolons I'm gonna try not to because that's the standard for view and I want

to try to stick you know try to try to be consistent here so let's say firebase slash fire store okay now we want to do is import the config file we just created so we'll say import firebase

config from and that's gonna be from dot slash meaning the same folder we're in and then firebase config ok then we want to create a variable called firebase app and we want to initialize the app by

setting that to firebase dot initialize app and then we just want to pass in our firebase config okay and then the last thing we want to do here is just export default and we want to export the

firebase app dot firestore no it's not camel case it's just fire store all lowercase just like that so that's our initializer so we'll save that and that should be it as far as configuring

firebase okay and just to make sure our app still works okay so in the next video we're gonna start to build out some of our components we're gonna use the router or basically going to have a

couple different pages one to add the the employee one to edit the employee of course we need the home page where we list the employees so we're going to get to that in part two