base path in config and anchor links in html

[worthy pebble]

When you configure the base path it won't affect dev, but will properly update styles and assets included using import however it won't update images and a tags which use src or href. I can't find anything in the documentation or in the repo, other than that it won't be possible to update the links in html or image assets. https://github.com/withastro/astro/issues/4128#issuecomment-1231600019

However since base doesn't apply in dev, I need a way to not have a base path in dev for local links to work, and a way to have them on production when it does apply base. Was there a helper or some logic to use so these links are all correct?

[worthy pebble]

Trying to work through this with docs. I did a console log of Astro and found that it seems to contain the pathname on local even though it says in the docs for base that it wouldn't on my local

url: URL {
    href: 'http://127.0.0.1:3000/cloudflare-error-pages/',
    origin: 'http://127.0.0.1:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: '127.0.0.1:3000',
    hostname: '127.0.0.1',
    port: '3000',
    pathname: '/cloudflare-error-pages/',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },

[worthy pebble]

ok, looks like it is possible in the config to make that base path something different based on environment

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";

const base = process.env.NODE_ENV === 'production' ? '/cloudflare-error-pages' : '/';

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()],

  // GitLab Pages requires exposed files to be located in a folder called "public".
  // So we're instructing Astro to put the static build output in a folder of that name.
  outDir: 'public',

  // The folder name Astro uses for static files (`public`) is already reserved
  // for the build output. So in deviation from the defaults we're using a folder
  // called `static` instead.
  publicDir: 'static',

  // GitLab pages are served from a directory not the root of the domain.
  base: base

});

Then in the pages I could use this

const baseURL = (url) => {
  return Astro.url.pathname + url;
}

and in the link

<a href={ baseURL("cf-500") } target="_base">
                  500 Class Errors
                </a>

Is there a better way of doing this?

[jaunty sedge]

I'm working on trying to figure this out as well. hopefully it gets some attention