Browser will not connect to running Geth: NS_ERROR_UNKNOWN_PROTOCOL

Question

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?

Answer 1

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);