Introducing the concept
Envision a centralized hub for overseeing all technical facets of your business—ranging from online advertising campaigns and website management to key analytics and even business legal documentation. Introducing our latest client management portal, built as a multi-tenant application. This platform empowers clients to select and subscribe to the services that align with their needs. To kickstart this endeavor, we've chosen Payload CMS as our foundation.
To those who are unaware, Payload CMS is a developer-first application framework that lets your rapidly build content management systems with full extendibility. If a feature does not exist, Payload makes it easy to create and add new ones to your system, integrating seamlessly with your database of choice (we've gone with MongoDB).
Laying the foundation
We're kicking off with Payload v2 and NextJS 14. While we're in the process of transitioning Payload to NextJS entirely, currently, we've decided to maintain a clear separation between our Payload and NextJS codebases. As a result, our NextJS server will be hosted on Vercel, while our Payload server will reside on Google Cloud. MongoDB Atlas will serve as our database provider, and for rich text functionality, we're adopting Lexical—a recent addition to Payload, which, in our view, offers a more user-friendly experience compared to slate. Lastly, we've opted for Webpack as our bundler, acknowledging that it may not be as swift as Vite. However, anticipating the imminent release of Payload v3 and Turbopack, we believe it's prudent to postpone any significant changes to our bundler for now.
Access control
Access control is the most important part of building a multi-tenant system. Every collection in the project has an associated Organization. When requesting data from Payload, we need to include the organization id. This ensures that users belonging to separate organizations do not have access to everyone's data. The users may be sharing a server, but their data is effectively partitioned as if it were in it's own database.
The "Super Admin"
With this basic fundamental set - we can then start creating pages, media, and blog posts as a logged in as organization administrator. A "Super Admin" exists in the system. This user has access to all public-facing data in an organization with the exception of users, payment details, customer form data, etc... For security purposes this data is strictly kept to the Organization level.
Live preview
Payload 2 comes with a nifty live preview feature. This feature lets us nest our website directly in the Payload window - making changes to the content of our site and seeing these changes reflected in real time. Our next JS app uses the following structure [domain] -> [...slug]. Controlled via middleware, NextJS takes the domain of the incoming request and maps the target directory to that domain. With this simple re-routing mechanic, all we need to do is fetch the data for the page we wish to render using the domain and slug. Et voila - we have live preview directly from Payload;
Wrapping up
With the work done on our basic multi-tenant set-up, it's time to look at building out the core functionality of the system. Mainly the creation of dynamic layout and theme templates, custom fields, and adding additional elements to Payload's UI so that our users can use it for more than just building websites. Check in next week to keep up to speed with the development of this project!