{"action":"created","issue":{"url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/46","labels_url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/46/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/46/comments","events_url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/46/events","html_url":"https://github.com/gaearon/react-hot-loader/issues/46","id":51921748,"number":46,"title":"Usage with an existing webserver","user":{"login":"bilalq","id":707147,"avatar_url":"https://avatars.githubusercontent.com/u/707147?v=3","gravatar_id":"","url":"https://api.github.com/users/bilalq","html_url":"https://github.com/bilalq","followers_url":"https://api.github.com/users/bilalq/followers","following_url":"https://api.github.com/users/bilalq/following{/other_user}","gists_url":"https://api.github.com/users/bilalq/gists{/gist_id}","starred_url":"https://api.github.com/users/bilalq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bilalq/subscriptions","organizations_url":"https://api.github.com/users/bilalq/orgs","repos_url":"https://api.github.com/users/bilalq/repos","events_url":"https://api.github.com/users/bilalq/events{/privacy}","received_events_url":"https://api.github.com/users/bilalq/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2014-12-14T15:12:00Z","updated_at":"2015-01-13T05:30:06Z","closed_at":null,"body":"Before anything else, I wanted to express just how awesome I think this is. \r\n\r\nThat aside, I ran into some issues getting this to work in the kind of setup I wanted. I have an Express server that I want to use as a RESTful API and have the `/` route serve the React app. In prod, I just have it build out and serve the static assets, so there's no problem there. \r\n\r\nHowever, I found it a little tricky to get the hot reload working with that kind of setup in development. \r\n\r\nI saw [this section](http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server) on using the webpack dev server with an existing server on the docs, and that worked well enough for basic usage, but hot reloading failed since it would try to make requests against my main server rather than the webpack one for hot reload updates.\r\n\r\nI managed to work around this by defining a set of webpack routes to proxy through all requests for static assets. \r\n\r\nIn `/server/routes/webpack.js`, I have:\r\n\r\n```javascript\r\nvar express = require('express')\r\n  , request = require('request')\r\n  , router = express.Router();\r\n\r\nvar webpackServerUrl = 'http://localhost:3001/';\r\n\r\n// Proxy all requests through to the webpack server\r\nrouter.get('/*', function(req, res) {\r\n  request(webpackServerUrl.concat(req.baseUrl, req.url))\r\n  .pipe(res);\r\n});\r\n\r\nmodule.exports = router;\r\n```\r\n\r\nand in `/server/app.js`:\r\n```javascript\r\n// Use webpack server to serve static assets in development and express.static \r\n// for all other stages\r\nif (app.get('env') === 'development') {\r\n  var webPackServer = require('./routes/webpack');\r\n  app.use('/scripts', webPackServer);\r\n  app.use('/styles', webPackServer);\r\n} else {\r\n  app.use(express.static(path.join(__dirname, '..', 'build', 'client')));\r\n}\r\n```\r\n\r\nAnd this is a rough skeleton of how things are structured:\r\n```\r\n.\r\n├── client\r\n│   ├── components\r\n│   │   └── MyView.jsx\r\n│   └── app.js\r\n├── package.json\r\n├── server\r\n│   ├── app.js\r\n│   ├── bin\r\n│   │   ├── webpackDevServer\r\n│   │   └── appServer\r\n│   ├── middleware\r\n│   │   └── errorHandler.js\r\n│   ├── routes\r\n│   │   ├── index.js\r\n│   │   ├── users.js\r\n│   │   └── webpack.js\r\n│   ├── services\r\n│   └── views\r\n│       ├── error.jade\r\n│       ├── index.jade\r\n│       └── layout.jade\r\n├── styles\r\n│   └── app.scss\r\n└── webpack.config.js\r\n```\r\n\r\nWhile this works, it seems like it's the wrong way to do it. I imagine this is a fairly common use-case, but I couldn't find any decent examples to support this. Is there a better approach to this than setting up a proxy like that?"},"comment":{"url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/comments/69697615","html_url":"https://github.com/gaearon/react-hot-loader/issues/46#issuecomment-69697615","issue_url":"https://api.github.com/repos/gaearon/react-hot-loader/issues/46","id":69697615,"user":{"login":"bilalq","id":707147,"avatar_url":"https://avatars.githubusercontent.com/u/707147?v=3","gravatar_id":"","url":"https://api.github.com/users/bilalq","html_url":"https://github.com/bilalq","followers_url":"https://api.github.com/users/bilalq/followers","following_url":"https://api.github.com/users/bilalq/following{/other_user}","gists_url":"https://api.github.com/users/bilalq/gists{/gist_id}","starred_url":"https://api.github.com/users/bilalq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bilalq/subscriptions","organizations_url":"https://api.github.com/users/bilalq/orgs","repos_url":"https://api.github.com/users/bilalq/repos","events_url":"https://api.github.com/users/bilalq/events{/privacy}","received_events_url":"https://api.github.com/users/bilalq/received_events","type":"User","site_admin":false},"created_at":"2015-01-13T05:30:06Z","updated_at":"2015-01-13T05:30:06Z","body":"Thanks for sharing the approach. "}}