Distributed Application Starter: Vue front-end, Ethereum / IPFS Backend
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Wire up contract to UI. Feb 21, 2018
config Wire up contract to UI. Feb 21, 2018
contracts
migrations Connect example contract. Feb 21, 2018
src Add OrbitDB as Vue plugin. Cleanup contract instantiation. Set proper… Mar 24, 2018
static
test
.babelrc
.editorconfig Initial commit. Feb 17, 2018
.eslintignore Connect web3 to Vue app. Feb 21, 2018
.eslintrc.js Add OrbitDB as Vue plugin. Cleanup contract instantiation. Set proper… Mar 24, 2018
.gitignore Initial commit. Feb 17, 2018
.postcssrc.js
LICENSE.txt
README.md Update README.md Mar 24, 2018
index.html
offline-page.html Initial commit. Feb 17, 2018
package-lock.json Add OrbitDB as Vue plugin. Cleanup contract instantiation. Set proper… Mar 24, 2018
package.json Add OrbitDB as Vue plugin. Cleanup contract instantiation. Set proper… Mar 24, 2018
prettier.config.js Initial commit. Feb 17, 2018
truffle-config.js Add OrbitDB as Vue plugin. Cleanup contract instantiation. Set proper… Mar 24, 2018

README.md

vue-ethereum-ipfs

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: https://ipfs.io/docs/install/
Install the MetaMask Ethereum wallet (and register an account): https://metamask.io/
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": {
    "dev":
      "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "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:

https://remix.ethereum.org/

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 Contract.new(c.name, 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)

Links

Teach and learn JavaScript with us at RED Academy: https://redacademy.com/