Need a way to manually config IPFS to run in 'browser mode'. #1259

linonetwo · 2018-03-11T10:54:39Z

Version: 0.28.1
Platform: Mac

Type: Enhancement

Severity: Medium

Description:

The code:

const repoPath = `ipfs-${Math.random()}`;
this.node = new IPFS({ repo: repoPath });

is ambiguous.

In browser environment it will create an in memory repo (I guess, since nothing created in the fs), but in electron renderer process it will create a repo folder in the fs:

And in electron renderer process I can't simply import IPFS from 'ipfs', since this will cause Can't resolve './build/Release/fs-ext'.
I can only const IPFS = require('electron').remote.require('ipfs');, and this will create a repo in the fs.
I think the reason is that IPFS is now in 'nodeJS mode', not the 'browser mode' I need.

I wonder if there is a way to manually config IPFS to run in 'browser mode'.

Steps to reproduce the error:

clone https://github.com/linonetwo/pants-control , run yarn and yarn start.

The text was updated successfully, but these errors were encountered:

daviddias · 2018-03-11T15:07:19Z

js-ipfs will use IndexedDB in the browser. You need to "bundle" your code before using the browser process or just use the dist version of js-ipfs. See also ipfs/notes#256

linonetwo · 2018-03-12T02:14:28Z

Actually, I tried, there is something wrong with renderer process:

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext" >
    <script src="https://unpkg.com/ipfs/dist/index.js"></script>

    <title>Pants-Control</title>
  </head>

This loads it:

But still:

UPDATE:
Solve this by adding it to ./public, load it locally:

UPDATE:
On no! The window.IPFS = require('ipfs'); above is requiring ipfs from node_modules!
So it still creating repo on fs:

And hence leveldb can't be loaded:

I think the problem may be the node integration in the renderer process, so ipfs-js regard renderer process as a nodejs environment.
I can't turn off node integration since I need communication between the main process and the renderer process.

ipfs/js-ipfs#1259 (comment)

linonetwo · 2018-03-12T04:55:18Z

You need to "bundle" your code before using the browser process

I'm using create-react-app, and load localhost:3000 into electron's renderer process. I think create-react-app has bundled my code.

If you clone https://github.com/linonetwo/pants-control and yarn && yarn web you can run this app in the browser, and it can successfully add a file to the IPFS (See console.log).
But if run yarn start it will load above web page to a renderer process, then it will complain about can't loading fs-ext or so.

linonetwo · 2018-03-12T05:01:20Z

Can you release a ipfs-web or ipfs-browser to the npm?
https://github.com/ipfs/js-ipfs#use-in-the-browser is difficult to use in the renderer process. If there is a ipfs-web or ipfs-browser, developing experience will be the same in the browser and the renderer process.

daviddias · 2018-03-12T08:51:49Z

@linonetwo note that using a script tag will not add IPFS, but Ipfs to the global namespace:

From the README:
"Inserting one of the following lines will make a Ipfs object available in the global namespace."
https://github.com/ipfs/js-ipfs#use-in-the-browser

See this example: https://github.com/ipfs/js-ipfs/blob/master/examples/browser-script-tag/index.html

To solve any other issues int he future, I advise you to webpack/rollup/browserify any code that goes into your renderer process, it is very common for npm packages to have "browser dependencies" that only get injected in the step of "bundling for the browser". This will bite you again if you don't.

linonetwo · 2018-03-12T09:34:23Z

Thank you! I was too careless to found this case sensitive variable. Now application runs both on the renderer process and browser.

And thanks for your advice. I actually bundled my code and it's an independent web page, but you remind me that in my npm script there is a cross-env BROWSER=none, and in react-app-rewired's config-overrides.js:

  // Make it run in electron renderer process
  // If we want electron start, we will set cross-env BROWSER=none
  if (process.env.BROWSER === 'none') {
    delete config.node;
    config.target = 'electron-renderer';
  }

So when I bundled my web page for the renderer process, browser field in js-ipfs' package.json will not be triggered.

Problem solved, closing this!

daviddias · 2018-03-12T09:35:14Z

Glad it all worked :D 🎉

linonetwo pushed a commit to linonetwo/pants-control that referenced this issue Mar 12, 2018

bugfix: use bundled IPFS browserify

7f54071

ipfs/js-ipfs#1259 (comment)

linonetwo closed this as completed Mar 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Need a way to manually config IPFS to run in 'browser mode'. #1259

Need a way to manually config IPFS to run in 'browser mode'. #1259

linonetwo commented Mar 11, 2018 •

edited

Loading

daviddias commented Mar 11, 2018

linonetwo commented Mar 12, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading

daviddias commented Mar 12, 2018

linonetwo commented Mar 12, 2018 •

edited

Loading

daviddias commented Mar 12, 2018

Need a way to manually config IPFS to run in 'browser mode'. #1259

Need a way to manually config IPFS to run in 'browser mode'. #1259

Comments

linonetwo commented Mar 11, 2018 • edited Loading

Type: Enhancement

Severity: Medium

Description:

Steps to reproduce the error:

daviddias commented Mar 11, 2018

linonetwo commented Mar 12, 2018 • edited Loading

linonetwo commented Mar 12, 2018 • edited Loading

linonetwo commented Mar 12, 2018 • edited Loading

daviddias commented Mar 12, 2018

linonetwo commented Mar 12, 2018 • edited Loading

daviddias commented Mar 12, 2018

linonetwo commented Mar 11, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading

linonetwo commented Mar 12, 2018 •

edited

Loading