Merge pull request #429 from ipfs/docs-browserify-example

docs: update example of browserify
ipfs-inactive · Nov 17, 2016 · 24e4eb0 · 24e4eb0
2 parents c20bda5 + 4b4d864
commit 24e4eb0
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
-node_modules
-*.log
+**/node_modules
+**/*.log
 test/setup/tmp-disposable-nodes-addrs.json
 dist
 coverage
diff --git a/README.md b/README.md
@@ -79,6 +79,8 @@ var ipfs = ipfsAPI({host: 'localhost', port: '5001', procotol: 'http'})
 
 Same as in Node.js, you just have to [browserify](http://browserify.org) the code before serving it. See the browserify repo for how to do that.
 
+See the example at the [examples folder](/examples/bundle-browserify) to get a boilerplate.
+
 ### In a web browser from CDN
 
 Instead of a local installation (and browserification) you may request a remote copy of IPFS API from [unpkg CDN](https://unpkg.com/).

diff --git a/examples/browser-add/README.md b/examples/browser-add/README.md
diff --git a/examples/browser-add/.gitignore → examples/bundle-browserify/.gitignore b/examples/browser-add/.gitignore → examples/bundle-browserify/.gitignore
diff --git a/examples/bundle-browserify/README.md b/examples/bundle-browserify/README.md
@@ -0,0 +1,35 @@
+# Bundle js-ipfs-api with Browserify!
+
+> In this example, you will find a boilerplate you can use to guide yourself into bundling js-ipfs-api with browserify, so that you can use it in your own web app!
+
+## Setup
+
+As for any js-ipfs-api example, **you need a running IPFS daemon**, you learn how to do that here:
+
+- [Spawn a go-ipfs daemon](https://ipfs.io/docs/getting-started/)
+- [Spawn a js-ipfs daemon](https://github.com/ipfs/js-ipfs#usage)
+
+**Note:** If you load your app from a different domain than the one the daemon is running (most probably), you will need to set up CORS, see https://github.com/ipfs/js-ipfs-api#cors to learn how to do that.
+
+A quick (and dirty way to get it done) is:
+
+```bash
+> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"*\"]"
+> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"
+```
+
+## Run this example
+
+Once the daemon is on, run the following commands within this folder:
+
+```bash
+> npm install
+> npm start
+```
+
+Now open your browser at `http://localhost:8888`
+
+You should see the following:
+
+![](https://ipfs.io/ipfs/QmNtpcWCEd6LjdPNfBFDaVZdD4jpgT8ZTAwoFJXKhYMJdo/1.png)
+![](https://ipfs.io/ipfs/QmNtpcWCEd6LjdPNfBFDaVZdD4jpgT8ZTAwoFJXKhYMJdo/2.png)
diff --git a/examples/bundle-browserify/img/1.png b/examples/bundle-browserify/img/1.png
diff --git a/examples/bundle-browserify/img/2.png b/examples/bundle-browserify/img/2.png
diff --git a/examples/browser-add/index.html → examples/bundle-browserify/index.html b/examples/browser-add/index.html → examples/bundle-browserify/index.html
@@ -13,10 +13,10 @@
     </style>
   </head>
   <body>
-    <h1>JS IPFS API - Add file from the browser</h1>
+    <h1>JS IPFS API - Add data to IPFS from the browser</h1>
     <textarea id="source">
     </textarea>
-    <button id="store">create in ipfs</button>
+    <button id="store">add to ipfs</button>
     <div>
       <div>found in ipfs:</div>
       <div class="content" id="hash">[ipfs hash]</div>

diff --git a/examples/browser-add/index.js → examples/bundle-browserify/index.js b/examples/browser-add/index.js → examples/bundle-browserify/index.js
@@ -1,6 +1,7 @@
 'use strict'
 
-var IPFS = require('../../src')
+var IPFS = require('ipfs-api')
+
 var ipfs = IPFS()
 
 function store () {

diff --git a/examples/browser-add/package.json → examples/bundle-browserify/package.json b/examples/browser-add/package.json → examples/bundle-browserify/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "ipfs-api-example-browser-add",
+  "name": "bundle-browserify",
   "version": "1.0.0",
-  "description": "",
+  "description": "Bundle js-ipfs-api with Browserify",
   "main": "index.js",
   "scripts": {
     "start": "browserify index.js > bundle.js && http-server -a 127.0.0.1 -p 8888"
@@ -10,7 +10,10 @@
   "author": "Friedel Ziegelmayer",
   "license": "MIT",
   "devDependencies": {
-    "browserify": "^13.0.1",
+    "browserify": "^13.1.1",
+    "ipfs-api": "^11.1.0",
     "http-server": "^0.9.0"
+  },
+  "dependencies": {
   }
 }
diff --git a/examples/files-api.js → examples/files-api/files-api.js b/examples/files-api.js → examples/files-api/files-api.js