# Deploy with Hardhat
Hardhat is one of the popular smart contract development frameworks.
This document is a guide on how to deploy a smart contract on the Concha network using Hardhat.
## Hardhat smart contract
* `mkdir ;cd `
* Initialize a project with Hardhat: `npx hardhat`.
* Next, (… *To avoid failure … please go slow with this cli dialogue*…),
So then,
* Press `` to set the project root.
* Press `` again to accept addition of `.gitignore`.
* Type `n` to reject installing `sample project's dependencies`.
The idea here is to postpone installing dependencies to later steps due to a possible version-related bug.
* Open the `hardhat.config.js` file and paste the below code:
Copy
```
require("dotenv").config();
require("@nomicfoundation/hardhat-toolbox");
/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
solidity: "0.8.9",
paths: {
artifacts: "./src",
},
networks: {
concha-testnet: {
url: `https://testnet-rpc.concha.network`,
accounts: [process.env.ACCOUNT_PRIVATE_KEY],
},
},
};
```
Note that a different path to artifacts is added so that the React app will be able to read the contract ABI within the `src` folder.
## Add scripts
* Create a new file, in the contracts folder, named `Counter.sol`: `touch contracts/Counter.sol`.
* Copy the below code and paste it in the Counter contract code:
Copy
```
//SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
contract Counter {
uint256 currentCount = 0;
function increment() public {
currentCount = currentCount + 1;
}
function retrieve() public view returns (uint256){
return currentCount;
}
}
```
* Create a new file in the scripts folder `deploy-counter.js`: `touch scripts/deploy-counter.js`.
* Add the code below to the `deploy-counter.js` file:
Copy
```
const hre = require("hardhat");
async function main() {
const deployedContract = await hre.ethers.deployContract("Counter");
await deployedContract.waitForDeployment();
console.log(
`Counter contract deployed to https://explorer.concha.network/address/${deployedContract.target}`
);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
```
* Before compiling the contract, you need to install the toolbox. You may need to change directory to install outside the project. Use this command:
Copy
```
npm install --save-dev @nomicfoundation/hardhat-toolbox
```
* Compile your contract code (i.e., go back to the project root in the CLI):
Copy
```
npx hardhat compile
```
* Now run the scripts:
Copy
```
npx hardhat run scripts/deploy-counter.js --network concha-testnet
```
Here’s an output example:
`Counter contract deployed to https://explorer.concha.network/address/0x5FbDB2315678afecb367f032d93F642f64180aa3`
## Update frontend
The next step is to turn `Counter.sol` into a dApp by importing the `ethers` and the `Counter` file, as well as logging the contract’s ABI.
* Include the below code in the `App.js` file:
Copy
```
import { ethers } from "ethers";
import Counter from "./contracts/Counter.sol/Counter.json";
const counterAddress = "your-contract-address"
console.log(counterAddress, "Counter ABI: ", Counter.abi);
```
* Update the `counterAddress` to your deployed address.
* It is the hexadecimal number found at the tail-end of the output of the last `npx hardhat run ...` command and looks like this `0x5FbDB2315678afecb367f032d93F642f64180aa3`.
* It must be pasted in the `App.js` to replace `your-contract-address`. Be sure to use the deployed address from your own implementation!
* Update frontend counter to read from blockchain. Include the below code in the `App.js` file:
Copy
```
useEffect(() => {
// declare the data fetching function
const fetchCount = async () => {
const data = await readCounterValue();
return data;
};
fetchCount().catch(console.error);
}, []);
async function readCounterValue() {
if (typeof window.ethereum !== "undefined") {
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log("provider", provider);
const contract = new ethers.Contract(
counterAddress,
Counter.abi,
provider
);
console.log("contract", contract);
try {
const data = await contract.retrieve();
console.log(data);
console.log("data: ", parseInt(data.toString()));
setCount(parseInt(data.toString()));
} catch (err) {
console.log("Error: ", err);
alert(
"Switch your MetaMask network to Concha Testnet and refresh this page!"
);
}
}
}
```
* Also, to import `useEffect`, insert it like this:
Copy
```
import { useState, useEffect } from "react";
```
* To be able to track a loader, add this to your state:
Copy
```
const [isLoading, setIsLoading] = useState(false);
```
* This is within the `App()` function.
* Let frontend counter write to the blockchain by adding the below `requestAccount` and `updateCounter` functions:
Copy
```
async function requestAccount() {
await window.ethereum.request({ method: "eth_requestAccounts" });
}
async function updateCounter() {
if (typeof window.ethereum !== "undefined") {
await requestAccount();
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log({ provider });
const signer = provider.getSigner();
const contract = new ethers.Contract(counterAddress, Counter.abi, signer);
const transaction = await contract.increment();
setIsLoading(true);
await transaction.wait();
setIsLoading(false);
readCounterValue();
}
}
```
Place these two functions above the `readCounterValue()` function in the `App.js` file.
* Replace the `incrementCounter` function with this one:
Copy
```
const incrementCounter = async () => {
await updateCounter();
};
```
* Update the increment button code to:
Copy
```
```
Now, run the Counter dApp by simply using `npm start` in CLI at the project root.
You have successfully deployed a dApp on the Concha testnet.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.concha.network/developers/dapp/deploy-with-hardhat.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.