• 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
6 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
6 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

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz