docs: add parceljs browser example (#1726)

ipfs · Nov 30, 2018 · 548504d · 548504d
1 parent ce4ff3e
commit 548504d
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 0 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -18,6 +18,7 @@ Let us know if you find any issue or if you want to contribute and add a new tut
 ## Examples
 
 - [js-ipfs in the browser with Browserify](./browser-browserify)
+- [js-ipfs in the browser with Parcel.js](./browser-parceljs)
 - [js-ipfs in the browser with WebPack](./browser-webpack)
 - [js-ipfs in the browser with a `<script>` tag](./browser-script-tag)
 - [js-ipfs in electron](./run-in-electron)

diff --git a/examples/browser-parceljs/.babelrc b/examples/browser-parceljs/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["@babel/preset-env"],
+ "plugins": ["syntax-async-functions","transform-regenerator"]
+}
diff --git a/examples/browser-parceljs/.gitignore b/examples/browser-parceljs/.gitignore
@@ -0,0 +1,6 @@
+dist/
+/node_modules/
+.nvmrc
+.cache
+npm-debug.log
+.DS_Store
diff --git a/examples/browser-parceljs/README.md b/examples/browser-parceljs/README.md
@@ -0,0 +1,38 @@
+# Bundle js-ipfs with [Parcel.js](https://parceljs.org/)
+
+> In this example, you will find a boilerplate application that connects to
+IPFS using JS-IPFS and is bundled with [Parcel.js](https://parceljs.org/), so
+that you can follow it for creating Parcel.js bundled js-ipfs DApps.
+
+## Before you start
+
+1. Start your IPFS daemon of choice e.g. `ipfs daemon` (optional if you do not
+want to serve the example over IPFS)
+1. Open a new terminal
+1. `cd` into this folder
+1. Run `npm install`
+
+## Running this example in development mode with auto-reloading
+
+1. `npm start`
+1. Open your browser at `http://localhost:1234`
+
+You should see the following:
+
+![](https://ipfs.io/ipfs/QmSiZ18GffagbbJ3z72kK7u3SP9MXqBB1vrU1KFYP3GMYs/1.png)
+
+## Build and add to IPFS
+
+1. Clear the contents of `dist` if this is not the first time you are building
+e.g. `rm -r dist` on a unix system
+1. `npm run build`
+1. The production build of the site is now in the `dist` folder
+1. Add the folder to ipfs using your IPFS client of choice e.g.
+`ipfs add -r dist`
+
+The last hash output is the hash of the directory. This can be used to access
+this example served over IPFS and will be accessible by a public gateway:
+
+> https://ipfs.io/ipfs/<hash_of_directory>/
+
+
diff --git a/examples/browser-parceljs/img/1.png b/examples/browser-parceljs/img/1.png
diff --git a/examples/browser-parceljs/package.json b/examples/browser-parceljs/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "browser-parceljs",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "browserslist": [
+ "last 2 Chrome versions"
+ ],
+ "scripts": {
+ "lint": "standard public/**/*.js",
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "parcel public/index.html",
+ "build": "parcel build public/index.html --public-url ./"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "ipfs": "file:../../"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.1.5",
+ "@babel/core": "^7.1.6",
+ "@babel/preset-env": "^7.1.6",
+ "babel-plugin-syntax-async-functions": "^6.13.0",
+ "babel-plugin-transform-regenerator": "^6.26.0",
+ "babel-polyfill": "^6.26.0",
+ "parcel-bundler": "^1.10.3",
+ "standard": "^12.0.1"
+ }
+}
diff --git a/examples/browser-parceljs/public/index.html b/examples/browser-parceljs/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+ <title>js-ipfs parcel.js browser example</title>
+ </head>
+
+ <body>
+ <header>
+ <h1 id="status">Connecting to IPFS...</h1>
+ </header>
+
+ <main>
+ <pre id="output"></pre>
+ </main>
+
+ <script src="./index.js"></script>
+
+ </body>
+
+</html>
diff --git a/examples/browser-parceljs/public/index.js b/examples/browser-parceljs/public/index.js
@@ -0,0 +1,35 @@
+import 'babel-polyfill'
+import IPFS from 'ipfs'
+
+// IPFS node setup
+const node = new IPFS({ repo: String(Math.random() + Date.now()) })
+
+// UI elements
+const status = document.getElementById('status')
+const output = document.getElementById('output')
+
+output.textContent = ''
+
+function log (txt) {
+ console.info(txt)
+ output.textContent += `${txt.trim()}\n`
+}
+
+node.on('ready', async () => {
+ status.innerText = 'Connected to IPFS :)'
+
+ const version = await node.version()
+
+ log(`The IPFS node version is ${version.version}`)
+
+ const filesAdded = await node.add({
+ path: 'hello-parcel.txt',
+ content: Buffer.from('Hello from parcel.js bundled ipfs example')
+ })
+
+ log(`This page deployed ${filesAdded[0].path} to IPFS and its hash is ${filesAdded[0].hash}`)
+
+ const fileBuffer = await node.cat(filesAdded[0].hash)
+
+ log(`The contents of the file was: ${fileBuffer.toString()}`)
+})