Issue accessing GitHub Codespaces Preview URL or Localhost Link

[hamitsehjal]

Hello everyone,

I've been working on the personal website project using GitHub Codespaces, and I noticed an unusual behavior. When I run my application using npm start, the development server starts, and it tells me that the app is accessible at http://localhost:1234. However, upon clicking the link, my browser opens a different URL, namely https://hamitsehjal-reimagined-winner-rw9vwgr9pv6f5wqj-1234.preview.app.github.dev/.

From my research, this redirection is due to a feature called "Port Forwarding" or "Ports Preview" in GitHub Codespaces. It generates a unique URL for each exposed port, allowing access to the locally running application through a publicly accessible URL.

The issue I'm facing is that when I try to access either http://localhost:1234 or https://hamitsehjal-reimagined-winner-rw9vwgr9pv6f5wqj-1234.preview.app.github.dev/, I get an error message saying 'can't reach this page'. This is preventing me from testing my application through the preview URL.

Could you please help me understand why I'm experiencing this issue? Are there any specific configurations or steps I need to follow to access my application through the provided preview URL?

Thank you for your assistance!

[SalemTracey]

@hamitsehjal - do you still need assistance with this issue?

[hamitsehjal]

Hi Tracey, the issue still remains the same. I have been trying to debug for the past week but no luck yet!!

[SalemTracey]

@hamitsehjal - Help is on the way!! I reached to a Cloud Advocate for assistance. Thanks for your patience.

[hamitsehjal]

Thanks Tracey, I appreciate you helping me out!!

[saragibby]

Hi @hamitsehjal! I'm an Advocate at Microsoft and helped create this project, let's try a couple things to see if we can figure out what is going on for you.

You are right, when npm start runs your site is running within your Codespace, and it does create a unique URL for you to access your site. That URL is private though to your Codespace, so to view it you will need to be logged into GitHub with your account. Within your Codesapce the use of localhost won't resolve so you will need to access it with the unique URL generated for you.

As you saw, within your Codespace, in the bottom section you will see a "PORTS" tab where you will see your unique URL generated after npm start completed in the "Local Address" column:

If you hover over the URL you will see 3 icons:

1. Clipboard icon for you to copy the URL
2. Globe icon to open your site in a new tab within your browser
3. Box icon to open your site within your editor in a new tab

With your Codespace running, do you see your site running and an address listed in the "Local Address" column? If so, if you click the globe icon does your site open in a new tab? and if you click the box icon does your site open within the editor?

[hamitsehjal]

HI @saragibby,

With my Codespace running, I see my site running and an address listed in the "Local Address" column. Here is the picture for your reference:

• However, if I click the globe icon, It opens my site in a new tab but that is again: 'can't reach this page', the one I have shown in the above pictures. Here is the picture for your reference:

• If I click the box icon, it does open my site within the editor but that is again not visible. It is a blank off-white page which shows The connection was reset and then shows a Cloud picture. Here is the picture for your reference:

You know what, my repo is "Private" so I tried changing the visibility to public as well. Moreover, in the PORTS TAB, we have a column for "Visibility" for Port. I didn't know how does that affect but I tried changing it to public but the issue persists.

Thanks a lot for helping me out with this Problem!!

[saragibby]

Thanks @hamitsehjal! This is very helpful to see, and to confirm, in the Terminal tab you see your site running from the npm start command like this?

Also, if possible, to get a link to your repo that would be helpful as well.

[hamitsehjal]

Hi @saragibby. I ran my 'CodeSpace' today and the URL is working now. I didn't change anything but the URL works like a charm now. I am able to see the live changes. How did it got fixed????

Anyway Thanks a lot, @saragibby @SalemTracey . You Guys are amazing. If you guys fix it on your end, I would like to know what was the problem.

[hamitsehjal]

Here is the picture for your reference

[saragibby]

Glad to hear this is working for you! ✨ Was this the same Codespace you had been working in, or did you create a new one for the project?

I am curious as well as to what has changed, we have made no updates to that project or Codespace settings. I will see if I can check the change log for Codespaces to see if we can satisfy our curiosity as to what the solution was.

[noochxxo]

I had this same issue and solved it. its easy. On my laptop I opened command pallet and searched for codespaces and clicked on add dev container configuration files and added the ports that were generated from codespaces. Then in my package.json I made a change, see below. I am able to use my laptop and everything works great when I run the server

{
  "image":"mcr.microsoft.com/devcontainers/universal:2",
  "appPort": 5173,
  "forwardPorts": [5173]
}

"dev": "vite --host 0.0.0.0",