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()}`;