This repository has been archived by the owner on Mar 10, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 299
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
187 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"stage": 0 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
node_modules | ||
npm-debug.log | ||
.DS_Store | ||
dist |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<html> | ||
<head> | ||
<title>Sample App</title> | ||
</head> | ||
<body> | ||
<div id='root'> | ||
</div> | ||
<script src="/static/bundle.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{ | ||
"name": "bundle-browserify", | ||
"version": "1.0.0", | ||
"description": "Bundle js-ipfs-api with Browserify", | ||
"scripts": { | ||
"start": "node server.js" | ||
}, | ||
"author": "Victor Bjelkholm <victor@ipfs.io>", | ||
"license": "MIT", | ||
"keywords": [], | ||
"devDependencies": { | ||
"babel-core": "^5.4.7", | ||
"babel-eslint": "^3.1.9", | ||
"babel-loader": "^5.1.2", | ||
"eslint-plugin-react": "^2.3.0", | ||
"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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
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'); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import React, { Component } from 'react' | ||
|
||
import ipfsAPI from 'ipfs-api' | ||
|
||
var ipfs = ipfsAPI('localhost', '5001') | ||
const stringToUse = 'hello world from webpacked IPFS' | ||
|
||
export default class App extends 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 <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> | ||
<div> | ||
Added a file! <br /> | ||
{this.state.added_file_hash} | ||
</div> | ||
<div> | ||
Contents of this file: <br /> | ||
{this.state.added_file_contents} | ||
</div> | ||
</div> | ||
</div> | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
import React from 'react'; | ||
import App from './App'; | ||
|
||
React.render(<App />, document.getElementById('root')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
} | ||
}; |