canonicalUrl doesn't match in dev and prod

[kevinzunigacuellar]

What version of astro are you using?

1.1.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When making a canonical URL:

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

dev server will output a URL without a trailing slash

<link rel="canonical" href="https://example.com/blog">

while build will generate a URL with trailing slash

<link rel="canonical" href="https://example.com/blog/">

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-s2tqe2

Participation

• I am willing to submit a pull request for this issue.

[MoustaphaDev]

This is expected. In dev mode the url trailing slash handling is forgiving by default and doesn't add trailing slashes to the routes urls. However, at build time trailing slashes are added by default

Quoting the docs:

Setting build.format controls what Astro.url is set to during the build. When it is:

• directory - The Astro.url.pathname will include a trailing slash to mimic folder behavior; ie /foo/.

[kevinzunigacuellar]

I see I was expecting both dev and prod to match. Also, I just realized that the Astro.url already contains the pathname and the site so the canonical URL can be written as

const canonicalUrl = new URL(Astro.url).href

or even just

<link rel="canonical" href={Astro.url} />

Thank you I am not quite sure if this is an issue now 😅 but I think it would be a better DX to match outputs both in dev and prod. Feel free to close this issue.

[bluwy]

I think this is expected at the meantime as showed by @MoustaphaDev. For context, this change was made in #4352, and the reason it's not made consistent in dev is to prevent a breaking change. It's certainly something we can align in the future, but for now it's something to keep in mind. Closing the issue for now.