Solidity Hot Reloading Using ZepKit - OpenZeppelin blog

Thank you for your interest in this post! We’re undergoing a rebranding process, so please excuse us if some names are out of date. Also have in mind that this post might not reference the latest version of our products. For up-to-date guides, please check our documentation site.

​​​​ZepKit provides a great start for DApp development on Ethereum. Today, we are happy to announce the release of Solidity Hot Reloading to help make your process even more comfortable and more productive.

​​We’re all used to the comfort and convenience of modern web development tools. Technologies such as Webpack enable hot reloading. Since Dan Abramov unveiled it, it has become the standard setup for many web developers. Avoiding endless cycles of building and reloading your project whenever you make a change saves time and focus.

​​Yet in the world of blockchain development, we’re 10 years behind. Typical DApps written on Solidity and Truffle would require the following cycle to reflect a change in the source code:

1. truffle compile
2. truffle migrate –reset (because you want to run your migrations)
3. Restore your state either using a custom script or manually

​​This process consumes a lot of time and makes writing Solidity code less delightful than it could be.

​​How Does Solidity Hot Reloading Work?

​​Hot Reloading watches the .sol files you’re using. Once there’s a change, it compiles them, updates the local blockchain using ZeppelinOS, and refreshes your app in the browser while preserving your blockchain state.

Here’s Solidity Hot Reloading cycle:

1. Make a change in the .sol file and save it
2. Wait a bit
3. Done

​​Features

• Allows you to import .sol files directly into source code.
• Allows you to specify a contract name for .sol files, such as require(“Contract.sol?contract=Counter”).
• Tracks dependencies for contracts, so children are updated when parents are modified.
• Converts .sol files into .json using compile->zos push->zos update.
• Uses only the development network, so it won’t run on any other networks.
• Allows you to set the development network name using the loader’s config.
• Pulls the build directory from Truffle config.
• In case zos command is not available, it uses cached versions of .json files.
• Compilation can be disabled using the loader’s disabled config.​

​​How to start?

In your favorite terminal run the following commands inside your project’s directory.

Install requirements

npm install --g zos@2.2.0 ganache-cli@6.3.0 truffle@5.0.2

Unbox Zepkit

truffle unbox zeppelinos/zepkit

Run the local blockchain

ganache-cli --secure -u 0 -u 1 -u 2 -d

Initialize the ZeppelinOS project

zos init zepkit

Add the Counter contract to your project

zos add Counter

Connect with your local blockchain by opening a session

zos session --network development --from 0x22d491bde2303f2f43325b2108d26f1eaba1e32b --expires 3600

Let’s compile the Counter contract

zos push --deploy-dependencies

We create an instance of our contract and deploy it

zos create Counter --init initialize --args 2

Open another terminal in the client folder and run

npm run start

You will see ZepKit webpage popup in your browser. Go to http://localhost:3000/counter and connect with your MetaMask. Once you connected Counter example will load and you will see the following interface.

As you can see Decrease Counter is disabled because there is no implementation for it in the Counter.sol smart contract. We are going to change that in a second.

Go to contracts/Counter.sol and uncomment decreaseCounter method

It is located on a line 32. Once uncommented save the file and you’ll see the webpage will reload with all the changes propagated.

As you can see Decrease Counter buttons is enabled because Counter.sol was recompiled, changes were pushed into local blockchain, and webpage was reloaded.

If you want to know more about ZepKit checkout get started with ZepKit.