This post is the first in a series of posts where I share my experience writing a simple Dapp using Drizzle and Svelte.

Whilst working at EdgeFund I wanted to explore the possibility of creating a Dapp using Truffle Suite’s new collection of libraries called Drizzle.

The easiest way to get started with Drizzle according to the website is to use their seed React project by running truffle unbox drizzle , but having no react experience, I wanted to have a go at developing a Dapp without the additional react components and libraries by simply using the underlying drizzle technology instead.

To work with Drizzle, regardless of the front-end framework you decide to use for the UI, you need to configure your drizzle instance and connect it to the smart contract you want to work with. This is done through drizzle options.

A very basic drizzleOptions object

I’m using our CoinToss contract as a basis for the front-end just so I have something simple to work against. I’ve packaged up our contract’s source code and compiled .json files into an npm package which I’m importing at the top and which I installed by running npm install @edgefund/core

Drizzle needs to know about the contract in order to know what functions and events are available and how to retrieve information about the contract when it detects any new blocks in the blockchain. You can also specify in the options file, how frequently (if at all) you’d like drizzle to poll for new blocks, or how often to check if you’re logged into an account with web3 (a library which is usually injected into the page by the MetaMask browser plugin).

With the drizzleOptions object created, it’s time to create our Drizzle redux store.

For this we need to make sure we have the drizzle npm package installed

npm install drizzle --save

A simple drizzle store setup

In order to properly visualize what the drizzle store is doing, I recommend downloading and installing the Redux Dev Tools plugin for your browser.

Once you’ve created a simple index.html page and bundled and linked to your JavaScript, you should be able to see the following in your browser, provided you have the aforementioned plugin installed.