Examples porting from js-ipfs to helia-examples

[BigLep]

Done Criteria

The relevant examples below from https://github.com/ipfs-examples/js-ipfs-examples have been replicated in https://github.com/ipfs-examples/helia-examples

Why Important

1. Tangible examples that are verified as part of CI are a great hands-on way for a user to get started.
2. The act of porting/writing examples is a great way for new contributors to help and to learn, flex, and give feedback on the Helia API

User/Customer

1. New users of Helia
2. Maintainers

List of examples (in priority order)

### Tooling integration
- [x] browser-webpack
- [x] browser-vite: https://github.com/ipfs-examples/helia-examples/pull/16
- [x] browser-nextjs: https://github.com/ipfs-examples/helia-examples/pull/22
- [x] browser-vue: https://github.com/ipfs-examples/helia-examples/pull/24
- [ ] browser-angular - @polus-arcticus
- [ ] browser-create-react-app: https://github.com/ipfs-examples/helia-examples/pull/35
- [x] browser-esbuild: https://github.com/ipfs-examples/helia-examples/pull/34
- [ ] browser-lit

### Features
- [x] ipfs-101
- [x] cjs
- [x] browser-script-tag: https://github.com/ipfs-examples/helia-examples/pull/13
- [ ] browser-add-readable-stream: https://github.com/ipfs-examples/helia-examples/pull/64
- [ ] browser-ipns-publish
- [ ] browser-mfs
- [ ] browser-readablestream - @ElPaisano
- [ ] browser-service-worker
- [ ] browser-video-streaming
- [ ] circuit-relaying
- [ ] custom-ipfs-repo
- [ ] custom-ipld-formats
- [ ] custom-libp2p
- [x] run-in-electron: https://github.com/ipfs-examples/helia-examples/pull/33
- [ ] traverse-ipld-graphs

Backlog

### Features (Bigger endeavors since are standalone sites)
- [ ] https://github.com/ipld/explore.ipld.io/issues/117
- [ ] https://github.com/ipfs-shipyard/ipfs-share-files/issues/136

### Features (Skip for now, external dependency on webrtc browser to browser transport)
- [ ] browser-exchange-files

### Features (Skip for now, external dependency on rpc client)
- [ ] http-client-browser-pubsub
- [ ] http-client-bundle-webpack
- [ ] http-client-name-api
- [ ] http-client-upload-file
- [ ] ipfs-client-add-files

### Back burner (Skip for now, may need more thought or not be necessary)
- [ ] types-use-ipfs-from-ts
- [ ] types-use-ipfs-from-typed-js
- [ ] browser-sharing-node-across-tabs
- [ ] running-multiple-nodes

Notes

• This isn't racking new examples, just the porting over of https://github.com/ipfs-examples/js-ipfs-examples
• ✅ This is assuming the example repo/infra gets setup: https://github.com/ipfs/helia/issues/29
• A js-ipfs migration guide is here: https://github.com/ipfs/helia/wiki/Migrating-from-js-IPFS

[BigLep]

@achingbrain : I assume some of these are more important than others? If so, can you please prioritize?

[SgtPooki]

Trying to find the simplest examples to start with since I'm having trouble getting helia to connect to other nodes.

