diff --git a/examples/browser-mfs/package.json b/examples/browser-mfs/package.json index 614b68af16..8a92f2b825 100644 --- a/examples/browser-mfs/package.json +++ b/examples/browser-mfs/package.json @@ -17,7 +17,7 @@ "http-server": "^0.11.1", "terser-webpack-plugin": "^1.2.1", "test-ipfs-example": "^2.0.3", - "webpack": "^4.28.4", + "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }, "dependencies": { diff --git a/examples/browser-readablestream/package.json b/examples/browser-readablestream/package.json index 54ebbea6e5..5787e026bc 100644 --- a/examples/browser-readablestream/package.json +++ b/examples/browser-readablestream/package.json @@ -17,7 +17,7 @@ "http-server": "^0.11.1", "terser-webpack-plugin": "^1.2.1", "test-ipfs-example": "^2.0.3", - "webpack": "^4.28.4" + "webpack": "^4.43.0" }, "dependencies": { "ipfs": "^0.47.0", diff --git a/examples/browser-webpack/package.json b/examples/browser-webpack/package.json index d1018da419..290c0fcd23 100644 --- a/examples/browser-webpack/package.json +++ b/examples/browser-webpack/package.json @@ -19,11 +19,11 @@ "copy-webpack-plugin": "^5.0.4", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-hot-loader": "^4.8.8", + "react-hot-loader": "^4.12.21", "test-ipfs-example": "^2.0.3", - "webpack": "^4.28.4", + "webpack": "^4.43.0", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.1.14" + "webpack-dev-server": "^3.11.0" }, "dependencies": { "ipfs": "^0.47.0" diff --git a/examples/custom-libp2p/package.json b/examples/custom-libp2p/package.json index f1287f439d..74107b99f8 100644 --- a/examples/custom-libp2p/package.json +++ b/examples/custom-libp2p/package.json @@ -16,7 +16,7 @@ "libp2p-kad-dht": "^0.19.9", "libp2p-mdns": "^0.14.1", "libp2p-mplex": "^0.9.5", - "libp2p-secio": "^0.12.4", + "libp2p-secio": "^0.12.6", "libp2p-tcp": "^0.14.5" }, "devDependencies": { diff --git a/packages/ipfs-http-client/examples/browser-pubsub/README.md b/examples/http-client-browser-pubsub/README.md similarity index 94% rename from packages/ipfs-http-client/examples/browser-pubsub/README.md rename to examples/http-client-browser-pubsub/README.md index a74f776046..cd221f77bd 100644 --- a/packages/ipfs-http-client/examples/browser-pubsub/README.md +++ b/examples/http-client-browser-pubsub/README.md @@ -28,12 +28,10 @@ This example is a demo web application that allows you to connect to an IPFS nod With Node.js and git installed, clone the repo and install the project dependencies: -```sh -git clone https://github.com/ipfs/js-ipfs-http-client.git -cd js-ipfs-http-client -npm install # Installs ipfs-http-client dependencies -cd examples/browser-pubsub -npm install # Installs browser-pubsub app dependencies +```console +$ git clone https://github.com/ipfs/js-ipfs.git +$ cd js-ipfs/examples/http-client-browser-pubsub +$ npm install ``` Start the example application: diff --git a/packages/ipfs-http-client/examples/browser-pubsub/index.html b/examples/http-client-browser-pubsub/index.html similarity index 100% rename from packages/ipfs-http-client/examples/browser-pubsub/index.html rename to examples/http-client-browser-pubsub/index.html diff --git a/packages/ipfs-http-client/examples/browser-pubsub/index.js b/examples/http-client-browser-pubsub/index.js similarity index 88% rename from packages/ipfs-http-client/examples/browser-pubsub/index.js rename to examples/http-client-browser-pubsub/index.js index eae1dab17d..1e9c7421b2 100644 --- a/packages/ipfs-http-client/examples/browser-pubsub/index.js +++ b/examples/http-client-browser-pubsub/index.js @@ -54,8 +54,8 @@ async function main () { await sleep() const peers = await ipfs.swarm.peers() peers.forEach(peer => { - const fullAddr = `${peer.addr}/ipfs/${peer.peer.toB58String()}` - log(`${fullAddr}`) + const fullAddr = `${peer.addr}/ipfs/${peer.peer.toString()}` + log(`${fullAddr}`) }) log(`(${peers.length} peers total)`) } @@ -84,18 +84,6 @@ async function main () { } catch (_) { log(msg.data.toString('hex')) } - }, { - onError: (err, fatal) => { - if (fatal) { - console.error(err) - log(`${err.message}`) - topic = null - log('Resubscribing in 5s...') - setTimeout(catchAndLog(() => subscribe(nextTopic), log), 5000) - } else { - console.warn(err) - } - } }) topic = nextTopic diff --git a/examples/http-client-browser-pubsub/package.json b/examples/http-client-browser-pubsub/package.json new file mode 100644 index 0000000000..95d83080ab --- /dev/null +++ b/examples/http-client-browser-pubsub/package.json @@ -0,0 +1,28 @@ +{ + "name": "example-http-client-browser-pubsub-example", + "version": "0.0.0", + "description": "An example demonstrating pubsub in the browser", + "private": true, + "main": "index.js", + "scripts": { + "build": "parcel build index.html --public-url ./", + "start": "parcel index.html -p 8888", + "test": "test-ipfs-example" + }, + "author": "Alan Shaw", + "license": "MIT", + "dependencies": { + "ipfs-http-client": "^44.3.0" + }, + "browserslist": [ + "last 2 versions and not dead and > 2%" + ], + "devDependencies": { + "execa": "^4.0.0", + "go-ipfs": "^0.6.0", + "ipfs": "^0.47.0", + "ipfsd-ctl": "^4.1.1", + "parcel-bundler": "^1.12.4", + "test-ipfs-example": "^2.0.3" + } +} diff --git a/examples/http-client-browser-pubsub/test.js b/examples/http-client-browser-pubsub/test.js new file mode 100644 index 0000000000..9b40ff06bc --- /dev/null +++ b/examples/http-client-browser-pubsub/test.js @@ -0,0 +1,144 @@ +'use strict' + +const path = require('path') +const execa = require('execa') +const { createFactory } = require('ipfsd-ctl') +const df = createFactory({ + ipfsHttpModule: require('ipfs-http-client'), +}, { + js: { + ipfsBin: require.resolve('ipfs/src/cli/bin.js') + }, + go: { + ipfsBin: require('go-ipfs').path(), + args: ['--enable-pubsub-experiment'] + } +}) +const { + startServer +} = require('test-ipfs-example/utils') +const pkg = require('./package.json') + +async function testUI (url, id, apiAddr, peerAddr, topic) { + const proc = execa(require.resolve('test-ipfs-example/node_modules/.bin/nightwatch'), ['--config', require.resolve('test-ipfs-example/nightwatch.conf.js'), path.join(__dirname, 'test.js')], { + cwd: path.resolve(__dirname, '../'), + env: { + ...process.env, + CI: true, + IPFS_EXAMPLE_TEST_URL: url, + IPFS_API_ADDRESS: apiAddr, + IPFS_ID: id, + IPFS_PEER_ADDRESS: peerAddr, + IPFS_TOPIC: topic + }, + all: true + }) + proc.all.on('data', (data) => { + process.stdout.write(data) + }) + + await proc +} + +async function runTest () { + const app1 = await startServer(__dirname) + const app2 = await startServer(__dirname) + const js = await df.spawn({ + type: 'js', + test: true, + ipfsOptions: { + config: { + Addresses: { + API: '/ip4/127.0.0.1/tcp/0' + }, + API: { + HTTPHeaders: { + 'Access-Control-Allow-Origin': [ + app1.url + ] + } + } + } + } + }) + const go = await df.spawn({ + type: 'go', + test: true, + ipfsOptions: { + config: { + Addresses: { + API: '/ip4/127.0.0.1/tcp/0' + }, + API: { + HTTPHeaders: { + 'Access-Control-Allow-Origin': [ + app2.url + ] + } + } + } + } + }) + + const topic = `topic-${Math.random()}` + + try { + await Promise.all([ + testUI(app1.url, js.api.peerId.id, js.apiAddr, go.api.peerId.addresses[0].toString(), topic), + testUI(app2.url, go.api.peerId.id, go.apiAddr, js.api.peerId.addresses[0].toString(), topic) + ]) + } finally { + await js.stop() + await go.stop() + await app1.stop() + await app2.stop() + } +} + +module.exports = runTest + +module.exports[pkg.name] = function (browser) { + browser + .url(process.env.IPFS_EXAMPLE_TEST_URL) + .waitForElementVisible('#api-url') + .clearValue('#api-url') + .setValue('#api-url', process.env.IPFS_API_ADDRESS) + .pause(1000) + .click('#node-connect') + + browser.expect.element('#console').text.to.contain(`Connecting to ${process.env.IPFS_API_ADDRESS}\nSuccess!`) + + // connect to peer + browser + .waitForElementVisible('#peer-addr') + .clearValue('#peer-addr') + .setValue('#peer-addr', process.env.IPFS_PEER_ADDRESS) + .pause(1000) + .click('#peer-connect') + + browser.expect.element('#console').text.to.contain(`Connecting to peer ${process.env.IPFS_PEER_ADDRESS}\nSuccess!`) + + // subscribe to topic + browser + .waitForElementVisible('#topic') + .clearValue('#topic') + .setValue('#topic', process.env.IPFS_TOPIC) + .pause(1000) + .click('#subscribe') + + browser.expect.element('#console').text.to.contain(`Subscribing to ${process.env.IPFS_TOPIC}...\nSuccess!`) + + // send a message + browser + .waitForElementVisible('#message') + .clearValue('#message') + .setValue('#message', 'hello') + .pause(1000) + .click('#send') + + const remotePeerId = process.env.IPFS_PEER_ADDRESS.split('/').pop() + + browser.expect.element('#console').text.to.contain(`from ${remotePeerId}:\n"hello"`) + + browser.end() +} diff --git a/packages/ipfs-http-client/examples/browser-pubsub/util.js b/examples/http-client-browser-pubsub/util.js similarity index 100% rename from packages/ipfs-http-client/examples/browser-pubsub/util.js rename to examples/http-client-browser-pubsub/util.js diff --git a/packages/ipfs-http-client/examples/bundle-webpack/.eslintrc b/examples/http-client-bundle-webpack/.eslintrc similarity index 100% rename from packages/ipfs-http-client/examples/bundle-webpack/.eslintrc rename to examples/http-client-bundle-webpack/.eslintrc diff --git a/packages/ipfs-http-client/examples/bundle-webpack/1.png b/examples/http-client-bundle-webpack/1.png similarity index 100% rename from packages/ipfs-http-client/examples/bundle-webpack/1.png rename to examples/http-client-bundle-webpack/1.png diff --git a/packages/ipfs-http-client/examples/bundle-webpack/README.md b/examples/http-client-bundle-webpack/README.md similarity index 95% rename from packages/ipfs-http-client/examples/bundle-webpack/README.md rename to examples/http-client-bundle-webpack/README.md index c855432403..e59a198995 100644 --- a/packages/ipfs-http-client/examples/bundle-webpack/README.md +++ b/examples/http-client-bundle-webpack/README.md @@ -27,7 +27,7 @@ Once the daemon is on, run the following commands within this folder: > npm start ``` -Now open your browser at `http://localhost:3000` +Now open your browser at `http://localhost:8888` You should see the following: diff --git a/packages/ipfs-http-client/examples/bundle-webpack/index.html b/examples/http-client-bundle-webpack/index.html similarity index 100% rename from packages/ipfs-http-client/examples/bundle-webpack/index.html rename to examples/http-client-bundle-webpack/index.html diff --git a/examples/http-client-bundle-webpack/package.json b/examples/http-client-bundle-webpack/package.json new file mode 100644 index 0000000000..4ddeb245cb --- /dev/null +++ b/examples/http-client-bundle-webpack/package.json @@ -0,0 +1,36 @@ +{ + "name": "example-http-client-bundle-webpack", + "version": "1.0.0", + "description": "Bundle js-ipfs-http-client with Webpack", + "scripts": { + "clean": "rm -rf ./dist", + "build": "webpack", + "start": "node server.js", + "test": "test-ipfs-example" + }, + "author": "Victor Bjelkholm ", + "license": "MIT", + "keywords": [], + "dependencies": { + "ipfs-http-client": "^44.3.0", + "react": "^16.8.6", + "react-dom": "^16.8.6" + }, + "devDependencies": { + "@babel/core": "^7.2.2", + "@babel/preset-env": "^7.3.1", + "@babel/preset-react": "^7.0.0", + "babel-loader": "^8.0.5", + "copy-webpack-plugin": "^5.0.4", + "execa": "^4.0.0", + "ipfs": "^0.47.0", + "ipfsd-ctl": "^4.1.1", + "react-hot-loader": "^4.12.21", + "test-ipfs-example": "^2.0.3", + "webpack": "^4.43.0", + "webpack-dev-server": "^3.11.0" + }, + "browserslist": [ + "last 2 versions and not dead and > 2%" + ] +} diff --git a/examples/http-client-bundle-webpack/server.js b/examples/http-client-bundle-webpack/server.js new file mode 100644 index 0000000000..cb8c56980b --- /dev/null +++ b/examples/http-client-bundle-webpack/server.js @@ -0,0 +1,18 @@ +'use strict' + +const webpack = require('webpack') +const WebpackDevServer = require('webpack-dev-server') +const config = require('./webpack.config') + +const wds = new WebpackDevServer(webpack(config), { + hot: true, + historyApiFallback: true +}) + +wds.listen(8888, 'localhost', (err) => { + if (err) { + throw err + } + + console.log('Listening at localhost:8888') +}) diff --git a/examples/http-client-bundle-webpack/src/App.js b/examples/http-client-bundle-webpack/src/App.js new file mode 100644 index 0000000000..843e3dae99 --- /dev/null +++ b/examples/http-client-bundle-webpack/src/App.js @@ -0,0 +1,87 @@ +'use strict' +const React = require('react') +const ipfsClient = require('ipfs-http-client') +const stringToUse = 'hello world from webpacked IPFS' + +class App extends React.Component { + constructor (props) { + super(props) + this.state = { + addr: null, + id: null, + version: null, + protocol_version: null, + added_file_hash: null, + added_file_contents: null + } + + this.connect = this.connect.bind(this) + this.multiaddr = React.createRef() + } + + async connect () { + const ipfs = ipfsClient(this.multiaddr.current.value) + const id = await ipfs.id() + + this.setState({ + id: id.id, + version: id.agentVersion, + protocol_version: id.protocolVersion + }) + + const source = ipfs.add(stringToUse) + for await (const file of source) { + const hash = file.cid + this.setState({ added_file_hash: hash.toString() }) + + const source = ipfs.cat(hash) + let contents = '' + const decoder = new TextDecoder('utf-8') + + for await (const chunk of source) { + contents += decoder.decode(chunk, { + stream: true + }) + } + + contents += decoder.decode() + + this.setState({ added_file_contents: contents }) + } + } + + render () { + if (this.state.id) { + 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} +
+
+
+ ) + } + + return ( +
+

Enter the multiaddr for an IPFS node HTTP API

+
+ + +
+
+ ) + + } +} +module.exports = App diff --git a/packages/ipfs-http-client/examples/bundle-webpack/src/index.js b/examples/http-client-bundle-webpack/src/index.js similarity index 100% rename from packages/ipfs-http-client/examples/bundle-webpack/src/index.js rename to examples/http-client-bundle-webpack/src/index.js diff --git a/examples/http-client-bundle-webpack/test.js b/examples/http-client-bundle-webpack/test.js new file mode 100644 index 0000000000..1c50568b7f --- /dev/null +++ b/examples/http-client-bundle-webpack/test.js @@ -0,0 +1,83 @@ +'use strict' + +const path = require('path') +const execa = require('execa') +const { createFactory } = require('ipfsd-ctl') +const df = createFactory({ + ipfsHttpModule: require('ipfs-http-client'), + ipfsBin: require.resolve('ipfs/src/cli/bin.js') +}) +const { + startServer +} = require('test-ipfs-example/utils') +const pkg = require('./package.json') + +async function testUI (url, api, id) { + const proc = execa(require.resolve('test-ipfs-example/node_modules/.bin/nightwatch'), ['--config', require.resolve('test-ipfs-example/nightwatch.conf.js'), path.join(__dirname, 'test.js')], { + cwd: path.resolve(__dirname, '../'), + env: { + ...process.env, + CI: true, + IPFS_EXAMPLE_TEST_URL: url, + IPFS_API_MULTIADDR: api, + IPFS_ID: id + }, + all: true + }) + proc.all.on('data', (data) => { + process.stdout.write(data) + }) + + await proc +} + +async function runTest () { + const app = await startServer(__dirname) + const daemon = await df.spawn({ + type: 'js', + test: true, + ipfsOptions: { + config: { + Addresses: { + API: '/ip4/127.0.0.1/tcp/0' + }, + API: { + HTTPHeaders: { + 'Access-Control-Allow-Origin': [ + app.url + ] + } + } + } + } + }) + + try { + await testUI(app.url, daemon.apiAddr, daemon.api.peerId.id) + } finally { + await daemon.stop() + await app.stop() + } +} + +module.exports = runTest + +module.exports[pkg.name] = function (browser) { + browser + .url(process.env.IPFS_EXAMPLE_TEST_URL) + .waitForElementVisible('#connect-input') + .clearValue('#connect-input') + .setValue('#connect-input', process.env.IPFS_API_MULTIADDR) + .pause(1000) + .click('#connect-submit') + + browser + .waitForElementVisible('#info-header') + + browser.expect.element('#info-header').text.to.contain('Everything is working!') + browser.expect.element('#root').text.to.contain('Added a file!') + browser.expect.element('#root').text.to.contain(process.env.IPFS_ID) + browser.expect.element('#root').text.to.contain('hello world from webpacked IPFS') + + browser.end() +} diff --git a/packages/ipfs-http-client/examples/bundle-webpack/webpack.config.js b/examples/http-client-bundle-webpack/webpack.config.js similarity index 77% rename from packages/ipfs-http-client/examples/bundle-webpack/webpack.config.js rename to examples/http-client-bundle-webpack/webpack.config.js index 31e883e551..44e0063802 100644 --- a/packages/ipfs-http-client/examples/bundle-webpack/webpack.config.js +++ b/examples/http-client-bundle-webpack/webpack.config.js @@ -2,6 +2,7 @@ const path = require('path') const webpack = require('webpack') +const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = { mode: 'production', @@ -13,11 +14,14 @@ module.exports = { ], output: { path: path.join(__dirname, 'dist'), - filename: 'bundle.js', + filename: 'static/bundle.js', publicPath: '/static/' }, plugins: [ - new webpack.HotModuleReplacementPlugin() + new webpack.HotModuleReplacementPlugin(), + new CopyWebpackPlugin([{ + from: 'index.html' + }]) ], module: { rules: [ diff --git a/examples/http-client-name-api/README.md b/examples/http-client-name-api/README.md new file mode 100644 index 0000000000..bfb7fe5107 --- /dev/null +++ b/examples/http-client-name-api/README.md @@ -0,0 +1,21 @@ +# JS IPFS API - Example Browser - Name + +## Setup + +```sh +npm install -g ipfs +jsipfs init +# Configure CORS to allow ipfs-http-client to access this IPFS node +jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://127.0.0.1:8888"]' +# Start the IPFS node, enabling pubsub +jsipfs daemon +``` + +Then in this folder run + +```bash +> npm install +> npm start +``` + +and open your browser at `http://127.0.0.1:8888`. diff --git a/packages/ipfs-http-client/examples/name-api/index.html b/examples/http-client-name-api/index.html similarity index 59% rename from packages/ipfs-http-client/examples/name-api/index.html rename to examples/http-client-name-api/index.html index 54843d3327..31cf17d0f5 100644 --- a/packages/ipfs-http-client/examples/name-api/index.html +++ b/examples/http-client-name-api/index.html @@ -18,19 +18,25 @@

js-ipfs-http-client

name.publish() and name.resolve()

- initializing... + Ready to connect

- + +
+

Enter the multiaddr of a IPFS HTTP API.

+ + +
+

Add a new file to IPFS and publish it.

- - + +

Publish an existing file or directory from IPFS.

- - + +