Building a Project with Parcel

[00:00:00]
>> So this is cool, I think it's cool, but we could make this a bit better, I think. There's a problem here with our code, looking at our code here in index.html. Here we're relying on unpackage to never go down or to not move something or to delete something.

[00:00:22]
Basically, we've entrusted the health of our website to a third party which is not a good thing, right? Actually know the person who works on a package, but you probably don't know the person that works on package, right? How much do you trust them you probably had never heard of them until right now, so maybe not very much.

[00:00:40]
So, I'm gonna show you how to build your own projects very quickly. So instead of including this, we'll just include file. So, I'm gonna need you now, actually coming back here, to go to here. If you have not installed node, we're not actually going to use node, but we're gonna use node to build our project.

[00:01:07]
This link here will take you to nodejs.org, you can download a version of Java's or of Nodejs. I'm gonna be on node 16 as long as you're above like node 12, probably okay, like 14, 16 will be good. Okay, that might take you a little bit some of you probably already have installed.

[00:01:31]
If you're watching the video just pause me, go install it and then come back. And then we're gonna do a little bit here just a tiny bit of stuff in the command line. I have a whole course in front of masters that I would suggest taking after this.

[00:01:46]
If you're not familiar at the command line, we'll actually go in depth and teach you it. It's called the complete intro to Linux and the command line. It'll teach you all these kinds of things. We're just gonna do like the most bare bones little bit of it. So once you have node installed, I want you to open your project here in the command line.

[00:02:10]
I think with Mac, you can literally just drag it on there, let me try. There we go, so mine's on desktop/motion. Yours might not look like this, so I'll make this much bigger so you can see it, but all the command line is it's little client that lets you navigate around.

[00:02:30]
If you're on Windows, you'll have to use something like PowerShell, probably. Which will work fairly similarly, and then Mac you can just open the terminal application here. Okay, so I'm on motion, And, We're just gonna make this as simple as possible. I'm gonna say npm, which stands for node package manager, install --global parcel.

[00:03:07]
Parcel is the name of the tool they'll actually build our project for us. Try doing that, you'll see something that should look like this. Should take a little bit probably, okay, so now I have a tool called parcel. And I'm just gonna say parcel which is now a tool that I've installed, and I'm just gonna say index.html, which is the name of the file that you and I were building, right?

[00:03:57]
Okay, now this is building a project for us. So notice I say it's running at localhost : 1234, so you can just copy that. And come over to your browser and just paste that in there. So you can see I have the same website but instead of notice here, same website I have file, right?

[00:04:18]
This is actually running from a little tiny server hosted inside of my computer. So, as opposed to having like a server hosted out in Amazon or Digital Ocean, or something like that, my server is hosted inside of my computer. So my computer is both the client and the servers, local development, right?

[00:04:37]
Cool, Now instead of saying here in animation.js, just add one more line at the top here, say const: popmotion=require(popmotion). So, you're gonna come in and you're gonna delete this script, and the other thing you have to come in you have to tell parcel kind of code this is.

[00:05:00]
And it's gonna be modular codes, have to say type=module. Okay, you're gonna be getting an error over here says, hey, I don't know what popmotion is, we have to go install it. So, the next thing you're gonna do is you can say, Ctrl+C, it will stop your server.

[00:05:21]
So this will stop my server and back to my thing here. And I'm gonna say npm install popmotion, and let's keep it to version 11, so just a pop motion@11, cuz that's what we were using before, right? As of the filming of this, that's the most current version of popmotion, but if you watch this, a year from now they might have have 12 or 13 out, which might work differently.

[00:05:47]
Okay, now I'm gonna say parcel index.html here again. And if I refresh my page here, now this still works, right, but where is the code coming from? Where is popmotion? Well, if you look here, when you said npm install, you created this thing called node modules, and inside of here, you can see that you have a few libraries.

[00:06:24]
Most importantly, popmotion is coming from here. So, when you say here in your code require popmotion, this is going and grabbing popmotion out of your node modules so that you can use it. You now have a superpower that you can go get any open source library. All you have to say is npm install, react, right.

[00:06:45]
And all of sudden react is available for you to use and all of your code, or popmotion or momentJS or the entire myriad of things that JavaScript developers have created. This is kind of unlocking your next step for you that you can go and create new projects with frameworks and libraries.

[00:07:10]
Any questions about this? You'll notice this did create a bunch of stuff for you. It creates a package.json, it creates a package lock, it creates a node modules, and then parcel creates parcel cash and a bunch of other stuff for you, that's all fine that's very expected. And then the last thing I wanted to show you here, if we look here now in our console, we wanna look in the network, that refresh here.

[00:07:45]
Notice, I have this like index.64, thing I got, this is actually the built Javascript that's being sent down to your computer. And if I look at the response here, This is all of your code. Notice how much code is here, right, it's absolutely wild how much code is here.

[00:08:02]
This is all of your code. Most of this is just popmotion cuz popmotions are fairly large library, but your code I think is probably right there at the bottom. It's gonna be pretty close to the bottom. Well, maybe it's in here somewhere, anyway, your code is somewhere in here, right, but it's enough that this is all able to work.

[00:08:26]
Cool, that's all I wanna show you about that. I just wanted you to be unblocked, if you wanted to go and install something like react. If you're interested in stuff like that, there's tons of front of masters courses on React, Angular, View, Ember, all sorts of other really fun stuff, and basically all of them use this process.

[00:08:55]
Okay, So, yeah, I actually list some of these down here at the bottom. Complete intro to React, so you wanna get started with you wanna React. There's View by Sarah, there's Angular with Lucas. And then if you wanna do something like data visualization, there's currently one out by surely, but there's one coming out next week by Angela, okay, cool.

[00:09:24]
Yeah, so check out that one by Angela cuz I'm sure by the time this one's out that one will be released.