Caching with Webpack, [hash] value inside index source code, using React.js

Question

I'm building an isomorphic application. It is completely built with react -- namely, the html base is also in react.

I have my root html as an app component.

It looks something like this:

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

When I build the project with webpack, I need to replace js/bundle.js to include the hash.

Webpack delivers the stats.json after it is finished. But I need to have the hash available during build time.

I was thinking of using the feature flags to do something like:

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.{__HASH__}.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

Which would ideally inject the right hash reference into the built js.

It's a bit tricky since it is self referencing. Is there a better way to do it? Modifying the built code after webpack has finished seems counterproductive. I've also thought about having the client simply request bundle.js, but have my node server serve the hashed file.

What would be a proper solution to this caching?

score 7 · Answer 1 · answered May 19 '15 at 09:56

7

The ExtendedAPIPlugin adds a __webpack_hash__ variable to your bundle, which might be what you're looking for.

answered May 19 '15 at 09:56

Alexandre Kirszenberg

35,938
10
88
72

score 4 · Accepted Answer · answered May 18 '15 at 22:32

Instead of trying to render it in the app, I found the best solution is to pass the webpack assets into the app. This can be either directly through props or through your flux.

That way your code is rendered with a variable. The value of your variable is irrelevant for the build process.

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src={this.props.jsFile} />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

Something like that.

score 0 · Answer 3 · answered May 19 '15 at 14:56

0

You shouldn't be rendering your full HTML on the client, ever. Your head and everything outside your app div in body should just be sent from the server. That way your problem is solved right away, as your client-side Javascript doesn't need to know what file it lives in, and on the server you can just wait for the stats to be ready.

answered May 19 '15 at 14:56

Ambroos

3,456
20
27

1

It is an isomorphic app. The this react app is render on the server, with `React.renderToString()`. This renders a string (or just the view part of the component). It includes the head and everything outside the app and is sent down from the server. On the client, you have to 'rehydrate' the document with the exact same react app. On the client you do `React.render()` which will render the view + the functionality/event handlers. – Federico May 19 '15 at 16:13
Sure, but you should not try to rehydrate the full HTML on the client (including all the script tags), that's just unneeded. Nothing outside your body will generally change at runtime. Have a look here for a good example: https://github.com/yahoo/flux-examples/tree/master/fluxible-router Basically: Create an app div inside your body, render your actual React app to a string and print it inside the app div. Then render the outer HTML and put the rendered app div inside it. Then rehydrate your app into the app div. I've built a pretty big Fluxible app that way, including [hash], works great! – Ambroos May 19 '15 at 18:28

Caching with Webpack, [hash] value inside index source code, using React.js

3 Answers3

Linked