Vue Templates Logo Vue Templates
Vue Ethereum Ipfs screenshot

Vue Ethereum Ipfs

Author Avatar Theme by Redacademy
Updated: 24 Mar 2018
1328 Stars

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

Github

Categories

Bulma Scss

Overview

The vue-ethereum-ipfs is a distributed application starter that utilizes the Vue framework for building client-side webapps, Ethereum as the backend for running smart contracts, and IPFS as a distributed content distribution network. It allows for the creation of nearly indestructible webapps by storing the app’s state inside Ethereum and using IPFS to deliver the HTML. This guide provides instructions on how to use this starter kit to create Vue apps that integrate with Ethereum.

Features

  • Utilizes Vue framework for building webapps
  • Integrates with Ethereum to run smart contracts
  • Uses IPFS for distributed content delivery
  • Provides a local Ethereum test network with Ganache CLI
  • Allows for easy development of smart contracts using Remix Ethereum IDE
  • Demonstrates contract factory pattern with example code

Installation

  1. Install IPFS by following the instructions here
  2. Install the MetaMask Ethereum wallet and register an account from here
  3. Install Ganache CLI (local Ethereum test network) by running the command npm i -g ganache-cli
  4. Install Truffle (Solidity toolkit) by running the command npm i -g truffle
  5. Obtain your IPFS repo key by running the command ipfs key list -l
  6. Set an environment variable by running the command export IPFS_PUBKEY=QmQozMTQHW9g6fKmHerVHoKQNQo4zhfXQMsWMTuJ6D1sJd (replace with your own key)
  7. Start the local Ethereum test net by running the command ganache-cli --accounts=4
  8. Connect MetaMask to the test net and select Localhost 8545 as your RPC from the MetaMask UI
  9. Use the generated passphrase to log into MetaMask
  10. Import the other accounts into MetaMask for testing using the generated private key
  11. Install the Vue packages
  12. Build and deploy the Vue app
  13. Add your own Smart Contracts to the /contracts directory
  14. Compile and migrate the contracts using Truffle by running the command truffle compile && truffle migrate --network development
  15. Use your contracts in the app by referring to the example web3Service.js code provided

Summary

The vue-ethereum-ipfs distributed application starter allows for the creation of indestructible Vue apps by utilizing Ethereum and IPFS. By keeping the app’s state inside Ethereum and using IPFS for content delivery, the apps become highly resilient. The installation process involves setting up IPFS and MetaMask, installing Ganache CLI and Truffle, and integrating the Vue packages with the Ethereum backend. Contracts can be easily developed using Remix Ethereum IDE and the example code provided in the starter kit. Overall, this starter kit provides a seamless way to build client-side webapps that interact with Ethereum.