Practical overview
When it fits
Use it as a focused learning reference when comparing Web3.js and Ethers.js contract interaction or preparing a small local demonstration with the included Counter example.
Who it is for
- JavaScript developers learning the differences between Web3.js and Ethers.js.
- Ethereum developers seeking a small React example of smart contract reads and writes.
Documented uses
- Compare how the two libraries initialize a contract instance using its ABI and deployed address.
- See how each library reads a constant contract method and represents the returned value.
- Study how each library submits a state-changing transaction and handles its result.
Requirements & limits
- The examples use React with Hooks and a Truffle Counter contract written for Solidity ^0.5.0.
- The sample workflow targets a Truffle development chain and serves the frontend locally.
- Contract setup differs: the Web3.js example uses a
fromaddress and network ID, while the Ethers.js example uses a Signer and chain ID. - The example returns a string for the Web3.js count and a BigNumber for the Ethers.js count.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Prepare and serve a sample frontend
Deploy the sample Counter to the Truffle development chain, then serve one of the documented React frontends.
Before you start
- The project repository, including its Truffle smart-contract project and either app-ethers or app-web3js.
- Truffle and npm.
Steps
Start the Truffle development console with
truffle develop.Run
migratein the Truffle console to compile and deploy the contract to the development chain.In the chosen frontend folder, run the command below and then the command below.
npm installnpm startOpen
http://localhost:1234in a browser.
Expected outcome
The selected React frontend is served locally and configured in the project to interact with the sample Counter contract.
Guide limitations
- The guide documents the sample contract and development chain workflow; it does not describe deployment to a public network.
- The frontend requires the contract deployment and matching artifact information.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 17 October 2026
- Original website title
- adrianmcli/web3-vs-ethers · Official homepage title · retained in its source language