╰─ ✔ ❯  cd ~/code/work/protocol.ai/ipfs-examples/js-ipfs-examples
╰─ ✔ ❯ find examples/*/src -maxdepth 0 -type d | xargs -n1 -I% sh -c 'echo "%: $(sloc % -f json | jq '\''.summary.total'\'')"' | sort -k2 -n
examples/browser-script-tag/src: 27
examples/browser-video-streaming/src: 27
examples/types-use-ipfs-from-ts/src: 39
examples/types-use-ipfs-from-typed-js/src: 50
examples/browser-lit/src: 76
examples/browser-sharing-node-across-tabs/src: 109
examples/http-client-bundle-webpack/src: 143
examples/http-client-name-api/src: 149
examples/ipfs-client-add-files/src: 155
examples/browser-vite/src: 159
examples/http-client-browser-pubsub/src: 159
examples/browser-webpack/src: 216
examples/browser-esbuild/src: 247
examples/browser-vue/src: 250
examples/browser-readablestream/src: 259
examples/browser-create-react-app/src: 264
examples/browser-add-readable-stream/src: 280
examples/browser-ipns-publish/src: 331
examples/circuit-relaying/src: 493
examples/http-client-upload-file/src: 572
examples/browser-mfs/src: 593
examples/browser-exchange-files/src: 696
examples/browser-service-worker/src: 746
examples/browser-angular/src: 1410

[SgtPooki]

things that will be harder to implement now:

• http client examples (no http client yet)
• browser to browser (wait for webrtc to land in libp2p)

Things that will be useful earlier than later:

• importing and using helia with the various tools (vite/webpack/vue/etc) so people can "fork and go"
• typescript versions of examples if implementation of typescript is more than a simple plug and play
• A "helia-webpack + ts" example (from https://github.com/SgtPooki/helia-service-worker-gateway)

[rafaelcastrocouto]

Hi guys! As I understood by reading this that the js-ipfs rep is kinda being replaced by helia. Since there's still no http client yet, I was trying to use the old rep browser-script-tag example but it's either not working or I'm doing something wrong.

I was able and make it work but not by exactly following the examples.

The Codepen demos also ain't working so I thought I should get in contact to try to help fixing those, but after reading all of this I'm not sure if I still should work on it or if it's better to wait for helia to mature.

Anyway, I'm here to help! (specially with in browser stuff)

[SgtPooki]

@rafaelcastrocouto Are you talking about the script-tag example at https://github.com/ipfs-examples/helia-examples/pull/13? or the old js-ipfs script-tag example?

if there are issues with running the helia-script-tag example currently in PR (directly from source, not from codepen or other) please comment on the PR and let me know! I know I need to update the codepen and codeblitz version for that PR to the latest code and planned to do that once the PR is ready for merge.

Also, if you want to pick one of the above examples to contribute, please do so! just let me know which one so i can mark it as WIP =)

I think getting the examples from this issue created and merged into this repo are more of a win for the community than focusing on those old codepen examples, but I love that you called those out. It could be useful to work on those as well and update them to use helia once we're done with the examples above.

[SgtPooki]

i was going to grab helia-create-react-app but will defer that for now because we already have some examples using react, and https://github.com/facebook/create-react-app/issues/13072 makes the current state and future of CRA confusing

[polus-arcticus]

Hey @SgtPooki I've been thinking of giving the browser-vue one a shot and doing a mutable file system API on it if i figure out the helia way of doing it

[BigLep]

I'm gonig to move this issue to ipfs-examples/helia-examples now that that repo exists. That way it's clear for anyone looking at examples that we have a tracking issue for this work.

[BigLep]

Arg, I forgot one can't transfer issues across github organizations. I have a signpost back to this issue from ipfs-examples/helia-examples: https://github.com/ipfs-examples/helia-examples/issues/42

[polus-arcticus]

Hey @SgtPooki mind if I do the angular one? give the ipns interface a test there

[BigLep]

For anyone helping here, there is now a js-ipfs migration guide here: https://github.com/ipfs/helia/wiki/Migrating-from-js-IPFS

[ElPaisano]

Hi all, new to contributing here, I'd like to give browser-add-readable-stream a try. Also open to recommendations on good first conversions to try.

[SgtPooki]

We probably want to support a react-native example as well.. there are a number of issues i've run into during js-ipfs deprecation that would really benefit from a Helia example!

29 results of react-native mentioned in js-ipfs, https://github.com/search?q=repo%3Aipfs%2Fjs-ipfs+%22react-native%22&type=issues, and react-native example for helia is not mentioned.