Our Blueprint for new Ethereum projects
Starting a new Ethereum project can be a time-consuming task. Compilers for Solidity contracts are needed, dependencies for writing and validating tests must be set up, as well as frameworks to build the front-end of any user facing components, linters to enforce consistent style rules, build scripts to bundle and generate output files… the list goes on.
As part of Tanooki’s mission to make Ethereum development more open and accessible, we thought a good starting point for Ethereum Playgrounds🤸‍️ would be to share how we kickstart each of our projects.
In order to speed up and standardize the very much monotonous-but-unavoidable process of setting up our development environment, we created the following template as our go-to resource for hitting the ground running every time we start a new project, or simply need a no-frills environment to test out a new thought or idea.
Find below the details on how to install and use our Blueprint Template and learn more about the tools it includes.
How to use
In order to use this template you will need Node.js (version 8 or above) installed. We also recommend you install the latest version of the Yarn package manager.
To start, clone the template github repo by doing:
git clone --depth=1 https://github.com/ethplaygrounds/project-blueprint.git [new-project-name]rm -rf [new-project-name]/.git
Make sure you replace [new-project-name] for whatever name you want to give to the directory of your new project.
Next up is installing the project dependencies:
cd [new-project-name]
yarnAlternatively if you’re using npm instead of Yarn, simply run the following command instead:
cd [new-project-name]
npm installAnd that’s it! You’re all done! 🎉
How was that for a quick start? Next, let’s look at the tools that come bundled with this template.
Included Tools
The Ethereum development ecosystem has a lot of moving parts. In order to bring some structure into how we think about our projects, we have organized the tools we use into three categories: the Ethereum toolchain, the Web toolchain, and Developer scripts. Let’s look at each of these.
Ethereum Toolchain
Truffle
We always use the latest version of Truffle for compiling our contracts and running our tests. Truffle bundles a suite of deployment and testing tools, as well as the solc Solidity compiler.
Solium
Used for enforcing our code style for Solidity contracts. We also include a default configuration that will ignore any files placed inside the node_modules directory, as well as our style rules which are based on Solium’s recommended rules and add further security-related validation.
OpenZeppelin Framework
We are big fans of the work by the Zeppelin team and often rely on their community-audited smart contract templates as a starting point for building our own implementations of standardized contract interfaces (such as the ERC-20 and ERC-721 token contracts).
Test Helpers
These are some helpers we have built to make writing tests for smart contracts easier. These helper functions provide the functionality to assert for EVM throws and event emission by smart contracts, among other useful operations.
eth-gas-reporter
This might be our new favorite tool! It is a reporter for the Mocha testing framework that can outline the amount of gas that each test case consumed. What’s even more amazing is that it will not only display the gas amount, but it will also check the gas price at runtime so it can provide you with the price of each transaction in whatever fiat currency you choose.
solidity-coverage
Given how important it is to ensure the security of deployed Ethereum contracts, solidity-coverage is a nifty little tool that will analyze your tests and generate coverage reports. What’s even better is it will not only give you a nicely formatted response with your results, but it will also generate an HTML report that allows you to navigate through your codebase and visualize which parts of your code are not being covered by your tests. Pretty awesome stuff!
Web Toolchain
We have a pretty straightforward setup for our web development environment, which focuses mostly on providing practical tools to build the interface components that users will employ to interact with our DApp.
React
We rely on React for building the front-end of our DApp in a simple and declarative way.
ESLint
Maintaining a consistent code style is really important. For that, we use ESLint with a config file specially catered to this environment—it includes plugins for react, babel, promises, and mocha, as well as commonly-used globals implemented by Truffle and the web3.js framework. It is also set up to work with Prettier (see below) which will automatically format your files on every save!
Prettier
We really don’t know how we ever lived without this tool. Prettier takes enforcing a consistent code style to the next level: every time you save your file, Prettier will parse your code and reprint it taking into account rules like: maximum line length, tab widths, single vs. double quotes, bracket spacing, and more. It really makes writing beautiful code a no-brainer.
Here’s the configuration we use:
StyleLint
StyleLint does what ESLint does but for CSS files đź‘Ś. Our template includes a plugin to additionally lint SASS files as well.
Jest
For front-end tests we rely on Jest—their snapshot testing feature is quite powerful for validating React components!
Webpack
Finally we use Webpack to bundle our modules, transpile our Javascript, enforce linting once last time, process our CSS + SASS files, and minify all output for production.
Bonus: VSCode Extensions 🙌
We are big fans of using Visual Studio Code as our code editor. By installing the following extensions you can make VSCode play really nice with this template and add real-time code style feedback and reformatting as you work:
Developer Scripts
To make development easier we also have a number of npm scripts to run these tools efficiently.
The scripts we rely on most frequently are:
build:eth- To compile and deploy our solidity smart contractstest:eth- To test our smart contractscoverage:eth- To generate the code coverage report for our smart contracts
For working on our front-end we mostly use:
dev- Which builds our front-end environment, spins up a local server, and enables hot reloadingtest- Which uses Jest to run our front-end testsbuild- Which builds our project for production
There are a number of other scripts available too, and you can read more about them here.
We hope you find this to be a useful tool to kickstart your projects and easily set up your Ethereum development environment.
We want this to be a starting point to launch a conversation around Ethereum development best practices, as well as a living document that can be driven and improved by this community.
If you have any ideas or suggestions on how we can work together to improve this, or want to share your thoughts about how you do this differently, please send them our way! We look forward to them 🙂
Join Our Community
- 👩‍💻 Read about our mission
- đź““ Follow our writing on Medium
- 🤖 Visit our Github
