How to organise a webpacked vue.js application served by an express/koa backend?

If you're trying to use webpack-dev-server with your own Node backend, you'll want to look into using proxy.

Basically, the idea is that you run your webpack-dev-server on one port (for example, port 3000) and you run your Node server on another port (for example, port 3001). You just need to tell webpack to forward your server-side requests to your Node backend.

You can do this by adding a proxy property to the devServer setting in your webpack.config.js file. For example:

devServer: {  ...  proxy: {    '/api/**': {      target: 'http://localhost:3001',      secure: false    }  }}

Now, any requests that start with /api/ will go to your Node backend. So if you do something like:

fetch('/api/users').then(...)

This request will be proxied to your Node server. You will just want to make sure you prefix all your server-side routes with /api/.

To automatically prefix all your routes in Koa, you can just do the following:

const Koa = require('koa')const Router = require('koa-router')const app = new Koa()const router = new Router({ prefix: '/api' })// GET /api/usersrouter.get('/users', async ctx => {  ...})app.use(router.routes())app.use(router.allowedMethods())

If you're using Express, you can prefix by doing the following:

const express = require('express')const app = express()const router = express.Router()// GET /api/usersrouter.get('/users', (req, res) => {  ...})app.use('/api', router)