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.

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.


If you found this article helpful, please consider buying me a coffee.