Fixing Aurelia Webpack PushState “index.html” Problem

If you’re using the Aurelia Webpack Skeleton and you’re developing locally using the development server, then you have probably encountered an issue with pushState and index.html resolution.

You can see this problem happening on the official skeleton. But essentially you enable pushState in your main.js or main.ts file using config.options.pushState = true; and then you load up the app on port 9000 through http://localhost:9000

Navigating around, you’ll see that the app works. Hitting the /users route should change your URL to http://localhost:9000/users and things work. Now what happens if you refresh the page or trying hitting /users directly? You’ll get gibberish.

What you’re actually seeing is placeholders inside of the index.html file in your root, not the generated file in your dist folder. I swear this used to not be a problem, so until this is resolved officially, this is how you fix it.

Open up webpack.config.js and then inside of the development section, add the following:

{
devServer: {
  historyApiFallback: {
    index: '/dist/'
  }
},
}

You should add this beneath this line that is already present in your Webpack configuration file:

require('@easy-webpack/config-common-chunks-simple')
({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'}),

This will then make everything resolve to your dist folder and by association, your index.html file. It isn’t a long term or ideal solution, but this only applies for local development and hopefully a better fix presents itself soon.