Merge pull request #421 from VictorBjelkholm/add-webpack-example

feat: Add webpack example
ipfs-inactive · Nov 17, 2016 · bc74839 · bc74839
2 parents 24e4eb0 + dc30de9
commit bc74839
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -79,7 +79,11 @@ 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.
+See the example in the [examples folder](/examples/bundle-browserify) to get a boilerplate.
+
+### In a web browser through webpack
+
+See the example in the [examples folder](/examples/bundle-webpack) to get an idea on how to use js-ipfs-api with webpack
 
 ### In a web browser from CDN
 

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,21 @@
+{
+  "name": "bundle-browserify",
+  "version": "1.0.0",
+  "description": "Bundle js-ipfs-api with Browserify",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "Victor Bjelkholm <victor@ipfs.io>",
+  "license": "MIT",
+  "keywords": [],
+  "devDependencies": {
+    "babel-core": "^5.4.7",
+    "babel-loader": "^5.1.2",
+    "ipfs-api": "^11.1.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,63 @@
+'use strict'
+const React = require('react')
+const ipfsAPI = require('ipfs-api')
+
+const ipfs = ipfsAPI('localhost', '5001')
+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 () {
+    ipfs.id((err, res) => {
+      if (err) throw err
+      this.setState({
+        id: res.id,
+        version: res.agentVersion,
+        protocol_version: res.protocolVersion
+      })
+    })
+    ipfs.add([new Buffer(stringToUse)], (err, res) => {
+      if (err) throw err
+      const hash = res[0].hash
+      this.setState({added_file_hash: hash})
+      ipfs.cat(hash, (err, res) => {
+        if (err) throw err
+        let data = ''
+        res.on('data', (d) => {
+          data = data + d
+        })
+        res.on('end', () => {
+          this.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'
+  }
+}
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
   "devDependencies": {
     "aegir": "^9.1.2",
     "chai": "^3.5.0",
+    "eslint-plugin-react": "^6.7.1",
     "gulp": "^3.9.1",
     "hapi": "^15.2.0",
     "interface-ipfs-core": "^0.18.3",