Awesome Open Source
Awesome Open Source

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/

Alternatives To Vue Ethereum Ipfs
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,157,171
Vue (73,041
Web App (15,231
Ethereum (14,677
Contracts (11,403
Solidity (10,054
Smart Contracts (4,151
Ipfs (2,942