Proxy Content from URL with Webpack Dev Server

Posted by in Software, Tutorial

An application I’m working with has a large amount of static files (path starting with '/files/') deployed on a mounted volume in Docker. They are subsequently served via nginx. for local development, I thought of two options:

  1. Add files to the local dev server (e.g. copy assets)
  2. Build a proxy to pipe the request to the nginx-served site

The first option is somewhat restrictive:

  • I’d have to make sure the files are kept in sync with the latest version.
  • I’d have to integrate the syncing process with the build scripts.
  • Just mounting the volume is not a solution as the data would need to be shareable on the remote machine.

Therefore, only the second option seems to be viable, with the following conditions:

  • The web server needs to be running at all times
  • It needs to be accessible locally without authentication

Configure the Dev Server

Webpack has a development server one can use locally. Normally, it only serves resources from contentBase:

Fortunately, it also offers pre- and post-processing via the before and after. In our case, implementing before would allow us to replace the default process for the request to '/files/' with a custom implementation:

Our function before(app) is intercepting requests to '/files/':

We perform a request via prepending the nginx server’s address and port:

Then we just pipe the response from the server to our local dev server:

Once the behaviour is fixed, we chain the behaviour:

At this point, all requests to '/files/*' will be tunnelled to the remote server transparently.

Few Notes

Note: You might want to perform different transformations (instead of just prepending the server details) or add some environment variables (e.g. proxy).

Note: If you can get away with copying assets locally (or even including them in your project), you can do so. I personally find the idea of having static project assets in a separate location as a necessary evil in this particular case.


A little experiment: If you find this post and ad below useful, please check the ad out :-)