My Ethereum Development Setup

Angello Pozo
7 min readJun 21, 2017

--

We all have our way of developing applications, some more esoteric then others. I use a combination of Tmux, atom-beta, and Ngrok to manage my development process.

My Computer:

I have been developing on a Mac since 2004 when I received my own Macbook Pro. The thing was damn large and heavy. Installing packaging was still a chore, especially if it was not on Macports. Good ol’ Homebrew made life easy on the Mac. I personally have a 3 year old computer, and it’s chugging along. I hope my next upgrade will have 32 Gb or event 64 Gb of RAM and a 120HZ OLED screen.

My Terminal:

For the longest time I used the default terminal program. I would make customizations, but I left the terminal alone for the longest time. At some point I tried fish and zsh, which provided cool commands. I ultimately moved to iTerm with Oh-My-Zsh with Tmux.

iTerm provides a few more dials and customizations that the normal terminal does not allow. Similarly, Oh-My-Zsh has a great community of plugins for themes and commands. Lastly, I LOVE Tmux. It’s the best way to organize all my sessions, windows and panes.

Tmux Window Example

As you can see, a single window can have multiple panes. Notice on the bottom (1:dfarrell@host: 2:dfarrell@host), those are named windows with numbers next to them. That means switching between windows is a key command away, which is damn sweet!

Plus you can switch between session with another key command! The dropdown on the left pane is a list of sessions. Notice below I have several sessions private chains, repos, and projects I am working on.

Tmux With Sessions

That means I don’t have to reset myself for any subset of tasks. I don’t have to fumble through many terminal windows looking for the one I want. The best part is I have a plugin (tmux-resurrect) that allows me to keep my sessions post restart! That means I never have to remake my windows or cd into projects. I do it once, save, and I’m done FOREVER!

Working with Node:

We use a lot of JavaScript, which requires Node. Being able to switch to the newest version of Node easily is very nice. The best tool is NVM (Node Version Manager), hands down! If a project requires an older version, then I simply nvm into that version and we are done. Let’s say I want to update my Node module to use the native promise library instead of bluebird. That’s easy, I would simply do the following:

  1. cd <repo>
  2. npm install && npm test
  3. nvm use 8.0.0
  4. rm -rf node_modules
  5. npm install
  6. **make changes**
  7. npm test

Once I’m satisfied with my changes, I commit and create the pull request. If I need to then work on a project that is still stuck in Node 4.0 land, I simply:

  1. nvm use 4.8.3
  2. cd <new older repo>
  3. npm start
  4. **do work**

I cannot speak more highly of the command!

Private chains:

We are using blockchain, and specifically Ethereum to develop our app. Remember when I said Tmux allows me to create and manage terminal sessions. Well I have one session called private chain that groups all my different private chains together.

Session: hs-private-chain

I have a folder of all the local chains I am managing. You can see a stray genesis1.json file and a passwords.txt. Those I use with a geth command to run and a specific network of my choosing.

geth 
--datadir ...
--networkid ...
--mine
--minerthreads ...
--rpc
--unlock ...
--passwords ...
--rpcport ...
console

I would fill out the flags as desired for the specific network I need to work on. Notice, in the image below, the tabs on the bottom allow for easy switching with a key command. Life is easy!

I also have a session called testrpc, that I use for speedier transactions.

Session: hs-testrpc

I make a distinction between the global and local because I monkey-patched testrpc to fix a command issue and redux issue.

Browsers:

I generally have 4 browsers open at any one time. I have a specific set of things I use in one browser that does not exist in others.

  1. Chrome Canary: Main development & research
  2. Chrome: Research and info
  3. Firefox Nightly: Social and other logged into various services! YAY container tabs!
  4. Opera: Random things, mostly used for browsing internets

My use has evolved over time. Safari used to be in the mix for random web browsing as well, but now it’s rarely used. I use to use other browsers like OmniWeb, Shiira, and Camino.

Text Editor/IDE:

I forget what text editors I used before Sublime Text. It was a staple for the longest time. Over the last year I have moved over to atom-beta. Here are a few packages I use that I think are lovely:

  1. atom-beautify
  2. atom-ethereum-interface
  3. highlight-selected
  4. language-ethereum
  5. linter-solidity
  6. project-manager
  7. standard-formatter

There are also a slew of other language specific packages that let me deal with docker, nginx, or whatever other thing I had to do.

Development with private chains:

Our application requires the use of web, native, and APIs. If I want to have all systems talking to the same private chain locally, I use Ngrok. Ngrok allows me create a tunnel from a dynamic URL like http://999999999.ngrok.io that points to my local computers localhost:9000. I give all services the http://999999999.ngrok.io URL and it will be redirected to my computer. I configure the URL in my web app, native app, and API through an environment variable and I’m set!

Workflow Web:

Our first release is for the web, and is built with react, redux, truffle, and webpack 2. I forked a different repo, added truffle, upgraded to webpack 2, and moved over to Material UI. For development, I need one terminal to run webpack, another for commands, and another to run a private chain.

Web Session

On the left pane I have webpack running with npm run dev and on the right I am free to do other commands like git commit. Then I also have another session that is either testrpc or private-chains where I start and stop different networks to do development. With Tmux this is easy because I would simply go into the correct session and make my change.

One nice feature of this is I updated truffle-solidity-loader to work with Truffle 3. That means inside my projects I can import in a solidity file and have it be transformed into the correct JSON file. My web code will look like the following:

import MetaCoinArtifact from '../../contracts/Metacoin.sol
import contract from 'truffle-contract'
const MetaCoin = contract(TicketManagerArtifact)
//... more code

And every time I update the solidity code, webpack 2 will rebuild MetaCoin.sol and rebuild my app. This is a major life-saver because otherwise I would have to run a command like truffle compile && truffle migrate development --reset every time I made a change in solidity, which would be a major drag on development.

Working With React-Native:

We are also working a native application to allow users to explore events and scan tickets. This repository is in another directory! So if I want to develop the react app AND web app, I have to get a little fancy. Basically, I have webpack 2 run a script to copy and paste the contract JSON files into its directory. ୧༼✿ ͡◕ д ◕͡ ༽୨

One big caveat with react-native is testing on the phone. Using Ngrok, I can configure in a URL that talks to my computer. This makes my development easy because I have full control over the system at all times.

Conclusion:

I use Tmux to handle session by grouping them and making them easily accessible. I use a combination of webpack 2 and truffle-solidity-loader to speed up my app building. Lastly, I use Ngrok to connect all applications to a single URL that is connected to my active private chain of choice. Hope you found something new and cool to speed up your development.

--

--

Angello Pozo

Co-Founder of HelloSugoi. Hacking away on Ethereum (blockchain) DApps. Follow me on https://twitter.com/angellopozo