I think netlify dev has a different path parse policy

Support
1

While I am working on a vanilla Javascript project in dev environment with Netlify-cli, I came across a weird issue on parsing relative path.

The situation is like this.

When I click an anchor tag linked to “/projects/colors”, server responds with 404 message. Inspecting the request URL for CSS file was /projects/style.css, not /projects/colors/style.css which I originally expected.

What is interesting is if I change anchor href to “/projects/colors/”(with trailing slash at the end), everything goes fine.

Even when I specify the path of CSS file in an absolute path, everything works so fine.

I cannot figure out why this happens only in dev environment.

I need help understanding why this happens in a nutshell.

├── projects
│ ├── colors
│ │ ├── colorTable.js
│ │ ├── index.html
│ │ ├── main.js
│ │ └── style.css
│ ├── hexcolors
│ │ ├── index.html
│ │ ├── main.js
│ │ └── style.css
│ └── random-quotes
│ ├── index.html
│ ├── main.js
│ └── style.css
├── index.html
├── style.css
└── yarn.lock

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>25 Vannilla JS Projects</title>
  </head>
  <body>
    <main class="App">
      <h1>25 Vannilla JS Projects</h1>
      <h2>click an image card to navigate our page</h2>
      <hr />
      <div class="card-list">
        <a href="/projects/colors">
          <div class="project-card">Colors</div>
        </a>
        <a href="/projects/hexcolors">
          <div class="project-card">CSS Gradient Generator</div>
        </a>
        <a href="/projects/random-quotes">
          <div class="project-card">Random Quotes</div>
        </a>
      </div>
    </main>
    <script src="./main.js" type="module"></script>
  </body>
</html>

/projects/colors/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main class="App">
      <div class="container">
        <button
          class="btn btn-outline-dark"
          id="color-gen-button"
          type="button"
        >
          Click Me!
        </button>
      </div>
    </main>
    <script src="main.js" type="module"></script>
  </body>
</html>
2

This has nothing to do with Netlify CLI, instead how browsers work.

/path resolves to the root of the site
path resolves to the root of the current directory.

1 Like
3

Thank you for the response!

By the way, I am still wondering why the server sends me 404 error for css file when I request “localhost:8888/projects/colors” although there exist all the resources(index.html, main.js, style.css) for rendering “projects/colors” page in /projects/colors directory.

Page with error

image
image1275×272 42.4 KB

Intended page

image
image1275×999 26 KB

When I request “localhost:8888/projects/colors/”(url with trailing slash) it works fine both in dev and production.

Does trailing slash at the end of the url affects resolving paths of css file?

 <a href="/projects/colors">
          <div class="project-card">Colors</div>
        </a>

and

 <a href="/projects/colors/">
          <div class="project-card">Colors</div>
        </a>

?

4

Yes, the trailing slash at the end of the URL can affect how paths are resolved, especially in the context of Netlify’s URL normalization and Pretty URLs feature.

Netlify’s CDN edge nodes perform URL normalization before the redirect rules are applied. What this means for your redirect rules is that Netlify will match paths to rules regardless of whether or not they contain a trailing slash.

For example, these rules are effectively the same:

/blog/title-with-a-typo    /blog/typo-free-title
/blog/title-with-a-typo/   /blog/typo-free-title

However, you cannot use a redirect rule to add or remove a trailing slash.

Netlify’s Pretty URLs feature, which is enabled by default for sites, standardizes your URLs. When Pretty URLs are enabled, Netlify forwards paths like /about to /about/ and rewrites paths like /about.html to /about/.

So, in your case, both /projects/colors and /projects/colors/ would be treated the same way by Netlify due to URL normalization and the Pretty URLs feature.

I’m attaching some documentation that details pretty urls.
File-based configuration | Netlify Docs.

1 Like