aldnav

Background

Handling redirects on Netlify is straightforward. After all, one has to only add a few entries in the _redirects file or in the netlify.toml file.

Here’s how one may do it in the netlify.toml file.

[[redirects]]
  from = "/blog/*"
  to = "https://blog.example.com/blog/:splat"
  status = 200
  force = true

Running with the above configuration, one may expect that the following URLs will be redirected to https://blog.example.com/blog/awesome-article when a visitor enters https://example.com/blog/awesome-article.

Testing on local Netlify dev (here using my blog website that has recently been integrated with my main portfolio website ).

$ ntl dev
ntl dev
◈ Netlify Dev ◈
◈ Setting up local development server
◈ Starting Netlify Dev with Qwik
✔ Waiting for framework port 5173. This can be configured using the 'targetPort' property in the netlify.toml

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘


  VITE v4.0.1  ready in 2911 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
✔ Setting up the Edge Functions environment. This may take a couple of minutes.
◈ Proxying to https://blog.aldnav.com/blog/a-journey-to-the-cloud-az-900/
[HPM] Proxy created: /  -> https://blog.aldnav.com
◈ Proxying to https://blog.aldnav.com/blog/a-journey-to-the-cloud-az-900/pentester_blueprint.jpeg
[HPM] Proxy created: /  -> https://blog.aldnav.com

However, pushing the configuration and building on Netlify doesn’t seem to have an effect.

Gotchas

💡 Netlify dev works. However, when running from Qwik, it doesn’t

Netlify redirects work and “appears to work” especially only when testing directly to the browser address bar with the supposed URL.

Ultimately, routing requests are handled first by Qwik.

So we need to change our Qwik code to catch routes.

Notice here that the structure /blog/[...slug]/index.tsx catches all routes that start with /blog/ and then passes the rest of the route to the slug variable.

From here, it’s just a matter of redirecting the user to the correct URL.