Multi-tenant integration

Developer Support
1

Hi there!
I’ve seen some topics on this page regarding the subject but they seem to go unanswered or does not provide a clear answer. But I’ll try again!

For now I’m not using the Enterprise plan, but I will be further down the line.

I want to have one codebase where developers manage components and set up the Plasmic integration. Then I want two projects in Plasmic where content creators for each tenant can edit as they please.
So in summary:
One codebase(nextjs), two Plasmic projects that are not connected and have their own domain.

I realise this is probably a custom setup but I’d like to hear if someone has implemented it before or if someone have ideas on how it would be setup in Next JS code…

Another post regarding multi-tenant

2

Hi

You shouldn’t need enterprise for that, the enterprise in the mentioned forum post is referring to the embedded usage of Plasmic. But if you are using Plasmic directly through studio.plasmic.app it’s not required. You can set up the structure that you are referring both with imported projects Importing projects as reusable libraries | Learn Plasmic and with code components Registering your code components | Learn Plasmic.

3

Hi!

Thanks for the reply!

The issue I’m facing is that I’m trying to have two loaders present at the same time. One loader for one project and another for the other project. That way I should technically be able to run two different domains and conditionally render them based on the domain URL.

While I have gotten this to work, it still throws warnings and does not seem to be a good practice solution.

export const loaderForProject1 = initPlasmicLoader({
  projects: [
    {
      id: "",
      token: "",
    },
  ],
  preview: true,
});

export const loaderForProject2 = initPlasmicLoader({
  projects: [
    {
      id: "",
      token: "",
    },
  ],
  preview: true,
});

function registerComponents(loader: ReturnType<typeof initPlasmicLoader>) {
// Load components.. loader.registerComponent
}

registerComponents(loaderForProject1);

// Function to pick loader by hostname
export function getPlasmicLoader(hostname: string) {
  console.log('hostname received in getPlasmicLoader:', hostname);
  if (hostname === "localhost:3000") return loaderForProject1;
// Add another one 
  return null;
}
4

I think you should be able to get it working with the setup that you have. Could you share the warnings and errors that you are facing?

If you want to have a single loader instance, you can remove the ambiguity of the components by specifying the projectId in the <PlasmicComponent> Rendering Plasmic components | Learn Plasmic .