Deploying Your Vue App

[00:00:00]
>> Okay, with that, I think the final thing we wanna end on is deploying your app. So we're gonna take a couple minutes to take a look at that. So when it comes to deploying your app, if you do it the standard way, you usually have to do like an FTP server, and you got to build this thing, right?

[00:00:14]
Because after all, if we take a look at our cest-la-vue app, this is not something that we can just drop on a server and it will just work. We need to actually build the thing. So the way this works, if you take a look at your package.json instead of cest-la-vue, you'll see that there's actually a build command that we can run.

[00:00:32]
So let's go ahead and do that, shall we? So inside of here, we go to cest-la-vue and npm run build. And right now, there's a bunch of stuff in there, so let me clean that up real quick. Okay, npm run build. There we go. Okay, and what that will build for you is a dist folder, which stands for basically distributed folder.

[00:00:59]
And inside of here, now, this should look like something you can actually deploy, where you have your index.html. You can see that there's generated hashes for your different assets, for CSS, JavaScript, managing those things. And you might notice that, look, those chunks that we did when we did the route, here they are, they're already parsed out for us because the bundler already did that for us.

[00:01:19]
Now, of course, deploying this can be done a number of ways, but I'll just be showing you how to do this in sort of a Git based format rather than just dropping it on the server. And so this is a shout out for the company I work for, Netlify.

[00:01:32]
So if you have a free account, this will work fairly easily. So what I'm gonna do here, I'm gonna go ahead and log in to my account. And what we're gonna do is just, we're gonna create a new site. And so the reason this is really nice is because what you're doing here is you're creating a pipeline that connects your GitHub repo that you're basically committing all your code to to your deployments.

[00:01:54]
So basically, similar to the way you want it to watch for reactive things in view to do things, this will watch a repo, and we make changes to it, it will then run your deployments. And so here, we go, complete-intro. That should show up, doo doo doo, once we give it a little bit.

[00:02:14]
There we go, complete-intro-to-vue-3. And then we have a Branch to deploy. And currently, my cest-la-vue really don't need to be 16. So I'm gonna be deploying the 16-solution brands, but normally, you'll be deploying your main branch. And then the Base directory is, for me, gonna be cest-la-vue because we have multiple apps running inside of the project right now.

[00:02:33]
So that's the specific one I wanna build. And then we're gonna run the command, npm run build. And the directory, though, we have to remember is what's actually being outputted, it's a dist directory, and so that's what being configured. So once we run that, we get something that's pretty great.

[00:02:49]
So for anyone who used to do things in the old days, where you did FTP servers, you have to manage a lot of caching, right? If you uploaded a CSS file, you had to manage like, is the user gonna get the right thing, are they looking at the same version?

[00:03:00]
And so oftentimes, when you're debugging things, it is hard to figure out what is going on because what your user's seeing might not be what you're seeing. And so in the effort of having Git deployments basically, one of the things that Netlify does for you, and there are other companies that do this as well, so this is not the only one.

[00:03:15]
Is that you'll see here that it automatically generated for me a random URL that I could share with people. And so you can see here that all my functionality is in here, actually. So if I can Continue with emails, it's live, which is great. That happened in a matter of seconds.

[00:03:30]
And then the other thing too is that with the Domain settings, it's pretty easy for us to then say, let's go ahead and swap this out. And I'm gonna call this cest-la-vue. Granted, this is where we get to it first. But now that I swapped it out, we can see now that when I open it up, there we go, cest-la-vue.netlify.app, and it just works.

[00:03:49]
And the beautiful part about this is not so much that it deploys, cuz again, there are many ways to deploy, it's the fact that it'll watch your GitHub repository. So in other words, if you go inside of the app.view right now for cest-la-vue, and then instead at the very top, we'll say something.

[00:04:07]
Let's see, from here, we'll say, This is a new message. And then I think I did a triple s on that, and let's fix that. And then if we commit this to our branch, so cest-la-vue here, and then ignore this stuff for now. One, two, three, four, five, git commit, feature: add new message.

[00:04:36]
And then I push on this branch. One of the things you'll see is that in the Deploys, basically, there's a hook to watch GitHub repo, and it knows, hey, it's time to make another build. And so you can see here, it's going off, it's running, it's building the thing, that's fine.

[00:04:56]
And so what's really cool about this, though, is that when it's running this build, is basically doing an atomic deploy. So what that means is that it's completely separate from the previous deploy. Cuz that was the problem with a lot of enterprise systems, is that once you push to deploy, you weren't sure what the assets were, and so especially if you're having users with issues.

[00:05:13]
It was hard to debug, and then let alone rollbacks, it was kind of a nightmare to deal with all of that. So okay, our site is live, so we can see now. If I go over here, you see, hey, look, This is a new message, is right here.

[00:05:26]
But again, in the effort, the atomic deploy model, what if your product manager is like, whoa, whoa, whoa, we don't want this message, that is a bug? Well, typically, what you'd have to do is you have to get your engineers, you have to be like, hurry up, we got to figure out what's going on, and you got to push the right code, right?

[00:05:38]
But now, what you can do because of the atomic deploy is you can come in here if we actually just say, you know what? We're gonna go ahead and, doo doo doo, inside of here, we can polish this deploy instead. Whoa, not this one. There you go, click Publish deploy, and we publish it.

[00:05:59]
And what you'll see now is that it's switched now from the latest commit and what we have here when we go back to our URL, voila. Everything's fixed. And so this is basically, I would say, the modern way when it comes to thinking of deployment in that, especially because we get versioning.

[00:06:18]
Why should not deploys also be versioned in a way that allows us to go ahead and whether it's split testing or ensure that we deliver the same thing to our users. This is something that I wanted to show you all and how you can deploy your app with Vue.