vite - Expose ability to add middlewares to Vite dev server (or similar extensibility)

[mattdsteele]

Command

serve

Description

With the goal to move off the Webpack-based development server, we have a need to port some of the functionality currently supported by the @angular-builders/custom-webpack module.

In particular, we would like the ability to add custom middlewares to the dev server. In our case, this would be used to inject a connect-compatible middleware that acts as a means of providing authenticated access to proxied endpoints, by setting session cookies used for authorization.

Describe the solution you'd like

Vite's dev server currently supports proxy endpoints via an embedded http-proxy module, and provides documentation on customizing with additional middlewares:

In some cases, you might also want to configure the underlying dev server (e.g. to add custom middlewares to the internal connect app). In order to do that, you need to write your own plugin and use configureServer function.

The configureServer method exposes the custom middleware hook:

const myPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // custom handle request...
    })
  },
})

Describe alternatives you've considered

Exposing direct access to the Vite API may not align with the philosophy of the Angular CLI, but supporting the extensibility via custom builders would make these use cases feasible.

I see similar requests in other issues such as #24163 and just-jeb/angular-builders#1288

On a side note, I'm very excited to see CLI's build process move over to Vite; I've been using it outside Angular, and have given talks about how much I've enjoyed it: https://steele.blue/vite-is-neat/

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[lixaotec]

upvote

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[clydin]

The ability to programmatically add middleware via a custom created builder is available in v17. This does require the creation of a builder or for the availability of a third-party package similar to custom-webpack to leverage.
Please see this PR for further details: #26212
Please note that, while available, the Angular team does not provide official support for the usage of these programmatic APIs.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}