3

My Geth tutorial Greeter contract runs fine from the command line. I tried to make a front end that just outputs the string from Greeter, but the browser console returns the error, 'NS_ERROR_UNKNOWN_PROTOCOL.'

I tried the suggestions from here:

How to connect a web site to a geth node?

using --rpccorsdomain and --rpcaddr flags referencing localhost and port 8080 which my bootstrap frontend references, but same error.

Other ideas? Any working examples of backend blockchain contracts to front end UI's?

Thanks.

UPDATE to clarify, here are my configuration/execution steps:

  1. Installed web3.js into project using Bower. Verified it is referenced in project index.html.

  2. Ran CLI GETH Client with: geth –rpc –rpcaddr localhost --rpcport 8545 --rpccorsdomain “http://127.0.0.1:8080” observed it is syncing properly - running “net” in attached console shows 11 peers.

  3. Run an http-server from project folder: http-server –p 8080

  4. My project’s app.js file sets up HttpProvider following docs guidance:

    // Dependencies
    var Web3 = require('web3');
    // Initialize connection
    var web3 = new Web3();
    
    if (typeof web3 !== 'undefined') {
          web3 = new Web3(web3.currentProvider);
    } else {
        // set the provider you want from Web3.providers
        web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
    }
    
  5. HTML page function call includes: console.log("HttpProvider: " + web3.currentProvider)

The app.js function log output: “HttpProvider: undefined”

Clearly, I’m misconfigured, but how?

  • 1
    How did you connect to your local node via the JS console? Did you specify http://? – Péter Szilágyi Mar 23 '16 at 12:38
  • Thanks for the comment. It helped me trace, but still not seeming to connect my HttpProvider. I edited my original post above to document my steps. Any more insights? Thanks – Bill LaPrise Mar 23 '16 at 19:23
  • I am also trying to get the contract information in UI which is deployed in NODEJS.Could you please share me the your working code. Thanks, Bala – user4230 Sep 8 '16 at 10:44
3

I fixed it. UI front-end now works, pulling contract data through to the browser.

I was not careful with my port references between geth/cors, http-server, and the one referenced in my UI javascript as Péter Szilágyi sniffed out. I list my working steps below to help others trace similar problems:

First: start geth using: geth --rpc --rpccorsdomain="http://localhost:3000" //presuming the UI will be run on port 3000

Second: Launch the http server on the above referenced port. In my case, used the npm installed module 'http-server': http-server -p 3000 //must match the port referenced in rpccorsdomain above.

Third: Made sure web3 was installed with npm. Linked app.js to index.html and included this code at the top:

 var Web3 = require('web3');

// Initialize connection
 var web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));  //may want to test for non-existence first per docs
 var ABI = [...]
 var greeterAddress = "..."
 var greeter = web3.eth.contract(ABI).at(greeterAddress);

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.