Create Eth App is a command-line interface tool for creating Ethereum-powered frontend apps with one command.

This post delves into the rationale that went into building this tool and shows you the many ways in which you can leverage Create Eth App in your Ethereum hacks.

TLDR; look up these instructions.


The Rationale

Primero, writing secure smart contracts is hard. Painstakingly hard. It's a multi-faceted process that needs to be carried out by a team of top-notch engineers and eventually scrutinised by a convoy of security researchers.

Not to say that smart contracts aren't awesome; they are and they are the very heart of Ethereum. This is to say that with power comes responsibility, and newcomers to Ethereum may want to first learn how to ride a bike than drive an SUV.

Segundo, it may be the case that Ethereum needs more frontend development than smart contract engineering.

Kames Cg makes a point in Ethereum's Growth Problem that some protocols have reached escape velocity and there is little collective benefit in copy-catting them.

But an army of frontend developers working on various web interfaces for accessing a lending protocol like Aave? That would be a boon.

The world is a big place. Some people read right-to-left, some don't use Latin characters, some are subject to very different regulations to the ones prevalent in the West. We need different web interfaces for these use cases.

If you're a frontend engineer with knowledge of either React or Vue.js and you're looking to build your first "Hello World" web app that connects to the Ethereum blockchain, you're the perfect user for Create Eth App.


The How

Running the following command:

yarn create eth-app my-eth-app

Will set you up with the default template:

my-eth-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
└── packages
    ├── contracts
    ├── react-app
    └── subgraph
Default Template

If the folder hierarchy reminds you of yarn workspaces, that's good, because that's exactly what is used under the hood.

Yarn workspaces is an elegant way of structuring a codebase as a monorepo. Every package can use other local packages, avoiding the need for paths with many "../" in the import declarations.

A brief description of each of the three packages:

Contracts

We store the smart contract ABIs and addresses in a dedicated package, in order to adhere to the principle of separation of concerns.

If you don't know what an ABI is, please refer to this thread on StackExchange. The short story is that this is the middleware interface between you, the contract caller, and the bytecode deployed on the Ethereum blockchain.

Importantly, we need both the ABI and the address of a contract so we can interact with its functions.

React App

A fork of the boilerplate project generated by Create React App. Refer to their official documentation for more details.

Subgraph

Pulling data from an Ethereum protocol is very slow when not using a subgraph, that is, a GraphQL server that indexes the events emitted on the blockchain.

This is why we provide you with a basic subgraph that indexes the transfers of an ERC20 contract.


The Templates

The default boilerplate is merely the tip of the iceberg — Create Eth App also comes with a host of DeFi templates to choose from:

The list of available DeFi templates is not set in stone. If you'd like to request the addition of a new one, please open a GitHub issue

A DeFi template contains:

  • Pre-defined contract ABIs and addresses for that specific DeFi protocol
  • Example for how to call a smart contract function with Ethers.js
  • Example for how to interact with that protocol's subgraph

Aave Example

Imagine you want to build a web app on top of the Aave lending protocol. You would run this command:

yarn create eth-app my-aave-app --template aave

And get a fully-fledged yarn workspaces project with everything you need for an Aave-enabled app.

Here's how the Ethers.js script looks like:

async function readOnChainData() {
  const defaultProvider = getDefaultProvider();
  const aDAIContract = new Contract(addresses[MAINNET_ID].tokens.aDAI, abis.aToken, defaultProvider);
  const aDAIBalance = await aDAIContract.balanceOf("0x3f8CB69d9c0ED01923F11c829BaE4D9a4CB6c82C");
  console.log({ aDAIBalance: aDAIBalance.toString() });
}

And the GraphQL query that pulls data from the subgraph:

{
  lendingPoolConfigurationHistoryItems(first: 5) {
    id
    provider {
      id
    }
    lendingPool
    lendingPoolCore
  }
}

The Frameworks

But wait, there's more!

If React isn't your cup of tea, you can use Vue.js instead. Of course, while still being able to choose any of the available DeFi templates.

Here's how you would rewrite the previous command to use Vue.js:

yarn create eth-app my-aave-app --framework vue --template --aave

Instead of the react-app package, you would get a vue-app one, which is a fork of the boilerplate project generated by vue-cli.

As with templates, the list of UI frameworks is not final. If you'd like to request the addition of a new one, please open a GitHub issue.


The Use Cases

You learned that Create Eth App is a feature-rich command-line interface tool, which gives users full flexibility in choosing what UI framework and DeFi protocol they want to work with.

What are the best use cases?

Day-to-Day Development

Create Eth App can you a lot of time. Instead of going through all the boring tasks that go into setting up a new node.js project, like preparing the package.json file, one command in the terminal can abstract them away.

Hacks

You can use Create Eth App to create quick and dirty UIs for your Ethereum-related libraries and components.

Onboard New Developers

Tell your non-crypto friends about Create Eth App. Its simplicity may convince them in exploring Ethereum as a development platform!

Penetration Testing

If you're trying to break a DeFi protocol (as a white-hat hacker, of course), you can use Create Eth App to quickly get hold of a "testing terminal" that plugs into the user-interfacing side of that protocol.


The Wrap-Up

Thanks for reading. Create Eth App is a collaborative effort by me and Tom French. All our work is open-sourced on GitHub:

PaulRBerg/create-eth-app
Create Ethereum-powered apps with one command. Contribute to PaulRBerg/create-eth-app development by creating an account on GitHub.

If you'd like to support the further development of this project, you can donate to our Gitcoin grant or buy us a coffee.

If you use Create Eth App to build the next big thing, or have any ideas, comments or suggestions, please do let us know either on Keybase or Twitter.