webpack-dev-server with backend api

Question

I am using webpack-dev-server for an angularjs app, I start it from a task in package.json like this:

  "scripts": {
    "start-api": "node api/server.js",
    "dev": "webpack-dev-server --env dev --history-api-fallback --inline --progress --port 5000",
    "start": "npm run dev"
  },

I have a backend api server that uses koa and is running on the same port:

const koa = require('koa');

app.listen(5000);

module.exports.app;

When the koa server is started, it intercepts all requests and I cannot browse to the angular browser app.

Should I be serving everything from koa or is there a way to have the two working together?

Answer 1

Yes, you can use webpack-dev-server with your own backend API. There are two ways to do this:

First, you can configure the dev-server to use a proxy. This is the solution I use and it works well for me. My configuration looks something like this:

proxy: {
  "/api/*": {
    target: "http://localhost:8080"
  }
}

This configuration ensures that all requests beginning with "/api" are sent to the backend API server (running on localhost:8080 in this case), rather than the dev-server. Optionally, if you need to, you can bypass the proxy with a function, like so:

proxy: {
  "/api/*": {
    target: "http://localhost:8080",
    bypass(req, res) {
      return (/* some condition */) ? '/index.html' : false;
    }
  }
}

But I have never needed to use this, since the "/api/*" key is all I need to ensure each request is sent to the right server.

Importantly, you should have the two servers running on different ports. I usually use 8080 for my backend, and 9090 for the dev-server.