javascriptconfigvercel

vercel.json config for SPA with multiple directory URLs

I've set up a simple vanilla JS SPA webapp and been having trouble figuring out how to fix some routing issues I hope can be solved with proper vercel.json config or similar.

The website is live here: https://kor.nz/

The website code is public here: https://github.com/kormyen/home

I've had to break the URLs below as StackOverflow said "Your question appears to be spam."

You will see that this one directory deep URL works: kor_nz/projects However this two directory deep URL does not load: kor_nz/projects/home

You can route successfully from either of the first to URLs to the third, but not refresh, open in a new tab or click a link to the third.

I can see that with the two directory deep URL kor_nz/projects/home that it is serving every file request with the content of index.html instead of their respective jpg, css, js etc.

My current semi-functioning (explained above) vercel.json file is currently:

{
  "trailingSlash": false,
  "rewrites": [
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

I have tried several attempts to make this work, but giving up and asking for help :)

{
  "routes": [
    {
      "src": "/(.*\\.(js|css|png|jpg|gif|svg|woff2?|eot|ttf|otf))$",
      "dest": "/$1"
    },
    {
      "src": "/.*",
      "dest": "/index.html"
    }
  ]
}

Is the same.

{
  "rewrites": [
    {
      "source": "/:path*.js",
      "destination": "/:path*.js"
    },
    {
      "source": "/:path*.css",
      "destination": "/:path*.css"
    },
    {
      "source": "/:path*.png",
      "destination": "/:path*.png"
    },
    {
      "source": "/:path*.jpg",
      "destination": "/:path*.jpg"
    },
    {
      "source": "/:path*.gif",
      "destination": "/:path*.gif"
    },
    {
      "source": "/:path*.svg",
      "destination": "/:path*.svg"
    },
    {
      "source": "/:path*.woff",
      "destination": "/:path*.woff"
    },
    {
      "source": "/:path*.woff2",
      "destination": "/:path*.woff2"
    },
    {
      "source": "/:path*.eot",
      "destination": "/:path*.eot"
    },
    {
      "source": "/:path*.ttf",
      "destination": "/:path*.ttf"
    },
    {
      "source": "/:path*.otf",
      "destination": "/:path*.otf"
    },
    {
      "source": "/:path*",
      "destination": "/index.html"
    }
  ]
}

Is the same.

{
  "rewrites": [
    {
      "source": "/:path((?!^_next|api).*)",
      "destination": "/index.html"
    }
  ]
}

Is the same.

{
  "rewrites": [
    {
      "source": "/:path*/:file+",
      "destination": "/:path*/:file+"
    },
    {
      "source": "/:path*/",
      "destination": "/:path*/index.html"
    }
  ]
}

Works for the homepage but not any directories, resulting in a 404 response.

I suspect a solution might look something like this, but need some pointers.

Otherwise if I must rebuild the site differently thats frustrating but so be it.

{
  "rewrites": [
    {
      "source": "/:path*/:file+",
      "destination": "/:path*/:file+"
    },
    {
      "source": "/:path*/",
      "destination": "/:path*/index.html"
    },
    {
      "source": "/:path*//:path*/",
      "destination": "/index.html"
    }
  ]
}

what you expected to happen

I expect to be able to access any url on my website including;

Solution

  • Your vercel.json is correctly configured. However, your asset paths are wrong in your index.html

    Change

    <link rel="stylesheet" href="asset/style.css" />

    to this:

    <link rel="stylesheet" href="/asset/style.css" />

    Note the added / in front of the asset path.