How to deploy a smart contract using react web app?

Question

To deploy a smart contract I have so far used remix ide. But now I am in a need to create a website that allows to deploy smart contract just hitting a button? Can I do that?

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
interface AnotherContract {
    function walletOfOwner(address owner) external view returns (uint256[] memory);
}

contract Demo{
    uint public similarity;
    uint256 public hasRedPill;
    constructor(
    string memory _name,
    string memory _symbol,
    string memory _initBaseURI
  )  {
     
    // some code
  }
    function test() public view returns(uint256  ){
       AnotherContract anotherContract = AnotherContract(address(0x116486FD64Ba04F7B789278B239E2e5A1e2f7b39));
      return anotherContract.walletOfOwner(msg.sender).length;
    }
}

Let's say I want to deploy this demo contract using my react js web app. Here I have to first send the constructor parameters then deploy the contract. In return I need the byte code, abi and address of the contract.

Is there any way to do that? I have a sense that it is possible since remix ide also provides a ui to deploy the contract. I am new to this. Please help.

Answer 1

1. Set up Truffle

npm install -g truffle

2. Make an empty repository, cd into it, then

truffle init

3. Configure the Local network and the provider

In truffle.config.js , add the following snippet inside the module.exports:

module.exports = {
  networks: {
    development: {
     host: "127.0.0.1",
     port: 7545,
     network_id: "*",
    },
  },
  compilers: {
    solc: {
      version: "0.8.0",
      settings: {
       optimizer: {
         enabled: false,
         runs: 200
       }
      }
    }
  }
};

4. Now Compile smart Contracts

truffle compile

5. Migrate Smart Contracts

truffle migrate

That's it, it should create an ABI array and contract address in the .json file

Answer 2

The answer to your question is going to be a VERY long one. Sagar's suggestion is a good lead although there is a lot that needs to be covered here.

I would recommend you watch the crash course linked below to get you situated. This course will help you step by step and go into quite a bit of detail (which greatly helped me). I see you already have some backend knowledge so to cover the front end I would suggest you skip to lesson 10 where NextJS/React are covered.

Link to guide: Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript