docs: clarify Vite proxy configuration and update serve.md instructions #63975
Conversation
Issue 58718 - update the proxying section to state that Vite (with esbuild) is the default dev server, warn about Webpack-specific syntax, and link to the Vite proxy documentation. Adds a clarifying note above the proxy example for new users.
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
|
Deployed adev-preview for a479a28 to: https://ng-dev-previews-fw--pr-angular-angular-63975-adev-prev-gdxyk1s4.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
Hi @alan-agius4, any thoughts/suggestions on this PR? |
|
Thanks for your contribution. But there is already a PR open for this: #63588 |
|
@alan-agius4, not sure if this PR is being actively contributed to #63588 but I can help close the issue if you with my PR here. |
alan-agius4
left a comment
There was a problem hiding this comment.
Thanks for this. Please see comment.
|
|
||
| 1. Add the following content to the new proxy file: | ||
|
|
||
| > **Note:** This example works for Vite (the default dev server) and most simple proxy scenarios. For advanced options or path matching, refer to the [Vite proxy documentation](https://vitejs.dev/config/server-options.html#server-proxy). |
There was a problem hiding this comment.
Let's avoid adding so many notes. One should suffice IMHO.
| > **Note:** This example works for Vite (the default dev server) and most simple proxy scenarios. For advanced options or path matching, refer to the [Vite proxy documentation](https://vitejs.dev/config/server-options.html#server-proxy). |
|
|
||
| Use [proxying support](https://webpack.js.org/configuration/dev-server/#devserverproxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option. | ||
| For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps. | ||
| > **Note:** As of Angular v18, the default development server is powered by [Vite](https://vitejs.dev/) (with esbuild), not Webpack. Proxy configuration should follow Vite's proxy options. Webpack-specific proxy syntax (such as a bare `*` for path matching) will **not** work with Vite. See the [Vite proxy documentation](https://vitejs.dev/config/server-options.html#server-proxy) for all available options and syntax. |
There was a problem hiding this comment.
This document is for version 20 and v21 and thus let's focus it's content on the default. (Vite). Since custom builders are not supported, they shouldn't be included in the official documentation. Also, let's reduce the number of notes throughout this section.
So I'd suggest to revert this part and just update the links.
| For a detailed description of all options, refer to the [Vite DevServer documentation](https://vitejs.dev/config/server-options.html#server-proxy) (default for new projects), or the [Webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy) if you are using the legacy Webpack builder. | ||
|
|
||
| **Warning:** Proxy configuration syntax differs between Vite and Webpack. For example, Vite does not support a bare `*` as a path matcher. Always consult the correct documentation for your builder. | ||
|
|
||
| NOTE: If you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective. |
There was a problem hiding this comment.
| For a detailed description of all options, refer to the [Vite DevServer documentation](https://vitejs.dev/config/server-options.html#server-proxy) (default for new projects), or the [Webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy) if you are using the legacy Webpack builder. | |
| **Warning:** Proxy configuration syntax differs between Vite and Webpack. For example, Vite does not support a bare `*` as a path matcher. Always consult the correct documentation for your builder. | |
| NOTE: If you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective. | |
| NOTE: | |
| * To apply changes made to your **proxy configuration file**, you must **restart the `ng serve` process**. | |
| * The specific configuration details depend on the project's builder: | |
| * For the **`@angular-devkit/build-angular:browser`** builder, see the [Webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy). | |
| * For the **`@angular/build:application`** builder, see the [Vite DevServer documentation](https://vite.dev/config/server-options#server-proxy). |
Issue 58718 - update the proxying section to state that Vite (with esbuild) is the default dev server, warn about Webpack-specific syntax, and link to the Vite proxy documentation. Adds a clarifying note above the proxy example for new users.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: 58718
What is the new behavior?
Documentation update. No new behavior
Does this PR introduce a breaking change?
Other information