Get IPFS to work

Author: Victor Bjelkholm

README.md

@@ -1,47 +1,14 @@
-react-hot-boilerplate
+ipfs-webpack demo
 =====================
 
-The minimal dev environment to enable live-editing React components.
+Quick demo on how to use node-ipfs-api together with webpack.
 
-### Usage
+I had some issues getting it to work so this is just a sample demo.
 
-```
-npm install
-npm start
-open http://localhost:3000
-```
+[commit]
 
-Now edit `src/App.js`.  
-Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
+### To run
 
-### Linting
+Start the deamon with `API_ORIGIN="*" ipfs daemon`
 
-This boilerplate project includes React-friendly ESLint configuration.
-
-```
-npm run lint
-```
-
-### Using `0.0.0.0` as Host
-
-You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
-
-### Missing Features
-
-This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
-
-### Dependencies
-
-* React
-* Webpack
-* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
-* [babel-loader](https://github.com/babel/babel-loader)
-* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
-
-### Resources
-
-* [Demo video](http://vimeo.com/100010922)
-* [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
-* [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
-* [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
-* Ping dan_abramov on Twitter or #reactjs IRC
+Run `npm install` and then `npm run` and the application should be running on `http://localhost:3000`

package.json

@@ -37,6 +37,8 @@
     "webpack-dev-server": "^1.8.2"
   },
   "dependencies": {
+    "ipfs-api": "^2.4.1",
+    "json-loader": "^0.5.3",
     "react": "^0.13.0"
   }
 }

src/App.js

@@ -1,9 +1,39 @@
 import React, { Component } from 'react';
 
+import ipfsAPI from 'ipfs-api'
+
+var ipfs = ipfsAPI('localhost', '5001')
+
 export default class App extends Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			id: null,
+			version: null,
+			protocol_version: null
+		}
+	}
+	componentDidMount() {
+		ipfs.id((err, res) => {
+			if(err) {
+				console.error(err)
+				return
+			}
+			this.setState({
+				id: res.ID,
+				version: res.AgentVersion,
+				protocol_version: res.ProtocolVersion
+			})
+		})
+	}
   render() {
     return (
-      <h1>Hello, world.</h1>
+			<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>
     );
   }
 }

webpack.config.js

@@ -21,6 +21,9 @@ module.exports = {
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       include: path.join(__dirname, 'src')
-    }]
-  }
+    },{ test: /\.json$/, loader: "json-loader" }]
+  },
+	node: {
+		fs: 'empty'
+	}
 };