I Like Kill Nerds

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

Getting Aurelia To Work With HTML5 pushState

Aurelia 1, Javascript ·

Recently in Aurelia I ran into a peculiar issue using the bundled Browser Sync Gulp task for deploying a test server. When visiting a parameterised URL the paths to the System packages would break. It turns out by default the paths are set in a way they will add onto the current URL instead of referencing the root “/” as the base path.

In /config.js where all of the paths are setup, right up the top you will see a few paths set. Mine looks like the following (yours probably does as well):

System.config({
    "paths": {
        "*": "*.js",
        "github:*": "jspm_packages/github/*.js",
        "npm:*": "jspm_packages/npm/*.js"
    }
});

In my situation, I had a parameterised URL point to /reports/:reportid however when visiting this URL, all include paths would try loading from /reports/jspm_packages/ instead of the expected /jspm_packages/.

I have no idea if this problem is isolated to the Browser Sync testing server or not, but it was very puzzling. Then I realised that the paths need to be set like this to work with parameterised URL’s correctly:

System.config({
    "paths": {
        "*": "/*.js",
        "github:*": "/jspm_packages/github/*.js",
        "npm:*": "/jspm_packages/npm/*.js"
    }
});

All we did was add a forward slash to the source values of the paths object. This forces the loader to always reference the root directory. I initially tried to set the baseUrl value on the config object, but for some reason it had a few issues with the Browser Sync testing server running. This method is confirmed working.

I did not see any mention of this issue in the documentation, so I assume perhaps something weird with my environment could be to blame. I am running an Aurelia application within Windows, so perhaps it could be differences in how paths are resolved in Windows vs a Unix based operating system like Mac OS.

Dwayne

Leave a Reply

7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Benjamin

I’ve got the sources loading just fine but now I get this error (skeleton-app)


Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://flickr/' cannot be created in a document with origin 'http://127.0.0.1:9000'.

0
Benjamin

Nevermind:
Issue:
https://github.com/aurelia/history-browser/pull/11
FixIt:
jspm install aurelia-animator-css aurelia-binding aurelia-bootstrapper aurelia-dependency-injection aurelia-framework aurelia-http-client aurelia-router aurelia-event-aggregator aurelia-history-browser aurelia-loader-default aurelia-loader aurelia-metadata aurelia-route-recognizer aurelia-templating-binding aurelia-templating-resources aurelia-templating-router aurelia-templating aurelia-logging aurelia-task-queue aurelia-history aurelia-path

BTW: Note to self, join/read the gitter channel

0
MaxCoder

@Benjamin,

I see you found the solution. The author of this post (Dwayne) is actually the person who submitted the PR. He goes by Vheissu on Github. Seems the issue is a regression issue from the previous release.

Dwayne, if you’re reading, thank you for the PR. You saved me some headaches myself.

0
Henning Krause

I experienced the same issue, however, after reading the Aurelia documentation again I saw that I didn’t add a tag to my index.html.

Adding

to the section of my index.html fixed things and Pushstate is working without prefixing all the path entries.

0
Andreas

Mine actually looks like this:

paths: {
“*”: “dist/*”,
“github:*”: “jspm_packages/github/*”,
“npm:*”: “jspm_packages/npm/*”
}

And if I change them to:

paths: {
“*”: “/dist/*”,
“github:*”: “/jspm_packages/github/*”,
“npm:*”: “/jspm_packages/npm/*”
}

I get:

(SystemJS) Error: ENOENT: no such file or directory, open ‘/jspm_packages/github/systemjs/plugin-text@0.0.8.js’
at Error (native)
Error loading /jspm_packages/github/systemjs/plugin-text@0.0.8.js
[11:27:41] ‘export’ errored after 2 s
[11:27:41] Error in plugin ‘run-sequence(bundle)’
Message:
bundle promise

When I do `$ gulp export`.

Any ideas?

0
Andreas

Well I immediately solved it by adding [base href=”/”] to my index.html. I also had to change all [link]s and [script]s to begin with “/” (they were all relative before) (note I’m using square brackets because I wasn’t allowed to post this otherwise)

0
Tim

I’m trying to host my app on S3 and need to use pushstate (as my API platform (MongoDb Stitch) does not work with # in the url).
However this results in a 404. I have followed many articles suggesting using CloudFront to redirect 404s to /index.html. However now I get AccessDenied (not sure why as my S3 bucket is publicly accessible.
Any thoughts?
Thanks
Tim

0