1

new user here

I'm trying to connect my geth client to a HTML page using web3 such that the webpage can interact with my local testnet.

I have tried several approaches but I always end up with errors:

When I use web3 v1.0 I use the following code:

<html>
<head>
<script language="javascript" type="text/javascript" src="web3.js-1.0.0-beta.36/dist/web3.min.js"></script> 
<script type="text/javascript">
var Web3 = require('web3');
var web3 = new Web3('http://localhost:8082');

I get the following error: ReferenceError: require is not defined

When I use web3 v 0.20 I use:

<html>
<head>
<script language="javascript" type="text/javascript" src="web3.js-develop/lib/web3.js"></script>
<script type="text/javascript">
var Web3 = require('web3');
var web3 = new Web3('http://localhost:8082');
var version = web3.version.api;
console.log(version);
if(!web3.isConnected()) {
    console.log("not connected");
} else {
  console.log("connected");
}

I get: this.currentProvider.isConnected is not a function

I also tried to use the IRC instead of http:

<html>
<head>
<script language="javascript" type="text/javascript" src="web3.js-develop/lib/web3.js"></script>
<script type="text/javascript">
var Web3 = require('web3');
var net = require('net');
var web3 = new Web3('path_to_geth/geth.ipc', net);

I get: Error: Cannot find module 'net'

Sorry if this is an obvious mistake on my side but I can't seem to figure it out. Your help is very much appreciated!

1

require() is not a part of standard JavaScript. It is a special function for Node.js which allows programs to import modules.

When using Web3.js on a basic HTML/JS page, only need to import the library using the <script> tag, which it seems you are already doing.

In terms of connecting to geth, I recommend you follow this code template provided by the MetaMask developer FAQ:

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    web3 = new Web3(web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  // Now you can start your app & access web3 freely:
  startApp()

})

Here you can update your HttpProvider settings to match your localhost port, which will always be used as a fallback.

Additionally, you can use MetaMask to connect to your geth instance, in which case the page will use the web3.currentProvider provided by MetaMask.

  • when I try your code, the output is: "No web3? You should consider trying MetaMask!" followed by "ReferenceError: startApp is not defined" and if I try to check for connection: "ReferenceError: web3 is not defined". Do I need to import something else besides web3? – Niklas Aug 31 '18 at 9:52
  • So the first message is fine. It is saying that you dont have metamask, and instead will use your HTTP provider. The startApp() function call is just sudo code to start running your other functions. You can't just blindly copy this code, modify it for your needs. – Shawn Tabrizi Aug 31 '18 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.