How to configure webpack devServer to proxy /images to external image provider (storage)

Question

I need my webpack-dev-server to be able to proxy the /images/*.jpg path to my external provider (Cloud Storage).

This:

<image src="/images/file.jpg" />

Should be served from:

<image src="https://firebasestorage.googleapis.com/v0/b/PROJECT_NAME.appspot.com/o/images%2Ffile.jpg?alt=media" />

Obs: I also have the /images folder inside of my Cloud Storage Bucket.

Answer 1

This is the webpack configuration that allowed me to accomplish this:

devServer: {
    compress: true,
    hot: true,
    port: 80,
    historyApiFallback: true,
    allowedHosts: ['dev.mydomain.com'],

    // THIS IS THE IMPORTANT PART
    proxy: {
      '/images': {
        target: `https://firebasestorage.googleapis.com`,
        secure: true,
        changeOrigin: true,
        pathRewrite: (path,req) => {
          // path: '/images/fileName.jpg'
          const IMAGE_FILE = path.split('/').pop();
          const BUCKET_ROOT = `/v0/b/PROJECT_NAME.appspot.com/o`;
          return `${BUCKET_ROOT}/images%2F${IMAGE_FILE}?alt=media`
        },
      }
    },
  },