feat: support ipfs #46

hugomrdias · 2019-12-17T23:15:48Z

This PR adds support for hosting in IPFS.

Steps:
npx vuepress build docs
all-relative ./docs/.vuepress/dist
ipfs add ./docs/.vuepress/dist
Enjoy.

Theres still a couple of assests in the public folder that all-relative doesn't handle but that should be easy to fix.

Working example https://ipfs.io/ipfs/Qmb3bTUHXuxcuU9VWB5yG99Usa826kw4ZagyZJ5DucSZo3/

hugomrdias · 2019-12-17T23:22:34Z

thanks @olizilla for all-relative

cwaring · 2019-12-17T23:33:09Z

docs/.vuepress/public-path.js

+
+  __webpack_public_path__ = ipfsPathPrefix + '/'
+  if (typeof window !== 'undefined') {
+    window.__VUEPRESS_ROUTER_BASE__ = ipfsPathPrefix + '/'


nice! this var is the secret ingredient, where did you find it?

vuepress bootstrap code.
but __webpack_public_path__ = ipfsPathPrefix + '/' this one is even more important without it the router would even load

https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/client/app.js#L63

I knew there was a __webpack_public_path__ lurking about but I missed this one! Great work detective 🕵️‍♂️

yeah @satazor put me in the right direction with that one i just did the last mile

the highest of fives to @satazor! It also makes me wonder if we could make a more generic IPFS plugin for webpack compiled apps using some of these framework config vars. we'd need to do detection for router logic but it doesn't seem impossible now... 🤔

Thanks! I also thought about that in the past @cwaring and it’s doable. The route logic detection could also be pluggable, meaning we could have addons/plugins for typical frameworks such as Gatsby and Vue press.

I guess it would take some investment time but it would pay off later.

nice, if we are delaying the adoption of origin isolation for a while then this might be a worthy endeavour to the community. I see this question crop up all the time.

cwaring · 2019-12-17T23:42:24Z

Yes, I'm so happy we didn't have to regex the application source in the end! Do you think we could wrap this up neatly into a plugin by using https://vuepress.vuejs.org/plugin/option-api.html#chainwebpack to handle the path injection script?

hugomrdias · 2019-12-17T23:45:58Z

Yes, I'm so happy we didn't have to regex the application source in the end! Do you think we could wrap this up neatly into a plugin by using vuepress.vuejs.org/plugin/option-api.html#chainwebpack to handle the path injection script?

yes we should be able to build a plugin to do all this in one go, just need to figure out the last missing assets either but improving all-relative or in the plugin itself.

olizilla · 2019-12-18T08:48:18Z

@hugomrdias I'm guessing it would be helpful if I actually published all-relative to npm!

olizilla · 2019-12-18T09:33:10Z

It a thing https://www.npmjs.com/package/all-relative

cwaring · 2019-12-18T11:33:44Z

thanks @olizilla, so excited to see this all come together!

cwaring · 2019-12-20T14:32:57Z

I've fixed the relative css path issues upstream in all-relative and enabled the circleci build config. So when @olizilla gets a few min to cut a new release we should be good to merge this and update the DNS for full IPFS support! 🎉

hugomrdias · 2019-12-20T14:35:00Z

I think some head loads were failing also like manifest etc

cwaring · 2019-12-20T14:37:40Z

Yes I've noticed that too but they are not critical for launch and I don't think all-relative should touch them by default. I'd only like to enable PWA functionality from the root domain so I can pick that up in a future update :)

samajammin · 2020-02-19T06:06:58Z

Hey folks! Thanks for providing this as a reference!

I'm trying to add IPFS support on ethereum.org (ethereum/ethereum-org-website#751). I've copied your approach - it's up & running locally! This seems to have solved the issue with relative links. The only issue I see now is broken images from the /public dir. @hugomrdias - you mentioned that is your PR description. Did you find a solution to that?

Thanks again.

hugomrdias · 2020-02-19T13:11:00Z

@samajammin ill take a look

cwaring · 2020-02-19T15:11:13Z

Hey @samajammin, great to see you drop in here and thanks for the email. I'll reply on this thread to keep the conversation open for others.

I fixed all the docs asset path issues with the latest release of all-relative but if you have any config files with absolute paths (such as a favicon xml or app manifests) then these will need to be updated manually. In our case we decided to leave those considering the primary app will be loaded from the root domain and these were not critical to the functionality of the app on IPFS.

vuepress-plugin-ipfs isn't ready just yet but I intend to port the functionality provided in this PR over to it after completing another project.

Let me know how you get on and if we need to make any additional updates for this patch to be more accessible.

samajammin · 2020-02-19T16:38:55Z

Awesome, thanks for the guidance!

So I now have the site pinned here: https://gateway.pinata.cloud/ipfs/QmZxrnb4P3RHcHpF7mTRzQ5x2vF1b5vZtWR23Ef5MsAcV9/

Looking at my build output in /docs/.vuepress/dist, the images seem to be relative links as intended but I'm seeing some inconsistent results on the IPFS gateway.

e.g. sometimes I load this page & the images appear, with DOM inspection showing relative links:

Sometimes I click to the page & the images are broken. The source shows they are not relative links:

Do you see this as well? Any idea what may be causing the inconsistency here? It appears to be loading images correctly on page reloads but when navigating to this page from other routes, the images are broken.

samajammin · 2020-02-19T17:00:19Z

One more item I'm noticing - the mp4 file on our homepage is not referenced correctly:

Looking at the build output HTML:

<video id="hero-video" alt="Ethereum.org - Light" width="380" height="380" src="/ethereum-hero-light.mp4" playsinline autoplay loop muted class="mx-auto inline-block" data-v-5d8b6e4d=""></video>

I believe the src should be src="./ethereum-hero-light.mp4" vs. src="/ethereum-hero-light.mp4". Updating this manually in the browser gets it working. I'm not sure why this particular video element / mp4 file is having issues, it looks like all-relative searches for all nodes w/ a src property, which would still apply to this?

cwaring · 2020-02-24T20:18:43Z

Interesting, this isn't something we've seen on the docs project yet. It seems that VuePress is outputting absolute paths when the page/components re-render after routing. I haven't had chance to dig any deeper into your codebase but I wonder if it's something to do with how those individual assets are being included within the components?

A couple of things I'd try next:

Is it possible to make those asset inclusions baseurl aware?
What happens if you switch inline images to display using a CSS background instead?

Let me know if either of these routes work and I'll aim to dig in as soon as I can.

cwaring · 2020-02-27T17:31:43Z

@samajammin curiosity got the better of me and I think I've found the culprit!

If you are injecting asset paths into the markup dynamically (via strings) you will have to ensure they are relative. The easiest way to do this is to hook into window.__VUEPRESS_ROUTER_BASE__ and if it exists prepend it to the root path.

A meta function like this should work (⚠️ not tested):

const withBasePath = path => window && window.__VUEPRESS_ROUTER_BASE___ ? window.__VUEPRESS_ROUTER_BASE__ + path : '/' + path || '/' + path;

withBasePath('ethereum-hero-dark.mp4')
// => "/ipfs/QmZxrnb4P3RHcHpF7mTRzQ5x2vF1b5vZtWR23Ef5MsAcV9/ethereum-hero-dark.mp4"

Let me know how it goes, I'll likely add a utility like this to the final plugin 🤙🏻

cwaring · 2020-02-27T17:49:35Z

Or perhaps you could modify public-path.js script to inject a base url tag into the header once if it detects a window object, that should make all path urls work correctly even if they are injected at runtime. This method would also need to be tested to see how it interacts with the router links.

samajammin · 2020-03-05T17:42:29Z

Thanks for the ideas @cwaring! I appreciate you taking the time to look into this.

I tried your suggestion to create a withBasePath helper but unfortunately that did not solve the issue. I suspect this is because the site build happens in node, where window.__VUEPRESS_ROUTER_BASE___ is not available. As a result, those images still do not have the relative path needed.

When I have a chance (hopefully this week) I will keep experimenting but if you have any more ideas or if there's something you think I'm missing, please let me know.

samajammin · 2020-03-05T17:43:20Z

Here's the PR where I tried that update in case you'd like to experiment on your own:
ethereum/ethereum-org-website#751

hugomrdias requested a review from cwaring December 17, 2019 23:18

hugomrdias mentioned this pull request Dec 17, 2019

Host beta on IPFS ipfs-inactive/docs#271

Closed

cwaring reviewed Dec 17, 2019

View reviewed changes

hugomrdias and others added 4 commits December 19, 2019 15:23

feat: support ipfs

bd17d72

fix: remove unused dep

6e48474

add all-relative dep and ipfs build scripts

148b52a

add circleci config for ipfs-dns-deploy

9b322dc

cwaring force-pushed the feat/support-ipfs branch from 51afa50 to 9b322dc Compare December 19, 2019 15:24

cwaring added 3 commits December 19, 2019 15:25

enable circleci build

e68fd22

add npm scripts and module cache

9991e85

yml fml

060faf9

cwaring mentioned this pull request Dec 20, 2019

fix: generate relative css paths that are not wonky olizilla/all-relative#2

Merged

cwaring mentioned this pull request Dec 20, 2019

migrate VuePress IPFS support to a plugin ipfs-inactive/docs#412

Closed

bump all-relative

2fc6b5d

jessicaschilling assigned cwaring Dec 24, 2019

jessicaschilling added design-front-end dif/expert Extensive knowledge (implications, ramifications) required labels Dec 24, 2019

cwaring mentioned this pull request Jan 3, 2020

Update configure-node.md #52

Merged

cwaring merged commit dd1f388 into master Jan 3, 2020

cwaring deleted the feat/support-ipfs branch January 3, 2020 14:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support ipfs #46

feat: support ipfs #46

hugomrdias commented Dec 17, 2019 •

edited

Loading

hugomrdias commented Dec 17, 2019

cwaring Dec 17, 2019

hugomrdias Dec 17, 2019

hugomrdias Dec 17, 2019

cwaring Dec 17, 2019

hugomrdias Dec 17, 2019

cwaring Dec 18, 2019

satazor Dec 18, 2019 •

edited

Loading

cwaring Dec 18, 2019

cwaring commented Dec 17, 2019

hugomrdias commented Dec 17, 2019

olizilla commented Dec 18, 2019

olizilla commented Dec 18, 2019

cwaring commented Dec 18, 2019

cwaring commented Dec 20, 2019

hugomrdias commented Dec 20, 2019 •

edited

Loading

cwaring commented Dec 20, 2019

samajammin commented Feb 19, 2020

hugomrdias commented Feb 19, 2020 •

edited

Loading

cwaring commented Feb 19, 2020

samajammin commented Feb 19, 2020 •

edited

Loading

samajammin commented Feb 19, 2020

cwaring commented Feb 24, 2020

cwaring commented Feb 27, 2020 •

edited

Loading

cwaring commented Feb 27, 2020

samajammin commented Mar 5, 2020

samajammin commented Mar 5, 2020

feat: support ipfs #46

feat: support ipfs #46

Conversation

hugomrdias commented Dec 17, 2019 • edited Loading

hugomrdias commented Dec 17, 2019

cwaring Dec 17, 2019

Choose a reason for hiding this comment

hugomrdias Dec 17, 2019

Choose a reason for hiding this comment

hugomrdias Dec 17, 2019

Choose a reason for hiding this comment

cwaring Dec 17, 2019

Choose a reason for hiding this comment

hugomrdias Dec 17, 2019

Choose a reason for hiding this comment

cwaring Dec 18, 2019

Choose a reason for hiding this comment

satazor Dec 18, 2019 • edited Loading

Choose a reason for hiding this comment

cwaring Dec 18, 2019

Choose a reason for hiding this comment

cwaring commented Dec 17, 2019

hugomrdias commented Dec 17, 2019

olizilla commented Dec 18, 2019

olizilla commented Dec 18, 2019

cwaring commented Dec 18, 2019

cwaring commented Dec 20, 2019

hugomrdias commented Dec 20, 2019 • edited Loading

cwaring commented Dec 20, 2019

samajammin commented Feb 19, 2020

hugomrdias commented Feb 19, 2020 • edited Loading

cwaring commented Feb 19, 2020

samajammin commented Feb 19, 2020 • edited Loading

samajammin commented Feb 19, 2020

cwaring commented Feb 24, 2020

cwaring commented Feb 27, 2020 • edited Loading

cwaring commented Feb 27, 2020

samajammin commented Mar 5, 2020

samajammin commented Mar 5, 2020

hugomrdias commented Dec 17, 2019 •

edited

Loading

satazor Dec 18, 2019 •

edited

Loading

hugomrdias commented Dec 20, 2019 •

edited

Loading

hugomrdias commented Feb 19, 2020 •

edited

Loading

samajammin commented Feb 19, 2020 •

edited

Loading

cwaring commented Feb 27, 2020 •

edited

Loading