{"action":"opened","issue":{"url":"https://api.github.com/repos/glenjamin/ultimate-hot-reloading-example/issues/1","labels_url":"https://api.github.com/repos/glenjamin/ultimate-hot-reloading-example/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/glenjamin/ultimate-hot-reloading-example/issues/1/comments","events_url":"https://api.github.com/repos/glenjamin/ultimate-hot-reloading-example/issues/1/events","html_url":"https://github.com/glenjamin/ultimate-hot-reloading-example/issues/1","id":106526234,"number":1,"title":"Exampel with react-router 1.0.0-rc1","user":{"login":"edgesoft","id":6061720,"avatar_url":"https://avatars.githubusercontent.com/u/6061720?v=3","gravatar_id":"","url":"https://api.github.com/users/edgesoft","html_url":"https://github.com/edgesoft","followers_url":"https://api.github.com/users/edgesoft/followers","following_url":"https://api.github.com/users/edgesoft/following{/other_user}","gists_url":"https://api.github.com/users/edgesoft/gists{/gist_id}","starred_url":"https://api.github.com/users/edgesoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edgesoft/subscriptions","organizations_url":"https://api.github.com/users/edgesoft/orgs","repos_url":"https://api.github.com/users/edgesoft/repos","events_url":"https://api.github.com/users/edgesoft/events{/privacy}","received_events_url":"https://api.github.com/users/edgesoft/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-09-15T10:20:39Z","updated_at":"2015-09-15T10:20:39Z","closed_at":null,"body":"Thanks for the plugin! I'm trying to get this to work with react-router. If I add a new route in /src/shared/routes I get a 404 error. IE the server.js does not know about the new route. I need to stop node and restart.\r\n\r\nHere is my setup so far.\r\n\r\n***webpack.fonfig.js***\r\n```javascript\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\r\nvar node_modules_dir = path.resolve(__dirname, 'node_modules');\r\n\r\nvar config = {\r\n  \r\n  addVendor: function (name, path) {\r\n    this.resolve.alias[name] = path;\r\n    this.module.noParse.push(new RegExp(path));\r\n  },\r\n  devtool: 'eval',\r\n  entry: [\r\n    'webpack-hot-middleware/client',\r\n    './src/index'\r\n  ],\r\n  output: {\r\n    path: path.join(__dirname, 'dist'),\r\n    filename: 'bundle.js',\r\n    publicPath: '/static/'\r\n  },\r\n  resolve: {\r\n    alias: {},\r\n\r\n  },\r\n  plugins: [\r\n    new webpack.HotModuleReplacementPlugin(),\r\n    new webpack.NoErrorsPlugin(),\r\n    //new ExtractTextPlugin(\"[name].css\", {\r\n    //  allChunks: true\r\n    //})\r\n  ],\r\n  \r\n  module: {\r\n    noParse: [],\r\n    loaders: [{\r\n      test: /\\.js$/,\r\n      loaders: ['babel'],\r\n      include: path.join(__dirname, 'src')\r\n      \r\n    }\r\n    ]\r\n  }\r\n};\r\n\r\nconfig.addVendor('react', node_modules_dir + '/react/dist/react.min.js');\r\n\r\nmodule.exports = config;\r\n```\r\n\r\n***server.js***\r\n```javascript\r\n'use strict';\r\n\r\nimport path from 'path';\r\nimport express from 'express';\r\n//var dbStartUp = require('./lib/db');\r\nconst app = express();\r\nrequire('./lib/environment')(app);\r\nimport React      from 'react';\r\nimport { RoutingContext, match } from 'react-router'\r\nimport routes     from './src/shared/routes';\r\nimport createLocation from 'history/lib/createLocation';\r\n\r\n\r\napp.get('*', (req, res) => {\r\n  \r\n  \r\n    if (req.url === '/favicon.ico') {\r\n      console.log('favicon requested');\r\n      res.writeHead(200, {'Content-Type': 'image/x-icon'} );\r\n      res.end();\r\n      return;\r\n    }\r\n  \r\n   let location = createLocation(req.url)\r\n    match({ routes, location }, (error, redirectLocation, renderProps) => {\r\n      if (redirectLocation){\r\n        console.log( \"redirect\" );\r\n        res.redirect(301, redirectLocation.pathname + redirectLocation.search)\r\n      }else if (error){\r\n        console.log( \"error\" , error );\r\n        res.send(500, error.message)\r\n      }else if (renderProps == null){\r\n        console.log( \"No renderProps\");\r\n        res.send(404, 'Not found')\r\n      }else{\r\n        let componentHTML = React.renderToString(<RoutingContext {...renderProps}/>);\r\n        const HTML = `\r\n            <!DOCTYPE html>\r\n            <html>\r\n              <head>\r\n                <meta charset=\"utf-8\">\r\n                <title>Boilerplate setup</title>\r\n              </head>\r\n              <body>\r\n                <div id=\"react-view\">${componentHTML}</div>\r\n                <script type=\"application/javascript\" src=\"/static/bundle.js\"></script>\r\n              </body>\r\n          </html>    \r\n        `\r\n        res.end(HTML);\r\n      }\r\n    });\r\n \r\n});\r\n\r\n\r\nexport default app;\r\n```\r\n\r\nAnd my ./lib/environment\r\n```javascript\r\n'use strict';\r\nvar express = require('express');\r\n\r\nlet nodeEnv = process.env.NODE_ENV;\r\n\r\nmodule.exports = (app) => {\r\n  if( ! (nodeEnv && nodeEnv === 'production' ) ){\r\n  \r\n    var webpack = require('webpack');\r\n    var config = require('../../webpack.config');\r\n    var compiler = webpack(config);\r\n    compiler.plugin('done', function() {\r\n      console.log(\"Clearing /client/ module cache from server\");\r\n      Object.keys(require.cache).forEach(function(id) {\r\n        if (/\\/src\\//.test(id)) delete require.cache[id];\r\n      });\r\n    });\r\n  \r\n    app.use(require('webpack-dev-middleware')(compiler, {\r\n      noInfo: true,\r\n      publicPath: config.output.publicPath\r\n    }));\r\n  \r\n    app.use(require('webpack-hot-middleware')(compiler));\r\n\r\n  }else{\r\n    app.use(\"/static\", express.static(\"dist/\"));\r\n  }\r\n};\r\n```"}}