Skip to content

Redirects for apps that live on a non-root path (vercel) #12523

@thenbe

Description

@thenbe

Describe the problem

The paths.base option allows a sveltekit app to live on a non-root path, such as /site. This works great.

There is just on hiccup when used with vercel's preview deployments, they have difficulty finding the app. The preview URLs generated by vercel always point at the root /, which means that in order to actually visit the sveltekit app, you must manually append /site to the generated preview URL. Not only does this get tedious after a while, but explaining the issue (and its solution) to non web developers is difficult - they will often assume the entire deployment is broken and just bail.

There is a simple fix. It involves adding a few lines to .vercel/output/config.json (this file is generated by the adapter-vercel):

{
  "version": 3,
  "routes": [
+    {
+      "src": "/",
+      "status": 302,
+      "headers": {
+        "Location": "/site"
+      }
+    },
    {
      "src": "/site/_app/immutable/.+",
      "headers": {
        "cache-control": "public, immutable, max-age=31536000"
      }
    },
    {
      "handle": "filesystem"
    },
    {
      "src": "/.*",
      "dest": "/fn"
    }
  ],
  "overrides": {}
}

Now, I've automated this so that my build script patches this file automatically. But I was wondering if there's a better approach. Originally, I thought I could define the redirect in my own vercel.json file (tried with both redirects and routes), but that never seems to take effect when it deploys to vercel.

Describe the proposed solution

Ideally, the redirect definition should live in the vercel.json. That would go along with the related vercel docs. What is not very clear to me is the interaction between vercel.json and sveltejs/adapter-vercel. Is it expected behavior that redirects defined in a vercel.json are not honored when deploying with adapter-vercel? More docs regarding that interaction could be helpful.

Alternatives considered

The vercel docs also suggest using the framework's solution to define the redirect (i.e. using a +layout.server.ts). But that wouldn't work (I think) since the app itself lives on /site and not on /.

Importance

would make my life easier

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions