Tutorial: Ethereum BlockChain Development (3)
Tags: ethereum, blockchain, javascript, tutorial
Published: 2022-02-18 20:47:47

## Part 3: Deploy contract on a real test network -- Ropsten Testnet.


> The purpose of building this blog is to write down the detailed operation history and my memo for learning the dApps.
> If you are also interested and want to get hands dirty, just follow these steps below and have fun!~

### Previous Blog

[Tutorial: Ethereum BlockChain Development (1)](https://dev.to/yongchanghe/ethereum-development-log-part-1-deploy-blockchain-and-smart-contract-1a1j)
[Tutorial: Ethereum BlockChain Development (2)](https://dev.to/yongchanghe/ethereum-development-blog-2-53kk)

### Getting started
Previously we have deployed the test React App to _localhost_ and also made transactions locally via MetaMask Wallet. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f8wj1mkloss8hqdas8e.png)
In this blog let's deploy our React App to a real test network. There are lots of platform out there for us to do it, and one of them is called [**Ropsten Testnet**](https://ropsten.etherscan.io/) :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezyfnuh8hpdriyenyw6j.png)

We should first see **Etherscan**, which is known as Ethereum's leading "block explorer". It is essentially a search engine that lets users look up, confirm and validate transactions on the Ethereum decentralised smart contracts platform[1]. 

We will use [**Ropsten Ethereum Faucet**](https://faucet.ropsten.be/) to test, sending _test_ ETH to our test net account.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv6c2blct3o8qh9h1clu.png)

Next let's turn our MetaMask Network from Localhost8545 to **Ropsten Test Network**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmdhobwhe9z5atvszy9g.png)

We need some way to interact with our test network. Suppose we don't want to run our own Ethereum node, and what we can actually do is to use services that APIs can provide. [INFURA](https://infura.io/) is what we are going to use:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz51cfcxes2xd0tkb13x.png)

Sign up for your own INFURA account, and create new project `my-react-dapp` with PRODUCT **Ethereum**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgcdb4s3u1wwoto6r1zy.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agrh1s3htb9qzvn3vlv1.png)

Next click on the little clipboard that right next the **PROJECT ID** to copy our project ID, and change the ENDPOINTS to **ROPSTEN**, and click on **SAVE CHANGES**:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyb1avdjmizva6h6yvk9.png)

Next, find out our code, and let's add configration to file **hardhat.config.js** in `networks` right beneath `hardhat` block :

```js
module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    },
    ropsten:{
      url:"",
      accounts:[]
    }
  }
};
```
Copy the first line of ENDPOINTS (INFURA) and paste to `url`:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrapavjipzpaxz4h4ft6.png)

Next let's click on MetaMask extension, and click on three dots and then **Account details** to rename our account name as **TestRopstenAccount** (optional step):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwxghmnb9j8kme0v8a72.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8pid9zz6ba4skrjqz2x.png)

Then let's click on our new account name area to copy the account address to clipboard, paste it in [**Ropsten Ethereum Faucet**](https://faucet.ropsten.be/) webpage, and click **Send me test Ether** :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w24omcm4kl99golidcr5.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbcv3lruyuxga661l8vf.png)

Unfortunately, as showing above, the faucet gave me message that I am greylisted. Creating a new MetaMask account didn't work either.

Googled this problem, and finally got 0.01 ETH by visiting this faucet - [MyCrypto](https://twitter.com/mycrypto/status/1339663619093491712?s=21). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htzsowd44c2ed45fzr7g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxloujnonailf80onbvc.png)

And actually we could get more if request multiple times, which should be a diligent work. 0.04 ETH might be enough for us:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snkpvxgu6ffjqovhz3r3.png)

Next let's add the following code into `accounts:[]`:

```js
accounts:[`0x${process.env.ACCOUNT_KEY}`]
```
Now our `module.exports` block in `hardhat.config.js` file
should be like this:
```js
module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    },
    ropsten:{
      url:"https://ropsten.infura.io/v3/2df236f3f6db4b8c91a9b77784655f98",
      accounts:[`0x${process.env.ACCOUNT_KEY}`]
    }
  }
};
```
Next, let's find out our MetaMask Private Key for the current account: Click on **Account details**, Export Private Key, input password and copy your Private Key.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tmdorlunqpx7jq2omd3.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wwr3jtwdcdpx4gpw0v8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3a90jy53msoldk5m8t4.png)

Next, we should go to terminal and run command:
```linux
vi ~/.zshrc
```
And add the following command. You should paste your own private key instead of the showing string below:
```linux
export ACCOUNT_KEY="YOUR_PRIVATE_KEY_074998977f72a021"
```
See screenshot:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70vd1nq7cque5hewuubc.png)

Set your environment variable by using the following command:
```linux
source ~/.zshrc 
```
We should ready to go to the next step. Now let's run the following command to deploy our network on Ropsten Testnet:
```linux
npx hardhat run scripts/deploy.js --network ropsten
```
We should get the following message from npx, which means we have deployed the contract to such address successfully! Copy this address.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2jojl7gv1waky26lz9y.png)

We can now go to [Etherscan](https://ropsten.etherscan.io/) and paste our contract address into **Ropsten Testnet Explorer** and view our contract details and transaction details:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8oimu91gg1pexng1a5r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5oux403gve6dfaj3gn8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u2t42wmk8o6vg8pj9rp.png)

If we now check our MetaMask account, we might find our fake ETH value changed, meaning We have spent some of our ETH on deploying contract. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5c4slxy7dcoucwmu1bd.png)

Pretty Cool!

### References
[1]
https://ca.finance.yahoo.com/news/etherscan-080428243.html?guce_referrer=ahr0chm6ly93d3cuz29vz2xllmnvbs8&guce_referrer_sig=aqaaanuba3c5pce4dkkswdfpeftvfhj9pdnxnj81vylerkan57b5sp1clg1uaoezjtmijv7djxrn7yf3r0ii4wxxuu8yt5txrgndiytxau_xmn02rqdgmbe3u21o9n9bjrocqzcuqz6ux_z5gektxwaxq_ulf4sk9lsfpgkjp8dstfwz

https://www.youtube.com/watch?v=a0osIaAOFSE