Install the NPM Dependencies Needed for a Universal React App
We’ll npm install the packages needed to get universal components working. I'll introduce the family of packages that make this possible:
- react-universal-component
- webpack-flush-chunks
- babel-plugin-universal-import
- extract-css-chunks-webpack-plugin
- webpack-hot-server-middleware (only necessary for dev)
Instructor: [00:00] I'm going to add a couple of packages that we're going to need to get React Universal Component working. We have React Universal Component, this is the JavaScript front-end library that exposes a higher-order component that we can use. Webpack Flush Chunks, we're going to be using this on the server side to find the exact Webpack chunks to send on initial render.
[00:27] The Babel Plug-in Universal Import, this is actually used so that you can write less boilerplate. We have the Extract CSS Chunks, this is the Webpack plug-in that knows how to chunk your CSS by file, so you can load JavaScript and CSS files as a dual import.
[00:51] Lastly, we have the Webpack Hot Server Middleware, and this is for development, not production.