Configure Express / React / Babel to Work with React Universal Component

Share this video with your friends

Send Tweet

We’ll make the configuration changes needed in our express server, babel configuration, and react app code to get universal components working. We'll go from typical configurations to a "universal" configuration. We'll need our express app to use the webpack hot server middleware to serve our custom html. We'll use the flushChunks method to discover which javascript and css files actually need to be sent down to the client on initial render. We need to add the stage-2 babel plugin so that we can use the import function. And we can't forget to hydrate our React app on the client after we receive the serverside-rendered html.

eggheadgl
eggheadgl
~ 7 years ago

Why you use for server/index.js require but for server/render.js import?

Tim Kindberg
Tim Kindberg(instructor)
~ 7 years ago

@eggheadgl no good reason. Mostly because I'd copied the server/index.js file from a basic webpack example and the server/render.js I wrote from scratch.

Michal
Michal
~ 6 years ago

hey, after cloning repository with this lesson and trying to start the server I get this error Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead could you update the code that it will be compilable ?