Technologies
- Thirdweb: A tool for creating, deploying, and managing dApps on the Ethereum blockchain
- Hardhat: A development environment for Ethereum smart contract development
Steps
- First, we need to create a new contract using Thirdweb. Run this command in your terminal:
npx thirdweb@latest create --contract
. - Next, we need to install the dotenv package to manage our environment variables. Run this command:
npm install dotenv
. - We will also need to get our private key from MetaMask and the endpoint from https://www.ankr.com/rpc/eth/eth_goerli/.
- In the hardhat.config.js file, add the following code to connect to the Goerli testnet and use your private key:
defaultNetwork: 'goerli',
networks: {
hardhat: {},
goerli: {
url: '[https://rpc.ankr.com/eth_goerli](https://rpc.ankr.com/eth_goerli)',
accounts: [0x${process. env.PRIVATE_KEY}]
}
},
- Now we can deploy our contract by running the command
npm run deploy
. - Once the deployment is successful, you will see a link to deploy your contracts on Thirdweb. Open the link and follow the instructions to deploy your contract.
- For the client-side of the application, we will create a new app using Thirdweb. Run this command:
npx thirdweb@latest create --app
. - Select the app name, EVM, and JavaScript as the preferred stack.
- Now we will install React Router DOM and check our build so far by running
npm install react-router-dom
andnpm run dev
respectively. - Next, delete the src folder and create a new one. Inside the new src folder, create an index.js file and an App.js file.
- Use the React functional component file (RAFCE) snippet to create the App component.
- Convert the index.js file to main.jsx and App.js to App.jsx
- To add styling, we will install and configure Tailwind CSS with Vite. Run these commands:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- In the tailwind.config.cjs file, add the desired theme, and extend the font family and box shadow.
- In the postcss.config.js file, add the tailwindcss and autoprefixer plugins.
- In the index.css file, import the tailwindcss base, components, and utilities.
- Finally, run
npm run dev
in the terminal and your dApp should be up and running.
That's it! You have successfully created and deployed a dApp using Thirdweb and Hardhat. With this setup, you can easily create, deploy and test your dApps on the Goerli testnet. Remember that this is just a basic setup and can be further customized to suit your specific needs. Happy coding!
Top comments (0)