Make Astro.url conform to build.format during the build

[matthewp]

Changes

• Makes the Astro.url.pathname match what configuration is set to in build.format.
• This means that if the config is set to 'directory' it will be /page/. If it is set to 'file' it will be /page.html.
• This makes it so that relative URLs you create using Astro.url resolve the way your configuration specifies.
• Fixes 🐛 BUG: Astro.url.pathname is missing trailing slash on prod build #4190

Testing

• Test added for both 'directory' and 'file'.

Docs

• Included in this PR in the astro.ts types file.

[changeset-bot]

🦋 Changeset detected

Latest commit: bfb9ba6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
astro	Minor
@e2e/astro-component	Patch
@e2e/error-react-spectrum	Patch
@e2e/error-sass	Patch
@e2e/errors	Patch
@e2e/hydration-race	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/solid-recurse	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[oliverpool]

Thanks for this PR!

I think it is worth a documentation update:

• trailingslash mentions buildOptions.pageUrlFormat in "See Also" => it should be build.format
• format => a mention that this will affect Astro.url should be added (otherwise the build could be subtly different).

[matthewp]

Good call-out, this change needs docs updates as well.

[oliverpool]

Stupid question: is there a simple way for me to test this branch on my project?

I tried using gitpkg.now.sh, as recommended on SO, but it failed with an error 500
npm install 'https://gitpkg.now.sh/withastro/astro/packages/astro?fix-astro-url-page-format'

[matthewp]

There's not really a good way. Some times we've done PR releases but I'm not sure how involved that is.

[matthewp]

I was able to create a preview release, so you should be able to install with npm install astro@next--format-astro-url

[delucis]

The associated docs PR for this (withastro/docs#1321) actually needs to target the @types/astro.ts file in this repo, so do you want to move those changes into this PR?

[oliverpool]

Using your package 0.0.0-20220816201344 (thank you very much for this!!!!!) here is what I go:

• the astro build behaves as expected in both file and directory cases (for Astro.url & Astro.request.url) 👍
• the astro dev is still depending on the actual browser url:
  • http://localhost:3000/termine/ => Astro.url.pathname == "/termine/"
  • http://localhost:3000/termine => Astro.url.pathname == "/termine" (menu does not get highlighted 😕 )

Both URLs reply, since I use trailingSlash:"ignore" (which is the default).

[matthewp]

Yep, ignore means ignore. It means you want to support both URL patterns. To do this you need to account for the fact that Astro.url might have a trailing slash or might not.

[oliverpool]

My main issue, is that it will behave differently when deployed.

If I use the php server php -S localhost:8090 -t dist, both /termine/ and /termine serve the file /termine/index.html (with Astro.url having the trailing slash).
How can I match this setup with astro dev?

---

I just checked, and my actual hosting (netlify) redirects /termine/ to /termine.
Maybe this would be a nice option addition to trailingSlash: redirect. Shall I open a feature request?

[matthewp]

@oliverpool I don't know if we should reuse this config option to do redirects (maybe!) but the request for some solution is very reasonable. The place to talk about this would be in a discussion here: https://github.com/withastro/rfcs/discussions

[tony-sull]

lgtm

[bluwy]

I've been following the discussion of how trailing slash will work and this makes sense to me 👍

[GrantSmithDoddle]

Sorry if I'm not following, is this issue fixed?

As I am seeing this exact behaviour.

I'm using const canonicalURL = Astro.props.canonicalURL || new URL(Astro.url.pathname, Astro.site);

On running npm run dev, canonicalURL = https://website.com/page
On running npm run build, canonicalURL = https://website.com/page/

My config has:

site: 'https://website.com',
output: 'static',
trailingSlash: 'never'

I'm running "astro": "^2.0.2"

[oliverpool]

@GrantSmithDoddle which page do you visit on npm run dev?

http://localhost:3000/page or
http://localhost:3000/page/ ?

You should probably set trailingSlash: 'always'

I mentioned this shortcoming in #4352 (comment), but AFAIK nothing has been done to prevent this inconsistent behavior...