[Ethereum] How to use “web3.js library” in a “JavaScript” file without using “require(“web3″)”

browsersethereumjsjavascriptsignatureweb3js

Consider we want to use web3.personal.sign in a JavaScript file. So, we need to add :

Web3 = require("web3")
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

at top of our JavaScript file.

However, if we want to run this code in a browser, we cannot use require(). For example, in case of using ethereumjs we can add github resources as follows (as described in THIS ANSWER):

<script src="https://cdn.rawgit.com/ethereumjs/browser-builds/2fb69a714afe092b06645286f14b94f41e5c062c/dist/ethereumjs-tx.js"></script>
<script>

And It works.

So, is there a similar way for adding web3.js using <script src= ... ?

When I use <script src="https://rawgit.com/ethereum/web3.js/develop/dist/web3.js"</script> <script> instead of Web3 = require("web3") I receive following error message :

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EthereumJS - Browser Example</title>
</head>

<body>
  <script src="https://rawgit.com/ethereumjs/browser-builds/master/dist/ethereumjs-abi/ethereumjs-abi-0.6.5.js"></script> 
  <script src="https://rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script> 
  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

  <script>



  function constructPaymentMessage(contractAddress, amount) 
  {
  return ethereumjs.ABI.soliditySHA3(
    ["address", "uint256"],
    [contractAddress, amount],
  );
  }

  var message = constructPaymentMessage("0x0f0f422477d83bcbed227b0ae2fa3ace7ea3c653", 100);
  console.log(message);

  web3.personal.sign("0x" + message.toString("hex"), "0xc9c3b1351c65ac47abf3774b6a9715ba3625bec5",  function(err, something) {});

  </script>
</body>
</html>

Error:

"test.html:28 Uncaught ReferenceError: web3 is not defined at test3.html:28"

Note1: test.html is name of this html file.

Note2: I use web3 version 1.0.0.

Note3: My main purpose is to run successfully JavaScript code presented HERE . When I run it using node I receive some errors. What is the best way of running this JavaScript code? Do I need to create an html file and run it with browser? or it's better to create a JavaScript file and run it using node filename.js ? The problem with running this code that is for signature verification is explained in details HERE . Eventually, I had to change some part of JavaScript code (I precised which parts have been changed in my question HERE ). However, eventually, when I call the function of Solidity contract (i.e. function close) to verify signature, the transaction is reverted as I mentioned the details of error HERE.

Note4: Related question: web3.js error: Cannot read property 'providers' of undefined

Best Answer

Adding <script src="https://rawgit.com/ethereum/web3.js/develop/dist/web3.js"</script> to replace Web3 = require("web3") is correct, but you still need to establish a Web3 provider like this:

window.addEventListener('load', function () {
    if (typeof web3 !== 'undefined') {
        console.log('Web3 Detected! ' + web3.currentProvider.constructor.name)
        window.web3 = new Web3(web3.currentProvider);
    } else {
        console.log('No Web3 Detected... using HTTP Provider')
        window.web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/<APIKEY>"));
    }
})

The Web3 provider is what actually connects your JavaScript to the Ethereum network so you can make calls. After that, you will be able to start calling web3 functions.

Take a look at this "Hello world" tutorial for Web3.js.

Related Topic