Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Setting up devServer" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian sets up the preferences in webpack to set up the webpack dev server, speeds up development by letting you run a local server and serve all your content. Brian takes questions from students. - https://github.com/btholt/complete-intro-to-react/tree/v3-3

Get Unlimited Access Now

Transcript from the "Setting up devServer" Lesson

[00:00:00]
>> Brian Holt: So far, we've just been running this from file. If you look at my path up here. When you're using the file protocol, I'm gonna talk from a Unix-based perspective. I don't know how it works in Windows, but I imagine there are similar problems. There's just a lot of limitations, right?

[00:00:19] So you don't wanna be doing this very long for any sort of decent dev process. It's useful for writing CSS and stuff like that, but much more than that if falls apart pretty quickly. In other words, we need a static file server. Now we could bring in something like an HTTP server.

[00:00:34] We could bring in simple python, simple HDP server from python or PHP-S. There's a bunch of ways to do it. However, there is a particular tool called webpack dev server that makes this a lot easier. And it's gonna buy us a lot more too. So we're gonna go ahead and introduce that real quick.

[00:00:52] So I want you to go to your webpack config. And there's really only one thing that we're gonna need to do. We're gonna have one more object, you can put it really anywhere. Just call it devServer.
>> Brian Holt: And I'm gonna put in here a public path.
>> Brian Holt: So this is letting Web Pack know where you anticipate your bundle being served from, so that whenever you go to serve files from that it knows where to go grab those files, and where they're being output to.

[00:01:35] Now, for us we have a public directory and we're serving from public. That's just coincidence that they're the same thing. I could be serving from the public directory, but it could be called like Static Assets on my server. So this is the name of the path on the server if that makes any sense.

[00:01:58]
>> Brian Holt: So, now what I can do here, is I can come to my command line, And I'm gonna if you're running watch stop your watch and then do ./node modules.bin/webpack-dev-server.
>> Brian Holt: So now it's gonna run a server for me, at localhost 8080. It's gonna serve all your output from /public, but it's also going to be doing the watch for you as well.

[00:02:34] So every time you save something, it's going to be constantly recompiling your code. So it's like wash and your static file server just rolled up into one thing. So now if I go to local host 8080, [LAUGH] things are actually serving the way they should, right? That's where the image came from.

[00:02:53] So, what I want you to do real quick, it's important that we're gonna take a second and emphasize it, cuz people always miss this when I do this workshop. Go to your index.html.
>> Brian Holt: I'm gonna wait, make sure everyone's there.
>> Brian Holt: And then in front of public in both places, both in the script and the link, please put a leading slash.

[00:03:21] It works now because we're on the home page. But as we having different paths, that relative path is going to be incorrect. So we always want it to serve from /public.
>> Brian Holt: Did everyone put two slashes? [LAUGH] Okay, cool, I believe you. And if you ask me the question, I'm going to throw something at you, I swear.

[00:03:45] [LAUGH] Just kidding. I mean, maybe. But don't test me. [COUGH] Cool.
>> Brian Holt: So this is awesome, right? The dev server. It's one of the really nice parts about Web Pack as it shifts with this death server, and we're only scratching the surface. In fact, I wanna show you something else too.

[00:04:08] Let's go back and reintroduce some sort of linting error. So cont x=5. Lint error, open your console here, and you're gonna see right away some sort of error.
>> Brian Holt: But now, if I get rid of it, save it, it's gone. So again, another part of webpack-dev-server is every time the bundle refreshes, it's just gonna hard-refresh your browser for you.

[00:04:40] Which is also pretty nice, right, cuz you can just save it, and then go over to your browser and it's gonna be reloaded. Now, inevitably someone wants to ask me about Hot Module Reload, we're gonna do it in a little bit. Not yet, hold your horses.
>> Brian Holt: We're not there yet.

[00:05:00] Okay? So, go ahead.
>> Speaker 2: Someone asked about studying all this tooling by ourselves versus using something like Create React app.
>> Brian Holt: So yes, Create React app is a really cool piece of technology. So again, a lot of people's common complaint is that, the tooling is so complicated. And difficult to set up and difficult to understand.

[00:05:23] Like, I'm giving a three day workshop, just so you can understand the tooling, right. That's about half the workshop. Something like Create React app, totally obscures all of this from you. And it just works, it just works straight out of the box. The tradeoff there is that you have no control over your tools.

[00:05:43] So Create React app is really a great way to scaffold up a project, get rolling with it. And then what create react app does for you, is it allows you to eject all of the term is eject. It removes itself from the project and it gives you all of the configs.

[00:06:00] So you're not locked into using Create React app all the time. So it ejects the webpack config, the babel config, the ESlint config. So it's kind of an all or nothing thing. You either use Create React app or you don't [LAUGH]. So, the trade off here is if you're willing to give up that control it's amazing and totally worth it, because the product they set up for you is really, really great.

[00:06:24] You can build large scale operations on Create React app no problem. They give you great dev config, they give you great production config. However, if you even need to change one thing, you have to eject it. So, we're not using it today because I want you to touch the tools.

[00:06:42] I want you to feel the tools, I want you to feel why you have them. I want you to understand what each one of them does and how to set them up. So when you go to your individual companies, and projects, and clients, that you know, yourself how to manipulate the tools and get the best performance, and address all the needs for what you're doing.

[00:07:00] So, if you're interested in Create React app, I have another repo on my GitHub that's a similar type project that we're doing right now, but it uses Create React app. And it's much more focused on Reacts and Reducts rather then on the tooling. A lot of this workshop focuses on the tooling, so you're welcome to go in and compare and contrast.

[00:07:20] That'll be open source forever, so you're welcome to check it out.
>> Speaker 3: I appreciate this, cuz in the past it's been and it works. And I don't even know how it's [INAUDIBLE].
>> Brian Holt: Right, it's total black magic, it's a total black box right.
>> Speaker 3: Yeah.
>> Speaker 4: What is the repo for the example that you've got on here?

[00:07:45]
>> Brian Holt: Its NHO.LT/redux.
>> Brian Holt: I think I have some updating to do for it but it should be 99% good.
>> Brian Holt: You build a pet adoption app, which is pretty fun.