Build Tools Exercise

[00:00:00]
>> So, to kind of review what just happened, cuz I know that was a lot. So, we went ahead and scaffolded a brand new project using the create-vue CLI, which created this entire playground directory. And then, the key thing here is that, inside of our index.html, we can see here that we are getting our Vue stuff from the source main.ts, that's how you're gonna follow this.

[00:00:23]
And so, inside of main.ts, this is where we can see IS. This is where we're mounting it to the app, and then more importantly, that create app, right? If we look back at our app right here inside of playground, Remember how we pass this object here, this object now has been exported out into its own file.

[00:00:44]
So, that's what I'm talking about in terms of modularity. So, this app now, so then to continue that line of thought, to open it here, this object that we see here that we're exporting, this object is actually what's being dropped in here. So, that's how those three things are being connected.

[00:01:00]
And this is also one of the reasons why build tools can be super confusing, because there are a lot of moving pieces to it. And so, to just sort of dive right in, get your feet wet, what we're gonna do for this exercise, is go ahead and create a brand new project with create-vue inside of our directory that we've already been using.

[00:01:20]
And this time you're gonna rename it to whatever your show name dash forum. So, in my case, it'll be Avatar Last Airbender dash forum. And then we're gonna migrate the stuff that we've been doing inside of index.html into App.vue. For those that haven't upgraded their Node version in a while, if you're on anything less than 16.

[00:01:37]
Basically, Vite doesn't play that well with some of the older versions because some of the modern libraries are actually basically have moved on. And so, just so, again, this will probably be outdated by the time cuz Node moves very quickly, but the latest stable version is actually 18 at the moment.

[00:01:53]
So, it's one of those things where if you feel like the versions are moving quickly, don't worry, it's not just you. But, if you're having issues with Vite, please go ahead and upgrade to at least 16. Cuz I know some people have issues with bit support, like 32 bit, 64 bit support, when it comes to 18.

[00:02:10]
So, something to consider if you run into that problem. So, let's go ahead and run through that migration once more, and this time I'll do it with my TV show that I selected. So, let's go ahead and do this. So, what we're gonna do first, is we're gonna create our new app.

[00:02:28]
So, I'm gonna do npm create vue@3. And the reason you want the @3 at the moment is because you can technically do @2 as well. I think at some point there probably will be a default version switch so that npm create-vue will do its thing. But for now, it's always safe to just go ahead and add the 3.

[00:02:44]
So for me, my TV show is Avatar Last Airbender, but that's a lot to type out. So I'm just gonna use the acronym since most people know it, which is ATLA, for Avatar The Last Airbender, and this is the format forum app for it. For now, I'll just disable TypeScript just because this is mainly for demo purposes.

[00:03:00]
But like I said, when it comes to any sort of app you intend to scale, it's worth spending the time to just configure TypeScript. Add that one line to your TS config to allow for JavaScript, and once you do that, you basically can ignore it until one day you're like, you know what, I'm gonna try types on this one file and then easy peasy.

[00:03:17]
No JSX, we're not gonna worry about Vue router for now. I know there are some questions regarding a standard Vue project. We will be spending time on Vue router, so typically, you probably would select yes for this, in the event you're planning to scale your app. But in this case, don't wanna conflate the pages right now, and it would be kind of confusing.

[00:03:34]
So no, same thing with Pinia for state management. Not gonna worry about testing, and figure out those, and then the main two, I would say yes to, is the ESLint and Prettier. That's it. As you can see here, we have a new directory here. And so if we do ls, we can see that your ATLA forum.

[00:03:54]
And then if I go and change directories into it, we'll see now, boom. We have everything that we would expect as far as your public directory, your source directory that contains your App.vue component, and then all the different configuration files, and build stuff that you need. So, I'm gonna go ahead and just npm install for that, and let that run.

[00:04:14]
In the meantime, we can go ahead and just migrate, cuz the npm install what it's doing is it's allowing us to set up a local dev server. Which I didn't cover earlier, but we'll explain basically what are the benefits of it, now that we're starting to play around with it.

[00:04:26]
So, let me go ahead and close all this real quick. I need this App.vue. Boom, case split, okay. There we go. And then this one, we need to open up my index.html. And there we go, okay. So, when it comes to migration, the first thing first we'll notice at the top, is we did customize this title piece.

[00:04:49]
And normally in some other build tools, I've experienced in the past, you have to go through a bit of work to change that. But, it's actually fairly easy to do, because inside of our project, you'll notice we also have an index.html here. And guess what, here is our title.

[00:05:04]
So, rather than just being Vite app, I'm just gonna copy over my Avatar Last Airbender and replace that, and there we go, we've customized that. Next, we have everything that's inside of this app div, so I'm just gonna head and copy this, knowing that I'm gonna have a default wrapper, that I'll remove.

[00:05:22]
So, we'll go ahead and delete all this stuff inside of template, cuz this is where our HTML is gonna live. So, if I paste here, you'll see here that everything's looking good. We have some errors that we can deal with later, but we can go and delete that Id app, cuz we don't need that div anymore.

[00:05:36]
And save that. And then as you can see, Prettier is automatically reindenting everything for us, which is super nice. Then we won't worry about it yelling at us at the moment, we'll go ahead and clean up the JavaScript. Because this stuff, we're not worried about it right now.

