netlify preset support for custom baseURL

[issue-up[bot]]

Forwarded from downstream issue: - https://github.com/nuxt/nuxt/issues/22225 by @michaelvcolianna

### Environment ------------------------------ - Operating System: Darwin - Node Version: v20.2.0 - Nuxt Version: 3.6.3 - Nitro Version: 2.5.2 - Package Manager: npm@9.6.6 - Builder: vite - User Config: app, devtools - Runtime Modules: - - Build Modules: - ------------------------------ ### Reproduction **Works with dev OR build & preview:** https://stackblitz.com/github/michaelvcolianna/nuxttest?file=nuxt.config.ts **Deploy, not working:** https://sparkling-mandazi-64484f.netlify.app/test **Repo:** https://github.com/michaelvcolianna/nuxttest Edited to add a URL using `npm run generate` to illustrate the 404s: https://nuxt.mvcdev.net/ ### Describe the bug This feels like this is a Nuxt configuration thing. I guess it could be Netlify but wanted to check here first. I'm experiencing an error similar to https://github.com/nuxt/nuxt/issues/14817, but `npm run build && npm run preview` work fine locally and on Stackblitz. When deployed, though, either on Netlify or using `npm run generate` and serving the dist folder, an error shows up. This is because the files don't exist. When building, the baseURL ("test" for now) is appended before the "_nuxt" part of the resource. The Netlify deployment is looking for https://sparkling-mandazi-64484f.netlify.app/test/_nuxt/entry.624150a5.js, which is the MIME error because of the catchall serving it as a real page. It _should_ be looking for https://sparkling-mandazi-64484f.netlify.app/_nuxt/entry.624150a5.js. Serving from dist is looking for `localhost:8081/test/_nuxt/entry.a65c34ed.js`, which is a 404 since the SSG crawler doesn't create the file. It _should_ be looking for `localhost:8081/_nuxt/entry.a65c34ed.js`. (I know those file names aren't set in stone but hopefully they get the point across.) ### Additional context First, this issue happened prior to using the catchall. I tried a base Nuxt instance with the app.vue file, then converted that to use `` and made `pages/index.vue` but switched to the catchall to show the MIME error instance. Without the catchall the JS files 404 because root cause is they don't exist in the requested location. (Plus, down the line, the final site will need the catchall anyway.) I've tried adjusting Nuxt config settings, like `app.buildAssetsDir` and `vite.build.assetsDir`. In either case, it wouldn't let me use a relative path - since I wanted to remove the baseURL from the request I tried `../` and just an empty string. I also tried adding "test" in there, but then it was looking for files in `/test/test/_nuxt`. I've also tried adjusting stuff on the Netlify side. For serving after SSG, I've tried configuring aliases/etc. on the web server side. I feel like this is a really simple solution I'm overlooking and someone will see it right away. I'm hoping it isn't put everything under the desired baseURL in the pages directory, but if that's the best way to achieve it then I'll do that. Thanks for any insight! ### Logs ```shell-script Browser console for Netlify deploy: - Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. entry.624150a5.js:1 - Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. _...slug_.8187cdda.js:1 Browser console for SSG: - Failed to load resource: the server responded with a status of 404 (Not Found) entry.a65c34ed.js:1 - Failed to load resource: the server responded with a status of 404 (Not Found) _...slug_.b619b6b1.js:1 ```

[PichlerJoh06]

any news here? facing the same problem serving over docker container on a domain in a sub-path like:

• my-domain.com/my-nuxt-app-1
• my-domain.com/my-nuxt-app-2
• my-domain.com/my-nuxt-app-3

[gavmck]

This is awkward, I've just spent a month upgrading a site to vue/nuxt 3 to find out I can't ship it to subfolders on netlify.

edit: I've written a node script that runs post build to dump everything in the folder where the routes think it is.

[exophunk]

This was a supported feature in Nuxt 2. Same as @gavmck, we're at the end of a 6 month dev phase to find out Nuxt 3 is not supported anymore in a subfolder on netlify?

• There should be at least a huge red warning in the Nuxt/Nitro docs, saying baseUrl is not supported for netlify.
• Does this bug also affect other solutions like Vercel?

@gavmck can you maybe share your node script that you used on netlify? And where/how do you run this?

[gavmck]

@exophunk Here you go. We haven't gone to prod, yet but it seems to work on deploy previews. We run it as part of the build command right after the build finishes.

// The build needs to go from /dist/ into /dist/${env.SITE_CODE} or it doesn't work on netlify
// This script moves the build to the correct location
const fs = require('fs')

const siteCode = process.env.SITE_CODE

if (!siteCode) {
  throw new Error('SITE_CODE is not defined')
}

const source = process.env.DIST_SOURCE || 'dist'

if (!fs.existsSync(source)) {
  throw new Error(`Source directory ${source} does not exist`)
}

const destination = `${source}/${siteCode}`

if (fs.existsSync(destination)) {
  throw new Error(`Destination directory ${destination} already exists`)
}

fs.mkdirSync(destination)

fs.readdirSync(source).forEach((file) => {
  if (file !== siteCode) {
    fs.renameSync(`${source}/${file}`, `${destination}/${file}`)
  }
})

[exophunk]

The paths are correct, the problem is that the assets are not there. When specifying baseUrl, this should be re-created in .output/public/ folder. e.g. baseUrl=/test/ should store ouput at .output/public/test/

Because nuxt correctly looks for .../test/_nuxt/abc123.js, but the files are actually at .output/public/_nuxt/abc123.js.

This is not only a Netlify issue, but the same for Cloudflare Pages (and I assume most other hosting solutions too). It somehow works with nuxi start but for me, both netlify and cloudflare pages (including hub.nuxt.com) do not work

At the moment, the nuxt config describes a baseURL option, but that simply does not work beyond local development. It works with the custom netlify plugin (manually move folders), but I don't know how to do this for other services.

Shouldn't baseUrl work for nuxt?

[atinux]

I think the fix should be similar to https://github.com/unjs/nitro/pull/2464/files if someone wants to take a stab at it

Regarding Cloudflare I opened #2821