Deploying to Netlify

[00:00:00]
>> Before we embark on the final exercise, what I do wanna go ahead and show you is the fact that we've built all this stuff. And then, so in case anyone hasn't had the chance to use it, I'm gonna show you how to deploy your app. Because after all, once you build something, it'd be nice to actually deploy it and share it with people.

[00:00:13]
So let's go ahead and do that right now, and I'll show you how to do that with Netlify. So none of this has any code. So, basically, Netlify is a deployment service similar to I think Vercel, AWS, Cloud Flare, there's a bunch of them out there. I just happen to be showing you Netlify.

[00:00:27]
And so basically with a free account, all that we need to do here is we just add a new site. So I can import it from any project from GitHub directly, and we'll see why this is important in just a moment. So basically authorizes it with my GitHub credentials.

[00:00:44]
And then, we just did the TypeScript, let's see, TypeScript search, search, search. Maybe I do the and. There you go, typescript-and-vue-workshop. And so what it'll do is it'll detect a few things as far as the owner, branch to deploy. And so currently for me, normally your app is gonna be in your root directory, but for me, it's currently an app.

[00:01:07]
And then the build command is going to be npm run build. And then after that, all I do is hit Deploy Site. Okay, and so what's really cool, I think, about deployment these days, if anyone's done any old school deployment, is that a lot of things have been automated for you.

[00:01:27]
So because we've hooked it up directly to our GitHub repo, we get a lot of basically benefits out of this. And so even just for the free project stuff, it's pretty incredible. So you can see here that we have an isolated container that's currently go ahead and building all the things, and it's deploying it.

[00:01:43]
And what's great is that once you're done with this, you can see that, okay, well, I can still show you some things [LAUGH] while this thing is broken. But because it's actually hooked up to your GitHub repo, what it does it means that it auto tracks in deployments.

[00:01:57]
So in the instance, for example, let's say that we wanted to update our tagline. So if I go to the navbar, for example. And inside the tagline we, see, that's currently being imported on app. So I'm gonna say tagline, it looks like it got deleted at some point, so track whatever you want to eat.

[00:02:20]
And then if I just commit this, I know why it's broken, okay, that's fine. Get commit, [SOUND] so feature a tagline. So let me check out, I forgot, it's watching the main branch, so we're all the way up in 11. So just to show you that this works real quick.

[00:02:45]
Inside of my App.vue, we can go ahead and just add an h1 to say hello. So I'm gonna delete this commit later, so, Git commit, add title, delete me later, git push. Okay, so one of the things it does for you by default is that because it's watching your main branch, you'll notice that it automatically picks up that change and then automatically deploys it.

[00:03:12]
And what's really nice about the deployment services these days, especially for those getting started with new projects, is that it, particularly with Netlify, all of your deploys are atomic. In other words, they live independently of one another. So in the event you ever need to roll back, it really is as simple as basically clicking on the deploy that you want and basically saying, hey, let's go ahead and lock it to this particular branch.

[00:03:34]
And this is huge when it comes to deployment efforts because you can iterate a lot faster. And more importantly, you don't have to worry that rollbacks are gonna be really expensive in case something breaks. But otherwise, just notice that if you're building any apps, check out these kind of deployment services cuz they can do a lot for your workflow.

[00:03:50]
And when they deploy everything, they all have their own CDN and all that caching and stuff is taken care of, which as those of you who've done that in the past know, it's really painful to manage that on your own. So, that's basically my little pitch, just something to keep in mind when you're trying to deploy your next project.

[00:04:05]
And so a lot of them have really generous tiers, free tiers, and that kinda stuff. So be sure to check it out. And that's not even to talk about serverless functions, which is the whole thing of itself, but I did manage to get the deploy working. So I thought I might as well show you kind of what happened and then that way you can learn from my mistake.

[00:04:22]
So we check out the build and deploy configuration basically for how it is being built. Prior to this, actually, this is what it looked like. So let me just delete this real quick and save. So typically, when you're deploying your app and it's on the root directory, it will automatically fetch some configuration, automatically detect that you need to deploy the dist folder, all that fun stuff.

[00:04:44]
Well, what you might have noticed is if you're looking at my base right now, it knows that my base directory is app, cuz that's what I configured. But I forgot to tell it that the published directory is gonna be the dist folder within the app. And so basically, once I came in here and then I dropped in the dist folder, that's what made everything work, which is why here now, when I click on the deploy, you'll see, hey look, everything works now.

[00:05:04]
We have our restaurants, we have our dishes, this is great. And then now that we have that working, something that's fun that you might want to know about is that this randomly generated hash here, you can actually customize that. So for me, I'm just gonna go ahead and this will be the toeat-mvc-app.

[00:05:21]
And so if I save that, you'll see that within a matter of seconds, it's already been swapped out as a subdomain, since it's available. And you can see it actually does work. And now that can be shared as the permanent link for the app, which is actually pretty cool when you think about the fact that we spend all this time building and creating things.

[00:05:37]
I mean, we want an easy way to share it, right, to share it with the world so people can use it and do things with it.