Skip to content
This repository was archived by the owner on Mar 10, 2020. It is now read-only.

Commit bc74839

Browse files
daviddiasdaviddias
authored
Merge pull request #421 from VictorBjelkholm/add-webpack-example
feat: Add webpack example
2 parents 24e4eb0 + dc30de9 commit bc74839

File tree

13 files changed

+205
-1
lines changed

13 files changed

+205
-1
lines changed

‎README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,11 @@ var ipfs = ipfsAPI({host: 'localhost', port: '5001', procotol: 'http'})
7979

8080
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.
8181

82-
See the example at the [examples folder](/examples/bundle-browserify) to get a boilerplate.
82+
See the example in the [examples folder](/examples/bundle-browserify) to get a boilerplate.
83+
84+
### In a web browser through webpack
85+
86+
See the example in the [examples folder](/examples/bundle-webpack) to get an idea on how to use js-ipfs-api with webpack
8387

8488
### In a web browser from CDN
8589

‎examples/bundle-webpack/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 0
3+
}

‎examples/bundle-webpack/.eslintrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "standard",
3+
"rules": {
4+
"react/jsx-uses-react": 2,
5+
"react/jsx-uses-vars": 2,
6+
"react/react-in-jsx-scope": 2
7+
},
8+
"plugins": [
9+
"react"
10+
]
11+
}

‎examples/bundle-webpack/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
npm-debug.log
3+
.DS_Store
4+
dist

‎examples/bundle-webpack/1.png

109 KB
Loading

‎examples/bundle-webpack/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Bundle js-ipfs-api with Webpack!
2+
3+
> 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!
4+
5+
## Setup
6+
7+
As for any js-ipfs-api example, **you need a running IPFS daemon**, you learn how to do that here:
8+
9+
- [Spawn a go-ipfs daemon](https://ipfs.io/docs/getting-started/)
10+
- [Spawn a js-ipfs daemon](https://github.com/ipfs/js-ipfs#usage)
11+
12+
**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.
13+
14+
A quick (and dirty way to get it done) is:
15+
16+
```bash
17+
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"*\"]"
18+
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"
19+
```
20+
21+
## Run this example
22+
23+
Once the daemon is on, run the following commands within this folder:
24+
25+
```bash
26+
> npm install
27+
> npm start
28+
```
29+
30+
Now open your browser at `http://localhost:3000`
31+
32+
You should see the following:
33+
34+
![](https://ipfs.io/ipfs/QmZndNLRct3co7h1yVB72S4qfwAwbq7DQghCpWpVQ45jSi/1.png)
35+

‎examples/bundle-webpack/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<html>
2+
<head>
3+
<title>Sample App</title>
4+
</head>
5+
<body>
6+
<div id='root'>
7+
</div>
8+
<script src="/static/bundle.js"></script>
9+
</body>
10+
</html>

‎examples/bundle-webpack/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "bundle-browserify",
3+
"version": "1.0.0",
4+
"description": "Bundle js-ipfs-api with Browserify",
5+
"scripts": {
6+
"start": "node server.js"
7+
},
8+
"author": "Victor Bjelkholm <victor@ipfs.io>",
9+
"license": "MIT",
10+
"keywords": [],
11+
"devDependencies": {
12+
"babel-core": "^5.4.7",
13+
"babel-loader": "^5.1.2",
14+
"ipfs-api": "^11.1.0",
15+
"json-loader": "^0.5.3",
16+
"react": "^0.13.0",
17+
"react-hot-loader": "^1.3.0",
18+
"webpack": "^1.9.6",
19+
"webpack-dev-server": "^1.8.2"
20+
}
21+
}

‎examples/bundle-webpack/server.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict'
2+
var webpack = require('webpack')
3+
var WebpackDevServer = require('webpack-dev-server')
4+
var config = require('./webpack.config')
5+
6+
new WebpackDevServer(webpack(config), {
7+
publicPath: config.output.publicPath,
8+
hot: true,
9+
historyApiFallback: true
10+
}).listen(3000, 'localhost', function (err, result) {
11+
if (err) {
12+
console.log(err)
13+
}
14+
15+
console.log('Listening at localhost:3000')
16+
})

‎examples/bundle-webpack/src/App.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use strict'
2+
const React = require('react')
3+
const ipfsAPI = require('ipfs-api')
4+
5+
const ipfs = ipfsAPI('localhost', '5001')
6+
const stringToUse = 'hello world from webpacked IPFS'
7+
8+
class App extends React.Component {
9+
constructor (props) {
10+
super(props)
11+
this.state = {
12+
id: null,
13+
version: null,
14+
protocol_version: null,
15+
added_file_hash: null,
16+
added_file_contents: null
17+
}
18+
}
19+
componentDidMount () {
20+
ipfs.id((err, res) => {
21+
if (err) throw err
22+
this.setState({
23+
id: res.id,
24+
version: res.agentVersion,
25+
protocol_version: res.protocolVersion
26+
})
27+
})
28+
ipfs.add([new Buffer(stringToUse)], (err, res) => {
29+
if (err) throw err
30+
const hash = res[0].hash
31+
this.setState({added_file_hash: hash})
32+
ipfs.cat(hash, (err, res) => {
33+
if (err) throw err
34+
let data = ''
35+
res.on('data', (d) => {
36+
data = data + d
37+
})
38+
res.on('end', () => {
39+
this.setState({added_file_contents: data})
40+
})
41+
})
42+
})
43+
}
44+
render () {
45+
return <div style={{textAlign: 'center'}}>
46+
<h1>Everything is working!</h1>
47+
<p>Your ID is <strong>{this.state.id}</strong></p>
48+
<p>Your IPFS version is <strong>{this.state.version}</strong></p>
49+
<p>Your IPFS protocol version is <strong>{this.state.protocol_version}</strong></p>
50+
<div>
51+
<div>
52+
Added a file! <br />
53+
{this.state.added_file_hash}
54+
</div>
55+
<div>
56+
Contents of this file: <br />
57+
{this.state.added_file_contents}
58+
</div>
59+
</div>
60+
</div>
61+
}
62+
}
63+
module.exports = App

‎examples/bundle-webpack/src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict'
2+
const React = require('react')
3+
const App = require('./App')
4+
5+
React.render(<App />, document.getElementById('root'))

‎examples/bundle-webpack/webpack.config.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
devtool: 'eval',
6+
entry: [
7+
'webpack-dev-server/client?http://localhost:3000',
8+
'webpack/hot/only-dev-server',
9+
'./src/index'
10+
],
11+
output: {
12+
path: path.join(__dirname, 'dist'),
13+
filename: 'bundle.js',
14+
publicPath: '/static/'
15+
},
16+
plugins: [
17+
new webpack.HotModuleReplacementPlugin()
18+
],
19+
module: {
20+
loaders: [{
21+
test: /\.js$/,
22+
loaders: ['react-hot', 'babel'],
23+
include: path.join(__dirname, 'src')
24+
}, { test: /\.json$/, loader: 'json-loader' }]
25+
},
26+
node: {
27+
fs: 'empty',
28+
net: 'empty',
29+
tls: 'empty'
30+
}
31+
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"devDependencies": {
5959
"aegir": "^9.1.2",
6060
"chai": "^3.5.0",
61+
"eslint-plugin-react": "^6.7.1",
6162
"gulp": "^3.9.1",
6263
"hapi": "^15.2.0",
6364
"interface-ipfs-core": "^0.18.3",

0 commit comments

Comments
 (0)