javascript - Can't generate webpack-assets.json with webpack-isomorphic-tools

Question

I'm trying to learn React and the whole environment built around it. I do that by trying to construct my own dev-stack.

The problem I can't get across for a very long time is how to serve CSS/Images while not loosing a power of server rendering.

I've read a couple of tutorials and discovered webpack-isomorphic-tools

I've configured them and managed to get an images supported, sass (transformed to css) as well.

However, I came across an issue that my webpack-assets.json file is not generated, instead I see this output. ( I managed to get it generated on a 2nd run of npm start before this commit, but that was definitely not a way to go , but it showed that the plugin works when a file is present.)

$ npm start

> redux-universal-example@0.0.0 start /Users/janvorcak/learning2016
> node src/server/index.js

[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)

I understand the purpose of this file, but I can't really figure out why it's not generated at all.

Is there anything that I'm missing? Here are the relevant files and a repository

• https://github.com/jvorcak/universal-react-kit/tree/sass-loader (sass-loader branch on my universal-react-kit repository)
• configuration - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack-isomorphic-tools-configuration.js
• webpack.config.js - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack.config.js
• entry file when running a server https://github.com/jvorcak/universal-react-kit/blob/sass-loader/src/server/index.js

Could somebody please explain what is going on, I've read documentation, blogs, but I'm missing something here. Thank you.

Answer 1

The reason the assets file is not generated is because you have integrated webpack-dev-server into your server.js.

https://github.com/jvorcak/universal-react-kit/blob/master/src/server/server.js#L81

That's a wrong way to do it because in production you won't need webpack-dev-server and therefore its place is somewhere else.

In your case webpack-dev-server is meant to generate webpack-assets.json and this webpack-dev-server is being run after webpack-isomorphic-tools .server() method calls its callback, but it won't call its callback until it finds webpack-assets.json.

The answer is to run your webpack-dev-server in a separate process (you may want to refer to github.com/erikras/react-redux-universal-hot-example for an example of how to achieve that).

https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/47

You may also like my very own boilerplate which can do all the fancy things

https://github.com/halt-hammerzeit/webapp