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

Commit 90fe45b

Browse files
victorbvictorb
committed
Add webpack example
1 parent 1487d3e commit 90fe45b

File tree

10 files changed

+187
-0
lines changed

10 files changed

+187
-0
lines changed

‎examples/bundle-webpack/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 0
3+
}

‎examples/bundle-webpack/.gitignore

+4
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

+35
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

+10
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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 <[email protected]>",
9+
"license": "MIT",
10+
"keywords": [],
11+
"devDependencies": {
12+
"babel-core": "^5.4.7",
13+
"babel-eslint": "^3.1.9",
14+
"babel-loader": "^5.1.2",
15+
"eslint-plugin-react": "^2.3.0",
16+
"ipfs-api": "^11.1.0",
17+
"json-loader": "^0.5.3",
18+
"react": "^0.13.0",
19+
"react-hot-loader": "^1.3.0",
20+
"webpack": "^1.9.6",
21+
"webpack-dev-server": "^1.8.2"
22+
}
23+
}

‎examples/bundle-webpack/server.js

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

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

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { Component } from 'react'
2+
3+
import ipfsAPI from 'ipfs-api'
4+
5+
var ipfs = ipfsAPI('localhost', '5001')
6+
const stringToUse = 'hello world from webpacked IPFS'
7+
8+
export default class App extends 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+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
import App from './App';
3+
4+
React.render(<App />, document.getElementById('root'));

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

+31
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+
};

0 commit comments

Comments
 (0)