I’m in the process of setting up a node.js app and just got it working on my local machine, but it’s not loading on friends or family’s laptops or my phone.

I followed the instructions in https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-18-04.

I have a few suspicions about what might be causing the problem, but I’m very new to this and wanted to see if you all had any suggestions. In descending order of suspiciousness:

  • I set up LetsEncrypt. I noticed that when the app fails to load on another computer on Chrome, the URL bar is indicating that the URL isn’t secure, even though I have LetsEncrypt and the website shows up as secure on my machine. During setup, I also indicated option 2: Redirect - Make all requests redirect to secure HTTPS access
  • I’m not sure if I’m running Babel properly. I have presets set in my package.json, but not sure if I need to run it manually on the server (this feels wrong, but I don’t know of a better way)
  • I’m running node with node -r esm server.js (with ES6 code, arrow functions and the like). I’ve been testing with the newest versions of Chrome so this shouldn’t be a problem, but I’m not sure, esp. if I’m not using Babel properly
  • Set up IPv6 on my droplet

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

Hi there @alexwbi95,

As the site is loading as expected at your end, it sounds like that it might be the DNS propagation in case that you’ve just recently changed your DNS records. Or it could also be your firewall block the connections from any other IP addresses but yours.

What is the exact error that you see when the site fails to load?

Regards,
Bobby

  • Hi Bobby,

    Thanks for your help! I really appreciate it. I can look into both of your suggestions.

    The exact error I’m seeing is:

    • a blank white screen;
    • a “Not Secure” label next to the URL (I think this might be a core piece of the problem since I have SSL through Let'sEncrypt)
    • Chrome Inspect -> Network tab is showing the request to the website returned a 200 reponse
    • My index.html file was never loaded. Instead, I’m seeing this: (apologies for the long copy paste - not sure if there’s a better way to include code snippets)

    Thanks again for your advice.

    Best,
    Alex

    <html>
      <head>
        <script data-dapp-detection="">
    (function() {
      let alreadyInsertedMetaTag = false
    
      function __insertDappDetected() {
        if (!alreadyInsertedMetaTag) {
          const meta = document.createElement('meta')
          meta.name = 'dapp-detected'
          document.head.appendChild(meta)
          alreadyInsertedMetaTag = true
        }
      }
    
      if (window.hasOwnProperty('web3')) {
        // Note a closure can't be used for this var because some sites like
        // www.wnyc.org do a second script execution via eval for some reason.
        window.__disableDappDetectionInsertion = true
        // Likely oldWeb3 is undefined and it has a property only because
        // we defined it. Some sites like wnyc.org are evaling all scripts
        // that exist again, so this is protection against multiple calls.
        if (window.web3 === undefined) {
          return
        }
        __insertDappDetected()
      } else {
        var oldWeb3 = window.web3
        Object.defineProperty(window, 'web3', {
          configurable: true,
          set: function (val) {
            if (!window.__disableDappDetectionInsertion)
              __insertDappDetected()
            oldWeb3 = val
          },
          get: function () {
            if (!window.__disableDappDetectionInsertion)
              __insertDappDetected()
            return oldWeb3
          }
        })
      }
    })()</script>
    (function() {
      let alreadyInsertedMetaTag = false
    
      function __insertDappDetected() {
        if (!alreadyInsertedMetaTag) {
          const meta = document.createElement('meta')
          meta.name = 'dapp-detected'
          document.head.appendChild(meta)
          alreadyInsertedMetaTag = true
        }
      }
    
      if (window.hasOwnProperty('web3')) {
        // Note a closure can't be used for this var because some sites like
        // www.wnyc.org do a second script execution via eval for some reason.
        window.__disableDappDetectionInsertion = true
        // Likely oldWeb3 is undefined and it has a property only because
        // we defined it. Some sites like wnyc.org are evaling all scripts
        // that exist again, so this is protection against multiple calls.
        if (window.web3 === undefined) {
          return
        }
        __insertDappDetected()
      } else {
        var oldWeb3 = window.web3
        Object.defineProperty(window, 'web3', {
          configurable: true,
          set: function (val) {
            if (!window.__disableDappDetectionInsertion)
              __insertDappDetected()
            oldWeb3 = val
          },
          get: function () {
            if (!window.__disableDappDetectionInsertion)
              __insertDappDetected()
            return oldWeb3
          }
        })
      }
    })()
    
    • Hi Bobby,

      Thanks again for your advice. Just to close the loop on this - I’m not certain on this, but I think it might have been related to SSL. When setting up Let'sEncrypt, I chose option #2, where all requests are converted to HTTPS.

      I ended up creating a new droplet with option #1, which doesn’t force HTTPS, and it worked properly. Documenting here in case it’s helpful for anyone in the future. Thanks for your help!

      Best,
      Alex

      • Hi there @alexwbi95,

        Thank you for sharing the solution here with the community!

        Out of curiosity, what was the exact error that you were seeing in your web console when seeing the white screen?

        Regards,
        Bobby

        • Hi Bobby,

          I wasn’t seeing any errors in the console when seeing the white screen. On the elements tab, my index.html file wasn’t loaded. On the network tab, the request to my domain was showing a 200 response.

          Best,
          Alex

Submit an Answer