Embedding and using OrbitDB exclusively from browser HTML / JavaScript

Ecosystem
1

Greetings. I’m thinking of creating my first IPFS application with the help of OrbitDB. I’m relatively familiar with IPFS but new to Orbit, about which I have a few questions. This is the first one which is essential for me knowing whether Orbit can be used in the way that I need.

First a bit of background on what I want to do: My goal is to create a website similar to social media (Facebook, Twitter, etc). I want the site to be fully based on HTML and JavaScript, using IPFS and OrbitDB for storage… no server side scripting, anyone who downloads the bundle and opens the HTML file in a browser can use the system. For the site to be as user friendly as any normal page on the internet, I cannot require the end user to install either IPFS or Orbit on their own and run them in the background… and that is where my question comes in.

The guide mainly explains how to use Orbit after installing it as a npm module and I believe running it via NodeJS. What I wish to know is whether it can be embedded into a website, so anyone visiting that site from a standard web browser (at least Chromium or Firefox) gets the desired functionality via JS embedded on the page. In this ideal scenario, the HTML file simply points to an orbitdb.js file on say Github in a tag, then my own script later uses its functions to work with the databases. Note that for this to be possible https://gateway.ipfs.io/ipfs/ might need to be the URL in use by OrbitDB locally.

Is this form of usage possible, can Orbit be used from website JS without the user accessing the site having to install anything? If so are there any examples for this specific scenario, including configuring the IPFS gateway Orbit should work with in this case? Thank you.

2

hi,

For Orbit DB i think you can use that easily on your web site : https://github.com/orbitdb/orbit-db#browser-example

for application Orbit i’m not sure.

Regards

3

Thanks. I don’t think that’s quite what I need though: What I was hoping is that I could simply embed orbit.js using a script tag on my index.html page, and from there my own script could use its functions to read or write databases behind the scenes (no interface needed). That example still tells you to use npm and install OrbitDB locally, which is contrary to my idea of it running from a script file hosted elsewhere.

4

Sorry about that, I misunderstood the example. This is in fact exactly what I was looking for! I downloaded the example html / css / js files and it does attempt to startup an OrbitDB instance. Only issue is that when running just those files locally Firefox throws the error:

example.js:48:9 ReferenceError: Ipfs is not defined

I assume I need to reference js-ipfs separately which is pretty obvious. It will be interesting to see if the whole thing works once I do that. Thanks for the help :slight_smile:

5

It looks like example directory in orbitdb repo is bit out of date and paths to .js bundles are invalid.

Check those intead:

1 Like
6

Their latest example works for me, but I’ll keep this in mind too: There may be cases when I might want to embed js-ipfs alone without using Orbit.