Enable Fastboot relative URL

[xg-wang]

This PR overrides #128, fixes #138 #110

Implementation stolen from https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/fastboot/initializers/ajax.js

Also upgrade node-fetch to 2.3, which has the abort support

TODO:

• automatic test (or just manual test?)

[xg-wang]

@mike-north My local ember-cli-fastboot server doesn't really give me origin so I ended up doing the string concatenation.

[xg-wang]

Passed ember s. Before ember-cli-fastboot is installed it was failing because of relative URL.

[chrism]

I think it should be noted that this approach doesn't seem to work for either absolute or relative URLs when using Fastboot with Prember.

By that I mean when I use the PR from @rwwagner90 #128 then using a fetch in a model hook like this:

model() {
  return fetch('/assets/some.json').then(res => {
    return res.json();
  });
}

works with Fastboot, but gives an error when using with Prember.

Error while processing route: Only HTTP(S) protocols are supported
TypeError: Only HTTP(S) protocols are supported

However, this seems to be able to be resolved by including the absolute URL (which isn't ideal but is a workable solution for the few fetch requests I make).

model() {
  let path = '/assets/some.json';

  if (this.fastboot.isFastBoot) {
    const headers = this.fastboot.request.headers;
    let host = headers.get('host');
    path = `http://${host}${path}`;
  }

  return fetch(path).then(res => {
    return res.json();
  });
}

Although this isn't ideal it does work and allows for Prember builds.

Whereas this PR does not—there is still the same error message as before even after including this code.

I hope others agree that Prember is an increasingly important use case for Fastboot and that a solution which doesn't seem to be compatible with it is inferior to one which does.

If this gets merged as is then I'm concerned that there will still be an issue for the majority of users.

Maybe the fix is needed on the Prember side but I thought it was worth making others aware of this.

[xg-wang]

Hi @chrism, can you share a reproduction repo?

[chrism]

Not public but I can create one if it’s useful.

…

On 12 Nov 2018, at 07:52, Thomas Wang ***@***.***> wrote: Hi @chrism, can you share a reproduction repo? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[RobbieTheWagner]

@xg-wang @chrism my site uses prember, and you can feel free to test it there https://github.com/shipshapecode/shipshape.io

Is there a reason we cannot use the code from my PR?

[xg-wang]

@rwwagner90 That PR only allows relative URLs for adapters, a pure fetch(...) won't go through the adapter. So @chrism need to add

  if (this.fastboot.isFastBoot) {
    const headers = this.fastboot.request.headers;
    let host = headers.get('host');
    path = `http://${host}${path}`;
  }

before making a fetch.

@chrism Would be very helpful if you can create a small repro for your code snippet with Prember setup.

[RobbieTheWagner]

@xg-wang as I said above, please use my repo for prember testing. https://github.com/shipshapecode/shipshape.io

[xg-wang]

@rwwagner90 Yea I will. I want to use both your app and his for Prember testing. A minimal setup can be easier to set debugger to play around with. I can try a get one but since @chrism seems already have a repro we can just use his.

[xg-wang]

@rwwagner90 Do you have a branch that's breaking bc relative URL for shipshape.io?
@chrism any updates for creating a repro?

[RobbieTheWagner]

@xg-wang all prember apps should have a similar issue, I would assume. If you pull master of my repo and install the branch of ember-fetch, you should likely see the same issues @chrism was seeing.

[chrism]

Hi, I’m sorry I haven’t yet pushed the example repo. It’s been quite time consuming to create the most simple illustration of where one branch works and the other doesn’t.

I’m at a conference this week but I’ll find some time on Friday, at the latest.

[xg-wang]

@rwwagner90 🔥

-    "ember-fetch": "rwwagner90/ember-fetch#server-side",
+    "ember-fetch": "xg-wang/ember-fetch#fastboot",

RSS Feed created successfully
sitemap.xml successfully created!
Environment: production
pre-render / 200 OK
pre-render /ember-consulting/ 200 OK
ember-svg-jar: Missing inline SVG for ember-async-await-for-each
pre-render /open-source/ 200 OK
pre-render /contact/ 200 OK
pre-render /blog/ 200 OK
pre-render /blog/author/rwwagner90/ 200 OK
pre-render /blog/ad-hoc-relationships-with-ember-data/ 200 OK
pre-render /blog/aiming-for-targets-with-ember/ 200 OK
pre-render /blog/ember-3-1-testing-and-optional-features/ 200 OK
pre-render /blog/ember-data-belongs-to-find-or-create/ 200 OK
pre-render /blog/ember-data-passing-query-params-to-save/ 200 OK
pre-render /blog/ember-in-repo-addons/ 200 OK
pre-render /blog/ember-inspector-the-journey-so-far/ 200 OK
pre-render /blog/ember-meta-tags-seo-social/ 200 OK
pre-render /blog/ember-without-jquery/ 200 OK
pre-render /blog/forcing-trailing-slashes-for-routes/ 200 OK
pre-render /blog/helpful-resources-for-new-ember-devs/ 200 OK
pre-render /blog/offline-first-prember-and-service-workers/ 200 OK
pre-render /blog/reloading-hasmany-relationships/ 200 OK
pre-render /blog/static-blogs-with-prember-and-markdown/ 200 OK
pre-render /blog/testing-ember-addons-in-an-app/ 200 OK
pre-render /blog/using-components-in-ember-mixin-unit-tests/ 200 OK
The following options have been renamed — please update your config: exports -> output.exports
The following options have been renamed — please update your config: exports -> output.exports
cleaning up...
Built project successfully. Stored in "dist/".
File sizes:
 - dist/assets/app-c4992ee616c616d1d00f12b429c2a153.js: 266.93 KB (267.03 KB gzipped)
 - dist/assets/auto-import-fastboot-d41d8cd98f00b204e9800998ecf8427e.js: 20 B (31 B gzipped)
 - dist/assets/vendor-312a49b51b2f64047010d77d00b7d4d1.js: 251.34 KB (251.44 KB gzipped)
 - dist/assets/vendor-bccffd23e896a6a8f4cb593a43b169b5.css: 4.93 KB (4.88 KB gzipped)
 - dist/assets/website-4f00cc2d75de5ff99627f1daa13825df.js: 15.67 KB (15.7 KB gzipped)
 - dist/assets/website-70eaa3e26c637630bedf5b0ff83fed5f.css: 5.48 KB (5.5 KB gzipped)
 - dist/assets/website-fastboot-5c044a60bd59af8d9d504e6d85730fff.js: 764 B (787 B gzipped)
 - dist/ember-fetch/fastboot-fetch-d0a987aa68a35560ff74884f82d87c8d.js: 462 B (485 B gzipped)
 - dist/sw.js: 2.7 KB (2.73 KB gzipped)
✨  Done in 70.05s.
>>> elapsed time 1m11s

@chrism Can you test this branch when you are free?

[RobbieTheWagner]

@xg-wang nice! Glad it's working 😄 . I can test things out and poke around the app a bit this weekend.

[chrism]

Hi @xg-wang I've just used this branch instead of @rwwagner90's and it works with my project too.

👍 🎉 😄

I'll still try to finish the test repos I'm working on this weekend to show the most simple use cases as I think ideally maybe one day they could perhaps even be incorporated into some testing.

Thanks to both you and @rwwagner90 for getting this working.

[Turbo87]

@xg-wang why did you add this again?

[xg-wang]

Shouldn't be there, I must did a bad rebase.