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.