Need help storing data in local browser by IPFS

Help Coding
1

Dear community,

What I understood is that I can store data locally in IPFS by a browser when a client doesn’t have IPFS setup by himself, but the browser is having IPFS such as Brave browser, or a client who installed IPFS companion browser plugin in browsers such as Chrome. Am I correct?
How does this work? Which documentation should I follow? Can it be done with vanilla client side javascript and IPFS API?

Kind regards,
Jurjen

2

Hello,

You can access IPFS via Http when using Js in the browser. See → js-ipfs/packages/ipfs-http-client at master · ipfs/js-ipfs · GitHub

Note that the user MUST configure the node for CORS.

Or you can run an IPFS node directly. See → GitHub - ipfs/js-ipfs: IPFS implementation in JavaScript

1 Like
3

Hi @SionoiS

Thanks for your reply. In the link you provided I see I have to install some node packages, but we don’t run a server. The code is fully on the client side, eventually provided by an IPFS webpage or any other static source such as github/gitlab pages.

So what code should we provide in that HTML/vanilla javascript to store something new into an IPFS hash that the user entered into a HTML form assuming that the user is running an IPFS node connected to that browser or a browser with IPFS build in such as Brave browser or Chrome with IPFS extension.

Best,
Jurjen

4

You don’t have to use node see here → js-ipfs/packages/ipfs-http-client at master · ipfs/js-ipfs · GitHub

5

Hi @SionoiS thanks again. It did make it more clear. We are getting somewhere with the first app we tried to develop.

6

Basically, ipfs was implemented in go and JS.

You can run javascript in browser so you can run ipfs in browser.

Alternatively you can use ipfs installed in local computer or on the servers, using gateway, by http calls.

I assume you might need to set up cors when you are talking to the gateway from a browser. but on a server you usually proxied http requests from apache or nginx to the ipfs so you don’t have to worry about setting cors in ipfs in that case (just do it in your web server :apache/nginx --they ignore whatever cors settings in ipfs)

Alternatively you can compile go to webassembly.

7

Hi @Xyncgas
We are trying to reach it client side by vanilla javascript. So no server side involvement to make it fully distributed directly from the user his browser.
It’s hard to find something simple as an ‘hello world’ write and read.

I tried some code from ipfs-core - npm with getting started:

<script src="https://cdn.jsdelivr.net/npm/ipfs-core/dist/index.min.js"></script>
<script>
async function main () {
//import * as IPFS from 'ipfs-core'
const node = await window.IpfsCore.create()
const { cid } = await ipfs.add('Hello world')
console.info(cid)
// Ready to use!
// See https://github.com/ipfs/js-ipfs#core-api
}
main()
</script>

It gives an error in the console “Uncaught (in promise) ReferenceError: ipfs is not defined at main”.
When I try to define it with import * as IPFS from ‘ipfs-core’ , I got the error in the console “Uncaught SyntaxError: Cannot use import statement outside a module” .
How should I import a module, it isn’t running nodejs right, its client side vanilla JS.

Thanks :slight_smile: