Build Process

[00:00:00]
>> Anyone that has taken any of my courses before knows that like I am a front end infrastructure nerd, like I just love build processes. I like fighting Webpack, I like TypeScript. I like parcel like I like all these tools that make code work, make code better and it's like it's my favorite part of setting it up.

[00:00:19]
So whenever I teach these classes I get really excited to teach these. So I spent half the damn class just setting up all these tools. And so if you don't like that, I don't care because I love it and you're gonna sit through it with me. So, I mean, I care like this much like I don't like making you suffer but I also like making me happy.

[00:00:37]
So if you suffer a little bit to make me feel a lot happier, so I'm gonna do it. It's okay. Got them and I'm a jerk. That's fine, it's okay. So we're gonna be building this project. And we could put everything in one file, right? That would work.

[00:00:57]
So like all the JavaScript and everything like that could go in one file and we could load one file in our HTML. That's not ideal. What would be better is if we could have multiple files that were kind of smaller and more modular. That would be better organized.

[00:01:11]
So we're gonna do that. But the problem with that is up until very, very recently, there was no strategy that the browser could employ to have multiple files loaded, other than just literally listing all the files in your HTML. And that is tedious, it's brittle and it's just a bad idea.

[00:01:28]
I've done it before professionally, I do not recommend it. So, what I'm going to recommend is we're gonna have a build process to make this a bit easier and to work better. Until recently, browsers didn't have the ability to load ES modules natively. They actually did get that ability fairly recently.

[00:01:49]
But we won't be able to reliably ship code to our end users for five or six years doing that and the reason is there's a lot of people out there that just have old browsers that never update them. And you don't want to exclude them from your website just because you want to use new shiny tech.

[00:02:08]
That's just something that's never sat well with me and it's not a good idea. There's no reason, if someone wants to go to your site, and the only reason they're not able to get your product is because you wanted to use the new south VS modules or you wanna use generators or something like that.

[00:02:23]
You're a jerk [LAUGH]. Like me, you're a jerk. So, the nice thing about using a bundler is we can use those new features and it will back transpile them. So that we can use something really new, let's say like nilesh operators or coalescence, or some of these other newer features.

[00:02:46]
And our tools will transform that into old JavaScript that all browsers can understand. So, we're gonna use a bundler. That's I've been talking a lot about why we're gonna use a bundler. We're going to use a bundler. There's a lot of really good bundlers out there. The most common one that you'll hear everyone talk about, there's a course on it.

[00:03:06]
I work with the one of the core maintainer, Sean Larkin is webpack. Webpack is a fantastic tool. It's very reliable. It's very configurable, it's robust. For a lot of enterprise projects, I would recommend you use webpack just because there's such a rich ecosystem around it. And the maintainers of it take really good care to make sure that it's a good product.

[00:03:26]
The thing that I'll say about webpack is it can be difficult to set up. And I think someone out, there's probably people watching right now and saying that I'm understating it, which is true, it can be very difficult to set up sometimes. So the tool that I want you to use right now is one called parcel and I've used this in my other classes before.

[00:03:46]
I'm quite fond of it. Parcel is a very smart tool. That like you just point it at an entry point and it just figures out your graph for you, all your various different files, and it figures out all the transformations. So you actually don't configure it at all.

[00:04:01]
It just works out of the box. There's other really good ones, browsifies, old, but it's still works really well. It's really stable, so it's another good choice. There's one called Snowpack, Roll-up and Microbundle, those are all really good bundlers as well. But we're gonna use parcel today. So I want you to come to your project, make sure you're in the, wherever your Foxgame is, right?

[00:04:23]
So if I hit LS here you can see that I have package.json right there. I'm gonna say npm install. Now, I can type npm install every single time. I'm lazy, so I just type npmi, it's the same thing, it's an alias. And then I put dash capital D for this is a developer tool.

[00:04:45]
So your npm dependencies have tools that you need for production, like react and things that actually go into your code. And then you have tools that are used to build your project that don't go out to production, right? Like I have parcel on my computer to build it, but I don't ship parcel to my web servers at the end of this.

[00:05:01]
So that's what the dash capital D is for. And I'm gonna put parcel-bundler, like that. So I'm going to npm install in my developer tools, parcel-bundler. Okay, then I hit enter and this is gonna show a bunch of stuff like this. You should, if you installed node already, you should already have npm.

[00:05:25]
Npm doesn't stand for node package manager but it's the node package manager. So I don't actually know what it stands for. Now that Microsoft has bought npm maybe I can figure it out. Maybe there's like some secret document somewhere that tells me what npm stands for. And if I find out I will tell you, maybe not because I like my job, but I will tell you that I know what it is.

[00:05:48]
Cool, so now we have npm installed. If you see some sort of npm not found, make sure you that node is definitely installed, maybe restart your computer. Those are some things that you can try. Okay, so we need to give parcel somewhere to start. So we're gonna go into, I'm gonna go back to VS code.

[00:06:10]
So let's look at VS code here. So first thing you're gonna notice, if I go to my package JSON, I have a Dev dependency, which is what the dash capital D is. Notice that it's in Dev dependencies, there's another one called dependencies which we don't have any of yet.

