Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

Commit 548504d

Browse files
raoulmillaisAlan Shaw
raoulmillais
authored and
Alan Shaw
committed
docs: add parceljs browser example (#1726)
1 parent ce4ff3e commit 548504d

File tree

8 files changed

+138
-0
lines changed

8 files changed

+138
-0
lines changed

‎examples/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Let us know if you find any issue or if you want to contribute and add a new tut
1818
## Examples
1919

2020
- [js-ipfs in the browser with Browserify](./browser-browserify)
21+
- [js-ipfs in the browser with Parcel.js](./browser-parceljs)
2122
- [js-ipfs in the browser with WebPack](./browser-webpack)
2223
- [js-ipfs in the browser with a `<script>` tag](./browser-script-tag)
2324
- [js-ipfs in electron](./run-in-electron)

‎examples/browser-parceljs/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["@babel/preset-env"],
3+
"plugins": ["syntax-async-functions","transform-regenerator"]
4+
}

‎examples/browser-parceljs/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
dist/
2+
/node_modules/
3+
.nvmrc
4+
.cache
5+
npm-debug.log
6+
.DS_Store

‎examples/browser-parceljs/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Bundle js-ipfs with [Parcel.js](https://parceljs.org/)
2+
3+
> In this example, you will find a boilerplate application that connects to
4+
IPFS using JS-IPFS and is bundled with [Parcel.js](https://parceljs.org/), so
5+
that you can follow it for creating Parcel.js bundled js-ipfs DApps.
6+
7+
## Before you start
8+
9+
1. Start your IPFS daemon of choice e.g. `ipfs daemon` (optional if you do not
10+
want to serve the example over IPFS)
11+
1. Open a new terminal
12+
1. `cd` into this folder
13+
1. Run `npm install`
14+
15+
## Running this example in development mode with auto-reloading
16+
17+
1. `npm start`
18+
1. Open your browser at `http://localhost:1234`
19+
20+
You should see the following:
21+
22+
![](https://ipfs.io/ipfs/QmSiZ18GffagbbJ3z72kK7u3SP9MXqBB1vrU1KFYP3GMYs/1.png)
23+
24+
## Build and add to IPFS
25+
26+
1. Clear the contents of `dist` if this is not the first time you are building
27+
e.g. `rm -r dist` on a unix system
28+
1. `npm run build`
29+
1. The production build of the site is now in the `dist` folder
30+
1. Add the folder to ipfs using your IPFS client of choice e.g.
31+
`ipfs add -r dist`
32+
33+
The last hash output is the hash of the directory. This can be used to access
34+
this example served over IPFS and will be accessible by a public gateway:
35+
36+
> https://ipfs.io/ipfs/<hash_of_directory>/
37+
38+

‎examples/browser-parceljs/img/1.png‎

62.7 KB
Loading

‎examples/browser-parceljs/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "browser-parceljs",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"browserslist": [
7+
"last 2 Chrome versions"
8+
],
9+
"scripts": {
10+
"lint": "standard public/**/*.js",
11+
"test": "echo \"Error: no test specified\" && exit 1",
12+
"start": "parcel public/index.html",
13+
"build": "parcel build public/index.html --public-url ./"
14+
},
15+
"keywords": [],
16+
"author": "",
17+
"license": "ISC",
18+
"dependencies": {
19+
"ipfs": "file:../../"
20+
},
21+
"devDependencies": {
22+
"@babel/cli": "^7.1.5",
23+
"@babel/core": "^7.1.6",
24+
"@babel/preset-env": "^7.1.6",
25+
"babel-plugin-syntax-async-functions": "^6.13.0",
26+
"babel-plugin-transform-regenerator": "^6.26.0",
27+
"babel-polyfill": "^6.26.0",
28+
"parcel-bundler": "^1.10.3",
29+
"standard": "^12.0.1"
30+
}
31+
}

‎examples/browser-parceljs/public/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<title>js-ipfs parcel.js browser example</title>
8+
</head>
9+
10+
<body>
11+
<header>
12+
<h1 id="status">Connecting to IPFS...</h1>
13+
</header>
14+
15+
<main>
16+
<pre id="output"></pre>
17+
</main>
18+
19+
<script src="./index.js"></script>
20+
21+
</body>
22+
23+
</html>

‎examples/browser-parceljs/public/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import 'babel-polyfill'
2+
import IPFS from 'ipfs'
3+
4+
// IPFS node setup
5+
const node = new IPFS({ repo: String(Math.random() + Date.now()) })
6+
7+
// UI elements
8+
const status = document.getElementById('status')
9+
const output = document.getElementById('output')
10+
11+
output.textContent = ''
12+
13+
function log (txt) {
14+
console.info(txt)
15+
output.textContent += `${txt.trim()}\n`
16+
}
17+
18+
node.on('ready', async () => {
19+
status.innerText = 'Connected to IPFS :)'
20+
21+
const version = await node.version()
22+
23+
log(`The IPFS node version is ${version.version}`)
24+
25+
const filesAdded = await node.add({
26+
path: 'hello-parcel.txt',
27+
content: Buffer.from('Hello from parcel.js bundled ipfs example')
28+
})
29+
30+
log(`This page deployed ${filesAdded[0].path} to IPFS and its hash is ${filesAdded[0].hash}`)
31+
32+
const fileBuffer = await node.cat(filesAdded[0].hash)
33+
34+
log(`The contents of the file was: ${fileBuffer.toString()}`)
35+
})

0 commit comments

Comments
 (0)