Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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:


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








No releases published


No packages published