Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Deployed React App not loading on Laptop Browsers

I have deployed a React Web App on Azure Static Web App using the free tier with my custom domain. I am able to react the site perfectly fine from mobile devices which includes safari and google chrome phone.
However, when I try to load the site from my laptop edge browser or chrome browser it does not load. Just says this site cannot be reached. When I was developing locally, I was able to view the changes on the chrome browser fine from my laptop, but after deploying the site, it is not available from browsers.

and the site I am trying to reach is https://thephysioai.com/

For ref, here the index.html from the React App that is used for settings

<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
  name="description"
  content="Physio-AI"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png"/>
<!-- Open Graph Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta property="og:title" content="PhysioAI" />
<meta property="og:description" content="Your personalized physiotherapy companion powered by AI." />
<meta property="og:image" content="%PUBLIC_URL%/logo.png" />
<meta property="og:url" content="https://thephysioai.com" />
<meta property="og:type" content="website" />

<!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>PhysioAI</title>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Fixed it, it was because I was missing an A record in my dns setting that should point to the ip address, which I managed to retain from the static web app.

    It had nothing to do with the app rather dns misconfiguration.

    If you are facing similar issue contact the dns provider, they may walk through to resolve the issue.

    Thanks all


  2. 0

    Open a terminal (Bash) and check the Domin with the cmd ping thephysioai.com .

    enter image description here

    • If this fails, then it indicates a DNS issue.

    Check DNS Records with What’s My DNS to check the domain’s DNS records globally.

    • A records point to the Azure Static Web Apps IP address.

    enter image description here

    Directly access the IP in the browser If the site loads via IP but not domain then it is DNS propagation issue.

    enter image description here

    Open site in Chrome or Edge on the laptop. open the developer tools and go to the Console tab.

    enter image description here

    • Look for any errors (CORS issues, SSL errors, or DNS errors and also fail requests with ERR_NAME_NOT_RESOLVED or ERR_SSL_PROTOCOL_ERROR in Network tab.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search