Merge pull request #607 from ipfs/feat/examples

daviddias · web-flow · commit 8b1312783296 · 2016-11-18T16:59:06.000Z
Feat/examples
diff --git a/examples/bundle-browserify/.gitignore b/examples/bundle-browserify/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/examples/bundle-browserify/README.md b/examples/bundle-browserify/README.md
@@ -0,0 +1,17 @@
+# Bundle js-ipfs with Browserify!
+
+> In this example, you will find a boilerplate you can use to guide yourself into bundling js-ipfs with browserify, so that you can use it in your own web app!
+
+## Run this example
+
+```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/bundle-browserify/index.html b/examples/bundle-browserify/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>JS IPFS API - Example - Browser - Add</title>
+    <script src="bundle.js"></script>
+    <style>
+      .content {
+        border: 1px solid black;
+        padding: 10px;
+        margin: 5px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>JS IPFS API - Add data to IPFS from the browser</h1>
+    <textarea id="source">
+    </textarea>
+    <button id="store">add to ipfs</button>
+    <div>
+      <div>found in ipfs:</div>
+      <div class="content" id="hash">[ipfs hash]</div>
+      <div class="content" id="content">[ipfs content]</div>
+    </div>
+  </body>
+</html>
diff --git a/examples/bundle-browserify/index.js b/examples/bundle-browserify/index.js
@@ -0,0 +1,64 @@
+'use strict'
+
+var IPFS = require('ipfs')
+
+// Create the IPFS node instance
+// for simplicity, we create a new repo everytime the node
+// is created, because you can't init already existing repos
+const repoPath = '' + Math.random()
+const node = new IPFS(repoPath)
+const concat = require('concat-stream')
+
+node.init({ emptyRepo: true, bits: 2048 }, function (err) {
+  if (err) {
+    throw err
+  }
+  node.load(function (err) {
+    if (err) {
+      throw err
+    }
+
+    node.goOnline(function (err) {
+      if (err) {
+        throw err
+      }
+      console.log('IPFS node is ready')
+    })
+  })
+})
+
+function store () {
+  var toStore = document.getElementById('source').value
+
+  node.files.add(new Buffer(toStore), function (err, res) {
+    if (err || !res) {
+      return console.error('ipfs add error', err, res)
+    }
+
+    res.forEach(function (file) {
+      if (file && file.hash) {
+        console.log('successfully stored', file.hash)
+        display(file.hash)
+      }
+    })
+  })
+}
+
+function display (hash) {
+  // buffer: true results in the returned result being a buffer rather than a stream
+  node.files.cat(hash, function (err, res) {
+    if (err || !res) {
+      return console.error('ipfs cat error', err, res)
+    }
+
+    document.getElementById('hash').innerText = hash
+
+    res.pipe(concat(function (data) {
+      document.getElementById('content').innerText = data
+    }))
+  })
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  document.getElementById('store').onclick = store
+})
diff --git a/examples/bundle-browserify/package.json b/examples/bundle-browserify/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "bundle-browserify",
+  "version": "1.0.0",
+  "description": "Bundle js-ipfs with Browserify",
+  "main": "index.js",
+  "scripts": {
+    "start": "browserify index.js > bundle.js && http-server -a 127.0.0.1 -p 8888"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "browserify": "^13.1.1",
+    "concat-stream": "^1.5.2",
+    "http-server": "^0.9.0",
+    "ipfs": "^0.18.0"
+  },
+  "dependencies": {}
+}
diff --git a/examples/bundle-webpack/.babelrc b/examples/bundle-webpack/.babelrc
@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}
diff --git a/examples/bundle-webpack/.eslintrc b/examples/bundle-webpack/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "extends": "standard",
+  "rules": {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}
diff --git a/examples/bundle-webpack/.gitignore b/examples/bundle-webpack/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.DS_Store
+dist
diff --git a/examples/bundle-webpack/1.png b/examples/bundle-webpack/1.png
diff --git a/examples/bundle-webpack/README.md b/examples/bundle-webpack/README.md
@@ -0,0 +1,35 @@
+# Bundle js-ipfs-api with Webpack!
+
+> In this example, you will find a boilerplate you can use to guide yourself into bundling js-ipfs-api with webpack, 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:3000`
+
+You should see the following:
+
+![](https://ipfs.io/ipfs/QmZndNLRct3co7h1yVB72S4qfwAwbq7DQghCpWpVQ45jSi/1.png)
+
diff --git a/examples/bundle-webpack/index.html b/examples/bundle-webpack/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>Sample App</title>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/bundle-webpack/package.json b/examples/bundle-webpack/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "bundle-webpack",
+  "version": "1.0.0",
+  "description": "Bundle js-ipfs with WebPack",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "license": "MIT",
+  "keywords": [],
+  "devDependencies": {
+    "babel-core": "^5.4.7",
+    "babel-loader": "^5.1.2",
+    "ipfs": "^0.18.0",
+    "json-loader": "^0.5.3",
+    "react": "^0.13.0",
+    "react-hot-loader": "^1.3.0",
+    "webpack": "^1.9.6",
+    "webpack-dev-server": "^1.8.2"
+  }
+}
diff --git a/examples/bundle-webpack/server.js b/examples/bundle-webpack/server.js
@@ -0,0 +1,16 @@
+'use strict'
+var webpack = require('webpack')
+var WebpackDevServer = require('webpack-dev-server')
+var config = require('./webpack.config')
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    console.log(err)
+  }
+
+  console.log('Listening at localhost:3000')
+})
diff --git a/examples/bundle-webpack/src/App.js b/examples/bundle-webpack/src/App.js
@@ -0,0 +1,104 @@
+'use strict'
+const React = require('react')
+const IPFS = require('ipfs')
+
+const stringToUse = 'hello world from webpacked IPFS'
+
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      id: null,
+      version: null,
+      protocol_version: null,
+      added_file_hash: null,
+      added_file_contents: null
+    }
+  }
+  componentDidMount () {
+    const self = this
+    let node
+
+    create()
+
+    function create () {
+      // Create the IPFS node instance
+
+      // for simplicity, we create a new repo everytime the node
+      // is created, because you can't init already existing repos
+      const repoPath = '' + Math.random()
+      node = new IPFS(repoPath)
+
+      node.init({ emptyRepo: true, bits: 2048 }, function (err) {
+        if (err) {
+          throw err
+        }
+        node.load(function (err) {
+          if (err) {
+            throw err
+          }
+
+          node.goOnline(function (err) {
+            if (err) {
+              throw err
+            }
+            console.log('IPFS node is ready')
+            ops()
+          })
+        })
+      })
+    }
+
+    function ops () {
+      node.id((err, res) => {
+        if (err) {
+          throw err
+        }
+        self.setState({
+          id: res.id,
+          version: res.agentVersion,
+          protocol_version: res.protocolVersion
+        })
+      })
+
+      node.files.add([new Buffer(stringToUse)], (err, res) => {
+        if (err) {
+          throw err
+        }
+        const hash = res[0].hash
+        self.setState({added_file_hash: hash})
+        node.files.cat(hash, (err, res) => {
+          if (err) {
+            throw err
+          }
+          let data = ''
+          res.on('data', (d) => {
+            data = data + d
+          })
+          res.on('end', () => {
+            self.setState({added_file_contents: data})
+          })
+        })
+      })
+    }
+  }
+  render () {
+    return <div style={{textAlign: 'center'}}>
+      <h1>Everything is working!</h1>
+      <p>Your ID is <strong>{this.state.id}</strong></p>
+      <p>Your IPFS version is <strong>{this.state.version}</strong></p>
+      <p>Your IPFS protocol version is <strong>{this.state.protocol_version}</strong></p>
+      <div>
+        <div>
+          Added a file! <br />
+          {this.state.added_file_hash}
+        </div>
+        <div>
+          Contents of this file: <br />
+          {this.state.added_file_contents}
+        </div>
+      </div>
+    </div>
+  }
+}
+module.exports = App
diff --git a/examples/bundle-webpack/src/index.js b/examples/bundle-webpack/src/index.js
@@ -0,0 +1,5 @@
+'use strict'
+const React = require('react')
+const App = require('./App')
+
+React.render(<App />, document.getElementById('root'))
diff --git a/examples/bundle-webpack/webpack.config.js b/examples/bundle-webpack/webpack.config.js
@@ -0,0 +1,31 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  devtool: 'eval',
+  entry: [
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['react-hot', 'babel'],
+      include: path.join(__dirname, 'src')
+    }, { test: /\.json$/, loader: 'json-loader' }]
+  },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
+}
