Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redacademy/vue-ethereum-ipfs
Distributed Application Starter: Vue front-end, Ethereum / IPFS Backend
https://github.com/redacademy/vue-ethereum-ipfs
ethereum ipfs javascript solidity vue
Last synced: 4 days ago
JSON representation
Distributed Application Starter: Vue front-end, Ethereum / IPFS Backend
- Host: GitHub
- URL: https://github.com/redacademy/vue-ethereum-ipfs
- Owner: redacademy
- License: mit
- Created: 2018-02-05T02:58:53.000Z (almost 7 years ago)
- Default Branch: 0.0.1
- Last Pushed: 2018-03-24T21:44:05.000Z (over 6 years ago)
- Last Synced: 2024-10-29T14:19:02.310Z (12 days ago)
- Topics: ethereum, ipfs, javascript, solidity, vue
- Language: JavaScript
- Homepage:
- Size: 6.28 MB
- Stars: 1,338
- Watchers: 53
- Forks: 86
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-baas - vue-ethereum-ipfs
README
# 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/](https://ipfs.io/docs/install/)
Install the MetaMask Ethereum wallet (and register an account): [https://metamask.io/](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/](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.
```js
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/