From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

Welcome to the third post in the Truffle series: From idea to minimal viable dapp, where we show how to build a dapp from scratch using the Truffle suite. In this post, we’ll cover how to enhance your auction dApp with Ganache.

In the first part, we created a new smart contract project in Solidity, compiled and deployed the smart contract, and used the Truffle CLI to interact with it in the development environment.

In the second part, we added automated unit tests to the first part, taking advantage of the automated test runner and library provided by the Truffle CLI.

In this post, we’ll build on parts 1 and 2 by exploring the benefits of using Ganache as our blockchain emulator, rather than the built-in blockchain emulator bundled with Truffle CLI.

What is Ganache?

Ganache is a native blockchain emulator that enables quick and easy development, testing and deployment of dapps on the Ethereum network. It enables developers to emulate the Ethereum Virtual Machine, allowing smart contracts to interact with it the same way they interact with the Ethereum blockchain when deployed.

This means that you can expect your smart contracts to run exactly the same on Ganache as they do on the Ethereum testnet and mainnet.

Ganache comes in two flavors, Ganache Command Line Interface (CLI) and Ganache Graphical User Interface (GUI). Both of these have richer features than the Ganache built into the Truffle CLI, but in this post we’ll focus on the Ganache GUI and explore how adding it to our toolset can greatly increase productivity.

If you’re interested in switching to the Ganache CLI interface, you should check out this blog post on Ganache 7 and this blog post on three new Ganache CLI features that will improve your development experience.

Ganache GUI

Ganache GUI is the graphical version of Ganache CLI, and while not as feature rich as Ganache CLI, it has some cool features that can help increase productivity, such as creating and switching between multiple workspaces, linking and unlinking Truffle projects, via built-in blocks The explorer checks blocks and transactions etc.

You can download the Ganache GUI version for your operating system by visiting the Ganache download page. Once you’ve downloaded that version, you can install it like any other application.

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

Built-in blockchain using Ganache GUI instead of Truffle CLI

In the first episode, under the section Deploying Contracts Locally Using the Truffle CLI, we deployed the contract to Truffle’s built-in blockchain emulator and interacted with the deployed contract by using the “truffle develop” command in the truffle developer console.

In the second episode, after adding some automated unit tests, we run our tests on the built-in blockchain that comes with the Truffle CLI by first running “truffle develop” and then running the “test” command.

To recap, running “truffle develop” exposes an interface for accessing Truffle’s built-in blockchain.

In this post, we’ll replace Truffle’s built-in blockchain with the Ganache GUI, as it provides more visibility and functionality than the Truffle CLI’s built-in blockchain. In order to do this successfully, we will need to set up a workspace for our project.

set workspace

On the Ganache GUI main screen, there are two options for creating workspaces: the QUICKSTART option and the NEW WORKSPACE option. The QUICKSTART option helps to start a blockchain with one click using the default workspace configuration options, while the NEW WORKSPACE option allows more flexibility in configuration.

Since we already have a working project with a truffle-config.js file, we will use the NEW WORKSPACE option. Click the NEW WORKSPACE button, enter a workspace name for your project, then select your project’s truffle-config.js file under the TRUFFLE PROJECTS input field, and click SAVE WORKSPACE to continue.

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

If done correctly, you should see an account page. This page is similar to the response from running the “truffle develop” command in the first episode.

It created 10 free Ethereum accounts, each loaded with 100 fake ETH tokens for testing. This page also shows the mnemonic seed phrase used to generate these accounts, as well as the private key for each account.

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

Replace Truffle CLI’s built-in blockchain with Ganache GUI

We’ll dig into the other pages and what they do, but in the meantime, let’s go ahead and replace Truffle CLI’s built-in blockchain with Ganache GUI in our dapp development workflow.

In our workflow, replacing Truffle CLI’s built-in blockchain with Ganache GUI means that contract deployment, interaction and testing will run against this new blockchain emulator; Ganache GUI, since it has a user interface, we will Gain a deeper understanding of what’s going on under the hood.

To do this, all we need to do is update the “development.port” value in the truffle-config.js file to point to the port exposed by our Ganache GUI instance, usually port 7547.

Note that we currently set this value to 8545, which is the port on which the truffle CLI internal blockchain runs – you can see this by running the “truffle develop” command.

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

development: {

host:”127.0.0.1″,

port:7545,

network_id: “*”, // Any network (default: none)

},

After updating the port value, we can now deploy the contract to the Ganache GUI. To do this, navigate to the project root directory and run the command “truffle migrate”.

