search

hieuhani / nuxt-multi-tenancy

Nuxt Multi Tenancy Module - multi-tenancy by sub domain for Nuxt application
https://techgoda.net/
MIT License
164 stars 16 forks source link

Add support for directories outside of tenant route #17

Closed subdiox closed 7 months ago

subdiox commented 7 months ago

Idea

I added support for directories outside of the tenant route (e.g. [site]) to make it more flexible when developing a multi-tenant site.

Sample directory structure

pages
├── @
│   └── index.vue
├── [site]
│   ├── index.vue
│   └── search.vue
└── admin
    ├── dashboard.vue
    └── login.vue

Actual Routing

Developer Tests

vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuxt-multi-tenancy ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 27, 2024 10:26am
subdiox commented 7 months ago

I noticed that vue files placed in pages directory are ignored. Let me consider this PR again.

subdiox commented 7 months ago

@ is used to indicate that it is a root domain. This might be a fundamental change of this library, so I'm absolutely okay if you reject my proposal.

hieuhani commented 7 months ago

@subdiox thank you very much for the PR, I see this is a desirable feature, so I would want to spend sometime to learn more about the convention. To me I want to keep the root path, and the its sub directories belong to the root domain. For example: root-site.com/admin root-site.com/my_profile ...

So that reason why I have to add the tenantDynamicRoute to the config to explicitly set to determine the tenant site

So what do you think about explicitly config sub-domains for what we want to?

subdiox commented 7 months ago

In this PR, tenantDynamicRoute is used to determine the keyword to match the subdomain, for example:

siteA.example.com
siteB.example.com

However, it's difficult to have multi-tenant website with completely different content, when using only this feature.

In my project, I'm going to create an administration website and some websites for public users. The admin one has functionalities to manage the domain names of those child websites and their content. On the other hand, the child websites have similar functionalities each other, but they are completely different from admin website.

That being said, I came up with an idea described in this PR.

As a conclusion, would you like to keep the current implementation?

hieuhani commented 7 months ago

Hi @subdiox, Because I don't want other developers need to break their folder structure as well as the root website, for example the case of medium.com, the root site has a lot of more features And for the implementation when we specify the list of static sites, It's straight forward to use the config to check.

Therefore I would want to propose this approach: We config the list of static directories to be serving by sub-domains:

Static site: admin.example.com analytics.example.com id.example.com Dynamic sites: siteA.example.com siteB.example.com

export default defineNuxtConfig({
  modules: ['nuxt-multi-tenancy'],
  // default options
  multiTenancy: {
    tenantDynamicRoute: 'site',
    rootDomains: ["example.com"],
    sites: ["admin", "analytics", "id"]
  },
})

the pages directory will be:

pages
├── [site]
 │   ├── index.vue
 │   └── search.vue
└── admin
    ├── dashboard.vue
    └── login.vue
└── analytics
    ├── index.vue
└── id
    ├── forgot-password.vue
    └── login.vue
subdiox commented 7 months ago

@hieuhani Of course I understand your idea of not breaking the other developers' websites, but it still feels a bit strange for me. Let's see if we want to make a website with the following config:

export default defineNuxtConfig({
  modules: ['nuxt-multi-tenancy'],
  // default options
  multiTenancy: {
    tenantDynamicRoute: 'site',
    rootDomains: ["example.com"],
    sites: ["admin"]
  },
})

And if you want to make both example.com/admin/manager and admin.example.com/login, you won't be able to implement it with your idea, because we cannot create directories with the same name.

pages
├── [site]
│   ├── index.vue
│   └── search.vue
├── admin
│   ├── index.vue
│   └── manager.vue
└── admin ❌ 
    ├── dashboard.vue
    └── login.vue

I think we have two options:

Both are okay for me. Actually, I created another npm module named nuxt-multi-tenancy-plus, which is created based on the first idea of mine.