|
| 1 | +--- |
| 2 | +title: IPFS in web applications |
| 3 | +description: How to develop applications that use IPFS on the Web including addressing by CID, merkleizing, retrieval, providing, and CAR files with Helia. |
| 4 | +--- |
| 5 | + |
| 6 | +# IPFS in web applications and resource-constrained environments |
| 7 | + |
| 8 | +In this guide you will learn how to use IPFS using JavaScript/TypeScript in web applications, including addressing data with CIDs, retrieval by CID, working with CAR files, and the nuances of providing. |
| 9 | + |
| 10 | +For this, you will use [Helia](https://github.com/ipfs/helia), the most actively maintained implementation of IPFS in TypeScript for use on the web. |
| 11 | + |
| 12 | +> **Note:** this guide is focused solely on using IPFS for data within a web application. It does _not_ cover using IPFS for static website distribution with IPFS Gateways. |
| 13 | +
|
| 14 | +## Challenges with IPFS on the web |
| 15 | + |
| 16 | +IPFS allows you to fetch data by CID from multiple providers without being reliant on a single authoritative server. |
| 17 | + |
| 18 | +However, making all of this work on the web is tricky due to networking constraints. Browsers impose many restrictions on web apps, for example, opening TCP/UDP connections is not possible. Instead, web apps are constrained to HTTP, WebSockets, WebRTC, and most recently WebTransport. |
| 19 | + |
| 20 | +There are good reasons for this like security and resource management, but ultimately, it means that using IPFS on the web is different to native binaries. |
| 21 | + |
| 22 | +## Key IPFS operations: Addressing, Retrieving, and Providing |
| 23 | + |
| 24 | +As a developer, IPFS exposes three main operations for interacting with the network: |
| 25 | + |
| 26 | +- **Addressing data with CIDs** (also known as **merkleizing**): taking arbitrary data and encoding so its addressable by CID. For example, given a directory of files, merkleizing it so it can be addressed and retrieved by CID. |
| 27 | +- **Retrieving data by CID**: given a CID, IPFS finds providers (peers who share the block), connects to them, fetches the blocks, and verifies that the retrieved data is what the CID represents. |
| 28 | +- **Providing data by CID**: making data addressed by a CID retrievable by other peers, either by running a node or with a pinning service. |
| 29 | + |
| 30 | +## Addressing data by CID |
| 31 | + |
| 32 | +As mentioned above, the first step in the [lifecycle of data in IPFS](../concepts/lifecycle.md) is to address it by CID. |
| 33 | + |
| 34 | +When addressing data by [CIDs](../concepts/glossary.md#cid) you will need to choose: |
| 35 | + |
| 36 | +- [hash function](../concepts/glossary.md#hash). For use in browsers, the default and recommended hash function is `sha2-256` which is also the default for [Helia](https://github.com/ipfs/helia). |
| 37 | +- [multicodec](../concepts/glossary.md#multicodec), which is the format of the data you are addressing and is used to help decode data. CIDs support a wide range of multicodecs, but for most intents and purposes, you will likely either want use: |
| 38 | + - [UnixFS](../concepts/file-systems.md#unix-file-system-unixfs) for files and directories. |
| 39 | + - [dag-cbor](../concepts/glossary.md#dag-cbor) for json-like structured data with binary encoding. DAG-CBOR is an extension of CBOR that adds a "link" type for CIDs, allowing for the creation of interlinked CBOR objects (which can be used to form larger linked data structures). |
| 40 | + |
| 41 | +### CID Determinism |
| 42 | + |
| 43 | +One important thing to note is that **the same data can result in different CIDs** depending on a number of factors, including the hash function, and the multicodec you use. **This is especially true for files**, where the same file, hash function and multicodec can still result in different CIDs depending on the different options that UnixFS supports. |
| 44 | + |
| 45 | +See the [forum discussion on CID profiles](https://discuss.ipfs.tech/t/should-we-profile-cids/18507) and the [DASL](https://dasl.ing/) initiative for more for more information on the nature of this problem and how the community is addressing it. |
| 46 | + |
| 47 | +For a visual demonstration of this, try the [DAG Builder](https://dag.ipfs.tech/), which visualises how files are addressed by CID with UnixFS and demonstrates how the same file can result in different CIDs, depending on the different options that UnixFS supports. |
| 48 | + |
| 49 | +### Example: Addressing an object by CID with dag-cbor |
| 50 | + |
| 51 | +For example, to address an object by CID with the `dag-cbor` multicodec and `sha2-256` hash function, you can use the following code using [Helia](https://github.com/ipfs/helia): |
| 52 | + |
| 53 | +<iframe height="300" style="width: 100%;" scrolling="no" title="Addressing an object by CID with Helia and dag-cbor" src="https://codepen.io/2color/embed/xbKpJKx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| 54 | + See the Pen <a href="https://codepen.io/2color/pen/xbKpJKx"> |
| 55 | + Addressing an object by CID with Helia and dag-cbor</a> by Daniel Norman (<a href="https://codepen.io/2color">@2color</a>) |
| 56 | +</iframe> |
| 57 | + |
| 58 | +### Example: Addressing a file by CID with UnixFS |
| 59 | + |
| 60 | +<iframe height="500" style="width: 100%;" scrolling="no" title="Addressing an image by CID with Helia and UnixFS" src="https://codepen.io/2color/embed/zxONqPj?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| 61 | + See the Pen <a href="https://codepen.io/2color/pen/zxONqPj"> |
| 62 | + Addressing an image by CID with Helia and UnixFS</a> by Daniel Norman (<a href="https://codepen.io/2color">@2color</a>) |
| 63 | +</iframe> |
| 64 | + |
| 65 | +## Retrieval |
| 66 | + |
| 67 | +From a high level, there are several ways to retrieve data with IPFS in web applications: |
| 68 | + |
| 69 | +- Using the [Verified Fetch](https://www.npmjs.com/package/@helia/verified-fetch) library, which was modelled after the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and returns [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects, with the main difference being that it allows you to fetch data by CID, abstracting away the details of content routing, transports and retrieval. For more examples and background see the [release blog post](https://blog.ipfs.tech/verified-fetch/). |
| 70 | +- Using the [Helia](https://github.com/ipfs/helia/) library, which is the foundation for the `@helia/verified-fetch` library, and provides a more comprehensive and modular API for interacting with the IPFS network, beyond just retrieval. |
| 71 | +- Using public recursive gateways, e.g. `ipfs.io` with HTTP. This is not recommended for most use cases, because it forgoes the verifiability and trustlessness enabled by content addressing. Granted, it might be the easiest way to retrieve data in a web application, but is also the most fraught with security and centralization concerns. |
| 72 | + |
| 73 | +### Example: Image retrieval with Verified Fetch |
| 74 | + |
| 75 | +<iframe height="500" style="width: 100%;" scrolling="no" title="Fetch an image on IPFS Mainnet @helia/verified-fetch" src="https://codepen.io/2color/embed/QWXKZGx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| 76 | + See the Pen <a href="https://codepen.io/2color/pen/QWXKZGx"> |
| 77 | + Fetch an image on IPFS Mainnet @helia/verified-fetch</a> by Daniel Norman |
| 78 | +</iframe> |
| 79 | + |
| 80 | +## Providing data |
| 81 | + |
| 82 | +For data to be retrievable by other peers on [IPFS Mainnet](../concepts/glossary.md#ipfs-mainnet) it will need to be uploaded to a pinning service or an IPFS node. |
| 83 | + |
| 84 | +When possible, it's best to rely on client-side merkleization to address data by CID and then upload it to a pinning service or a node. [CAR files](#car-files) are a great way to do this, though they are not supported by all pinning services. |
| 85 | + |
| 86 | +### You probably don't want to provide data from a browser |
| 87 | + |
| 88 | +Browsers make for lousy servers. It's difficult to make a Web page a server, i.e. allow network incoming connections from other computers. WebRTC is the only exception, however, it has many caveats, and doesn't work in all networks. |
| 89 | + |
| 90 | +For this reason, you should never count on providing data from a browser to work. |
| 91 | + |
| 92 | +Instead, you should provide data from a long-running server that runs reliably and has a public IP. That can be a Kubo node that you run, or a [pinning service](../concepts/persistence.md#pinning-services). |
| 93 | + |
| 94 | +### CAR files |
| 95 | + |
| 96 | +The Content Archive format is a way of packaging up content addressed data into archive files that can be easily stored and transferred over the network. You can think of them like TAR files that are designed for storing collections of content addressed data. |
| 97 | + |
| 98 | +**So why would you want to use CAR files?** |
| 99 | + |
| 100 | +One of the main reasons is related to [CID determinism](#cid-determinism). As mentioned above, the same data can result in different CIDs, which can make it difficult to verify data without its content addressed representation. By packaging up the data into a CAR file, you can upload the CAR to multiple pinning services and nodes knowing they are providing the same CIDs |
| 101 | + |
| 102 | +CAR files are a great way to store content-addressed data in a way that is easy to transport and store, and Helia (and other implementations) allow you to both export and import any data you've addressed by CID into a CAR file. |
| 103 | + |
| 104 | +<iframe height="300" style="width: 100%;" scrolling="no" title="CAR export with Helia and dag-cbor" src="https://codepen.io/2color/embed/EaYoegX?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| 105 | + See the Pen <a href="https://codepen.io/2color/pen/EaYoegX"> |
| 106 | + CAR export with Helia and dag-cbor</a> by Daniel Norman (<a href="https://codepen.io/2color">@2color</a>) |
| 107 | +</iframe> |
| 108 | + |
| 109 | +At the time of writing, not all pinning services support CAR files, but it is a feature that is being added to more and more services. Therefore, it is a good idea to check the documentation for the pinning service you are using to see if it supports CAR files. |
| 110 | + |
| 111 | +## Conclusion |
| 112 | + |
| 113 | +This guide has covered the essential aspects of using IPFS in web applications: |
| 114 | + |
| 115 | +- The main operations: addressing/merkleizing data with CIDs, retrieving data, and providing data. |
| 116 | +- The challenges and limitations of using IPFS in browser environments. |
| 117 | +- Practical examples using modern tools like [Helia](https://github.com/ipfs/helia) and [Verified Fetch](https://www.npmjs.com/package/@helia/verified-fetch). |
| 118 | +- Best practices for handling data persistence through pinning services and CAR files. |
| 119 | + |
| 120 | +When building web applications with IPFS, remember these key takeaways: |
| 121 | + |
| 122 | +1. Use client-side merkleization (addressing) when adding new data to IPFS, but rely on pinning services or IPFS nodes for providing data. |
| 123 | +1. Be mindful of CID determinism when working with files and structured data. |
| 124 | +1. Consider using CAR files where possible for storage and transport of content-addressed data. |
| 125 | +1. Use Verified Fetch for simple retrieval or Helia for more complex IPFS interactions. |
| 126 | + |
| 127 | +By following these guidelines, you can reap the benefits of IPFS while working within the constraints of the web. |
0 commit comments