Learn about what you obtain from the project.
- [Narrator] In this video we will have a quick look at the deliverables that we're expecting to get to by the end of the project and how we accomplish that using Webpack. The topics we are going to cover are the advantages of single page applications with examples of how real single page applications are served. Then we will initialize our project and install Webpack and get the basic configuration for it setup. And then we will create a first very, very basic app that we will run with Webpack in order to prepare for our MyReads application.
If you remember in the previous video of this section we have spoken about a few real life applications such as Airbnb and Discord which are using React and Webpack in order to serve their apps. So let's have a quick look at those websites and see exactly what does that mean. So first of all just open a Chrome browser preferably and then inspect. If we go to Airbnb for example we will be able to inspect the page and then what we will look is if we go all the way to the bottom of the code that you will find under the elements section you'll see there is a lot of code but what we're interested in is those two scripts at the bottom.
If we compared that to a standard site that loads 50 gigs query library for example you can obviously start seeing the difference and seeing why build tools are so important. Let's also have a look at Discord and again we will do the same thing. We will inspect the page and then as you can see Discord has a much more focused approach on bundling everything together. Whenever you open the site they have a small section with some text which is being served as part of their HTML skeleton and then at the bottom they only have one single script so everything they have running on the site is bundled into one single asset.
And then if we go to the network tab, as you can see we only have three scripts being loaded. Now imagine instead of three you have to load 50 or 100 again and the load time would increase significantly. So those are the main reasons we use build tools. So now that this whole introduction and theoretical stuff is over let's actually get coding and see what we can do in order to create an application or add Webpack to an application and improve the performance and make it so that whenever your app is loading it's quick, it's performing, and it works well with React or any other front end development framework that you've chosen.
Keep in mind in order for you to be able to use Webpack you will need to have MPM installed. To check if you have MPM installed what you'll need to do is do MPM, MPM dash V. And if you have a number, if it shows you a number in here, it means you have MPM installed. If you do not have MPM installed make sure you go into Google and install it. So just go to Google and search for MPM and follow the installations at the top that you can find on the MPM website.
And make sure you go in here and also install Yarn. It has all the instructions in here on how to install it on both MacOS, Windows, and Linux. If you have, one more thing to note, if you have a MacOS or a Linux computer or device they should have both Node and MPM installed. So we should do a Node dash V as well. You must make sure Node is installed as well otherwise MPM will not work. And if not, make sure you install them first before starting this project just so you can get coding straight away.
Now that we have installed and we make sure we have both MPM and Node and Yarn installed let's initialize our project. So if we go into our basic app we'll do Yarn in it in order to create a new project. And we will, it will ask a name, just call it, you can just press Enter for everything especially for this project. Press Enter, Enter and once we're done if we look at the folder structure you will see Yarn has created a file called Package.Json.
If we open that in our code editor for this title line using Atom but you can use anything like Sublime or Notepack even if you want. I would recommend Atom or Sublime, they are both free and they're quite good editors so feel free to use that. So as you can see in our basic app folder we have our Package to Json with the name and the version and a few other things that Yarn will add for us by default. Now, if you have never used Webpack before now is the time to install it.
If you plan on using Webpack a lot I would recommend installing it globally.
- Setting up Babel
- Loading assets into your project
- Using SCSS in your project
- Cache busting
- Using dev server in your application
- Best practices with webpack dev server
- Getting an app production-ready
- Deployments with AWS S3