For a while now I've wanted to dive into dApp development using specifically Solidity and my favourite web-framework Vue.js 3 with the Vite development server. I finally found some time to set up a project and coding this very simple smart contract and decided that I can do a little series on this blog about it.
What is needed
So to develop for the Blockchain there's a ton of tools that can be used. For my setup I used the following conglomerate of tools for Solidity-development:
Hardhat
To start the new project we need to create a new project-directory.
mkdir eth-todos
After that we use npm to initialize the package.json with the npm init command. It doesn't really matter how we answer the questions throughout the initialization of npm, to simplify things we can add hardhat test as a test-command, though.
Next, following the Hardhat Getting Started Guide , we install Hardhat into the local project using:
npm install --save-dev hardhat
After a few moments we have Hardhat installed and ready to go. Using Hardhat we will now generate a sample project as a starting point for the little dApp we want to create.
To execute hardhat we type:
npx hardhat
Hardhat will start up and ask us what type of project we want to generate:
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888
Welcome to Hardhat v2.8.4
? What do you want to do? …
▸ Create a basic sample project
Create an advanced sample project
Create an advanced sample project that uses TypeScript
Create an empty hardhat.config.js
Quit
For the goal of this series we will choose the basic sample project. Hardhat will ask some more questions like the project root, if it should generate a .gitignore file and if the dependencies (hardhat-waffle, chai, hardhat-ethers and ethers) should be installed. We answer everything with the default.
That generates the basic project setup for the 'backend', our little smart contract.
After generating is done we find a few new files and folders as well as a hardhat.config.js and the .gitignore-file in our project folder.
- artifacts : The compiled smart contracts, we need those for deploying and using the contracts in the frontend-project
- contracts: The actual smart contract source-files
- scripts: Contains scripts that're used to deploy the compiled contracts to the Blockchain
- test: Contains tests for the smart contracts using chai and hardhat-ether
Hardhats sample project includes an even simpler smart contract than we aim to write: A Greeter. The contract-definition is found in the file contracts/Greeter.sol alongside a test for it under test/sample-test.js and a deploy-script scripts/sample-script.js. We will take a look at those files later in the series.
To test if everything is working we can use our test-command we set up earlier in the package.json:
npm run test
The output should look like this:
Greeter
Deploying a Greeter with greeting: Hello, world!
Changing greeting from 'Hello, world!' to 'Hola, mundo!'
✓ Should return the new greeting once it's changed (527ms)
1 passing (529ms)
Sidenote: In newer versions of node you might have to use the node-option --openssl-legacy-provider like that to not run into errors like ERR_OSSL_EVP_UNSUPPORTED
Ganache and Hardhat-Config
Next we start our own private Blockchain. I found the easiest way to do that seems to be Ganache. Ganache comes (at least for Linux) as an AppImage that can be executed as is. For this Project it is sufficient to start a new Workspace with the default settings, which looks something like this after starting up:
All that's left to do is tell Hardhat about that Ganache-Blockchain. To do that we add the following to the hardhat.config.js
module.exports = {
solidity: "0.8.4",
networks: {
ganache: {
url: "http://127.0.0.1:7545",
},
localhost: {
url: "http://127.0.0.1:8545",
},
hardhat: {},
},
};
This configures a network named Ganache that's using the RPC-Server on Port 7547 on localhost. Ganache outputs the URL of the RPC-Server on the Top.
And with that, our development setup for the backend is complete!
Conclusion
We set up a basic project pretty quick and easy. Next we start our dive into Solidity to create (and test) the smart contract we need for this little test-project. The project so far (and in future the result of this series) can be seen over on my Github