diff --git a/README.md b/README.md index ad71311cb..6263151af 100644 --- 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 new file mode 100644 index 000000000..b0b9a96ef --- /dev/null +++ b/examples/bundle-webpack/.babelrc @@ -0,0 +1,3 @@ +{ + "stage": 0 +} diff --git a/examples/bundle-webpack/.eslintrc b/examples/bundle-webpack/.eslintrc new file mode 100644 index 000000000..676feeeb1 --- /dev/null +++ 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 new file mode 100644 index 000000000..44b50488c --- /dev/null +++ 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 new file mode 100644 index 000000000..37a110365 Binary files /dev/null and b/examples/bundle-webpack/1.png differ diff --git a/examples/bundle-webpack/README.md b/examples/bundle-webpack/README.md new file mode 100644 index 000000000..6349cab74 --- /dev/null +++ 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 new file mode 100644 index 000000000..c4d9c4902 --- /dev/null +++ b/examples/bundle-webpack/index.html @@ -0,0 +1,10 @@ + + + Sample App + + +
+
+ + + diff --git a/examples/bundle-webpack/package.json b/examples/bundle-webpack/package.json new file mode 100644 index 000000000..e86f78bae --- /dev/null +++ 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 ", + "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 new file mode 100644 index 000000000..dd1d4358b --- /dev/null +++ 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 new file mode 100644 index 000000000..7316d9996 --- /dev/null +++ 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
+

Everything is working!

+

Your ID is {this.state.id}

+

Your IPFS version is {this.state.version}

+

Your IPFS protocol version is {this.state.protocol_version}

+
+
+ Added a file!
+ {this.state.added_file_hash} +
+
+ Contents of this file:
+ {this.state.added_file_contents} +
+
+
+ } +} +module.exports = App diff --git a/examples/bundle-webpack/src/index.js b/examples/bundle-webpack/src/index.js new file mode 100644 index 000000000..ec74d11ce --- /dev/null +++ b/examples/bundle-webpack/src/index.js @@ -0,0 +1,5 @@ +'use strict' +const React = require('react') +const App = require('./App') + +React.render(, document.getElementById('root')) diff --git a/examples/bundle-webpack/webpack.config.js b/examples/bundle-webpack/webpack.config.js new file mode 100644 index 000000000..c1cdd90d5 --- /dev/null +++ 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 index d553c924f..319fa0d9f 100644 --- 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",