Blockchain React TodoList App with ABS Part-3

In this part , we will see how we can deploy smart contract on Azure Blockchain as Service and how blockchain react app can perform crud operations using Azure Blockchain as Service.

Step-1 Let’s first Create Azure Blockchain as Service. Go to Create Resources and Choose Azure Blockchain Service in Blockchain Category. It is a fully managed ledger service that enables users the ability to grow and operate blockchain networks at scale in Azure. 

Step- 2 Create new resource or choose existing resource ,Choose Protocol (By default only Quorum protocol available) and Choose a region to create the member. All members of the consortium must be in the same location. Features may not be available in some regions. (Azure Blockchain Data Manager is available in the following Azure regions: East US and West Europe.)

Provide consortium and member details and transaction node Password. We can create max 10 transaction nodes in ABS . For development environment we can choose basic tier and for production workload we can choose Standard tier.

Step-3 Click on Review+Create ,It will take few mins to create ABS.

Step-4 Now let’s connect Azure Blockchain Service in VS Code. Microsoft provide Azure Blockchain Development Kit extension for VS Code which can be found here . With help of Azure Blockchain Development kit users can build contracts ,deploy contracts in local or ABS network,Interact with Azure App Services (Using Logic App,Flow and Micro services)

Step-5 Let’s see how we can connect to Azure Blockchain Consortium created above in VSCode. We can add more transaction nodes for other organisations and we can also configure Azure Blockchain Data Manager to capture data in bulk .

Step- 6 Bottom left side can see Blockchain Networks . Click on that it will provide you option to choose local blockchain network and Azure Blockchain Network.

After choosing it will ask to choose Azure Subscription and consortium name .

Step-7 After connection with ABS ,let’s Deploy Blockchain smart contract implemented here . Right click on smart contract and click on Build and deploy.

It will ask you connection string for ABS to choose and if you are doing first time it will provide you option to choose mnemonic . it will help to retrieve credentials.

Step-8 After deploying contracts you can see contract address will be generated.

Step-9 Now we need to import this smart contract in our react application . So we will copy abi of smart contract and import in react application. In config file i will provide my smart contract address and update contract abi file . (Contract ABI keeps all information related to smart contract .)

Step-10 Now let’s update connection string with ABS url while page load to connect with Blockchain Network. To get ABS connection string url need to transaction node . Choose Consortium member and go to Connection String Section.

Choose Access Key 1 or Access Key 2

Step-11 Provide connection string while connecting and loading Web3 provider .

Step -12 To connect with Blockchain Network with ABS ,we can use Metamask Plugin in chrome browser. It helps to connect your local react application to Blockchain using web3 . So provide transaction node connection string url in meta mask customer RPC option and create network.

Step-13 Now run project by using below cmd

npm run dev

When we will add new task meta mask plugin will popup window of transaction and ask confirmation to proceed with transaction .

For Azure Blockchain as Service Gas Fee will be Zero because it’s manage from ABS it’s self.

Step-14 After completing transaction you see list of task as given below.

Source code can be found here .

Leave a Reply

Your email address will not be published. Required fields are marked *