Recall that in previous episodes, to access the blockchain nodes, we had to run the “truffle develop” command to start Truffle’s internal blockchain before running the actual commands like “migrate” and “test”.

Now, since we’re running the standalone Ganache GUI, we can completely skip the first command – “truffle develop” and run the actual command directly. The only requirement is that we prefix all commands with the “truffle” keyword, such as “truffle migrate” and “truffle test”, not just “migrate” and “test”

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

Interact with smart contracts deployed on Ganache GUI

You can still interact with the deployed contract as in the first episode, see the section Interacting with locally deployed contracts using the Truffle CLI for more information.

The only difference is the command we use when accessing the Truffle CLI console. In the first episode, we accessed the Truffle CLI’s blockchain using the “truffle develop” command, and then retrieved our deployed contract.

In this episode, since we are no longer relying on the built-in Truffle CLI blockchain, we will use the command “truffle console” to open a console to fetch and interact with deployed contracts.

Note that the console command “truffle console” does not start any blockchain instance like “truffle develop”. Instead, it starts an environment to run and interact with the default blockchain you set up in the truffle-config.js file.

In this new console, feel free to try out all the code examples in the Interacting with locally deployed contracts using the Truffle CLI section. They should still work fine.

Run automated tests in Ganache GUI

In episode two we wrote some unit tests that run against the built-in blockchain that comes with Truffle CLI, now that we’re replacing it with Ganache GUI, let’s see how we can run automated tests in Ganache GUI.

Running our tests in the Ganache GUI is as easy as running “truffle test” on the root of our Truffle project. Since we’ve updated the truffle-config.js file to point to the port running the Ganache GUI, every command prefixed with “truffle” will automatically connect to and run on the Ganache GUI.

From Idea to MVP: How to Use Ganache to Power Up Your Auction Dapp?

Benefits of using Ganache GUI over Truffle CLI’s built-in blockchain

A handy feature of the Ganache GUI is the ability to create and maintain multiple workspaces, including the ability to link and unlink Truffle projects from those workspaces. Workspaces are particularly useful because they allow you to preserve a history of smart contract interactions over time, including logs, events, transactions, and more.

Another useful feature of the Ganache GUI is the number of pages and views it has available, each displaying a different type of information to help dapp developers gain a deeper understanding of their smart contracts. Some of these pages include:

  • An accounts page showing the generated accounts, their balances, the number of transactions performed by the accounts, the account index and the account’s private key – if you click on the key icon to the right of each account, their private key will be displayed.
  • This page is the default and it comes in handy when you need to double check which account did what and the ETH balances and transactions of a particular account.
  • A block page showing each block produced on the blockchain, along with the gas used and transactions. This is similar to what you’ll find on etherscan.io, but with far fewer features. It’s useful because it allows you to emulate a blockchain explorer.
  • A transaction page listing all transactions running on the blockchain. Together, the transaction page and the block page provide a lot of insight into your smart contracts, just like a block explorer.

It’s also a great resource in case you want to go back to previous transactions and learn more about them, especially during debugging. The workspace feature enables this information to be persisted over time, which is not available in the Truffle CLI’s built-in blockchain.

  • A Contracts page that lists the contracts contained in the Truffle project in your workspace. Clicking on any listed contract will open a view showing you all the values ​​contained in the contract’s storage, including variables, their corresponding values, and the contract’s available functions, addresses, and deployment transactions.
  • An events page that lists all events fired since the workspace was created. Ganache will attempt to decode events fired by contracts in your Truffle project.

Displays the log page of the server log, useful for debugging.

What’s next?

So far we’ve seen a few ways that adding the Ganache GUI to our workflow can make building easier and provide more debugging and visibility options.

Next, we’ll explore ways to debug smart contract code using the Truffle debugger and console.log functionality. Until then, keep an eye on Truffle’s Twitter and our GitHub discussion page for more updates.

We also hold a weekly livestream conference called Web3 Unleashed, where we build, interview developers from the web3 community, and discuss important developments across the ecosystem. If written material is more your thing, past episodes can be found on the Truffle Youtube channel and the Unleashed section of our website.

Total
0
Shares
Related Posts

Is Ethereum (ETH/USD) Bearish Now After Fed Rate Decision?

Ethereum (ETH/USD) was down 1.70% intraday on Thursday following the Fed rate decision the previous day. The Fed raised rates by 75 basis points. The uptick was largely expected, and the market may have already priced in the news. Other comments, however,…
Read More