Rewriting Webpack Proxy URLs

Question

I'm using Webpack Dev Server to proxy my files from an external url, that's because I'm using it to develop locally and proxying the PHP/Twig files from the server, so that way I don't need to set up all the back-end locally.

But the problem is that I need to rewrite the assets urls to pull these files from my local machine, not from the proxy. Right now, when I open my localhost, all the assets are being loaded from the server. i.e: http://mycoolwebsite.com/core/somefolder/assets/styles.css

And I need to replace that to pull from my localhost, like this:

/assets/styles.css

This is what I have now:

devServer: {
    compress: true,
    port: 9000,
    proxy: {
    '*': {
        target: 'http://mycoolwebsite.com',
        changeOrigin: true,
        secure: false
    }
}

Any clue? Thanks!

Answer 1

you want all request that go to your server "http://mycoolwebsite.com/**" to go to your local machine: "http://localhost:9000/" (assuming its running on port 9000)

so try this:

proxy: {
'/assets/**': {
    target: 'http://localhost:9000',
    secure: false,
    pathRewrite: function(req, path) {
     //use the pathRewrite to modify your path if needed
     return path;
    }
}

now it shouldn't make any difference what server you are actually calling. every request that includes '/assets/' should go to your localhost. (I can not test it atm)