Base configuration with webpack

- [Instructor] Webpack is the tool of choice that React developers use in general, and the one that comes with any new React application. So let's go ahead and start setting up webpack in our current legacy project. Keep in mind that this is not a webpack course and we won't cover the specifics of this library and only copy what we need. If you want to understand webpack in depth, read the docs or take a course on the subject. So what I want you to do is open the legacy folder and also open the example folder. We'll do this on Mac or you can do this on Windows as well by copying and pasting.

So we want to grab the example project here, and grab the entire config folder and copy it and paste it here. And then we want to copy the scripts all together. So copy this folder here and then paste it here as well. Like so. Okay. Once this is done, you can close these and let's go into VS Code now.

So open the example folder here and then go to the-- I just want to make sure I'm using the right file though. Ah, let's make sure... Yep, this is the package.json for the examples. So you want to grab the package.json for the example and not the one for the legacy project. And let's turn this off for now. So you stop the server by doing Ctrl+C and let's turn off the ternel.

What you want to do at this point, is copy all the dependencies that you see in this particular project here. So, let's go ahead and do that. And let's take a look at how our package.json file is structured inside of our legacy project, just to be sure that we are grabbing the right stuff. So as you can see, right now we have only devDepencies inside of our package.json on the legacy project. Keep them for now, because we'll still take a look at our project from time to time to compare the old with the new.

So don't delete that yet, but let's go in the new one, the React application. So go back to example, click on package.json and copy and paste from the comma here at Line 44, or you can go from the top. So copy the dependencies all the way down to that comma that I just pointed out here. And actually, while we're at it, let's copy also all the steps setups here.

So copy from Line 90 all the way up to Line 5, like so. Copy that. So I repeat, just to make sure that you're following along. Line 90 to Line 5 on the new project; copy that. And we may need to restructure this a bit, so let's paste first. And now we have two engines, so let's make sure...

And let's make sure that we have just one engine, that's the one thing I want to make sure, we don't have twice the same setup here. Okay. Yep, the one thing that I want to do is copy again up to here and just do a comma here and then just push that and keep the engine for now. Like so.

Okay. You shouldn't have any errors in your file once you've done this. So basically, let's just recap. We copied everything from 5 to 90 here on the example, the React example project. We pasted it all here on our package.json on the legacy folder. And we kept engine and just put a comma here. So once we run that, let's do a second NPM install, so that it installs all the new dependencies that we just added to this project.

So let's go ahead and go inside of our terminal. So view, integrated terminal. And we are in the legacy, we're not in the legacy here, so let's get out of there. So cd .. Then let's do cd legacy. And want to make sure we're in the right directory. Yes, we are. Let's do an npm install again. So it installs all the dependencies that are missing.

And one note to yourself, while we work on the legacy folder, you can run both the grunt server. As long as you keep the dependencies for grunt, you can run the Grunt server as well as running the React application, because they use separate ports, they don't use the same ports. So you can run the old application, take a look at how it is right now, and then run the new one. What will change though is when we start changing the source files, or the HTML, then your old application will not work the way it used to be anymore.

So right now, if we run npm start for React, it's not going to work because we don't have the entry point for our components yet, and we don't have components built in. But if you run the grunt server, which is the old legacy app, it will still work. Alright, so let's continue working on this project we're doing the entry points for our React application.