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()}`)
+})