Subdomains and custom domains

Get Help and Help Others
1

I am looking to configure and setup subdomains and eventually custom domains for customer-controlled subdomains? I am using netlify for hosting, and Cloudflare for DNS.

The app is currently hosted at app.domain.com

I am looking to do support for

customer1.domain.com and customer2.domain.com

I’ve certainly googled a fair share, but I don’t seem to be finding anything obvious.

If anyone has resources, please do link, happy to dig in myself. Or if anyone here has done it, and can share some tips on how it works please do!

I know certain frameworks come with this feature built-in (Routing - Laravel - The PHP Framework For Web Artisans) - Does redwood help to handle this scenario in any way?

Cheers,

2

I don’t … and probably worth asking in the Netlify Community forums, but I have wondered whether or not their new Edge Handlers might be a way to implement it.

I have not thought it through, but if “some code” ran on on the edge/cdn that detected the subdomain, it could pass that into the app as some “customerId” value that would be used my the app.

Again – this is just me spit-balling. But worth asking.

3

Thanks @dthyresson - I don’t want to rely on these edge handlers and serveless too much. Since it’s too much vendor lock in and not enough documentation around use cases. I would much rather stick with tried and true methods and keep it simple.

From my research I been doing so far, I have been looking in servers like Caddy which can proxy traffic. I am also in touch with netlify to get setup with a wildcard cert, so I can play around with how the app behaves.

From resources I have read (https://ohdear.app/blog/how-we-used-caddy-and-laravels-subdomain-routing-to-serve-our-status-pages) I have read, there is usually a server needed to rewrite or add headers to traffic. Since redwood is mostly a SPA, this part might be tricky to add in the handling of where there is a customer portal on a subdomain such as customer1.mydomain.com

I am also considering creating another “web” app of redwood which is hosting a customer portal, which I can deploy separately and only serves the customer portal. But it will have a shared API.

4

You could host your redwood app on pm2 behind Nginx.

and have Nginx do the Routing. I have a similar setup, and will be needing custom domains soon as well!

5

looks like you ended up getting this working @viperfx … are you able to share the way you went with this, and any lessons learned and able to be shared ??

Thx :slight_smile:

6

Welcome to the forums @MaxLynam

Can you explain a little bit more about what kind of setup you want? I know a little bit about ViperFx’s setup, so maybe I can help if you share some more details :slight_smile:

1 Like
7

Hey there @Tobbe … thx heaps for the reply :slight_smile:

We are at the final stages of a :scream: eight year R&D project … huge backend data-AI brain platform, for which we need to build out a WebApp for, which will have many organisations with their own accounts - and would be looking to have their own sub-domain for their organisational account (and possibly for their child-orgs as well).

Literally thousands upon thousands of them.

Same use case as viperfx:

I am looking to do support for
customer1.domain.com and customer2.domain.com

We’ve been looking also at blitz and just stumbled on RedwoodJS … and Redwood seems a much better fit as while we are VERY data driven, we will be working in challenging end-user environments (think intl aid, disaster relief, enviro, etc) and the edge focus with light, low-bandwidth is super valuable to user with minimal bandwidth, connection and device capabilities.

We are looking for 1.0/stable launch mid -2021, so while the timelines are tight, the webapp dev is not “that” intense (and had already been looking at vida.io for the graph/visualisations). The compute/power is in the data/AI brain platform side of things … the webapp just needs to receive authorised data from the postgresDB via API, and redwood seems super-aligned and suited to our use case.

Having the custom subdomain will just make life a little easier and more like “home” for the organisations and users :slight_smile:

2 Likes
8

That’s a really interesting project! Looking forward to seeing it build and grow using (hopefully) Redwood :slight_smile:

Your use case does sound surprisingly similar to what ViperFx is doing. I really didn’t think giving your users their own subdomain was that common of a thing to want to do, but looks like I might have to reconsider.

Since it’s so super similar, I’ll let @viperfx take it from here

9

You may want to give https://airbnb.io/visx/docs/xychart a look, too.

Just create some SDL to return the data in a line series like

const data1 = [
  { x: '2020-01-01', y: 50 },
  { x: '2020-01-02', y: 10 },
  { x: '2020-01-03', y: 20 },
]

and good to go.

Lots of other great visualizations in the gallery, too.

1 Like
10

Thx @dthyresson … that looks pretty cool and lightweight, appreciate the suggestion. We’re looking to start implementing the visualisations early-ish Q2, so this’ll be a great help.

Do you know if there is any self-serve type GUI builder/editor available to help implement ability for a user building out their own dashboards, with visualisation tiles?
eg. new tile, select type, data-sources, other options, etc and then will display the visualisation tile in the dashboard from the user selected options?

examples of other viz libraries doing this:

Obviously, our own use case we’d be customising any of the builders/editors, but having something existing for end-users is a big head-start to get the functionality out there more easily and maintainable with a “core” visualisation library.

Thanks again :+1:

11

Here is how I am doing subdomain detection.

const Routes = () => {
  const subdomain = useSubdomain()

  if (subdomain == 'app') {
    return (
      <Router>
        <Route path="/" page={HomeSwitchPage} name="home" />
        <Route notfound page={NotFoundPage} />
      </Router>
    )

  } else {
    return (
      <Router>
        <Route path="/" page={PortalHomePagePage} name="portalHomePage" />
        <Route notfound page={NotFoundPage} />
      </Router>
    )
  }
}

The above Routes config allow you to use different routes with a single redwood app. I have a common app subdomain which is the admin portal. Then all other wildcard subdomains are a public portal. So this config works for my use case.

export function useSubdomain() {
  const [, , subdomain] = window.location.hostname.split('.').reverse()
  return subdomain
}

A simple function to just get the subdomain part of a hostname.

There is currently a known issue with this setup where I believe the Router does more renders than needed, which can cause flashes and other quirks. So for this use case, it’s not perfect and there are improvements to be made to properly support this use case. This is just a hack I came up with.

4 Likes
12

great - thank you very much @viperfx :pray: