DEV Community

Cover image for Using Thirdweb and Hardhat to create and deploy a dApp on the Goerli testnet.
Edwin Anajemba
Edwin Anajemba

Posted on

Using Thirdweb and Hardhat to create and deploy a dApp on the Goerli testnet.

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}]
}
},
Enter fullscreen mode Exit fullscreen mode
  • 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 and npm 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
Enter fullscreen mode Exit fullscreen mode
  • 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)