[00:05:50]
And then we will also delete all the styles here, cuz that's not relevant to us either. Okay, so finally, the last thing we need to do though, is we need to copy all this JavaScript that we wrote into our script block. So, if we do that, let's take the entire object here, Cut that, and then inside of here, we're gonna export this as a default object, and just paste that in.

[00:06:18]
Nothing else has changed. We have our entire Vue app now, logic wise inside of here at the top. And then the last thing we need to change here, is to add the key. So, I'm just going ahead and just do a quick dynamic key. So bender, and then just do a stat.

[00:06:33]
So, for objects it's tricky cuz you don't get an index, so, I usually just end up tagging in all of this. So, you can see here, bender stat type, that should prevent it from duplicating, okay? Then, let's just quickly do that as well, this will be character-index, which we'll get by opening up the second argument inside of this full list, and then same thing for here.

[00:07:03]
So actually, this is interesting. We have an else-if here, that's doing even. So, for the sake of argument, let's just do even character like that, and then I can copy this. And so, inside of here, that way we basically guarantee that even though these characters, these things could display, at the same time they will have different keys, so, that way there will be no conflict.

[00:07:26]
And then we need to actually fetch the index from this. So, let's actually split that out as well. There we go. Oops, looks like I have a couple more to do. Gosh, there is a lot in here. Let's call this comma-list. And then, there we go. And then v-else there are odd characters.

[00:07:45]
Has no adjacent if, what? I know why. Okay, so this is a fun error, so I actually didn't realize this has been broken the whole time. So, this is one of the advantages of using build tools, is because if we look at this error message, it says, v-else, v-else-if has no adjacent v-if, v-else-if.

[00:08:01]
Because if we actually look here, the next element right next to it, it's sibling, is actually just a normal p element. Through the course of me messing around, at some point I basically moved it way too far from its original check. And so if we look here, this is actually where it belongs, it actually belongs up here.

[00:08:19]
So, I'm gonna go ahead and cut this out. So again, just like spell check, and when you're writing papers, with build tools like Volar and extensions, it can make life a lot easier to catching those kind of errors. So that you're not like, wait, where did everything go?

[00:08:33]
>> So, these weren't caught before because the plugin just couldn't build it?
>> At the time, I will say I actually had it disabled. So, it's possible it might have caught it, but at the same time it can be tricky sometimes, cuz you have to make sure it can detect that the Vue language is being run.

[00:08:49]
So, I'm less confident that the extension would actually pick up on it inside of an index.html. But something worth trying later on, just to kinda see if that works. Okay, so to make sure this works, we're not gonna save the changes to this, but this is good. We are gonna go ahead and run this, npm run dev.

[00:09:10]
Here we go. And we can see a lot of things are broken, and the reason it's broken is because why, inside of our main.js we are importing a main CSS. And we don't want all that styles right now. So, there we go. Now it looks exactly as we expect.

[00:09:25]
We can favorite stuff just like we did before, our statistics show up. This looks good. Okay, does anyone have any questions about the migration overall? I know it's kind of a lot to go from the index.html to this, but it's one of those things where I think once you get used to it.

[00:09:43]
And more importantly, most of the time you won't be in an index html file, and moving over to build, you will basically be starting here. And we'll basically start getting more practice with how we work in this particular environment going forward. And so something else I did wanna cover though before we move on to the next section is, why do we go through all this process, right?

[00:10:00]
We talked a lot about builds, optimizations, but, one of the things that we have an advantage of when we have a local dev server, is what's called hot module reloading. So, as what we can see here inside of App.vue, I noticed that actually my statistics doesn't have a heading.

[00:10:14]
And so, in the past when we where coding earlier, you might have noticed I would have to add my changes. I'd have to switch, or I'd have to save it inside of VS Code, and then I have to update it inside of the browser. Well, you might have noticed that I didn't even switch contexts, and Vite's already updated the browser to have all my latest changes.

[00:10:30]
So that in the event, it was like, stat times 2, I can save that. You can see it's super fast, to the point where sometimes you might even realize that your code has changed. And that's the kind of thing that Vite has done to help as far as performance things, is because now when you make changes on your code, it's nearly instantaneous, as far as seeing the results of that.

[00:10:49]
So, that has been pretty cool as far as a devex goes. But incase you ever feel like, this is why sometimes I make large changes, because, once again, this time's 2 bit, if you're not paying attention, you won't even realize this updated. So, anyhow, that's something to note when it comes to working with this.

[00:11:06]
>> So, if you're not using Vite, you can't use the dot vue way of breaking these things up, or is that?
>> You can. Vite is just the bundler underneath. So, that's why Vue CLI allows you to, wait, when you say break it up via the Vue, you mean like via dot vue files?

[00:11:22]
>> Yeah, and have a dot vue file.
>> So that's not specific to Vite. Webpack was able to do that too. That's how we were doing in vue 2 beforehand. Vite is just making the dependencies a lot faster to load, that kind of stuff. It actually doesn't have anything to do with Vue specifically.

[00:11:38]
>> Okay, so the dot vue way of doing it is that you can do that with any kind of-
>> Yeah,
>> Okay.
>> Mm-hm, and we're about to do more of that in just, actually in this section.