localhost port number confusion and strange behaviour on different ports when running an Astro project

[whitep4nth3r]

Describe the bug

There's conflicting information in the CLI output when running netlify dev for an Astro project. (This actually also apply to other frameworks where they use a different port for by default.)

When you run netlify dev and the framework portion of the output appears, you see that Astro is going to start on port 3000 in two separate messages.

First:

> astro dev

  🚀  astro  v2.0.2 started in 31ms

  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose

Second:

✔ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml

However, the CLI opens a browser window on port 8888 and states that the development server is ready on this port.

◈ Server now ready on http://localhost:8888

HOWEVER, this is where things get a little weird.

The following behaviour is found in this Astro project.

Features of this project (using the new hybrid rendering of Astro 2.0):

1. It's using the Netlify Edge Adapter as detailed in the config file
2. index.html is using edge SSR
3. A number of pre-rendered routes are created at build time

The weird stuff

1. When I run netlify dev, BOTH localhost:3000 and localhost:8888 serve the index.html page.
2. ONLY localhost:3000 serves the prerendered routes!
3. Furthermore on localhost:8888 the CSS file gives a 404 but is served correctly on localhost:3000.

09:39:47 AM [serve] 404           /_astro/_clip_id_.8041319c.css

This issue is also recreated on the deployed site where the index.html is served correctly, but all prerendered routes return a 404. Interestingly the CSS is served correctly on the live site.

I submitted this as a CLI issue initially due to the port confusion, but there's also something going on with the build process on a live site.

Steps to reproduce

In development using the Netlify CLI:

1. Clone this Astro project.
2. Run netlify dev and observe that both localhost:3000 and localhost:8888 serve the index page.
3. Scroll down to the hidden links on the index page, and navigate to one of the prerendered routes.
4. Observe that on localhost:3000 the prerendered routes are served, but on localhost:8888 they 404.

On the live site:

1. Visit this live site
2. Notice that the index page renders correctly
3. Visit a prerendered route, such as this one and notice that it returns a 404.

Configuration

[build]
  command = "astro build"
  publish = "dist"

Environment

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 961.39 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
 npmGlobalPackages:
    netlify-cli: 12.10.0