26-Jul-2020 in Software Development #Node.js

Allow dots in paths with webpack-dev-server

Generally speaking, I don't use dots (periods, full stops, whatever else they may be called) in the URI for a website. That was, until I made the . an allowable character for user names on one of my projects.

Allowing the character was a big deal at all with Express.js or React.js (my stack du jour at present). The issue was getting my local development environment, using webpack-dev-server to properly route the these "dotted" URLs.

Fortunately, webpack-dev-server has a configuration option that can be placed in your webpack.config.js file to explicitly allow dots in the URLs, by disabling the rule that disallows them in the first place.

Within your webpack.config.js file, simply add the following to your devServer section:

module.exports = {
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
    // Other devServer stuff...
  },
  // Other module.exports stuff...
};

Not much to it. Just go ahead and restart your webpack development server and once the new configuration is loaded, you'll be able to access URLs that have a dot, like /this.url.right.here.