Webpack dev server "before" functionality

Question

I'm working on an ejected Create React App project, and looking at the docs on webpack dev server, they seem a little bare: https://webpack.js.org/configuration/dev-server/#devserver-before

but I'm trying to see if it's possible to do something like:

before(app){
  // read cookie for user session
  // send user ID in cookie to external API
  // retrieve user object from API
  // attach user object to response, to be _somehow_ accessed via the React app client side
}

I know this is pseudo code, but I'm very unclear about what exactly you can do within this middleware, in terms of hooking into Create React App's rendering of the index.html and aforementioned client-side React app

In the docs, it says you could define a route handler, like so:

app.get('/some/path', function(req, res) { }

but I don't feel like that's going to be useful, as you wouldn't then be able to hook back into Webpack dev server's rendering process?

Answer 1

You can try adding this in your webpack config file, and practically you can use it as a mock server. Here is an example of how I configured mine and hope it helps.

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    before:(app) => {
        app.post('/user/login', function(req, res, next) {
            res.json({success: true})
        });
    }
},