If you’re a developer interested in blockchain and have already made a few steps in solidity and developing smart contracts, this is a must-read blog for you.

Before starting with the actual process you need to know that we are going to be implementing a web3 library. Just in case you’re a beginner and have never heard about this technology, this library helps us to interact with a local or remote Ethereum node.

To connect your smart contract, Web3 requires two necessary components: 

• ABI (Application Binary Interface): is a JSON file that contains data of your smart contract in an encoding scheme that allows you to interact with the Ethereum blockchain.
• ADDRESS: this is the address of your smart contract after you migrate it.

Now we are ready to start with the connection to the front-end process.

Starting Requirements

1. Metamask: visit https://metamask.io/ and set it as an extension in your browser. 

Let’s configure metamask to connect to test networks. Go to Settings – Advanced – Show test networks ON. After this, head to https://faucet.rsk.co/ to get funds for your account, you just need to have your metamask’s address.

1. Remix: go to https://remix.ethereum.org/, write your smart contract, deploy it at any test net and save the contract address, we’ll be using it later. Be aware that this acts as the back-end logic and storage.
2. Truffle: This is the best tool that includes all the necessary files and environments you might need for deploying and developing your smart contracts. $npm install -g truffle

Now you’re ready to connect!

To continue, go to your terminal and start a new truffle project with the following command: $npx truffle init. 

The default Truffle directory structure contains the following:

• contracts/: Contains the Solidity source files for our smart contracts. There is an important contract here called Migrations.sol.
• migrations/: Truffle uses a migration system to handle smart contract deployments. Migration is an additional special smart contract that keeps track of changes.
• test/: Contains both JavaScript and Solidity tests for our smart contracts
• truffle-config.js: Truffle configuration file.

Next, create a new file with your contract name in the contracts/ directory, copy and paste the contract you have already written and ployed in Remix platform, the next steps are to compile and migrate it locally to get the ABI.

In a terminal, make sure you are in the root of the directory that contains the DApp and type: $truffle compile.

If the compilation went successfully, now we are ready to migrate the contract.

You’ll see one JavaScript file already in the migrations/ directory: 1_initial_migration.js. This handles deploying the Migrations.sol contract to observe subsequent smart contract migrations and ensures we don’t double-migrate unchanged contracts in the future.

Now we are ready to create our migration script.

Create a new file named 2_deploy_yourContractName.js in the migrations/ directory. 

Add the following content to the file: 

Back in our terminal, migrate the contract to the blockchain. $truffle migrate

Now considering the migration went well, we are going to set up the front-end. Go to the front-end folder of your DApp and install web3 library with the next command: $npm install web3. After doing that you need to set the two important variables we mentioned at the beginning of the post: ABI, which you can find in the build folder, and the contract address. Also, you have to declare one more variable that contains the node URL, you can find it at metamask – settings – networks – select the network where you developed your contract and copy the URL.

Now you have all set up to instance your smart contract!

Import web3 library to use it and write the following code. Although there is a variety of frameworks you may choose to develop the front end, in this case, let’s continue with react.

Congratulations! Now you get access to your contract logic from your front-end app! 

To instance the functions you’ve developed in your contract write contract.method.functionName. To see more details about the uses of web3 library head to https://web3js.readthedocs.io/en/v1.7.3/.