webpack / react-webpack-server-side-example

Example of an react application with webpack including server-side rendering.

react-webpack-server-side-example

Example of an react application with webpack including server-side rendering.

This is not for the normal user. This example is meant as inspiration to develop an framework that can do server-side rendering of react with webpack. You shouldn't use the code, only the idea.

Overview

webpack compile with two separate configurations: One for the browser bundle and one for the react application for server-side rendering. The server-side bundle can be required in other node.js code to build the pre-rendered HTML.

Features

• Same react code (app/Application.js) run on server and on client
• In both cases the code is compiled with webpack
  • Supports loaders i. e. file-loader for assets
• The server-side compilation collects styles and include them in the pre-rendered HTML
  • This avoids FOUC of the pre-rendered HTML
• browser build includes a hash in url for caching

Usage

npm start

Run the 2 steps:

1. Compile the browser bundle and the server-side bundle. It also stores stats from the browser bundle as json file.
2. Starts a server. The server requires the server-side bundle, which generates HTML for every request. It also reads the filename of the browser bundle to insert the <script>-tag.

Production

npm run production

This compiles production versions for the browser and server-side bundles. It also minimizes javascript and css.

License

None. Don't copy the code, only use the idea.

Copyright 2014 Tobias Koppers

react-webpack-server-side-example's Issues

Server side templates never reload

If you change a template, you have to kill and restart the npm start script in order to see the changes.

[QUERY] Performance in server side react-webpack

I am thinking to use webpack on server side. I have node.js express server.
My query is that on server, does the webpack builds an app for each and every request ?
Or it just builds once and fills its stores and pass the html to the client.

Can you explain the process behind it ? Thanks.

document is not defined while generating page.generated.js

I use react 15.2.1 now, so there are some changes with React syntax (React.renderComponentToString --> ReactDOMServer.renderToString, React.renderComponent --> ReactDOM.render). But after I change it, there are errors that stated that "document is not defined" while generating page.generated.js in document.getElementById("content"), any explanation for this error?

Thank you!

webpack server-side external settings bug?

https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js#L45

Hi, this settings seems to be wrong, because scoped module (e.g. @foo/bar ) is not considered.
externals: /^[^\.\/].*$/ is true?

https://nodejs.org/api/modules.html#modules_all_together

Not an issue but confused.

Hi,

I'm very new to SSR with webpack and I'm having issues getting webpack to work when rendering server-side (currently seeing "EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection" in the console.). I'm looking at your webpack.config and I see that you're exporting two separate configs, one for the client and for SSR.

When running this project how do you dictate which one to use when? For example if you're in production how do you use the server-side-rendering config and not the browser config from webpack.config

Apologies if I'm just not grasping something here I should know beforehand.

How would you ignore harmony features for the server?

Is there a configuration option I'm missing?

Here's my output:

Child server:
    Hash: 6d88699fa57e97fc02a2
    Version: webpack 1.4.15
    Time: 21ms
       [0] ./lib/server.js -1 [built] [failed]

    ERROR in ./lib/server.js
    Module parse failed: /Users/smithm/dev/node-blog/lib/server.js Line 13: Unexpected token *
    You may need an appropriate loader to handle this file type.
    |
    | // x-response-time
    | app.use(function *(next){
    |   var start = new Date;
    |   yield next;

I plan to run my server with the --harmony flag.

style-collector.js doesn't collect any styles

I noticed that https://github.com/webpack/react-webpack-server-side-example/blob/master/server/style-collector.js#L4 was never called during an execution of its collect method. I think it may have to do with the fact that webpack caches the style-collector.js on first require: https://github.com/webpack/webpack/blob/76230e4a4e4389e622c04ead1d79a7a7e122bd21/lib/MainTemplate.js#L48.

on this line https://github.com/webpack/react-webpack-server-side-example/blob/master/server/style-collector.loader.js#L5, was the intention to delete the module cache for style-collector.js. It currently removes the css style modules. I am a bit confused on what it is trying to do here.

webpack --watch works, would it be faster webpack-dev-middleware?

I'm interested in combining this example with webpack-dev-middleware or webpack-dev-server (if possible).

My experience is it would take less time to bundle the final files using webpack-dev-middleware thainstead of webpack --watch.

The issue here is how to require the generated page to use it with Express.

Right now it is simply required as:
var page = require("./page.generated.js");

But this generated file is now in the Memory Filesystem.

Probably I should use something like:

middleware.fileSystem.readFileSync

Is that the right direction? Do you have any example, idea or advice?

Thanks

What is missing that I need to know about this code so I can build my own?

There's lots of mention about how this code should not be used directly. What is wrong with the code and pieces are missing from it?

I am new to webpack and can't really tell the issues at this point. I also wasn't sure how to get in contact. I would really appreciate some pointers.

My eventual goal is to build examples of a node server that would run to serve for non-js applications as well. Thanks!