[WeWeb + Vercel SPA Routing] – How do you handle deep links like /project/:id/tasks without losing the route?

Developer corner
1

Hey everyone,

I’m currently building a Single Page Application (SPA) in WeWeb and hosting it on Vercel via manual export or GitHub deployment.

I’m running into a common but annoying issue, and I’m curious to hear how others have solved this.

The problem:

If I visit a deep link directly in the browser like:

https://****.com/de/project/36edf46e-d554-41b7-8449-3a0f06b9fb99/tasks

… I end up on a 404 page or get redirected to the homepage (/en/), instead of seeing the actual project page.

I understand this is expected behavior with SPAs:

The server doesn’t know how to handle the route and must redirect everything to index.html.

So I added the standard Vercel SPA rewrite config:

// vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

This correctly loads my SPA when hitting unknown routes. But it always lands me on /de/ (the app start page), and I lose the original route (/project/:id/tasks)

WeWeb generates a flat folder with this minimal index.html at the root:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.location.href = "/en/"
    </script>
  </head>
</html>

This means that every route gets forcibly redirected to /en/, and the dynamic path is lost.

The internal router (presumably Vue-based) inside WeWeb can’t “rehydrate” the original path unless it’s preserved manually.

I would love to know:

  • How do others deal with this situation when using WeWeb exports + Vercel (or Netlify)?

  • Is there a clean WeWeb-native way to preserve the dynamic route?

  • Does WeWeb plan to offer better support for SPA-friendly exports without hardcoded redirects?

Would appreciate any experience, guidance, or links you can share. I feel like this must be a common situation for anyone self-hosting a WeWeb SPA.

Cheers,
Fynn

Reload Page makes it blank & copy URL link renders them useless
2

Hi Fynn :waving_hand:

This is an advanced question about self-hosting that goes beyond my knowledge.

I’ll ask someone from the team to see if they can help you get an answer.

4

Hi Fynn,

Had the similar problem with Nginx server. The issue was exactly with multi-language paths inside the project files.

Right now you fallback redirects to the root /index.html file and the path is lost. Weweb make separate folders for each language, so you need to create proper fallbacks for each language locale you have inside the project.

Here’ an example of proper config, it should solve the problem:


{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "trailingSlash": true,
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ],
  "rewrites": [

    { "source": "/assets/:path*", "destination": "/assets/:path*" },
    { "source": "/(serviceworker.js|manifest.json|robots.txt|sitemap.xml|favicon.ico)", "destination": "/:1" },

    { "source": "/de/:path*", "destination": "/de/index.html" },
    { "source": "/en/:path*", "destination": "/en/index.html" }

  ],
  "redirects": [
    { "source": "/", "destination": "/en/", "permanent": false }
  ]
}
3 Likes
5

Hey Batik, thank you so much for your help! That fixed my problem perfectly. I also realized it was due to the language in /en/ in the URL, so I disabled it, and that solved the problem.

2 Likes
6

Amazing, @Batik_Okazov to the rescue!

1 Like