So this is a very simple application i started implementing to learn vuejs , node , express and webpack .
Code contains in this branch adApp vue (NOT in master!)

Current problem i have is aceessing an api end in express backend /api/products/
link to server.js file

.... //more code here 

MongoClient.connect(URL, (err, database) => {
  if (err) 
    return console.log(err);
  db = database;
  app.listen(3000, () => {
    console.log('listening on 3000');
  })
})

app.get('/api/products', (req, res) => {
    db.collection('products').find().toArray(function(err, results) {
    console.log(results)
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(results));
    })
})

I have used vue webpack-simple template and it uses 8080 port to run the application . However my server runs in 3000 port . I am trying access /api/products/ using a simple get method as follows
link to Product.vue file

export default {
  name: 'Products',
  methods: {
        get: function() {
            // GET request
            this.$http({
                url: '/api/products',
                method: 'GET'
            }).then(function(response) {
                console.log('ok');
            }, function(response) {
                console.log('failed');
            });
        }
    }
}

I get the 404 error like this

I understand this error . Since it tries to access the backend api end using localhost:8080 port therefore it throws a 404. How i can solve this issue ?

I've found few suggestion to use webpack dev server proxy . So i did as follows in the webpack.config.js

devServer: {
    historyApiFallback: true,
    noInfo: true,
     proxy: {
       "/api/*": "http://localhost:3000/api/"
     }
  },

But still i get the same result . If anyone can give me a solution or point me in the right direction is highly appreciated .

Currently this adApp application uses AngularJS as the front-end technology . I want to migrate to VueJS . If anyone wants to contribute , holler at me :)