Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

Commit 0102548

Browse files
daviddiasdaviddias
committed
docs: add bundle-webpack quick example
1 parent 80e4ad9 commit 0102548

File tree

11 files changed

+239
-0
lines changed

11 files changed

+239
-0
lines changed

‎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: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "bundle-webpack",
3+
"version": "1.0.0",
4+
"description": "Bundle js-ipfs with WebPack",
5+
"scripts": {
6+
"start": "node server.js"
7+
},
8+
"license": "MIT",
9+
"keywords": [],
10+
"devDependencies": {
11+
"babel-core": "^5.4.7",
12+
"babel-loader": "^5.1.2",
13+
"ipfs": "^0.18.0",
14+
"json-loader": "^0.5.3",
15+
"react": "^0.13.0",
16+
"react-hot-loader": "^1.3.0",
17+
"webpack": "^1.9.6",
18+
"webpack-dev-server": "^1.8.2"
19+
}
20+
}

‎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: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
'use strict'
2+
const React = require('react')
3+
const IPFS = require('ipfs')
4+
5+
const stringToUse = 'hello world from webpacked IPFS'
6+
7+
class App extends React.Component {
8+
constructor (props) {
9+
super(props)
10+
this.state = {
11+
id: null,
12+
version: null,
13+
protocol_version: null,
14+
added_file_hash: null,
15+
added_file_contents: null
16+
}
17+
}
18+
componentDidMount () {
19+
const self = this
20+
let node
21+
22+
create()
23+
24+
function create () {
25+
// Create the IPFS node instance
26+
27+
// for simplicity, we create a new repo everytime the node
28+
// is created, because you can't init already existing repos
29+
const repoPath = '' + Math.random()
30+
node = new IPFS(repoPath)
31+
32+
node.init({ emptyRepo: true, bits: 2048 }, function (err) {
33+
if (err) {
34+
throw err
35+
}
36+
node.load(function (err) {
37+
if (err) {
38+
throw err
39+
}
40+
41+
node.goOnline(function (err) {
42+
if (err) {
43+
throw err
44+
}
45+
console.log('IPFS node is ready')
46+
ops()
47+
})
48+
})
49+
})
50+
}
51+
52+
function ops () {
53+
node.id((err, res) => {
54+
if (err) {
55+
throw err
56+
}
57+
self.setState({
58+
id: res.id,
59+
version: res.agentVersion,
60+
protocol_version: res.protocolVersion
61+
})
62+
})
63+
64+
node.files.add([new Buffer(stringToUse)], (err, res) => {
65+
if (err) {
66+
throw err
67+
}
68+
const hash = res[0].hash
69+
self.setState({added_file_hash: hash})
70+
node.files.cat(hash, (err, res) => {
71+
if (err) {
72+
throw err
73+
}
74+
let data = ''
75+
res.on('data', (d) => {
76+
data = data + d
77+
})
78+
res.on('end', () => {
79+
self.setState({added_file_contents: data})
80+
})
81+
})
82+
})
83+
}
84+
}
85+
render () {
86+
return <div style={{textAlign: 'center'}}>
87+
<h1>Everything is working!</h1>
88+
<p>Your ID is <strong>{this.state.id}</strong></p>
89+
<p>Your IPFS version is <strong>{this.state.version}</strong></p>
90+
<p>Your IPFS protocol version is <strong>{this.state.protocol_version}</strong></p>
91+
<div>
92+
<div>
93+
Added a file! <br />
94+
{this.state.added_file_hash}
95+
</div>
96+
<div>
97+
Contents of this file: <br />
98+
{this.state.added_file_contents}
99+
</div>
100+
</div>
101+
</div>
102+
}
103+
}
104+
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'))

0 commit comments

Comments
 (0)