Home
Support Forums

Nested routes with internal routing and Vite

I have two projects I am trying to deploy to domains ‘leadgem-website.netlify.app/’ and ‘leadgem-website.netlify.app/dashboard/’, but the second route is not working.

My first website, (‘leadgem-website.netlify.app’, the ‘/‘ route), appears to work well, and is a simple Vue 2 project. My redirects look like the following for this site:

[[redirects]]
  from = "/"
  to = "/index.html"
  status = 200

[[redirects]]
  from = "/login"
  to = "/index.html"
  status = 200

[[redirects]]
  from = "/signup"
  to = "/index.html"
  status = 200

[[redirects]]
  from = "/dashboard"
  to = "https://leadgem-dashboard.netlify.app/"
  status = 200

My second website, ‘leadgem-dashboard.netlify.app’, the ‘/dashboard/‘ route, uses Vue 3 and Vite, and there are about three different places to specify the “base” route that the site is deployed on. Once in the router as an argument to the Vue’s “createWebHistory” function (API Reference | Vue Router), once in my vite.config.js as “base” (Configuring Vite | Vite), and once in my vue.config.js as “publicPath” (Configuration Reference | Vue CLI). I’ve tried about every combination I can think of among the three, setting all to ‘/dashboard/’, setting some to ‘/‘, etc… For context, my build command is vite build, and I’m trying to serve files out of a standard dist/ folder.

My redirects file for the dashboard website looks like the following:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Have been seeing two different errors on the dashboard route so far. One failure mode is just 404’s on all the assets, and the other is a strange “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” error. Not super sure what to make of the latter.

My questions are then, given nested routing of two applications that manage their own routes, what should the netlify.toml look like for both projects?

And for the second website, the ‘/dashboard/‘ route, what should all those config files look like? Should all of them be pointing to the ‘/dashboard/‘ route, or some combination of ‘/dashboard/’ and ‘/‘?

Thanks!

Hi @Sidworld,

The problem is in https://leadgem-dashboard.netlify.app/, the assets are available at /assets/ folder, but the URLs are turning out to be /dashboard/assets/. Thus, they’re returning 404 and the content-type for the 404 page is text/html which is causing the problem. I’d advise you to check the routes and see if the assets are being correctly called from the correct URLs.

Your dashboard website returns this HTML:

image

As you can see, those URLs don’t exist. I can’t comment o Vite/Vue configs or changes as I’m not well-versed with them. But, in short, the CSS/JS files should exist at the URLs in the HTML file or the HTML file should have the correct URLs. With your current configuration, I think the base way to go forward is to use absolute URLs instead of relative ones. You can make this change easily by enabling asset optimisation from Netlify build settings and that might do it.