Create an section covering the Basics of IPFS using JavaScript.

[johnnymatthews]

This is a continuation of the Basics of IPFS project, where we show users how to use IPFS in very basic ways (install, add, share/get, and "remove"). In this new subsection, we'll show the reader how to spin up an IPFS node in the browser using JavaScript and then, in subsequent tabs, add a file, share that file with another user, how the retrieve a file, and finally, how to "remove" a file from the JS-IPFS node. This new section can follow the same formula as used in the current IPFS Basics section.

Tasks

Here's a pretty rough overview of what we should cover in this section.

• How to install JS-IPFS.
  • Where to get JS-IPFS from: https://github.com/ipfs/js-ipfs
  • Who it's maintained by.
  • Show the simple npm install ... procedure.
  • Also mention how a user can build from source if they want to.
    • But just point them to the instructions in the JS-IPFS repo.
• Spin up an IPFS node
  • Build a simple webpage (without the use of any frameworks like React/Angular/etc.).
  • Show the user the code needed to spin up a node.
  • Have the JS Console output something once the node is running.
  • Explain that all the other steps will use this code.
• Add a file.
  • Copy the code from the Spin up an IPFS node section. (not entirely based on this)
  • Add a dialog box where a user can put the file they want to upload.
  • Once the user clicks upload, the file is sent to the JS-IPFS node.
  • Output the CID on the webpage.
  • Mention that they can then share this CID with anyone, and they can use it on their IPFS node to get that file.
• Get a CID.
  • Copy the code from the Spin up an IPFS node section. (not entirely based on this)
  • Create an input box where a user can paste a CID.
  • Have the user enter a specific CID that we put somewhere and have pinned. A simple jpeg image would work well.
  • Once the user requests that CID, try to show it in the browser.
• Remove a file.
  • Start off by explaining that it's not possible to 100% verifiable remove a file/CID from the IPFS network.
    • There's no way to know if someone else had made a copy of the file since it's been on the network.
    • This works the same way as it does in regular HTTP networks, etc.
  • Copy the code from the Spin up an IPFS node section. (not entirely based on this)
  • List the CIDs that this node is currently hosting.
  • Add some kind of user input that the user can use to delete a file from this JS-IPFS node.
  • Once the file has been removed, relist the CIDs that this node is currently hosting.

[2color]

I love this initiative!

There are some upcoming changes to js-ipfs that are worth considering.

@BigLep Any insights or pointers on this given the upcoming changes to js-ipfs?

One thing that we discussed as being useful is a higher level introduction to IPFS with JS, given the multiple runtimes (Node.js, browsers), packages, APIs (Kubo RPC, Bitswap over Websocket), and transports (currently either HTTP with gateways or WebSockets if there's a certificate but this may expand in the future).

[BigLep]

I love this initiative too. I do think we need to line it up with changes that are coming. My thinking here is:

1. We need to get a snapshot blog post out of what's coming. Ideally that wouldn't need to be in a blog post and someone could just look to our public roadmap. We don't have that setup yet and there's more explaining/context to provide as well, which is why I'm thinking to do a one-off blog entry. I know this isn't public yet, but I've started drafting what I want to cover here: https://www.notion.so/pl-strflt/In-Progress-202207-State-of-IPFS-in-JS-7ac59debb47d4ea698fb4524ac07e0e6 . I'll ping you guys and others as soon as it's ready. I'm juggling a lot this week and would also welcome if someone else wants to take it on. By default though I'm seeing myself as the owner of this.
2. Docs that discuss the various access patterns there for using IPFS in JS. This is bigger than the current "js-ipfs" project. I'm hoping @2color that you can own this. For example, I think it should include the various JS access patterns we discussed in https://www.notion.so/pl-strflt/JS-IP-2022-Roadmap-Draft-e4d3595d5e024179983a8082bc7956cf#aba528d36b6a490c85e5df1f13f79214
3. Updated examples, updated "Basics of IPFS using JavaScript" as described in this issue, and "200 level content" for IPFS with JS.

[2color]

Docs that discuss the various access patterns there for using IPFS in JS. This is bigger than the current "js-ipfs" project. I'm hoping @2color that you can own this. For example, I think it should include the various JS access patterns we discussed in https://www.notion.so/pl-strflt/JS-IP-2022-Roadmap-Draft-e4d3595d5e024179983a8082bc7956cf#aba528d36b6a490c85e5df1f13f79214

Yes, that's in my work plan for this quarter.

[johnnymatthews]

Thanks for the input team! Where did we land on completing this issue? There's a cadet in the current PL-Launchpad cohort that would like to tackle this issue right now.

There are some upcoming changes to js-ipfs that are worth considering. - @2color

What's the ETA on these changes? If it's more than 1 month, I say we crack on with this issue and get it done. CC: @BigLep

[BigLep]

@lidel or @achingbrain or @2color : do you have any suggestions on "Basics of IPFS using JavaScript" docs that would be useful to write now in light of upcoming changes.

@johnnymatthews : these are changes I'm hoping to see before end of year, but more than 1 month from now. I'm most concerned about the "Add a file" section, as don't want to propagate the shenanigans with using preload nodes.

[johnnymatthews]

Ok cool, thanks for the heads up.

I'm most concerned about the "Add a file" section - @BigLep

Ok cool. We can take that Add a file section out of this issue and just explain why we're not covering it right now (preload nodes are a pain to deal with, there's changes coming into JS-IPFS land soon that'll remove the preload node dependency, etc). Does that work for you?