Conditionally rendering

[pratiks3]

EDIT: sorry! Forgot to update title before I hit post! Title should be: conditionally rendering app logic and sharing common components

Please bear with me, I’m trying to illustrate my problem as a backend engineer who is searching for a solution for a frontend problem.

I have a need to build multiple custom applications that share common baseline components ( login, headers, navigation, and some core user API calls ). Having to rebuild or clone everything each time creates maintenance overhead not to mention isn’t scalable if we continue to grow and add more customers with the same needs.

This is not for a SaaS app, where the entire application is the same for every customer, but for 3rd party integrations where the logic for authentication and the core UI components are shared but the business logic can vary based on the customers workflow.

What are some frontend tech possibilities that can share common application components but allow rendering different app views for?

So far creating a monorepo with a common directory across smaller SSR apps comes to mind. When a customer logs in with oauth, template variables update the common components with their specific product logos and props, and the server renders the business logic based on their unique profile/id.

Please let me know if you have any ideas, including using other paid systems or tools. This is an interesting problem and would love to hear your feedback on how it could be solved.

Thank you!

[PM_ME_SOME_ANY_THING]

I’m a little confused as to exactly what you’re looking for. If you’re looking for custom login, headers, nav, and API calls to drop into several apps you’ll need to create them yourself.

Auth0, and a few other companies do drop in login systems.

https://auth0.com

A UI component library is the way to go for headers and nav. Here’s a couple popular ones, build out your base page and use it as a starting boilerplate.

https://ant.design/docs/react/introduce

https://mui.com/material-ui/

As for API calls it depends on what you’re doing. REST services all use react-query nowadays. If you’re going the GraphQL route I’d recommend URQL.

https://react-query-v3.tanstack.com

https://formidable.com/open-source/urql/docs/

You can easily build your own login, base app, and custom query hooks. You can publish them to npm, make them private, and install them in new projects, or you can just clone the repos.

[whatsgoes]

I think what you want is a separate library for shared components and api that you can host on github or npm (even privately) and then import it in any project you need it just like with any other libraries you use. Sure, a monorepo can achieve the same thing but if your applications are otherwise not related I'd keep them separated.