Webpack-dev-server with bypass proxy

Question

How to achieve a 'proxy' (similar to grunt-connect-proxy) option with webpack-dev-server ?

I am using webpack and webpack-dev-server with Grunt. A task in Gruntfile.js (below code) is able to start the server on port 8080. I want to add proxy setup for all the backend data requests (context URL /ajax/*).

 "webpack-dev-server": {
 options: {
 webpack: webpackConfig,
 publicPath: "/src/assets"
 },
 start: {
 keepAlive: true,
 watch: true 
 }
 } 

• Johannes Ewald: Could you be more specific? Do you run webpack-dev-server via CLI or API? What do you mean by "goodness" - do you mean live-reload? It's hard to answer with actual code examples when the question is so generic.

Answer 1

In the webpack config, you can use devServer.proxy like this:

proxy: {
 '/ajax/*': 'http://your.backend/'
}

• walkerrandophsmith: I was successful with the proxy option when using express, but after migrating to koa and using koa-webpack-dev-derver I had no luck. Any ideas?
• magnump0: I can't debug the problem with devServer.proxy settings. WebpackDevServer does not proxy api calls to another location. But any direct calls pass through, so it's definitely an issue of webpack-dev-server proxying. How can I debug it?

Answer 2

Webpack dev server proxy api has been changed since v1.15

https://github.com/webpack/webpack-dev-server/issues/562

glob * should be ** to proxy all request

 devServer: {
 proxy: {
 '**': 'http://local.ui.steelhouse.com/'
 },
 }

Answer 3

I ended up using 'grunt-contrib-connect' and 'grunt-connect-proxy' with 'webpack-dev-middleware'. So, I can have proxy middleware to handle all my data requests and webpack middleware to handle static bundle file requests.

 var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
 var mountFolder = function (connect, dir) {
 return connect.static(require('path').resolve(dir));
 };
 var prepareDevWebpackMiddleware = function() {
 webpackConfig.devtool = "eval-source-map";
 var compiler = webpack(require("./webpack.config.js"));
 return webpackDevMiddleware(compiler, {
 publicPath : "/assets" 
 });
 };

---- GRUNT TASK ----

 connect: {
 options: {
 port: 8080,
 hostname: 'localhost',
 livereload : true
 },
 proxies: [{
 context: '/api',
 host: 'localhost',
 port: 8000
 }],
 livereload: {
 options: {
 middleware: function (connect) {
 return [
 prepareDevWebpackMiddleware(),
 proxySnippet,
 mountFolder(connect, 'src')
 ];
 }
 }
 }
 }

• Andy: what is webpackConfig.devtool = "eval-source-map"; doing in prepareDevWebpackMiddleware? That looks like the wrong place for such a side effect.

Answer 4

webpack-dev-server didn't know how to deal with your content, so it has a config which can proxy all your request to specific server handle content.

for example:

you should run 'grunt content' to start your content server then run 'grunt serve' to start develop

'use strict';
var webpackDistConfig = require('./webpack.dist.config.js'),
 webpackDevConfig = require('./webpack.config.js');
var mountFolder = function (connect, dir) {
 return connect.static(require('path').resolve(dir));
};
module.exports = function (grunt) {
 // Let *load-grunt-tasks* require everything
 require('load-grunt-tasks')(grunt);
 // Read configuration from package.json
 var pkgConfig = grunt.file.readJSON('package.json');
 grunt.initConfig({
 pkg: pkgConfig,
 webpack: {
 options: webpackDistConfig,
 dist: {
 cache: false
 }
 },
 'webpack-dev-server': {
 options: {
 hot: true,
 port: 8000,
 webpack: webpackDevConfig,
 publicPath: '/assets/',
 contentBase: {target : 'http://localhost:13800'},
 },
 start: {
 keepAlive: true,
 }
 },
 connect: {
 options: {
 port: 8000,
 keepalive: true,
 },
 proxies: [
 {
 context: '/',
 host: '127.0.0.1',
 port: 8031,
 https: false,
 xforward: false
 }
 ],
 dev: {
 options: {
 port : 13800,
 middleware: function (connect) {
 return [
 mountFolder(connect, pkgConfig.src),
 require('grunt-connect-proxy/lib/utils').proxyRequest
 ];
 }
 }
 },
 dist: {
 options: {
 middleware: function (connect) {
 return [
 mountFolder(connect, pkgConfig.dist),
 require('grunt-connect-proxy/lib/utils').proxyRequest
 ];
 }
 }
 }
 },
 open: {
 options: {
 delay: 500
 },
 dev: {
 path: 'http://localhost:<%= connect.options.port %>/webpack-dev-server/'
 },
 dist: {
 path: 'http://localhost:<%= connect.options.port %>/'
 }
 },
 karma: {
 unit: {
 configFile: 'karma.conf.js'
 }
 },
 copy: {
 dist: {
 files: [
 // includes files within path
 {
 flatten: true,
 expand: true,
 src: ['<%= pkg.src %>/*'],
 dest: '<%= pkg.dist %>/',
 filter: 'isFile'
 },
 {
 flatten: true,
 expand: true,
 src: ['<%= pkg.src %>/styles/*'],
 dest: '<%= pkg.dist %>/styles/'
 },
 {
 flatten: true,
 expand: true,
 src: ['<%= pkg.src %>/images/*'],
 dest: '<%= pkg.dist %>/images/'
 },
 ]
 }
 },
 clean: {
 dist: {
 files: [{
 dot: true,
 src: [
 '<%= pkg.dist %>'
 ]
 }]
 }
 }
 });
 grunt.registerTask('serve', function (target) {
 if (target === 'dist') {
 return grunt.task.run(['configureProxies', 'build', 'open:dist', 'connect:dist']);
 }
 grunt.task.run([
 'open:dev',
 'webpack-dev-server'
 ]);
 });
 grunt.registerTask('content', ['configureProxies', 'connect:dev']);
 grunt.registerTask('test', ['karma']);
 grunt.registerTask('build', ['clean', 'copy', 'webpack']);
 grunt.registerTask('default', []);
};