Need proxy support

[cpunion]

In react app development, I usually call remote api in same domain, but the real api server runs on other process/port. So I need a proxy config like this:

module.exports = {
  webpack: {
    proxy: {
      '/api/': {
        target: 'http://www.myhost.com/api/'
      }
    }
  }
}

The proxy is a webpack config, I can access http://localhost:3000/api/test to forward to my api server. Expect nwb to support that.

[insin]

webpack.extra config in [email protected] would let you pass this extra config, but I think proxy is for webpack-dev-server, not webpack itself.

nwb currenly uses its own simple Express server rather than webpack-dev-server, as I wanted the nice error overlays you get with webpack-hot-middleware but wasn't aware of a way to use it with webpack-dev-server.

[cpunion]

Currently I resolved with middleware, I added a http-proxy. Not cleanly.

[CrisLi]

Do we have a better solution for this requirement? I think a proxy to the API server is a common requirement for development react app.

[insin]

http-proxy-middleware can be added to devServer.js for this, then we can support proxy config in the config file.

For reference, here's how webpack-dev-server does this: https://github.com/webpack/webpack-dev-server/blob/658280d8c497053877aec50974766d66d9b9def1/lib/Server.js#L135

PRs are welcome, as implementing this isn't a priority for me right now (the apps I'm currently developing either serve up the API via Node.js (so I use nwb's middleware on the same server ) or will be hitting external APIs using CORS when deployed, so I don't need to proxy requests).

[grahamlyus]

@insin I have a working version of this by adding a top-level proxy object to the user config, such as:

    proxy: {
      enabled: true,
      path: '/api',
      options: {
        target: 'http://localhost:8999',
        pathRewrite: {
          '^/api': ''
        }
      }
    },

In devServer.js the proxy path and options are simply passed to the middleware:

  if (proxy && proxy.enabled) {
    app.use(proxy.path, require('http-proxy-middleware')(proxy.options))
  }

I can make a pull request if you think this is a good approach.

Incidentally, what is your local workflow like when making changes to the nwb package?

I had to keep commenting out the version check in cli.js, and I don't know if it's because I'm using yarn, but I had to build nwb, clear yarn's cache and remove and reinstall nwb using a file:/path-to-nwb each iteration. There must be a better way :)

[insin]

This looks perfectly cromulent as an initial way to add proxy support.

Providing an object can act as "advanced mode", giving you complete control over proxy middleware settings.

Suggestions:

• accept new top-level devServer config and put proxy under that, as there are more things we can make configurable.
• assume the proxy is enabled when devServer.proxy config is present and truthy, instead of needing an enabled flag.

---

Future work while I've been braining this (will create new issues for these):

• Support configuring proxy as a string (simple mode), providing a URL all unresolved requests will fall back to. This involves a bit more work on nwb's side than advanced mode (check out create-react-app's start script for an example).
• Should express middleware also configure a proxy for you?

---

For development I alias the bin scripts (and bump the patch version in package.json to .99 or something so it's easy to check if you're using an alias) - don't forget to run npm run build or npm run build:watch:

# Bash
alias nwb="node ~/repos/nwb/lib/bin/nwb.js"

# Cmder
alias nwb=node C:\Users\Jonny\repos\nwb\lib\bin\nwb.js $*

Edit: added this to CONTRIBUTING.md.

[grahamlyus]

Added #259. 1 Test fails, but it also fails locally for me when at v0.15.5.

Thanks for the tips on development. I think my pain stems from having nwb local to my project instead of globally, so the alias trick didn't help when running the npm start script for my project for instance. I also tried npm link, but that also was problematic as it still runs in the context of the local nwb package, so I got errors loading autoprefixer in my postcss config.

[13860120868]

Is there any plan to accept #256 to master branch?

[insin]

21f57ba implements this in the next branch by switching to using webpack-dev-server

[insin]

You can now configure Webpack Dev Server for this in v0.17