March 30, 2019

463 words 3 mins read



Distributed Application Starter: Vue front-end, Ethereum / IPFS Backend

repo name redacademy/vue-ethereum-ipfs
repo link
language JavaScript
size (curr.) 6590 kB
stars (curr.) 1316
created 2018-02-05
license MIT License


Distributed Application Starter: Vue front-end, Ethereum / IPFS Backend

Ethereum is a distributed virtual machine that pays eth in return for miners running your smart contracts. IPFS is a kind of distributed content distribution network. Vue is a javascript framework for building client-side webapps. By keeping state inside ethereum and using IPFS to deliver HTML, webapps can become nearly indestructible!

How do I use this to make indestructible Vue apps that speak Ethereum?

Before you start

Install IPFS: Install the MetaMask Ethereum wallet (and register an account): Install: npm i -g ganache-cli (local Ethereum test network) Install: npm i -g truffle (Solidity toolkit!)

Obtain your IPFS repo key and set an environment variable

To obtain your key: ipfs key list -l Set: export IPFS_PUBKEY=QmQozMTQHW9g6fKmHerVHoKQNQo4zhfXQMsWMTuJ6D1sJd (Example key)

Start the local Ethereum test net

Run: ganache-cli --accounts=4

Connect Metamask to the test net

Select Localhost 8545 as your RPC form the MetaMask UI

Use the generated passphrase to log into MetaMask eg:

HD Wallet
Mnemonic:      shoe panic long movie sponsor clarify casino stable calm scene enforce federal

Import the other accounts in to MetaMask for testing using the generated private key eg:

Private Keys
(0) 2f3a3521d79a5e5c58972224d80a678c993a1a50b7cf8a2ee51e255e55fb041d <- the passphrase unlocks this account
(1) 557d2bd6ab422edda5d57a0c20e0908c31c94a3c7c8af40c923925a3403bd214
(2) 76e98c90b7168242fd523b718a76b95966ab09904129c011582369e7339327a8
(3) 683746dee343d96dd792130b01febc0d75dd5a540fae79350db6ed9f597d

Install the Vue packages

$ npm install

Vue Build and deploy commands

 "scripts": {
      "webpack-dev-server --inline --progress --config build/",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "export IPFS_PUBKEY= && node build/build.js",
    "publish:ipfs": "npm run test && node build/build.js && node build/ipfs-publish.js"
$ npm start
Your application is running here: http://localhost:8081

Create your own Smart Contracts

The easiest way to start developing Smart Contracts:

Add contracts to the Vue App

  • Add all of your contracts (.sol files) to the /contracts directory
  • Run: truffle compile && truffle migrate --network development

Use your Contracts in the App!

Example web3Service.js. This code demonstrates a contract factory pattern. For the full code see the web3Service.js file in the project.

import contract from 'truffle-contract'

import contractJSON from '../build/contracts/WitnessContract.json'
const Contract = contract(contractJSON)

const createContractInstance = async c => {
  try {
    const newContract = await, c.terms, {
      from: c.witness,
      gasPrice: 2000000000,
      gas: '2000000'
    return newContract
  } catch (e) {
    console.log(e, 'Error creating contract...')

export { createContractInstance }

Tested with:

  • Node (>=)9.0.0
  • go version go1.9.4 darwin/amd64
  • ipfs version 0.4.11
  • Ganache CLI v6.0.3 (ganache-core: 2.0.2)
  • Google Chrome 64.0.3282.167 (Official Build) (64-bit)

Teach and learn JavaScript with us at RED Academy:

comments powered by Disqus