Now since we have discussed upto deploying smart contract on Ethereum blockchain we shall now see how we can connect with the smart contract from our application.
Now there is a library in javascript called web3.js which will actully help our application to interact with smart contract functions. It depends what framework/language you are using to build your application for example if you are willing to interact with smart contract using python then you will go for web3.py otherwise now a days most of the web applications are built using react, angular, vue javascript frameworks so web3.js is fine. You have to initialise web3 with a web3 provider. Most of the DApps opt for Metamask since it is also an wallet and easy to use for DApp users but here is a catch Metamask is used as web extension and from there user will be able to use the DApp but its only available on client side of code and can only be accessed from the browser and not the server. So if you are about to connect smart contract from nodejs server file its going to throw an error.
Once you have chosen your proper web3 provider its now time to get the instance of smart contract you have deployed. You can get the instance with web3 api and interact with smart contract also and then things are very easy.
For front-end/client side DApp building
(Truffle/hardhat/Remix) + (Metamask) + (Web3.js) + (Any Javascript Framework, React/Angular/Vue/etc)
(Truffle/hardhat/Remix) + (Metamask) + (Web3.py) + (Flask/Django)
For back-end/server side DApp building
(Truffle/hardhat/Remix) + (Infura/Alchemy + TruffleHDWalletProvider) + (Web3) + (NodeJs)
You can follow these topics for further reading :
- Interact with smart contract functions from plain vanillaJs
You can take the complete course on building DApp on ethereum