[00:06:25]
And it tells you that when when you bring down this project, it needs parcel bundler, right? And so this is gonna pin a version here. If you have problems in the future watching this course with parcel just make sure that you're probably on the same version of me.

[00:06:39]
So you can do npm install-capital D parcel-bundler at with this character, 1.12.4 and that might fix some of your problems because these things update frequently. Okay, so parcel-bundler, that's what we got there. We now have a package lock.JSON, which you can see here is enormously long. If we look down here it is already 7000 lines, 7500 lines.

[00:07:12]
So this is a file that you do commit to your get repo and it locks down all of your versions. So that in the future, if someone comes in reinstalls everything, they're gonna get exactly the same thing that you did. That's what the package lock is. It's a useful thing.

[00:07:26]
You'll never edit package lock by hand. Never, never, never. It's just there. It's for the tools, not for you. Okay, and then notice here, now I have a node modules directory which has a bunch of stuff and this is all the packages that parcel needs to do its job.

[00:07:42]
So that's where all that came from. And this is why we get ignore it because we can also npm install these later. We don't necessarily need to npm install them or we don't need to commit those to our git repo. We can always recreate it whenever we need to.

[00:07:59]
I'm going to create a new file. And I'm going to save it to my source directory. And it's gonna be called index.html. This is the main entry to our project. This is going to be the HTML that kicks everything off. Now that I'm in index.html, notice that this is an HTML mode, right?

[00:08:28]
There's a really cool trick here in VS code, it's called Emmet. So I'm gonna say HTML colon 5, and you can see here that I have this Emmet abbreviation. If I click on that, notice it just generates a bunch of HTML for me. This is really nice because I can never remember all the things that I need to get started with a project, and this just kinda does it for me.

[00:08:50]
For the title here, I'm going to call this the fox game. This is what like what's gonna show up on the little tab in your browser, like it's the title. So I'm gonna call this a fox game. You can call it whatever you want. And here in the body, we're just gonna put an H1 here that says hello world or something like that, just so we can tell that everything's working.

[00:09:13]
Now I have like a bare bones totally just the essential parts of our projects like our HTML. So we have enough now to tell parcel how to build our project which is kind of fun. Now we're gonna go back to our package JSON. Now that this is all written now.

[00:09:35]
And here, there's a thing called scripts. So scripts is really cool because I can make scripts that I can run later. And you can see there's one already here called test that says, echo test not specified and exit one. So that means if I ever run npm run test, it's gonna run whatever is in the colon here.

[00:09:59]
So if I say npm run test, it's gonna execute everything that's in here. You'll see an error that's on purpose. That's what this exit one does. But you can see here, it echoes out, no test specified. In fact, I could literally just copy this. And run that. It actually exited my console, maybe not necessarily what you want it to do.

[00:10:30]
But I can bring back another console, that's fine. But that's what this is going to do. So I need, it's basically like a placeholder that can remember scripts that I want to run. So we're gonna write one here ourselves, and we're gonna write one called Dev. And it's just gonna be parcel src/index.html, So now any time that I do npm run Dev, it's gonna run parcel and you're giving parcel the entry point of index.html.

[00:11:11]
So if I say npm run dev, you can see here it's running parcel on source index.html. And it's gonna run a local web server for you at localhost:1234. So if you're VS code, I can actually just hold command and I think in Windows, you hold control. And I click on it, if you just hover over it, it'll tell you what to click.

[00:11:33]
So I'm gonna command click on this and you can see here, I now have local host :1234 and it should be telling you hello world. It's pretty cool, right? So parcel generated to directory's force one called.cash which is just full of garbage don't look in. It's just a bunch of stuff that makes parcel build stuff faster and there's one here called dist which is actually like the built outputs.

[00:11:58]
So if I click on this, you can see it's actually literally the exact same thing because it's copying everything over. But eventually, it'll be the files that you build for your project. So that when you do parcel build my project, everything will end up in disk. So this is the generated output from parcel.

[00:12:20]
So these two folders, we don't want to commit to our git repo because they're generated files. And in general, you don't want to commit generated files. Except package lock, do commit that one, but the rest of them don't. So we're gonna come in to our get ignore, and we're going to ignore dist and we're going ignore .cash slash.

[00:12:42]
And you can see here VS code has now smartly grade things up. It's like cool, I'm going to ignore this, I'm not gonna index them, everything is totally fine. So any questions so far? That was the end of the built process part of the course.
>> I have a question, how does the creation of the dist folder make the execution more efficient?

[00:13:03]
>> Let me kind of split that into two questions. The cache is actually, it'll go through and save a bunch of stuff so it doesn't have to recompile stuff later. So that's what's speeds up the rebuilds and all that stuff lives in .cache. The dist part of the project and this is place right now is actually just dumb because we have just HTML.

[00:13:24]
But eventually, when we have a bunch of JavaScript and CSS, all the compiled JavaScript and all the compiled CSS will live here. So this is actually like the end product. So when you just have the HTML, dist is worthless, there is no reason you would use parcel to build HTML, probably none, I don't know.

[00:13:41]
I can't give a reason, I can't think of one. But once we have JavaScript and CSS and all this stuff, it'll be here. It'll have all the correct links. It'll replace a bunch of stuff. It'll compile it and run it through all the various different build processes.