How to setup Vue dev server with a running Web Server

When you need to communicate with a real world back-end

Problem

Imagine you have your back-end server running on your computer and you want to use “npm run dev” as usual to have a better development experience but you need to make API calls to your back-end.

So how to do that? You need to proxy.

Solution

I assume you created your Vue project with the standard command-line interface, vue init webpack. If so, your directory structure should be something like:

In this example we also assume that you API server is living at localhost:8080 and the Vue dev server is at localhost:3000. We need a way to proxy all the request from the dev server to the real one.

Open config/index.js and you should see a big JSON:

In the dev field you can notice a proxyTable object. This is where we need to add our proxy configuration. In our case we want to proxy all the request with the /api to localhost:8080.

Therefore:

We can add also multiple configuration. For example, Imagine we need to fetch the images from another server running at localhost:8081.

Since Vue uses webpack to create the dev server, you can check here for more information:

https://webpack.github.io/docs/webpack-dev-server.html

Run npm run dev and everything should work!

Conclusion

Using the Vue dev server with a real running back-end is really easy and require a minimum setup. I hope you find this quick tutorial useful.

Thank you for reading.

Francesco Saverio

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Francesco Zuppichini

Written by

“the less we tell, the more we tell” https://francescozuppichini.carrd.co/

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade