• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Fixing Aurelia Webpack PushState “index.html” Problem

Aurelia 1 · October 7, 2016

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.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nathan Chase
Nathan Chase
5 years ago

That’s if you already did a build. If you wipe your ‘dist’ folder, and just do ‘npm run server’, there won’t be anything in your dist folder, so this hack won’t work. You HAVE to have had already done ‘npm run build:dev’ so that the appropriate files are in the dist folder for this to work.

This has been driving me mad, too, since like you said – it used to work without all this.

0
Alex Drakos
Alex Drakos
5 years ago

Without being 100% sure, I had sort of the same issue after updating packages at some point, and -in my case- it was an issue with the latest Webpack releases.

I fixed that by specifically requesting the last Webpack versions that worked for me in package.json, i.e. :
“webpack”: “2.1.0-beta.22”,
“webpack-dev-server”: “2.1.0-beta.0”

Newest versions had the same issues (reading the webpack index.html configuration texts instead of rendering the components)

This also works for dev server (no dist folder) and build dev/prod just fine. Hopefully it gets properly fixed soon.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz