Detect subdomain via router, or globally in pages or Cells

After a few days of research and some trial & error. I have wildcard subdomains and self-hosting working. I will share the setup I have in the coming days when it’s all working. In short, it’s using a mix of docker, nginx and Traefik to do all the heavy lifting.

Check it out - all the following urls serve the same redwood front-end. This is a staging domain I am using for testing.

https://redwood.uservitalshq.com/
https://yourcompany.uservitalshq.com/

Right now, since I have a slug I need to identify in the URL, I need to figure out how to globally pass through on every page the company slug, found in the domain URI (The *.uservitalshq.com)

Now, not every subdomain slug will exist, so I will need to check the DB, before showing any data.

I’ve looked at a few possible solutions:

  • getLocation hook - I could implement something like that and extend support to detect the subdomain slug. I could use this on every page and pass the slug to any cells.
  • Also looked at the Redwood Router is implemented, and how the matchPath method is used. Would be great to define this logic on the router but required a lot of core changes.

But before I go overwriting redwood core, I was wondering if anyone else had creative ideas to these problems?

1 Like

Thanks for taking the time to write all this up, as someone who primarily uses services like Netlify and Vercel it’s very educational to see how people approach a more DIY hosting setup. In that vain I have a high-level noob question:

From what I understand of these tools, Docker is the actual thing that is running the application and Nginx is a kind of load balancer/reverse proxy that’s routing traffic. So first off, is that a correct understanding, and if so how does Traefik fit into that model?

We’re doing something similar at work (regular Create-React-App project), and it looks like we’ve got a solution that’s kind of a combination of your two suggestions. We’ve got a custom hook that leverages useRouteMatch from react-router-dom under the hood.

So I think your approach is sound, just need to figure out how to best do it with RW.

If you were to dream freely, how would you like this to work?

@Tobbe There is no dreaming about it. I am trying to build a product, so I want the most reliable, maintainable, and easiest way to do it :slight_smile:

@ajcwebdev Yep that sounds about right. Traefik is a proxy too, but can also do automatic SSL provisioning with letsencrypt, and can work with multiple providers like Docker, k8 etc to “discover” services. It’s def not the best documented, and prob one of the more difficult pieces of software I’ve used recently.

@viperfx this is a problem that I’ve wondered a while about, and no clue what the best way to solve. I don’t think its Redwood specific, because its definitely an infrastructure problem (TLS isn’t something applications deal with!).

I have a “hacky” way of doing it, running your website through cloudflare and their SSL proxy, and detecting the subdomain using the hook. This is how I run one of my home servers (not redwood related, whatsoever).

I would love to hear how you solved it.

@danny you might be misunderstanding my question. I don’t have any issues with TLS or infrastructure - to me these are problems outside the scope of redwood.

However, my question around the detection of the subdomain, but also how to go about doing a query against a DB, in a global way.

I am attempting a couple of solutions, will report back when I find something that works for me. This thread is most to see if anyone had any suggestions.

@Tobbe had a bit more think about question you asked, about what solution would be ideal.

I think having a block like the Private block, where I can provide a custom match function would be ideal. Then inside the block, I could add the routes that qualify.

3 Likes

Hi all,

I’m embarking on a new redwood project that will require custom sub domains as well.

Wondering if any progress has been made on this front? Or, if not, another upvote for solving this as a community (happy to think more deeply as I get fully up to speed on redwood)!

2 Likes

Has anyone done more on this with Subdomains? I am also looking at this for a side project and will want to ideally serve a users own pages from their own subdomain.
Serving it I think I can handle with wildcard subdomains etc on Render.

The part I am unsure about is reliably extracting the subdomain and making it available to my Cells to use as part of the GraphQL query.

At the moment I’m thinking that I can either make some assumptions about the structure of the URL and grab the subdomain like:

const subdomain = window.location.host.split('.')[0]

That might be a bit brittle though, but I suppose that since I am in control of the application that allocates subdomains to people I should be able to manage that (and stop them creating ones with ‘.’ in them).

Another option might be to make the domain that the app is served from available as an environment variable on the web side (I already have that for the api side so that it can generate some redirect URLs) and then use that domain and some regex or similar to more reliably pull the subdomain out.

Then the next thing is how do I make it available throughout my app so that I can pass it into my Cells.
I could create a hook and use it on every page where I need to do this, bit repetitive?

I’m also going to look at whether I can make a custom react provider of some sort and wrap everything in that in App.tsx

Has anyone done this a different way? There are several threads on here about subdomains but not with any recent updates.

P.S. Would be super nice to handle this all through the Router, but I don’t imagine that this is core enough of a use case to warrant the added complexity (and I wouldn’t know where to start with designing it).