Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

Add document for running JS IPFS in the browser #2392

Merged
merged 21 commits into from
Dec 6, 2019
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
50ab2c2
Add document for running JS IPFS in the browser
tapaswenipathak Aug 26, 2019
60756b7
dht information line fixes
tapaswenipathak Oct 15, 2019
f4abde3
remove whitespaces
tapaswenipathak Oct 15, 2019
7ae4d96
js-ipfs introductory line fixes
tapaswenipathak Oct 15, 2019
42b41fd
i don't remember now
tapaswenipathak Oct 15, 2019
579f01d
separate tcp and delegated routing?
tapaswenipathak Oct 15, 2019
ba21205
Update doc/using-js-ipfs-in-the-browser.md
tapaswenipathak Oct 15, 2019
7dc4524
Update doc/using-js-ipfs-in-the-browser.md
tapaswenipathak Oct 15, 2019
3bbed60
Update doc/using-js-ipfs-in-the-browser.md
tapaswenipathak Oct 16, 2019
4e9b016
line item fixes
tapaswenipathak Oct 16, 2019
8035860
Merge branch 'ticket-2231' of github.com:tapaswenipathak/js-ipfs into…
tapaswenipathak Oct 16, 2019
873d147
english grammer fixes
tapaswenipathak Oct 16, 2019
0251e14
Update doc/using-js-ipfs-in-the-browser.md
tapaswenipathak Oct 16, 2019
8216eaa
Update doc/using-js-ipfs-in-the-browser.md
tapaswenipathak Oct 16, 2019
141127a
add example
tapaswenipathak Oct 16, 2019
015ea67
revert per the initial statement
tapaswenipathak Oct 16, 2019
1929d46
technical behavioral line item fixes
tapaswenipathak Oct 16, 2019
62e38c9
fix few more statements
tapaswenipathak Oct 16, 2019
df1e5b0
Merge branch 'ticket-2231' of github.com:tapaswenipathak/js-ipfs into…
tapaswenipathak Oct 16, 2019
256d900
Update using-js-ipfs-in-the-browser.md
lidel Oct 18, 2019
b603f18
Update using-js-ipfs-in-the-browser.md
lidel Oct 18, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions doc/using-js-ipfs-in-the-browser.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# Using JS IPFS in the Browser

JS IPFS is the implementation of IPFS protocol in JavaScript. It can run on any
evergreen browser, inside a service or web worker, browser extensions, Electron and in Node.js.

**This document provides key information about running JS IPFS in the browser.
Save time and get familiar with common caveats and limitations of the browser context.**

## Limitations of the Browser Context

- Transport options are limited to [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) and [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API).

This means JS IPFS running in the browser is limited to Web APIs available on a web page.
There is no access to raw TCP sockets nor low level UDP, only WebSockets and WebRTC.

- Key [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) require or are restricted by [Secure Context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) policies.

This means JS IPFS needs to run within Secure Context (HTTPS or localhost).
JS IPFS running on HTTPS website requires Secure WebSockets (TLS) and won't work with unencrypted one.
[Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) not being available at all.

- [DHT](https://en.wikipedia.org/wiki/Distributed_hash_table) is not available in JS IPFS yet.

[We are working on it](https://github.com/ipfs/js-ipfs/pull/1994). For now, the discovery and connectivity to other peers is achieved with a mix of rendezvous and
relay servers, delegated peer/content routing and preload servers.


## Addressing Limitations

We provide a few additional components useful for running JS IPFS in the browser:

- [libp2p-websocket-star](https://github.com/libp2p/js-libp2p-websocket-star/) - incorporates both a transport and a discovery service that is facilitated by the custom rendezvous server available in the repo.
- Instructions on enabling `websocket-star` in js-ipfs config can be found [here](https://github.com/ipfs/js-ipfs#is-there-a-more-stable-alternative-to-webrtc-star-that-offers-a-similar-functionality).
- Make sure to [run your own rendezvous server](https://github.com/libp2p/js-libp2p-websocket-star/#usage-1).
- [libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) - incorporates both a transport and a discovery service that is facilitated by the custom rendezvous server available in the repo
- Instructions on enabling `webrtc-star` in js-ipfs config can be found [here](https://github.com/ipfs/js-ipfs#how-to-enable-webrtc-support-for-js-ipfs-in-the-browser).
- Make sure to [run your own rendezvous server](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signalling-server).
- [libp2p-webrtc-direct](https://github.com/libp2p/js-libp2p-webrtc-direct) - a WebRTC transport that doesn't require the set up a signalling server.
- Caveat: you can only establish Browser to Node.js and Node.js to Node.js connections.

**Note:** those are semi-centralized solutions. We are working towards replacing `*-star` with and ambient relays and [libp2p-rendezvous](https://github.com/libp2p/js-libp2p-rendezvous). Details and progress can be found [here](https://github.com/libp2p/js-libp2p/issues/385).

You can find detailed information about running js-ipfs [here](https://github.com/ipfs/js-ipfs#table-of-contents).

## Best Practices

- Configure nodes for using self-hosted `*-star` signaling and transport service. When in doubt, use WebSockets ones.
- Run your own instance of `*-star` signaling service.
The default ones are under high load and should be used only for tests and development.
- Make sure content added to js-ipfs running in the browser is persisted/cached somewhere on regular IPFS daemon
- Manually `pin` or preload CIDs of interest with `refs -r` beforehand.
- Preload content on the fly using [preload](https://github.com/ipfs/js-ipfs#optionspreload) feature and/or
configure [delegated routing](https://github.com/ipfs/js-ipfs#configuring-delegate-routers).
- Avoid public instances in production environment. Make sure preload and delegate nodes used in config are self-hosted and under your control (expose a subset of go-ipfs APIs via reverse proxy such as Nginx).

## Code Examples

Prebuilt bundles are available, using JS IPFS in the browser is as simple as:

```js
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const node = await Ipfs.create()
const results = await node.add('=^.^= meow meow')
const cid = results[0].hash
console.log('CID created via ipfs.add:', cid)
const data = await node.cat(cid)
console.log('Data read back via ipfs.cat:', data.toString())
})
</script>
```

More advanced examples and tutorials can be found in [`/examples`](https://github.com/ipfs/js-ipfs/tree/master/examples#js-ipfs-examples-and-tutorials)