docs: update readme

examples/exchange-files-in-browser/README.md

@@ -1,14 +1,14 @@
-# Tutorial - Transfer files between the browser and other IPFS nodes
+# Exchange files between the browser and other IPFS nodes
 
-> Welcome! This tutorial will help you exchange files between browser nodes and go-ipfs nodes.
+This tutorial will help you exchange files between browser nodes and go-ipfs or js-ipfs nodes!
 
-caveat: 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.
+**Note:** `js-ipfs` currently doesn't support DHT peer discovery, so the peer from which you are fetching data should be within the reach (local or in public IP) of the browser node.
 
-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.
+That being said, we will explain how to circumvent these caveats and once they are fixed, we'll update the tutorial as well.
 
 ## Application diagram
 
-The goal of this tutorial is to create a application with a IPFS node that dials to other instances of it using WebRTC, and at the same time dial and transfer files from a Desktop IPFS node using WebSockets as the transport.
+The goal of this tutorial is to create a simple application with an IPFS node that dials to other instances using WebRTC, and at the same time dial and transfer files from a browser IPFS node using WebSockets as the transport.
 
 ```
 ┌──────────────┐                ┌──────────────┐
@@ -23,59 +23,57 @@ The goal of this tutorial is to create a application with a IPFS node that dials
                 └──────────────┘
 ```
 
-## Check out the final state
+## Tutorial goal
 
-In the end, you should get an app running, something like this:
+The goal of this tutorial is for you to have something like this in the end:
 
