javascriptangularwebpackwebpack-dev-serverwebpack-4

How to use webpack proxy devserver pathRewrite?


I'm currently struggling with rewriting the proxy path to the api server. In my setup what I do is for api request, I delegate it to the proxy server and only for js/html/css webpack-dev-server is used.

Following is what I'm using:

devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
    publicPath: 'http://localhost:8080/dist/',
    disableHostCheck: true,
    proxy: {
        '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'???' : ''} //Need to append http://localhost:3000/MySite1/api
  }
}

So, How do I append /MySite1 to api request before it proxies to the localhost:3000?

E.g. If the request is : http://localhost:8080/api, it should re write to http://localhost:3000/MySite1/api

Also, If the request is : http://localhost:8080, it should re write to http://localhost:3000/MySite1


Solution

  • Try following:

    devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
    publicPath: 'http://localhost:8080/dist/',
    disableHostCheck: true,
    proxy: {
         '/api': {
         target: 'http://localhost:3000',
          pathRewrite: function(path, req) {
           var replacedPath = path;
           if (path.indexOf("MySite1") === -1) {
             replacedPath = replacedPath.replace("/", "/MySite1/api/");
           }
           return replacedPath;
         },
      }
    }