The Dev Server's Proxy in JavaScript

While you work, two servers run on your computer. npm run dev starts Vite's dev server at http://localhost:5173, which sends the page and its files. The shop's API runs at http://localhost:3000. The page calls fetch("/api/products"): a path with no server in front goes to the server the page came from, the dev server.

The "Your page" tab has no dev server: it draws your page in the browser with its own copy of the shop's API, so it lists the products even before you add the proxy. The check runs a real dev server that reads vite.config.js, so watch what Check prints.

The dev server has no file at /api/products. Like for any path it doesn't know, it answers with index.html, status 200. The page then reads HTML as JSON, and the first character, the < of <!doctype html>, breaks it: Unexpected token '<'.

A proxy fixes it. In vite.config.js, server.proxy lists the starts of paths and the server each one goes to. The dev server passes those requests on, with the same path, and hands the answer back to the page. For example, an entry "/uploads": "http://localhost:4000" would send /uploads/mug.png to http://localhost:4000/uploads/mug.png. Only the dev server reads this setting: a built site has no dev server.

The check opens the page through the dev server, and the proxy really carries the request to the shop's API. Your config must give:

Without server.proxy:
GET /api/products  →  200  the page's own HTML, not JSON
alert: Unexpected token '<', "<!doctype "... is not valid JSON

With it:
GET /api/products  →  200  the shop's API answers, through the proxy
list "Products": Mug $12, Notebook $7, Lamp $29, … Gift card $50
/api/... -> http://localhost:3000/api/... (server.proxy)

Your task: in vite.config.js, under plugins, add a server object with a proxy that sends "/api" to "http://localhost:3000".

Assignment
Follow the Coding Tutorial to set up the dev server's proxy, so the page's /api requests reach the shop's API.

Hint
proxy goes inside server, not next to plugins. The path and the address are both strings in quotes, and each entry ends with a comma.