Dev server proxy

In the last video, we saw how we have separate client and API development servers.

When we deploy our app, though, the client will be built as static files including our JavaScript bundle files, and these will be served from the server or a CDN. This will mean that we'll be back down to one server on a single host.

Issue

In makes sense then that we code the app on the assumption that both the client and server are on the same host.

So, for example, let's go to our main.js file and if we wanted to call the API, we might do something like:

const response = await axios.get("/items");

Assuming that /items is an API endpoint.

But even if that endpoint existed on the API, we'd get a 404 error in development because that endpoint would be on the server, which is on port 8070, whereas that request would be implicitly targetting localhost:8080/items as the command is running from the client.

Proxy

The solution is to proxy calls to the API server during development. Luckily, this is something that's easy to configure with the Webpack dev server.

The Vue config API allows us to configure a proxy with the devServer.proxy option. So let's go ahead and add that to the export object.

We'll set the value of the proxy to the server URL.

vue.config.js

devServer: {
  proxy: "http://localhost:8070"
}

What this will do is - any outgoing requests to the dev server which are not recognized - before throwing a 404 it will instead try this proxy and send any of those calls to the server instead.