301 redirect with Webpack dev server

Question

I'm trying to redirect urls from this format:

http://localhost:8080/setup/xyz/?code=some-code

to this:

http://localhost:8080/app/#/setup/xyz/?code=some-code

I've tried with both proxies and rewrites:

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/index.html' },
    { from: /^\/app/, to: '/app.html' },
    { from: /^\/setup/, to: '/app/#/setup' },
  ]

},

But it doesn't seem to work. Is there a way to write 301 redirects using the dev server?

Answer 1

@Eugen's answer put me on the right path. Here are the additional details I needed:

The current devserver API for this is onBeforeSetupMiddleware, which exposes the express server API, including redirects. For your case, I think you'd want something like:

  devServer: {
    onBeforeSetupMiddleware: (devServer) => {
      devServer?.app?.get('/setup', (req, res) => {
        res.redirect('/app/#' + req.originalUrl);
      });
    }
  },

Answer 2

Try to configure devServer https://itsopensource.com/how-to-serve-api-locally-with-webpack/

const data = require("./data.json");

module.exports = {
  mode: "development",
  entry: "./src/index",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [],
  devServer: {
    before: function(app) {
      app.get("/getData", function(req, res) {
        res.json(data);
      });
    },
    open: true,
    port: 3000
  },
  resolve: {
    extensions: [".js"]
  },
  module: {}
};