who could explain me all lines of this code, step by step?
vue.config.js:
module.exports = {
//configure webpack-dev-server behavior
devServer: {
proxy: {
'/api': {
target: 'localhost',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
thanks in advance, you would do me a great pleasure.
Sahil
I make things for the internet, and bake electronics to create embedded systems
Why was this file even created? You might have come to know that your frontend and backend server API are not on the same host (i.e. they are generally on localhost 3000 and 5000). And thats why we need to proxy the API requests from the frontend to the API server during development.
module.exports = {} In this case it's doing a trivial task of setting a few options automatically and is loaded by the @vue/cli-service process.
The
devServer : { }configuration option helps us set up a new host for local development, so that the frontend can directly make us of the name-based virtual hosting functionality.We set the `proxy: { }' : Our frontend app and the backend API server are not running on the same host, we need to proxy API requests to the API server during development.
'/api'will be the name that our frontend will use to redirect itself to backend (i.e. target: 'localhost/& in this case I suppose).changeOrigin: truethis option enables us to serve multi API urls based on their names on the same host. (i.e.localhost/api/post/1andlocalhost/api/post/2.)Finally to pass this
localhost/api/post/1aslocalhost/post/1(i.e. to remove /api from our request) we make use ofpathRewrite: { '^/api': ''}which will replace the/apiwith empty string. Note that: The purpose ofpathRewritehere is to remove the matched portion from the destination URL.Hope this helps you, Raffaele Iavazzo