6
r
Riya Jadhav

Unable to serve on http://localhost:8080

Hi,
When I run ethers-build serve, it doesn’t server on the localhost:8080 instead only on the testnet sites – see below:

—-
serving content from file:///Users/username/blockgeeks/3_decentralisedApps/explorerapp
Listening on port: 8080
Local Application Test URL:
mainnet: http://ethers.io/#!/app-link-insecure/localhost:8080/
ropsten: http://ropsten.ethers.io/#!/app-link-insecure/localhost:8080/
rinkeby: http://rinkeby.ethers.io/#!/app-link-insecure/localhost:8080/
kovan: http://kovan.ethers.io/#!/app-link-insecure/localhost:8080/

Can you please advise how to serve locally, I even tried enforcing –host as localhost and –port 8080 but couldn’t get it to work.

Pls help!

Thanks,
R

Answers

  1. 6
    Jack Wu
    Jack Wu

    Hi Riya, ethers is serving your content locally but it wraps things inside its own container which contains a bunch of built in functionalities. Notices the links at the end has ‘localhost:8080’, for example the mainnet, ‘http://ethers.io/#!/app-link-insecure/localhost:8080/’. Once you load up that link, just click “enable insecure dapp” button and you should be able to see your custom html being loaded. Hope this helps.

  2. 6
    haseebrabbani
    haseebrabbani

    Hey Riya, to add a bit more to Jack’s answer: all ethers apps run inside of an ethers “container”. There is an ethers container running at http://ethers.io for your convenience provided by the author of ethers, Richard Moore. See the developer docs for more details on this architecture: https://docs.ethers.io/ethers-app/html/dev-overview.html

    But you can also access your app locally by visiting “http://localhost:8080/#!/app-link-insecure/localhost:8080/” (just replace ethers.io in the URL with localhost:8080). This will serve your app inside the locally running instance of the ethers container (instead of the container running at http://ethers.io)

  3. 6
    Steven Milstein

    I’m experiencing the same trouble as Riya. The HTML loads but fails to ethers.onready fails to load.

    I also followed the ethers docs and changed the script to:

    console.log(‘ethers getting ready…’); // this works
    ethers.onready = function() {
    console.log(‘ethers ready now!’); // this does not work
    };

  4. 6
    haseebrabbani
    haseebrabbani

    Hey Steven, are there any errors being printed in your browser console when you load the page? Also, have you included the ethers-app.js script in your HTML?

  5. 6
    Steven Milstein

    haseebrabbani, Here’s my terminal:

    $ ethers-build serveServing content from file:///Users/stevenmilstein/Sites/blockgeeks/eth101/src/3_dapps/explorerListening on port: 8080Local Application Test URL:  mainnet: http://ethers.io/#!/app-link-insecure/localhost:8080/  ropsten: http://ropsten.ethers.io/#!/app-link-insecure/localhost:8080/  rinkeby: http://rinkeby.ethers.io/#!/app-link-insecure/localhost:8080/  kovan:   http://kovan.ethers.io/#!/app-link-insecure/localhost:8080/

    Here’s my HTML:

    <html><head>  <title>Blockchain Explorer</title </head>  <body>    <table id=”blocks” width=”100%”>      <tr>        <th>Number</th>        <th>Hash</th>        <th>Timestamp</th>      </tr>    </table>    <!– Optional; only required if you require the Web API –>    <script src=”/scripts/web3.js”></script>    <!– Loads and connects to the Ethereum network –>    <script src=”https://cdn.ethers.io/scripts/ethers-app-v0.4.min.js” charset=”utf-8″ type=”text/javascript”>    </script>    <script>      console.log(‘ethers getting ready…’);      ethers.onready = function() {        console.log(‘ethers ready now!’);      };    </script>  </body></html>

    Using Chrome with MetaMask:When I open http://localhost:8080/_/#!/app-link-insecure/localhost:8080/, the page only shows the row headers. Nothing from ethers and the console displays: ethers getting ready…When I open http://ethers.io/#!/app-link-insecure/localhost:8080/, I click the Enable Insecure dApps button, the page shows the ethers header with MetaMask, the table row headers and the console displays: 

    (index):186 [Ethers Container] Found Fragment URL: http://localhost:8080/(index):186 [Ethers Container] Connected Provider: network=homestead, chainId=1inpage.js:1 MetaMask: web3 will be deprecated in the near future in favor of the ethereumProvider https://github.com/MetaMask/faq/blob/master/detecting_metamask.md#web3-deprecationget @ inpage.js:1(anonymous) @ (index):186updateBalance @ (index):186MetaMaskAccount @ (index):186(anonymous) @ (index):186(anonymous) @ (index):186(anonymous) @ (index):186(anonymous) @ (index):186(index):186 [Ethers Container] Initial Account: MetaMaskAccount {isMetaMask: true, web3: Proxy, provider: Web3Provider, signer: Web3Signer, nickname: “MetaMask”, …}(index):186 [Ethers Container] Ready/#!/app-link-insecure/localhost:8080/:1 [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) <input placeholder=​”password” type=​”password” value>​favicon.ico:1 GET http://ethers.io/favicon.ico 403 (Forbidden)(index):186 [Ethers Container] Loaded: http://localhost:8080/(index):21 ethers getting ready…

    In MetaMask, I created a new custom RPC URL with  http://ethers.io/#!/app-link-insecure/localhost:8080/, but it is not able to connect. Same for localhost:8080.Using Firefox without MetaMask:When I open http://localhost:8080/_/#!/app-link-insecure/localhost:8080/, the page only shows the row headers. Nothing from ethers and the console displays:

    ethers getting ready… localhost:8080:21:7 TypeError: “alert” is read-only Stack trace: ./content/selenium-browserbot.js/BrowserBot.prototype.modifyWindowToRecordPopUpDialogs@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:43774:249 ./content/selenium-browserbot.js/BrowserBot.prototype._modifyWindow@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:43727:44 ./content/selenium-browserbot.js/BrowserBot.prototype.getCurrentWindow@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:43868:541 ./content/selenium-browserbot.js/BrowserBot.createForWindow@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:43655:50 ./content/commands-api.js@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:41912:866 __webpack_require__@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:30:12 ./content/record-api.js@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:42058:326 __webpack_require__@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:30:12 ./content/record.js@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:42083:292 __webpack_require__@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:30:12 [3]@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:50704:18 __webpack_require__@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:30:12 @moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:73:18 @moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:11:18 webpackUniversalModuleDefinition@moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:7:11 @moz-extension://0bd477e8-e21d-da4a-aa27-0f760c74976f/assets/record.js:1:11 record.js:43727:103 Use of Mutation Events is deprecated. Use MutationObserver instead.

    When I open http://ethers.io/#!/app-link-insecure/localhost:8080/, I’m prompted to create a new account over a non-secure connection.Thanks

  6. 6
    haseebrabbani
    haseebrabbani

    Hey Steven, I tested your provided HTML and found a syntax error: the end </title> tag is not correctly closed with a pointy bracket. When I fixed this, I was able to see the ‘ethers ready now!’ message. Please let us know if you have further issues