Setting Up a Local Development Server

[00:00:00]
>> Sean Larkin: Before we even separate our configs out or we start doing kind of conditional, I wanna talk about webpack-dev-server.
>> Sean Larkin: So now that we have this index.html file, we're actually kind of getting into browser land. We could start using dom apis. But we need kind of a better experience and then build statically, spin up a Python server or a Node server, and then test our app.

[00:00:28]
That's viable, but we can do better than that, right? This is JavaScript. This is JavaScript, you all. And so,
>> Sean Larkin: We'll add the dependency just in case. And so, those who didn't have a cache, it'll be cached. But so, you're gonna npm install wepback-dev-server, and then --save dev or capital D.

[00:00:54]
For yarn users, it's just --dev,
>> Sean Larkin: yarn add.
>> Sean Larkin: So, you might be like, well, what is webpack-dev-server? I feel like it's kind of more exciting to have you just try it, and then I'll talk about what happens as you use it. So, we can just add another one that's webpack-dev-server.

[00:01:21]
So add another key, or another script technically, and just say webpack-dev-server, and in the same way, webpack-dev-server. So, now we should be able to move that over. Thank you very much by the way.
>> Sean Larkin: And let's run it again.
>> Sean Larkin: There we go, okay.
>> Sean Larkin: So,
>> Sean Larkin: We actually see at the top.

[00:01:52]
Let me see, does it say it?
>> Sean Larkin: So it says hey, project is running in local host 8080. So we're gonna click on this, and let's say, I mean, we just used a bunch of console logs, right?
>> Sean Larkin: Hey, there's that stuff we were writing, nav top bottom, My first button, color: cyan.

[00:02:16]
So, now, we have essentially a dev server that we can test and validate our changes. So much so that it is in watch mode, right? So, why is that valuable? I always keep them side by side, and I know it's not that easy. Let's see if I can make it somewhat, we'll make a responsive page.

[00:02:41]
>> Sean Larkin: And,
>> Sean Larkin: So let's say we're in watch mode right now, right? And it's like we're literally visiting that page because webpack-dev-server takes the whole contents of your disk and serves it up. So it's like you're on that index.html page. And you're actually, let's change some of the code.

[00:03:03]
So I had some commented out cuz I wanted to make, now that we're in the web, we can actually maybe rewrite button.js to actually use it correctly, like a button. So everybody can see the dev server? Okay, so why don't we just make a little bit more browser interactive code, so that it feels like something we can view, right?

[00:03:29]
So instead of just making a button, I have some code here,
>> Sean Larkin: That I commented out. Now so Make Button is gonna actually create an element using document.createElement. I'm gonna set the inner text attribute to take the label that we created, and then I'm gonna return that button.

[00:03:51]
So now actually these types are valid too. So let's jump over to our index cuz we probably need to use it a little differently, right? We probably can't do this and console-log it. We can, but it's gonna look a little different. Why don't we actually add this button?

[00:04:07]
So const button = makeButton("Yay A Button").
>> Sean Larkin: Cool, and why don't we say document.body.appendChild? Right, that's pretty simple.
>> Sean Larkin: Let me see, we've got some errors here, I'm just gonna make sure.
>> Sean Larkin: Is not defined,
>> Sean Larkin: That's,
>> Sean Larkin: Are you able to see the button for yourself?
>> [INAUDIBLE]
>> Sean Larkin: And I know why, const button = document.createElement("button").

[00:05:13]
And look, just before our eyes, I didn't even do anything. So what you might not have realized at first, man, I should really hide, let's hide this one. Let's hide this one, let's hide this one. I don't really wanna preserve the log. I'm happy with just seeing a new fresh instance every time, okay.

[00:05:38]
>> Sean Larkin: But as we've been writing the code, even if there were errors, it's going to reset and refresh the browser any time that we make changes. So this is one of these awesome opportunities using the dependency graph is that, let me see if I can make that, is that easy to read?

[00:05:56]
Can I make it larger for you? Let's do that. This is button.js. And let me know if you want me to switch over.
>> Sean Larkin: But what's super cool is that this gives you the chance. You couldn't have a live development experience. Of course I'm on a smaller monitor, and usually I'd have the resolution a lot tinier.

[00:06:17]
So it's more manageable. But even two monitors or whatever, this is awesome. You can literally, as you code, get instant feedback. And on top of that,
>> Sean Larkin: The way that this is working, so what webpack-dev-server is, is you kinda guessed. It is a web server based on Express.

[00:06:37]
And all it's doing is webpack, instead of creating a bundle to your dist folder, it actually generates a bundle in memory. And it serves that information up to Express, which then does a web socket connection and says, hey, I just updated. And then it reloads.