Hello World DAPP
HWdapp is a hello world decentralized application. Contains the basic functionality so you can use it as a template and start building your own application.
Think of it as a hello world dapp starter kit.
what the dapp does?
-
show text stored in the blockchain, and update that text. interact directly with ethereum blockchain!! (a testnet).
-
feel free to udpdate the text of my contract through ehterscan.io at RINKEBY -> 0x06188947C018B21b9D20417D31A7f00f414919e4
-
after making the transaction to update the text, please wait around 20 seconds there, until the transaction is confirmed, the app will automatically detect the change and update the text.
what you will need
- npm
- an alchemy.com account -> https://www.alchemy.com
- metamask account -> https://metamask.io
- fake ether from the testnet you want to use -> https://faucet.rinkeby.io
Installation
Clone this repository, ‘cd’ into the folder and let npm work
cd HWdapp
npm install
The package.json should be able to download all needed dependencies.
- note: in case hardhat was not automatically installed please go into “HWdapp/contracts” and run:
npm install
Usage
- to compile, run from “HWdpp/contracts”
npx hardhat compile
- to test on a local network (live only during execution), run from “HWdpp/contracts”
npx hardhat run scripts/run.js
- to test on a local network (live undefined) with access to 20 accounts, with 1000eth, 0 blocks mined.
npx hardhat node
npx hardhat run scripts/deploy.js --network localhost
note: run the second command from a different terminal window but without closing the first terminal window with the first command running
- to test on a testnet (i.e. rinkeby)
- go to HWdapp/contracts
- open file called “secret.json”
- add your alchemy.com api url and your metamask account private key
- from HWapp/contracts try:
run npx hardhat run scripts/deploy.js --network rinkeby
- link your contract and react
- open “HWapp/src/App.jsx”
- replace “contractAddress” with your contract address
- from HWdapp root folder try:
npm run dev
that will run vite and our app will be live!
Disclaimer
I don’t consider myself an expert, take this code as what it is (a path to the needed tools, folders, configurations to build, test and deploy locally a dapp)
Please note the goal of this repository is to give a clearer path of how to locally build dapps, I found myself having trouble to understand how to develop locally and now that I have a kinda better idea I wanted to share with anyone interested the tools that I used and make available this simple template.
- note1: these are not the only tools available to build and deploy dapps.
- note2: I used solidity 0.8.4 – (no specific reason)
- note3: regarding the alchemy.com account, it is free, from there we just need to create an app and copy the its key
- note4: I did not talk about some steps because I though you could handle them by yourself (funding your metamask with fake ether, create an alchemy account, etc)
- note5: any questions, comments, suggestions feel free to ping me at discord @msaucedo#2231
FAQ
- what technologies do you use?
- hardhat – compile, test and create a local blockchain
- react js – build front end, animations, make your app look cute
- vite – live server to deploy your dapp locally
- ethers – bridge react and hardhat (interact with your contract from the front-end)
- I’m having issues compiling and running the project, what should I do?
go to the terminal, write down the error and try googling it, if no luck ping me @msaucedo#2231 at discord.
- What is that run.js and deploy.js files for?
After building your smart contract, you will need to test it. Even tho testing on a testnet is way more fun, sometimes we need to test locally.
- run.js will deploy your contract in a local blockchain live only during code execution
- deploy.js will depoy your contract in a local blockchain, live undefined (till your shut it down) this is done with hardhat, something cool with this method is that you will have 20 Etherium addreses, 1000eth, and a 0 mined blocks blockchain.
