Allow relative base (linking of assets and base) / vite embeded deployment

[Phynecs]

What version of astro are you using?

v1.0.0-beta.28

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

None

What package manager are you using?

npm

What operating system are you using?

Linux, Windows

Describe the Bug

I need my site to be able to deploy with out predefined root/path.
To be able to deploy the site like that I would need astro/vite to generate paths for links/styles/js relative and not absolute like it currently is.
The reason for me to want to deploy the site with relative paths is convenience, but also in Gitlab Pages (and probably Github and other forges) the site is accessible from two URLs at the same time:

The only way to support this, is to have relative paths.

what I did

If I set the base to an empty string, the site should be generated for "embedded deployment" => relative paths.
This is also described in the official documentation of vite: https://vitejs.dev/config/#base
the configuration used in the two examples below for vite.config.js and astro.config.mjs

export default defineConfig({
  integrations: [],
  base: '',
});

want

This works with out a problem in the build output npm run build of a site created with npm init vite and the config from above in vite.config.js:
<link rel="stylesheet" href="assets/index.cf80e917.css">
<a href="posts">Read more</a>
working example (vite svelte): https://stackblitz.com/edit/vitejs-vite-4elyud?file=vite.config.js

have

If I create the site with npm create astro@latest the build output has absolute paths when using the config from above in astro.config.mjs:
<link rel="stylesheet" href="/assets/asset.c871d887.css"></link>
<a href="/posts" class="astro-QAKS6ZHX">Read more</a>
working example (astro with vite): https://stackblitz.com/edit/github-99rdyj-an7xgv?file=astro.config.mjs

past conversations

• https://discord.com/channels/830184174198718474/845451724738265138/968162495292395591
• Allowing Vite to handle base config for deploying to subpaths #3178 (comment)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-99rdyj-an7xgv?file=astro.config.mjs

Participation

• I am willing to submit a pull request for this issue. <= I'm sadly missing the programming/js knowledge for that.

If I missed anything please let me know.

[natemoo-re]

Related to #2561, assigning to @tony-navillus to tackle soon.

[FredKSchott]

Interesting! I thought that we already supported this, and that this was existing behavior. Looks like we may be mixing relative and absolute based on the use-case.

[Phynecs]

Muhymin tried to override base config, but Astro still set an absolute base:

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  base: "./",
  experimental: {
    integrations: true,
  },
  integrations: [
    {
      name: "path-denormalizer",
      hooks: {
        "astro:config:setup": function ({ config, updateConfig }) {
          console.log(config.base);

          return updateConfig({ base: "./" });
        },
        "astro:config:done": function ({ config }) {
          console.log(config.base);
        },
      },
    },
  ],
});

Muhymins comment:

I tried to force overwrite the base config and I was successful but Astro is still not respecting it 😞 .

If there is anything I can help with (apart from writing js, because I'm currently missing the time to learn that), I'll gladly do so, I really hope this is fixable without a breaking change. Especially when looking at the planed v1 release.

[tony-sull]

Looks like there's a very recent Vite PR that adds better support for this!

We'll be able to add this support properly once Vite 3.0 is released and pulled into Astro :party:

[Phynecs]

vite 3.0 has finally landed: https://github.com/vitejs/vite#packages
stoked to soon work on my site again 🎆🎉

[andresantiagohellmann]

I'm using version 1.0 and I still can't get the relative path with the "base: './'" in the settings. Any alternative to make this work?

[rishi-raj-jain]

@andresantiagohellmann I think you can use import.meta.env.BASE_URL

[matthewp]

Closing in favor of #4229