Testing vue + web3 and smart contract on localhost: Part1

The goal is to use the Smart Contracts written in my localhost environment using Vue3.

I will be posting in two parts.

Simple Smart Contract

I will use the Storage Example in the documentation

Introduction to Smart Contracts - Solidity 0.8.13 documentation

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.16 <0.9.0;

contract SimpleStorage {
    uint storedData;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

Remix IDE

Remix IDE is an easy-to-use tool for developing and deploy smart contracts.

So I will also use Remix and create a file and write code.

If you write code, you can compile and deploy it.

You can use the 2nd and 3rd from the top of the menu on the left.

To compile, click the Compile Storage.sol button.

To deploy a smart contract on localhost, you need a few things, you need to have a ganache and a MetaMask.

Ganache

Ganache is a personal blockchain for rapid Ethereum and Corda distributed application development.

In order to deploy and run the code, ganache must be running.

MetaMask

MetaMask is a crypto wallet and is provided as a browser extension.

MetaMask

MetaMask & Localhost

If you click the network at the top, several will appear, but what we need is a localhost environment.

When you click the Add Network button, the following screen appears.

Enter the Network name, RPC address, chain ID, and currency symbol (ETH) on the screen that appears after clicking the Add Network button and click the Save button.

Then you can change the network to localhost.

Now let’s deploy from Remix.

Smart Contract Deploy

First, change Environment to Web3 Provider in the above item.

When the modal window for entering the endpoint appears, enter the RPC server in ganache.

Check that CONTRACT is also well selected and click the Deploy button to deploy.

After that, you can also test the function in Deployed Contracts shown in the lower left.

Next, I plan to use the Smart Contract distributed by Vue.

Testing vue + web3 and smart contract on localhost: Part2