Problem with the 'base' parameter in the astro.config.mjs file

[nicolaswunderle]

I followed the Astro tutorial to deploy the site on GitHub Pages (https://docs.astro.build/en/guides/deploy/github/). Here are the problems I encountered locally by adding "base: '/portfolio'" to the config:

1. Running the "npm run dev" command

• Error in the console:
  [ERROR] [router] Request URLs for public/ assets must also include your base. "/scroll-timeline.js" expected, but received "/scroll-timeline.js".
  [ERROR] [router] Request URLs for public/ assets must also include your base. "/snipcart.css" expected, but received "/snipcart.css".
• The favicon is not displayed
• The contact section does not open

2. Run the npm run build command

• Console:
  generating static routes src/pages/images/[slug].astro
  [{
  params: { slug: 'about-us' },
  props: { image: '/src/assets//portfolioabout-us.jpeg' }
  }....]
  /images/about-us/index.html Input file is missing

[preetamslot]

Hi @nicolaswunderle,
I have created an update, can you try again?

[nicolaswunderle]

Hi @preetamslot,
I downloaded the new version and tried the npm run dev and npm run build commands again but I still get the same errors as in my previous message.

[preetamslot]

Ah, sorry I did no look into the base: '/portfolio
I have not used this before.

in the docs it tells us:

When using this option, all of your static asset imports and URLs should add the base as a prefix. You can access this value via import.meta.env.BASE_URL

So to make this work you will have to:

• update all static imports to include the BASE_URL.
• update absolute path links (/images/image_name > /portfolio/images/image_name)

So for snipcart:
find: /snipcart.js and replace with /portfolio/snipcart.js

The error on the image path error is maybe related becouse the images are in a sub-dir?

'''
[{
params: { slug: 'about-us' },
props: { image: '/src/assets//portfolioabout-us.jpeg' }
}....]
'''
try removing the slash from the imageSrc in the getStaticPath function in pages/images/[slug].astro
.

const imageSrc = `/src/assets/${imgParts[0]}.${imgParts.pop()}`;
      
      TO:
const imageSrc = `/src/assets${imgParts[0]}.${imgParts.pop()}`;