Multi tenant SSR application with subdomains

[rulrok]

Hello,

I am planning the viability of developing a new application using VueJS for an e-commerce store editor.

It will work alike wix and shopfy where users can drag and drop page components such that they can structure the store the way they want.

To have a live preview, the components used in the editor are meant to be the same ones used in the store, so I’m picturing one code base where I can use it to edit the storefront or to display it.

So far I imagine the storefront being configured and structured as a json tree and dynamically rendered using v-component.
Does it sound reasonable?

For performance and SEO, I need to render some of that on the server, so that’s why I have the SSR bit on my project.

My challenge now is to properly route the project. Say I have three different shops:

amazingshop.myecommerceplatform.com
coffeesupplies.myeccomerceplatform.com
dresses.myecommerceplatform.com

but each of them will actually work with their own domains and our platform will handle the dns alias

amazingshop.com
coffesupplies.com
dresses.com

I plan to have the shopfront editor under

editor.{storedomain}.com

so

editor.amazingshop.com
editor.coffesupplies.com
editor.dresses.com

My vuejs application only needs to make API calls during SSR time passing the domain request, so our backend knows which tenant it is serving.

So the app needs to have unlimited subdomains support.

The shopfront needs to know which domains it is responding to in order to make the API calls, and the same for having a editor.{domain}.com.

I’m somewhat confident that it should be easy to achieve, but I don’t have experience yet using SSR or nodejs.

Am I missing some pitfall here with the subdomain routing of this highly dynamic VueJs app?

Could someone shed some light upon me, please? 🥺

[rab]

@rulrok

Am interested in this as will be hitting same challenge down the line.

Some thoughts:

1. You may like to consider SSR + PWA handoff.
   https://quasar.dev/quasar-cli/developing-ssr/ssr-with-pwa

2. SSR shopfront knows subdomain through ssrContext
   https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr#Boot-Files

3. PWA shopfront knows subdomain through window.location

4. Code knows whether it is running client or server via process.env.CLIENT and process.env.SERVER