{"action":"created","issue":{"url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/6","repository_url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack","labels_url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/6/comments","events_url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/6/events","html_url":"https://github.com/halt-hammerzeit/universal-webpack/issues/6","id":160636094,"number":6,"title":"Problems with build","user":{"login":"Stalso","id":6276096,"avatar_url":"https://avatars.githubusercontent.com/u/6276096?v=3","gravatar_id":"","url":"https://api.github.com/users/Stalso","html_url":"https://github.com/Stalso","followers_url":"https://api.github.com/users/Stalso/followers","following_url":"https://api.github.com/users/Stalso/following{/other_user}","gists_url":"https://api.github.com/users/Stalso/gists{/gist_id}","starred_url":"https://api.github.com/users/Stalso/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Stalso/subscriptions","organizations_url":"https://api.github.com/users/Stalso/orgs","repos_url":"https://api.github.com/users/Stalso/repos","events_url":"https://api.github.com/users/Stalso/events{/privacy}","received_events_url":"https://api.github.com/users/Stalso/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-06-16T11:09:42Z","updated_at":"2016-06-16T20:29:48Z","closed_at":null,"body":"Hello. I am trying to use this library in [this](https://github.com/mxstbr/react-boilerplate) cool template.  I made a lot of modifications and attempts. But I am newbie in all this node and webpack stuff and I cannot make this work. I have created `webpack\\universal-webpack-settings.js` file with code:\r\n\r\n    module.exports =\r\n    {\r\n      server:\r\n      {\r\n        input: './server/index',\r\n        output: './build/server.js'\r\n      }\r\n    }\r\n\r\nThen I have modified `webpack\\webpack.dev.babel.js` and now it is:\r\n\r\n\r\n    \r\n    const path = require('path');\r\n    const fs = require('fs');\r\n    const webpack = require('webpack');\r\n    const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n    const logger = require('../../server/logger');\r\n    const cheerio = require('cheerio');\r\n    const pkg = require(path.resolve(process.cwd(), 'package.json'));\r\n    const dllPlugin = pkg.dllPlugin;\r\n    \r\n    // PostCSS plugins\r\n    const cssnext = require('postcss-cssnext');\r\n    const postcssFocus = require('postcss-focus');\r\n    const postcssReporter = require('postcss-reporter');\r\n    \r\n    const plugins = [\r\n    ];\r\n    \r\n    module.exports = {\r\n      \r\n      entry: [\r\n        path.join(process.cwd(), 'app/app.js'), // Start with js/app.js\r\n      ],\r\n    \r\n      // Don't use hashes in dev mode for better performance\r\n      output: {\r\n        filename: '[name].js',\r\n        chunkFilename: '[name].chunk.js',\r\n      },\r\n    \r\n      // Add development plugins\r\n      plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define\r\n    \r\n      // Load the CSS in a style tag in development\r\n      cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',\r\n    \r\n      // Process the CSS with PostCSS\r\n      postcssPlugins: [\r\n        postcssFocus(), // Add a :focus to every :hover\r\n        cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...\r\n          browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list\r\n        }),\r\n        postcssReporter({ // Posts messages from plugins to the terminal\r\n          clearMessages: true,\r\n        }),\r\n      ],\r\n    \r\n      // Tell babel that we want to hot-reload\r\n      babelQuery: {      \r\n      },\r\n    \r\n      // Emit a source map for easier debugging\r\n      devtool: 'cheap-module-eval-source-map',\r\n    };\r\n    \r\n    /**\r\n     * Select which plugins to use to optimize the bundle's handling of\r\n     * third party dependencies.\r\n     *\r\n     * If there is a dllPlugin key on the project's package.json, the\r\n     * Webpack DLL Plugin will be used.  Otherwise the CommonsChunkPlugin\r\n     * will be used.\r\n     *\r\n     */\r\n    function dependencyHandlers() {\r\n      // Don't do anything during the DLL Build step\r\n      if (process.env.BUILDING_DLL) { return []; }\r\n    \r\n      // If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin\r\n      if (!dllPlugin) {\r\n        return [\r\n          new webpack.optimize.CommonsChunkPlugin({\r\n            name: 'vendor',\r\n            children: true,\r\n            minChunks: 2,\r\n            async: true,\r\n          }),\r\n        ];\r\n      }\r\n    \r\n      const dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls');\r\n    \r\n      /**\r\n       * If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json\r\n       * Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude\r\n       *\r\n       * @see https://github.com/mxstbr/react-boilerplate/tree/master/docs/general/webpack.md\r\n       */\r\n      if (!dllPlugin.dlls) {\r\n        const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');\r\n    \r\n        if (!fs.existsSync(manifestPath)) {\r\n          logger.error('The DLL manifest is missing. Please run `npm run build:dll`');\r\n          process.exit(0);\r\n        }\r\n    \r\n        return [\r\n          new webpack.DllReferencePlugin({\r\n            context: process.cwd(),\r\n            manifest: require(manifestPath), // eslint-disable-line global-require\r\n          }),\r\n        ];\r\n      }\r\n    \r\n      // If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.\r\n      const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`));\r\n    \r\n      return dllManifests.map((manifestPath) => {\r\n        if (!fs.existsSync(path)) {\r\n          if (!fs.existsSync(manifestPath)) {\r\n            logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`);\r\n            logger.error(`Expected to find it in ${dllPath}`);\r\n            logger.error('Please run: npm run build:dll');\r\n    \r\n            process.exit(0);\r\n          }\r\n        }\r\n    \r\n        return new webpack.DllReferencePlugin({\r\n          context: process.cwd(),\r\n          manifest: require(manifestPath), // eslint-disable-line global-require\r\n        });\r\n      });\r\n    }\r\n    \r\n    /**\r\n     * We dynamically generate the HTML content in development so that the different\r\n     * DLL Javascript files are loaded in script tags and available to our application.\r\n     */\r\n    function templateContent() {\r\n      const html = fs.readFileSync(\r\n        path.resolve(process.cwd(), 'app/index.html')\r\n      ).toString();\r\n    \r\n      if (!dllPlugin) { return html; }\r\n    \r\n      const doc = cheerio(html);\r\n      const body = doc.find('body');\r\n      const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);\r\n    \r\n      dllNames.forEach(dllName => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));\r\n    \r\n      return doc.toString();\r\n    }\r\n\r\n\r\nThen I have created such `webpack\\webpack.dev.client.babel.js`:\r\n\r\n    var  client_configuration = require('universal-webpack').clientConfiguration; \r\n    var settings = require('./universal-webpack-settings');\r\n    var base_configuration = require('./webpack.dev.babel');\r\n    \r\n    \r\n    const webpack = require('webpack');\r\n    const path = require('path');\r\n    const fs = require('fs');\r\n    const pkg = require(path.resolve(process.cwd(), 'package.json'));\r\n    const dllPlugin = pkg.dllPlugin;\r\n    const logger = require('../../server/logger');\r\n    const cheerio = require('cheerio');\r\n    const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n    \r\n    const plugins = [\r\n      new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading\r\n      new webpack.NoErrorsPlugin(),\r\n      new HtmlWebpackPlugin({\r\n        inject: true, // Inject all files that are generated by webpack, e.g. bundle.js\r\n        templateContent: templateContent(), // eslint-disable-line no-use-before-define\r\n      }),\r\n    ];\r\n    \r\n    /**\r\n     * We dynamically generate the HTML content in development so that the different\r\n     * DLL Javascript files are loaded in script tags and available to our application.\r\n     */\r\n    function templateContent() {\r\n      const html = fs.readFileSync(\r\n        path.resolve(process.cwd(), 'app/index.html')\r\n      ).toString();\r\n    \r\n      if (!dllPlugin) { return html; }\r\n    \r\n      const doc = cheerio(html);\r\n      const body = doc.find('body');\r\n      const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);\r\n    \r\n      dllNames.forEach(dllName => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));\r\n    \r\n      return doc.toString();\r\n    }\r\n    \r\n    \r\n    base_configuration.entry.splice(0,0,'eventsource-polyfill','webpack-hot-middleware/client');\r\n    \r\n    base_configuration.plugins = base_configuration.plugins.concat(plugins);\r\n    \r\n    base_configuration.babelQuery =  {\r\n      presets: ['react-hmre'],\r\n    };\r\n    \r\n    var final_configuration = require('./webpack.base.babel')(base_configuration);\r\n    \r\n   \r\n    module.exports = client_configuration(final_configuration, settings);\r\n\r\nThen I have created `webpack\\webpack.dev.server.babel.js`:\r\n\r\n    var  server_configuration = require('universal-webpack').server_configuration;\r\n    var settings = require('./universal-webpack-settings');\r\n    var base_configuration = require('./webpack.dev.babel');\r\n    \r\n    var configuration = require('./webpack.base.babel')(base_configuration);\r\n    \r\n    module.exports = server_configuration(configuration, settings)\r\n\r\n\r\nThen I have modifyed `server\\index.js`:\r\n\r\n    \r\n    const express = require('express');\r\n    const logger = require('./logger');\r\n    \r\n    const argv = require('minimist')(process.argv.slice(2));\r\n    const setup = require('./middlewares/frontendMiddleware');\r\n    const isDev = process.env.NODE_ENV !== 'production';\r\n    const ngrok = (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel ? require('ngrok') : false;\r\n    const resolve = require('path').resolve;\r\n    \r\n    // If you need a backend, e.g. an API, add your custom backend-specific middleware here\r\n    // app.use('/api', myApi);\r\n    \r\n    // In production we need to pass these values in instead of relying on webpack\r\n    const app = setup(express(), {\r\n      outputPath: resolve(process.cwd(), 'build'),\r\n      publicPath: '/',\r\n    });\r\n    \r\n    // get the intended port number, use port 3000 if not provided\r\n    const port = argv.port || process.env.PORT || 3000;\r\n    \r\n    \r\n    \r\n    // Start your app.\r\n    module.exports = function()\r\n    {\r\n      console.log('server callback');\r\n      app.listen(port, (err) => {\r\n        console.log('server callback');\r\n        if (err) {\r\n          return logger.error(err.message);\r\n        }\r\n    \r\n        // Connect to ngrok in dev mode\r\n        if (ngrok) {\r\n          ngrok.connect(port, (innerErr, url) => {\r\n            if (innerErr) {\r\n              return logger.error(innerErr);\r\n            }\r\n    \r\n            logger.appStarted(port, url);\r\n          });\r\n        } else {\r\n          logger.appStarted(port);\r\n        }\r\n      });\r\n    }\r\n\r\nFinally I have created `server\\start-server.js` file:\r\n\r\n    var server = require('universal-webpack').server;\r\n    var settings =  require('../internals/webpack/universal-webpack-settings')\r\n    var configuration = require('../internals/webpack/webpack.dev.babel');\r\n    \r\n    var final_conf = require('../internals/webpack/webpack.base.babel')(configuration);\r\n    server(final_conf, settings)\r\n\r\n\r\nAfter this I have modified `server\\middlewares\\frontendMiddleware.js ` file and replaced this:\r\n\r\n    //const webpackConfig = require('../../internals/webpack/webpack.dev.babel');\r\n    const webpackConfig = require('../../internals/webpack/webpack.dev.client.babel');\r\n\r\nAlso I have modified start task in package.json:\r\n\r\n    \"start\": \"cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server\",\r\n\r\nAfter alll this stuff, when I run start task I have following ouput (and server is not started):\r\n\r\n    cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server\r\n    ./internals/webpack 160 bytes {0} [built]\r\n    ./server/middlewares 160 bytes {0} [built]\r\n    + 35 hidden modules\r\n\r\nWhen I have tried to run result bundle file manually, I am getting the following error:\r\n\r\n    Error: Cannot find module 'components/Img'\r\n\r\nIf you have time, maybe you will help me. Or maybe it is bug in libarary, I do not know. And by the way, you should remove russian comments from sample application code ))) I am speaking about `хз, нужно ли сжатие в node.js: мб лучше поставить впереди nginx'ы,` . Espessialy you shoukd remove `хз`))"},"comment":{"url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/comments/226604326","html_url":"https://github.com/halt-hammerzeit/universal-webpack/issues/6#issuecomment-226604326","issue_url":"https://api.github.com/repos/halt-hammerzeit/universal-webpack/issues/6","id":226604326,"user":{"login":"Stalso","id":6276096,"avatar_url":"https://avatars.githubusercontent.com/u/6276096?v=3","gravatar_id":"","url":"https://api.github.com/users/Stalso","html_url":"https://github.com/Stalso","followers_url":"https://api.github.com/users/Stalso/followers","following_url":"https://api.github.com/users/Stalso/following{/other_user}","gists_url":"https://api.github.com/users/Stalso/gists{/gist_id}","starred_url":"https://api.github.com/users/Stalso/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Stalso/subscriptions","organizations_url":"https://api.github.com/users/Stalso/orgs","repos_url":"https://api.github.com/users/Stalso/repos","events_url":"https://api.github.com/users/Stalso/events{/privacy}","received_events_url":"https://api.github.com/users/Stalso/received_events","type":"User","site_admin":false},"created_at":"2016-06-16T20:29:48Z","updated_at":"2016-06-16T20:29:48Z","body":"As I said, when I run node there are no errors,  server simply is not starting. "}}
{"actor":{"display_login":"Stalso"}}