reactjsweb3jsgeth

How to connect local private geth nodes to the web page without using metamask or mist?


I'm developing a web wallet similar to meta mask that can make transactions or can create accounts from UI.
Frontend is developed using React, blockchain is implemented in geth.
I'm using truffle react box.

else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
        resolve(web3);
      }
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:8545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      }
    });

According to this code, my local provider should work when there is no metamask extension, but my code only works when I have the meta mask extension installed.

Are there any way to get connection to my blockchain and can control from web page?
Please help me.


Solution

  • If you do not have a MetaMask extension, then you need to include a web3 in your html file:

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    

    More details: https://github.com/ethereum/web3.js/#in-the-browser