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

Commit

Permalink
Update instructions in README
Browse files Browse the repository at this point in the history
  • Loading branch information
@haadcode
haadcode committed Jan 30, 2017
1 parent 1b6fbf7 commit 7d120c6
Showing 1 changed file with 33 additions and 92 deletions.
125 changes: 33 additions & 92 deletions examples/file-feed/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Tutorial - Synchronize and distribute folders with files.
# Example - Exchange files between Desktop and Browser

**WIP**

## Run
## Run - TEMP INSTRUCTIONS

1. Run a go-ipfs daemon with a WS address and --enable-pubsub-experiment flag, with API at port 5001
2. Run `node src/ff-cli/bin.js add hello package.json`
Expand All @@ -14,17 +14,18 @@ Note that the run order is important, running the ff-cli other way round won't w

## Coming up

> Welcome! This tutorial will guide you through building a web application for file distribution, using React, OrbitDB (a distributed key-value store) and libp2p PubSub. You will learn how to distribute content and how to synchronize state in a distributed way.
> Welcome! This example will guide you through building a web application for file distribution, using React, OrbitDB (a serverless, distributed database) and libp2p PubSub. You will learn how to distribute content and how to synchronize state in a distributed way.
There are a couple of caveats:

- js-ipfs currently doesn't support DHT peer discovery, the peer from which you are fetching data should be within the reach (local or in public IP) of the browser node.
- We need to use a signalling server to establish the WebRTC connections, this won't be necessary as soon as libp2p-relay gets developed
- [full go-ipfs interop is not complete yet, blocked by an interop stream multiplexer](https://github.com/ipfs/js-ipfs/issues/721). You can, however, fetch content from go-ipfs through js-ipfs.
- This app was created with create-react-app which provides its own build script. The caveat is that it doesn't allow us to use custom webpack config files which we need to shim `zlib` with `browserify-zlib-next`. As a workaround, we copy a custom webpack config file to `node_modules/react-scripts/config/` in a postinstall step.

That being said, we will explain throughout this tutorial to circunvent the caveats and once they are fixed, we will update the tutorial as well.

# Application diagram
## Application diagram

```sh

Expand Down Expand Up @@ -66,53 +67,35 @@ That being said, we will explain throughout this tutorial to circunvent the cave
└───────────┘
```

This app, file feed, will use OrbitDB over IPFS/libp2p PubSub to synchronize the latest state of feed, then using IPFS primitives to fetch and distribute the files. IPFS is using libp2p, the networking stack of IPFS, that enables IPFS to work in the Browser and in Node.js by swapping its building blocks, supporting multiple transports while keeping the same API.
This app, file exchange, will use OrbitDB, IPFS and libp2p PubSub to synchronize the latest state of a file feed, then using IPFS primitives it fetched and distributes the files. IPFS is using libp2p, the networking stack of IPFS, that enables IPFS to work in the Browser and in Node.js by swapping its building blocks, supporting multiple transports while keeping the same API.

## Check out the final state
## Quick Start

If you just want to check out what is the final state of how this application will look like, go to the complete folder, install the dependencies and run it.
If you just want to check out the app, go to the complete folder, install the dependencies and run it.

```sh
> cd complete
> npm install
> npm start
# open your browser (Chrome or Firefox) in http://localhost:12345
cd complete
npm install
npm start
# open your browser (Chrome or Firefox) in http://localhost:3000
```

You should get something like this:

`TODO: Insert final screenshot here`

## Step-by-step instructions

`TODO`
## Step-by-step instructions

--------------------------------------
`needs refactor`
### Start a go-ipfs daemon

1. Install go-ipfs from master (TODO: link).
1. Install go-ipfs from [master](https://github.com/ipfs/go-ipfs#build-from-source).

2. Run `ipfs init`
2. Run `IPFS_PATH=$HOME/.file-exchange ipfs init`

3. Edit your IPFS config file, located at `~/.ipfs/config`
3. Run `IPFS_PATH=$HOME/.file-exchange ipfs config Addresses.Swarm "[\"/ip4/0.0.0.0/tcp/9999/ws\"]" --json`

4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
```
"Addresses": {
"API": "/ip4/127.0.0.1/tcp/5001",
"Gateway": "/ip4/0.0.0.0/tcp/8080",
"Swarm": [
"/ip4/0.0.0.0/tcp/4001",
"/ip4/0.0.0.0/tcp/9999/ws"
]
},
```

5. Start the go-ipfs daemon with:
```
ipfs daemon
```
5. Start the go-ipfs daemon: `IPFS_PATH=$HOME/.file-exchange ipfs daemon --enable-pubsub-experiment`

6. You should see the Websocket address in the output:
```
Expand All @@ -126,78 +109,36 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
Daemon is ready
```

If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
If you see an address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means **all good**!

### Start an InterPlanetary File Exchange daemon

1. Install the project's dependencies:
```
npm install
```

2. Start the browser app with:
```
npm start
```
In a new terminal window, run `IPFS_PATH=$HOME/.file-exchange ipfs id` and note the first address in the `Addresses` field. It should look something like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/QmZGH8GeASSkSZoNLPEBu1MqtzLTERNUEwh9yTHLEF5kcW`. **You'll need this address later**.

This will open the app in your browser at http://localhost:3000/.
### Run File Exchange App

3. In the browser app, open a file exchange feed url, eg. http://localhost:3000/hello-world.
**NOTE!**
Before running the following command, you'll need to go to the root directory of `js-ipfs/` and run `npm install` to install all the dependencies. After you've done that, continue with the steps here.

4. Start the Node.js ipfe-daemon with:
Install the project's dependencies:
```
node ipfe-daemon hello-world
```

The first argument after `ipfe-daemon` is the name of the file exchange feed.

5. In the browser app, open the Peers view by clicking on "Searching for peers..." or "1 peer". You will see which peers you're connected to.

6. Now go back to the terminal and find the Websocket multiaddress of your go-ipfs daemon by running:
```
ipfs id
```

This will output all the address your go-ipfs daemon is listening at. Find the one with `ws` in it, and the port you added to the go-ipfs configuration file. It looks something like this:
```
/ip4/127.0.0.1/tcp/9999/ws/ipfs/QmZGH8GeASSkSZoNLPEBu1MqtzLTERNUEwh9yTHLEF5kcW
npm install
```

7. Copy the address and paste it into the "Connect" input field in the browser app and press "Connect".

8. You should now see the two IPFS instances connected. You can verify it by observing the Peer view in the browser app and running the following command in the terminal:
Start the browser app with:
```
ipfs swarm peers
npm start
```

### Add files to InterPlanetary File Exchange
This will open the app in your browser at http://localhost:3000/. Open a file exchange feed by appending the feed name to the url, eg. http://localhost:3000/hello-world.

1. Add a file by running:
```
node ipfe-add hello-world ipfe-add.js
```
In the browser app, open the Peers view by clicking on "Searching for peers..." and enter the go-ipfs address you got fom `ipfs id` earlier into the input field and press connect. You should now see that address in the list of peers.

You should see the following output:
Go back to the terminal and run the file exchange CLI tool:
```
Starting...
Swarm listening on /libp2p-webrtc-star/ip4/127.0.0.1/tcp/9090/ws/ipfs/QmYRSN9BdRU5oYM1ryAWF518ogv8SkwZyux4aEWpxoaYZA
IPFS node is ready
New peers for 'hello-world':
QmRNhXuS78LtUVLdJUJKmeLfE7K64CGBmwCiXY1sgJ6NaV
------------------------------
File | Hash | Size | Mime Type
------------------------------
ipfe-add.js | Qmdp8yhkyNGeqEYpkpqAm7duYqsEiJUi3KXfUFuUcyR2GR | 2588 | application/javascript
node src/cli/bin add hello-world package.json
```

Note that the multihash at the end of the swarm address will be different.

6. Once you see the output above, it means the file was added successfully!

7. Now go back to the browser app and observe the file in the list of files.

8. Click the file to open it.
You should now see `package.json` in the browser app! Click it to view its contents.

9. You have successfully added a file in go-ipfs and downloaded it to the browser.
**That's it!**

You can also add files to the browser app by dragging and dropping them. Once you do so, you should see the updated file list in the terminal running `ipfe-daemon`.
Play around with the browser app, drag and drop files into it, run `node src/cli/bin` to see what else you can do with the CLI tool and have fun!

0 comments on commit 7d120c6

Please sign in to comment.