Autoplay

    Install the NPM Dependencies Needed for a Universal React App

    Tim KindbergTim Kindberg

    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)
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss