ethereum-todolist

by mbeaudru

A todoList ethereum sample app made with create-react-app, Truffle and web3

124 Stars 30 Forks Last release: Not found 28 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

TodoList Dapp

Live demo

ethereum-todolist-demo

Goal

While a TodoList app is not suited to ethereum-based backends, I originally wanted to do one to get my hands on this technology and to have a very simple app actually doing something I am familiar with as a front-end developper.

The goal of this sample app is to help anyone wanting to understand what are ethereum contracts and how they can be used as a distributed back-ends, with its limitations as well.

Required dependencies

A running node

You must run a node on your computer, whether its a real or virtual one. For development speed reasons, the best choice is to use testrpc because you have as much ether as you want and don't need to mine transactions.

Install instructions

Mac & Linux
sudo npm install -g ethereumjs-testrpc
Windows

The ethereumjs-testrpc package needs much more things to be installed on your machine to work on Windows.

If you can't afford this, we've covered you with Vagrant. This piece of software allows you to run a lightweight linux virtual machine in the terminal. Thus, it uses much less power than a full VM and you can still enjoy your Windows environment and tools you are used to, while providing you linux compatibility for terminal tools.

To do so, it's as easy as:

  • Downloading and installing Vagrant
  • Run
    vagrant up
    in a terminal opened at the project root. It may take some time as it must download an ubuntu ISO the first time it runs.
  • Then run
    vagrant ssh
    . If it doesn't work (it probably won't in fact) you can use Git bash if you already have it on your computer. If you don't, follow those instructions.

And that's it ! Now you can run

testrpc
and you should see your node running.

Truffle - Compile & Migrate contracts to the blockchain

sudo npm install -g truffle

Note :

npm install -g truffle
on Windows.

Instructions

Setting up the devTools and client dependencies

npm install

Note : If install fails on windows (particularly if node-gyp is the issue), run Powershell as administrator and run

npm install -g windows-build-tools
. It will allow you to install and use native node packages.

Run your ethereum node

With testrpc

In a terminal (or in vagrant ssh on Windows, see above), run

testrpc

With Geth

Locally
  • Install Ethereum on your machine
  • npm run geth
    to initialize and run the ethereum node with geth console
  • personal.unlockAccount("ACCOUNT_TO_UNLOCK_ADDRESS", "pass")
    (see Note if you don't get it)
  • miner.start()

Note : At least the first time, you need to run those commands to create an account to mine on

  • personal.newAccount("pass")
  • personal.unlockAccount("ACCOUNT_ADDRESS", "pass")

Note 2: If you need to customize the geth parameters, check the "geth" task in gulpfile.js.

Deploy the smart contracts to the node

In another terminal, run

truffle compile
and then
truffle migrate --reset

Warning here: You have to re-run those commands when you modify your contracts so that they are re-deployed to the blockchain.

Note : There is an experimental watcher that launch these commands when you save a contract. It may not work but it's worth the shot :

npm run watch-contracts

Running the client app

With your node running and the smart contracts deployed to it, run in terminal

npm start
.

You're done !

FAQ

  • Why is there both a truffle.js file and a truffle-config.js file?

    Truffle requires the truffle.js file be named truffle-config on Windows machines. Feel free to delete the file that doesn't correspond to your platform.

  • Where is my production build?

    The production build will be in the build_webpack folder. This is because Truffle outputs contract compilations to the build folder.

  • Where can I find more documentation?

    This project has been created with truffle-box-react which is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.