Use ipfs-http-client in reactjs to create local node in browser

Help js-ipfs
1

I am really desperate, because I want to instantiate a local node in my webapp created with reactjs. I tried installing ipfs-core using this documentation: ipfs-core - npm which didnt work for me. React was not able to find the package.
Then I installed the “whole” ipfs package, which also didnt work (same error as above).
I am able to use ipfs-http-client, but it doesnt let me create a local node:

var ipfsHttpClient = require('ipfs-http-client');

var ipfs = ipfsHttpClient.create();

ipfs.add("Test");

throws

POST http://localhost:3001/api/v0/add?stream-channels=true&progress=false 404 (Not Found)

I know i can us a public gateway as parameter inside the create() function and everything works fine. But I dont want to rely on public gateways in my app. I thought I found an answer in this post: How to upload file to IPFS with only front-end but they also used ipfs-core.

My question: does anyone know how to create a local node in browser to store ipfs files using ipfs-http-client. Maybe someone also knows why using “ipfs-core” and “ipfs” package didnt work. Thanks for your help :slight_smile:

EDIT:

I want users to be able to have the node in the browser but not IPFS installed.

2

Hi!

Have you tried this example? js-ipfs-examples/ipfs.js at master · ipfs-examples/js-ipfs-examples · GitHub

I’m using it like this in a context

Screen Shot 2022-05-08 at 14.20.05
Screen Shot 2022-05-08 at 14.20.051330Ă—1132 216 KB

3

Which version of ipfs-core are you using? Because when I try to isntall ipfs-core via npm install ipfs-core@latest no module with the name ipfs-core is downloaded (only some other IPFS folders). Therefore I can’t import it via “import” statement.

4

Any options works:

{
  "ipfs-core": "^0.14.0",
  "ipfs-http-client": "^56.0.0",
}
5

Thanks for your help, I got it to work!
Do you have experience with LockExistsError?
I have set IPFS as a globale object and put it inside useEffect so it is called only once:

useEffect(() => {

    async function initIpfs(){

      try{

        process.on("SIGTERM", stop)

        process.on("SIGINT", stop)

        process.on("SIGHUP", stop)

        process.on("uncaughtException", stop)

        if(!global.IPFS){

          global.IPFS = await IPFS.create({ started: false, repo: ".jsipfs"});

          console.log(global);

          global.IPFS.stop();

        }

        return () => {

          stop();

        }

      }catch(error){

        console.log(error);

      }

    }

    initIpfs();

   

  }, [])

But I keep getting following error:

LockExistsError: Lock already being held for file: .jsipfs/repo.lock

Do you know where the folder “.jsipfs” is, so I can atleast delete the lock file or do you even know how to resolve the error?

6

Great!

Have you read the following thread? Js-ipfs broke error Unhandled Rejection (LockExistsError): Lock already being held for file: ipfs/repo.lock

Maybe find a solution

7

Yes, I have :smiley:

I have read every single page but couldnt resolve my problem.
Do you know where the folder is located in the file-system?

8

I think the problem may be that you are trying to initialize a node already made

repo: ".jsipfs"

Try this way

global.IPFS = await IPFS.create({ repo: 'ok' + Math.random()});
1 Like