-![](https://ipfs.io/ipfs/Qmbti2nBZWxQLhpggB7tC3HvcxTMivmMo3MVwQveAsHBAE)
+![](img/goal.png)
 
 ## Step-by-step instructions
 
-Here's what we are going to be doing, today:
+Here's what we are going to be doing:
 
-- 1. Set up, install a go-ipfs node in your machine
-- 2. Make your daemons listen on WebSockets
-- 3. Start the WebApp
-- 4. Dial to a node using WebSockets (your Desktop ones)
-- 5. Transfer files between all of your nodes, have fun!
+1. Install a `go-ipfs` or `js-ipfs` node in your machine
+2. Make your daemons listen on WebSockets
+3. Start the app
+4. Dial to a node using WebSockets (your desktop ones)
+5. Transfer files between all of your nodes!
 
-Let's go.
+Just follow the instructions below and it will be up and running in no time!
 
-### 1. Set up
+### 1. Install `go-ipfs` or `js-ipfs`
 
-You'll need to have an implementation of IPFS running on your machine. Currently, this means either go-ipfs or js-ipfs.
+If you already have `go-ipfs` or `js-ipfs` installed in your machine, you can skip this step. Otherwise, read on.
 
-Installing go-ipfs can be done by installing the binary [here](https://ipfs.io/ipns/dist.ipfs.io/#go-ipfs). Alternatively, you could follow the instructions in the README at [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs).
+This tutorial works with either `go-ipfs` or `js-ipfs`, so you can install one of your choosing.
 
-Installing js-ipfs requires you to have node and [npm](https://www.npmjs.com). Then, you simply run:
+`go-ipfs` can be installed via its binary [here](https://ipfs.io/ipns/dist.ipfs.io/#go-ipfs). Alternatively, you can follow the install instructions in [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs#install).
+
+`js-ipfs` requires you to have [node and npm](https://www.npmjs.com/get-npm) installed. Then, you simply run:
 
 ```sh
 > npm install --global ipfs
-...
-> jsipfs --help
-Commands:
-...
 ```
 
 This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`.
 
-At this point, you have either js-ipfs or go-ipfs running. Now, initialize it:
+At this point, you should have either `js-ipfs` or `go-ipfs` running. Now, initialize it:
 
 ```sh
 > ipfs init
 # or
 > jsipfs init
 ```
 
-This will set up your IPFS repo in your home directory.
+This will set up an IPFS repo in your home directory.
 
 ### 2. Make your daemons listen on WebSockets
 
-At this point, you need to edit your `config` file, the one you just set up with `{js}ipfs init`. It should be in either `~/.jsipfs/config` or `~/.ipfs/config`, depending on whether you're using JS or Go.
+Now you need to edit your `config` file, the one you just set up with `{js}ipfs init`. It should be in either `~/.jsipfs/config` or `~/.ipfs/config`, depending on whether you're using JS or Go.
 
-Note: js-ipfs sets up a websocket listener by default, if you are just using js-ipfs you can skip this test.
+**Note:** `js-ipfs` sets up a websocket listener by default, so if you're using the JS implementation you can skip this and just start the daemon.
 
-Since websockets support is currently not on by default, you'll need to add a WebSockets address manually. Look into your config file and find the `Addresses` section:
+Since websockets support is currently not on by default, you'll need to add a WebSockets address manually. Look into your config file to find the `Addresses` section:
 
 ```json
 "Addresses": {
@@ -87,7 +85,7 @@ Since websockets support is currently not on by default, you'll need to add a We
 }
 ```
 
-Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now, it should look like this: 
+Add the `/ip4/127.0.0.1/tcp/9999/ws` entry to your `Swarm` array. Now it should look like this:
 
 ```json
 "Addresses": {
@@ -100,14 +98,14 @@ Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now
 }
 ```
 
-Now it should listen on Websockets. We're ready to start the daemon.
+Save the file and it should be able to listen on Websockets. We're ready to start the daemon.
 
 ```sh
 > ipfs daemon
+# or
+> jsipfs daemon
 ```
 
-(Again, either `jsipfs` or `ipfs` works. I'll stop repeting this from here on out.)
-
 You should see the Websocket address in the output:
 
 ```sh
@@ -121,39 +119,74 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
 Daemon is ready
 ```
 
-It's there in line 5 - see the `/ws`? Good. that means it is listening.
+Check the `/ws` in line 5, that means it is listening. Cool.
+
+### 3. Start the app
 
-### 3. Start the WebApp project
+Make sure you're in `js-ipfs/examples/exchange-files-in-browser`.
 
-Now, you'll need to make sure you are in `js-ipfs/examples/exchange-files-in-browser`. You'll see a `package.json`: this manifest holds the information for which packages you'll need to install to run the webapp. Let's install them, and then start the project:
+We'll need to install and bundle the dependencies to run the app. Let's do it:
 
 ```sh
 > npm install
+...
+> npm run bundle
+...
 > npm start
 ```
 
-You should see this text:
+You should see something like this if all went well:
 
 ```sh
 Starting up http-server, serving public
 Available on:
   http://127.0.0.1:12345
-  http://192.168.1.24:12345
+  http://192.168.2.92:12345
 Hit CTRL-C to stop the server
 ```
 
-Go to http://127.0.0.1:12345 in your browser; you're now in the webapp, if all went well.
+Now go to http://127.0.0.1:12345 in a modern browser and you're on!
+
+### 4. Dial to a node using WebSockets (your desktop ones)
+
+Make sure you have a daemon running. If you don't, run:
+
+```sh
+> ipfs daemon
+# or
+> jsipfs daemon
+```
+
+Open another terminal window to find the websocket addresses that it is listening on:
+
+```sh
+> ipfs id
+# or
+> jsipfs id
+```
+
+It should look like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/<your_peer_id>`.
 
-### 4. Dial to a node using WebSockets (your Desktop ones)
+Copy and paste the *multiaddr* to connect to that peer:
 
-On your terminal, run `ipfs id` to find the WebSockets address that it is listening on. Should look like this: `"/ip4/127.0.0.1/tcp/4003/ws/ipfs/<your peer id>". Important, your node must be running in order to have listeners, to do so, run in another tab of your terminal: `ipfs daemon`.
+![](img/connect-1.png)
 
-![](https://ipfs.io/ipfs/Qme9RM3SSyb57PGA7n5bEhwhMwS8fDrMZ8zzKkrwncRcfm)
-![](https://ipfs.io/ipfs/QmdFX4wJkKpryisjGQGt88Yr8zaQM9zMPL3xzK2YGTUMNM)
+Check that you got connected:
+
+![](img/connect-2.png)
+
+### 5. Transfer files between all of your nodes!
+
+Now you can add files through the CLI with:
+
+```sh
+> ipfs add <file>
+# or
+> jsipfs add <file>
+```
 
-### 5. Transfer files between all of your nodes, have fun!
+Copy and paste the *multihash* and fetch the file in the browser!
 
-Now you can drag an drop files on the browser or add them through the CLI with `ipfs add <file>` and with the fetch file box, you can retrieve the file to the browser or other browser tabs!
+![](img/fetch.png)
 
-![](https://ipfs.io/ipfs/QmcVNbhmMFzz9x2mY33GPGetibFGXXD7dYd3kDa7eKEUyw)
-![](https://ipfs.io/ipfs/QmZcRvGQtM7mnSWKqFwptCYoBitBJaGBKLLjvzENfzXFMi)
+You can also open two browser tabs, drag and drop files in one of them, and fetch them in the other!

examples/exchange-files-in-browser/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "bundle": "browserify public/app.js > public/bundle.js",
-    "dev": "npm run bundle && npm run start",
-    "start": "http-server -c-1 -p 12345 public"
+    "start": "http-server -c-1 -p 12345 public",
+    "dev": "npm run bundle && npm run start"
   },
   "license": "MIT",
   "devDependencies": {

examples/exchange-files-in-browser/public/app.js

@@ -1,6 +1,7 @@
-/* global self */
 'use strict'
 
+const IPFS = require('ipfs')
+
 // Daemon
 const $daemonId = document.querySelector('.daemon-id')
 const $daemonAddresses = document.querySelector('.daemon-addresses')
@@ -40,8 +41,7 @@ function start () {
       }
     }
 
-    // node = new IPFS(options)
-    node = new self.Ipfs(options)
+    node = new IPFS(options)
 
     Buffer = node.types.Buffer
 
@@ -80,7 +80,7 @@ function appendFile (name, hash, size, data) {
   const link = document.createElement('a')
   link.setAttribute('href', url)
   link.setAttribute('download', name)
-  link.innerHTML = '<img width=20 class="table-action" src="download.svg" alt="Download" />'
+  link.innerHTML = '<img width=20 class="table-action" src="assets/download.svg" alt="Download" />'
   downloadCell.appendChild(link)
 
   row.appendChild(nameCell)

examples/exchange-files-in-browser/public/index.html

@@ -8,7 +8,7 @@
 
   <body ondragover="event.preventDefault()">
     <header>
-      <img width=200 src="ipfs-logo.svg" alt="IPFS" />
+      <img width=200 src="assets/ipfs-logo.svg" alt="IPFS" />
     </header>
 
     <main>
@@ -62,7 +62,7 @@ <h2>Files</h2>
           </div>
 
           <div id="drag-container">
-            <img width=100 src="upload.svg" alt="Upload" />
+            <img width=100 src="assets/upload.svg" alt="Upload" />
             <p><b>Drag &amp; drop</b> a file to upload it.</p>
           </div>
 
@@ -84,10 +84,7 @@ <h2>Files</h2>
       </div>
     </main>
 
-    <script src="//unpkg.com/ipfs/dist/index.js"></script>
-    <script src="app.js"></script>
-
     <!-- The app bundled with IPFS -->
-    <!-- <script src="bundle.js"></script> -->
+    <script src="bundle.js"></script>
   </body>
 </html>