Allow dots in paths with webpack-dev-server

Josh Sherman
1 min read
Software Development Node.js

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.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

About Josh

Husband. Father. Pug dad. Born again Linux user. Founder of Holiday API, Backend Engineering Manager and Emoji Specialist at Mailshake (WE'RE HIRING!), and author of the best damn Lorem Ipsum Library for PHP.

Currently Reading

Pears and Perils
Antifragile: Things That Gain from Disorder
Code Girls: The Untold Story of the American Women Code Breakers of World War II

Previous Reads

Buy Me a Coffee Become a Sponsor

Related Articles