Home
Support Forums

Redirects between two applications on same domain

I am really struggling to understand what I need to use to get the desired result for an application I am working on:

The Problem

Client’s app will redirect to the micro application I am writing that is a blog. Both applications are nextjs apps running on Netlify.

Desired Result

https://client-domain/search/* --> micro app but retains client domain
https://client-domain/blog/* --> micro app but retains client domain

Example
https://abc.com/search?value=hello -> /search?value=hello to micro app
https://abc.com/blog/post-1 -> /blog/[slug] to micro app

Redirects, Rewrites, or Both?

What I have tried so far is redirects but I lose the url persistence I’m looking for. rewrites give me the persistence, but I lose the ability to route to the micro app.

/search/* micro-app-domain/blog/search/:splat 301!
/blog/* micro-app-domain/blog/:splat 301!

# rewrite
/search/* micro-app-domain/blog/search/:splat 200!
/blog/* micro-app-domain/blog/:splat 200!

Questions

  1. Is the desired solution even possible?
  2. Would it be a good idea to talk to the client about using a sub-domain like https://blog.client-domain.com for redirecting/rewriting?

Thank you for your help, this has really been kicking my butt.

Hi @rockchalkwushock,

I don’t see a problem with this. It should work just fine (both - redirect as well as rewrite).

When you say you lose the ability to route to the micro app, what exactly happens? If possible, you could share the URL so we could check accordingly.

HI @hrishikesh I have attached some links:

Repo: GitHub - rockchalkwushock/redirect-test
Mock Client App: https://thirsty-pasteur-386e16.netlify.app/
Micro Blog App: https://deploy-preview-2--angry-shockley-04ec06.netlify.app

I continued playing around with it this morning but am just having no luck at all getting the desired result. There must be something I’m not understanding about the topic at hand.

My understanding is that a 301 (the default) will do a redirect, meaning the domain will be redirected to that domain of the other application (whether that be an external site i.e. cnn.com, or an internal redirect).

A 200 will rewrite the url in the browser from one value to another (but not perform a redirect internally or externally).

Is my understanding incorrect?

I appreciate your help with further understanding this concept and helping me to debug the problem.

Cheers! :beers:

Hi @rockchalkwushock,

Thank you for sharing the repo. That made it easier to test.

So from what I checked, the 301 works fine, it’s just the 200 that’s not working. Let me know if you are seeing different results.

The reason for 200 not working is because how NextJS works on Netlify. Netlify makes use of Netlify functions and it automatically generates some functions and redirects to manage this.

Thus, your website angry-shockley-04ec06 has generated a redirect for the /blog/ path and it looks something like this:

{
  "path" => "/blog/:slug",
  "to" => "/.netlify/functions/next_blog_slug",
  "status" => 200,
  "pattern" => "^/blog/?/([^/]+)/?$",
  "captures" => [
    [0] ":slug"
  ]
}

The problem is, Netlify only rewrites once. So, when you make your first rewrite from thirsty-pasteur-386e16, it redirects fine, but to actually render the page Netlify needs to rewrite it again and since that doesn’t work, the rewrite fails.

So, because you’re using NextJS, you’d have to use 301 or try to fine a way to render the blog pages statically.

Hi @hrishikesh

Do you have any ideas as potential work arounds to get to the solution I am trying to get too?

I am curious if it’s possible to ship two next applications from a monorepo structure under the same domain and netlify.toml? Could this be a solution for the problem of how the Netlify functions are creating the routing system?

/micro-blog-app 
---> https://blog.client-app-domain.com || https://client-app-domain.com/blog
/client-app 
---> https://client-app-domain.com
netlify.toml

Hi @rockchalkwushock,

I’m afraid, there might not be any workaround from Netlify’s side. The redirects will never process more than one rewrite for the same path, so it’s either the 200 that you rewrite to, or the 20 from the Netlify Functions that generate the path.

The only not-so-much-of-a-workaround would be to use 301/302.

Maybe there might be some way to do this using NextJS itself, but I’m not so much versed with it to comment on that.