Accepted answer

This is likely to be a file generated by a webpack plugin ( after building the client-side bundle, that file name is hashed and necessary to the server so it knows how to render the base template which will then bootstrap the client.

Of course that's a guess since we don't have access to your json file, webpack configuration or package.json..

This repository uses a similar approach: It builds the client, generates the same kind of file and then builds the server bundle using that JSON file as information point to understand how the client bundle is named.

The JSON file should be similar to this:

  "apple-touch-icon.png": "114dec1694406188ff0cb2698607cbca.png",
  "production.css": "production.fbee6dc76218b122f7ff.css",
  "": "",
  "production.js": "production.fbee6dc76218b122f7ff.js",
  "": "",
  "safari-pinned-tab.svg": "f157afc1cf258044878dab6647d2800b.svg"


The stats.json file is generated by the webpack-stats-plugin and can be use by the Node process to "identify the correct bundle path in your server":


The project you are looking at is below

If you look at the client.production.js file on below

The code uses

plugins: [
    new ExtractCssChunks(),
    new webpack.optimize.CommonsChunkPlugin({
        names: ['bootstrap'],
        filename: '[name].js',
        minChunks: Infinity
    new StatsWebpackPlugin('stats.json'),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')

As you can see it uses StatsWebpackPlugin to save the stats in stats.json. Now let's look at the usage

const serverRender = require('./assets/app.server.js').default;


So it is passing the clientStats and outputPath to the serverRender, which the default export of the assets/app.server.js. Now if you look at file

export default ({ clientStats }) => async (req, res) => {
    const app = (

    const appString = ReactDOM.renderToString(app);
    const chunkNames = flushChunkNames();
    const { js, styles, cssHash } = flushChunks(clientStats, { chunkNames });

It passes the clientStats to flushChunks which is from webpack-flush-chunks. Which is to get the css, js include scripts for the generated files. This is then used to render the template

    res.render('index', {

If you look at the index.ejs template

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <%- styles %>

    <title>React 16 | Sample</title>

<div id="react-root"><%- appString %></div>

<%- cssHash %>
<%- js %>


It uses the CSS, JS links on the rendered page. All this was needed because we need information of chunks which generated because of the plugins ExtractCssChunks and webpack.optimize.CommonsChunkPlugin

Related Query

More Query from same tag