Many sites with same components

[u/joxters]

Hello!

I am working with a company that has many, many sites. And the way we used to do components, we hard-coded every single one in every single project. This naturally has led to some inconsistency between sites when they’re supposed to look pretty identical.

Php include has become our life blood to mitigate some of these issues, but it still persists. The benefit, though, is that with php include, our sites automatically update when the “single source of truth” does.

My company wants to move to something more modern/popular and I got tasked with playing with frameworks. Think React, Next. My boss wants to replicate php include on these. I’ve spent the last several weeks looking into module federation, micro front-ends, anything to at least somewhat replace php include, but to no avail. That requires completely changing our server, which we do not have the ability to (as far as I know). These also sound like a nightmare to maintain, and our team is very small.

SEO is also a huge concern. I have module federation working on client side rendering, but ideally search engines would be able to index our work and, correct me if I’m wrong, but I don’t think client side rendered stuff is?

So now we’re stuck. I’ve suggested a monorepo, but with the amount of websites we have, the other developers worry about build times.

Believe it or not this is actually my first real-deal developer job haha, and I’m already stuck trying to fit a square peg in a round hole. So forgive me for any mistakes or misinformation, I’m still a junior trying to figure this out haha.

[u/winky9827]

Have you looked into web components? Lit is a good place to start. It's language/framework independent.

[u/joxters → u/winky9827]

Standard browser ones yes, but not Lit! I’ll check that out, thank you!

[u/blazeit420casual]

We use a custom node package to ship standardized UI components that are shared between our products, not sure what the exact requirements for your task are but that could be a viable solution for you.

[u/olets]

Next is a React framework.  React is a Node view library. The Node equivalent of PHP include is import  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

PHP isn't hip in dev social media, but there is modern PHP and there are a lot of web devs writing PHP. If your company wants to introduce a framework, and not switch from PHP servers to Node servers and replace their PHP developers with Node developers, they could use a PHP framework. Laravel is where I'd start my research.

But taking that on in your first job is at best a huge huge undertaking, and it won't necessarily solve the existing pain points. 

Tell us more about the current PHP solution. You're includeing a given file into multiple sites? Does that mean all the sites are in one shared codebase?

And tell us more about what issues you're trying to solve that include isn't solving. It's possible that introducing a framework might help, but being a big change it's unlikely to be the simplest or easiest solution.

All the sites are supposed to look the same? Do they share both HTML and CSS?

(For the SEO tangent: SEO is on its way to being a niche need, as opposed to AI agent optimization. And yes search engines may not see dynmically rendered content. But there's fifteen years of solutions to that, basically making some or most content static.)

[u/joxters → u/olets]

Thank you for the insight!!

Yes, we have one giant shared codebase. Monday I’m going to ask my boss to break it down for me, but we essentially just drag & drop the php files & it gets rendered as normal HTML. I’m pretty sure it’s Node but I have to double check with my boss.

With our php includes, it does basically drop in text that’s reused, but right now they aren’t working as components. I tried to make a PHP component myself, and maybe I just coded it wrong haha, but I couldn’t get it to recognize any props or even display.

And yes the HTML and CSS are pretty similar across all sites! We do at least have a global CSS file that all the sites point to.

Eventually, my boss wants to start incorporating more interactive/dynamic content into the sites since as of right now they’re pretty static. That’s why the idea of a framework is so appealing, because it makes that part easier (as far as I know anyway haha)

[u/brock0124 → u/joxters]

Not sure how you made the PHP component, but you probably want to look at the Twig templating engine (typically ships with Symfony framework) or Blade templating engine (ships with Laravel). Twig can probably be installed standalone but will require more configuration up front.

[u/Unhappy_Meaning607]

Welcome to the world of Design Systems.

Fortunately, there are hundreds and many up-to-date open source design systems built by the largest companies and even governments that can be found with a google search or AI chat prompt.

However, those things are ginormous but it sounds like your immediate concern is actually one large part of the design system which is a component library.

I suggest using Lit (Web Components) it should play nicely within the PHP ecosystem because in the end its just JavaScript. You'll want to display and show-off your components and the standard for that is using Storybook.

Glhf in the never ending world of design systems.

[u/joxters → u/Unhappy_Meaning607]

Thank you!! It’s nice to have a phrase/title for this. I like organizing/writing down things (I think that’s part of why the task was given to me haha) so we’ll see where this goes :-)

[u/Unhappy_Meaning607 → u/joxters]

Also it says in your post that your company's code base is PHP? So Laravel?

There's Blade Components with Livewire and if you can use that I wouldn't even touch a design system with JavaScript. I'd stick to those two things and as well as a ton of CSS variables within the codebase that all apps within the company should be sticking to.

[u/niggolars]

I‘d recommending Stencil over Lit all day long. https://stenciljs.com/

Better DevXP, TSX, Typing, AutoDocs, Ssr, and many more.

[u/quiet_horizons1]

A web component still registers in JS and renders client-side unless you prerender it or serve declarative shadow DOM from the server, so it won't fix indexing by itself. If search indexing is a hard requirement, you need server-side rendering or static output. Are these public pages or gated pages where indexing barely matters?

[u/_CuriousCoder_]

Look at Rollup for bundling shared components.

[u/singh_abinashi]

I run into the same shape with a multi-tenant platform: one shared codebase, many sites that still need to look and index like their own. SSR is the right instinct. If the shared header and nav are part of the business, they have to be in the HTML search engines and first paint see, not injected after load. Keep the shared pieces as server-rendered components with per-site config for branding and links. You get one place to fix a component, and each site still ships complete pages.

[u/Stromedy1]

module federation answers the wrong question here. his pain is shared markup, not shared runtime. plain php functions rendering declarative shadow dom templates solve it with zero js to break.

[u/ShapeFlimsy3832]

monorepo is the way but you need smart caching so it only rebuild what changed, turborepo or nx can handle this easy

[u/joxters → u/ShapeFlimsy3832]

Ooooo good to know, thanks!

[u/Mistr_John_Alex]

Put the shared components in a versioned package and let each site pin to a version. When you bump a version, CI rebuilds and redeploys the sites on that version, so search engines still get real HTML and you don't have to rebuild unrelated sites. Client-side shared components can be reserved for admin screens.

[u/patient_signals]

The dangerous part is auto-updating every site from one un-versioned include. That means one bad change breaks them all, with no per-site rollback. Put the shared markup in a versioned package and pin each site to a tag. Upgrade each deliberately, test, ship. Are these sites separate repos with their own deploys, or one deploy touching everything?

[u/Citrous_Oyster]

Just use a static site generator like 11ty or Astro. You don’t need php to make websites or use the includes. 11ty uses nunjucks templating and you do the same thing you would with an includes and it will compile the html files with all included components. Great for seo too because they load faster and are more secure than php since it’s just static html files. I manage hundreds of websites with this set up. You don’t need react either. Overkill for websites. I can share my starter kit privately with you in a dm so you can see it in action. I clone this kit for every website we make and edit the code to make a new design for the client.

[u/IncredibleBihan]

I think most of the advice you’ve gotten so far is accurate. I don’t think you want to change to react as your dev teams current writing php. Good luck putting that square peg into the circle, I’m sure eventually you’ll see the solution

[u/TheRNGuy]

Next or React Router or Remix, one of those. 

[u/nextgenfusion]

Swapping php include for a shared, versioned package is the closest modern equivalent, and it also fixes your SEO worry. If the shared components live in one internal npm package (private registry or a monorepo with pnpm workspaces) and each site imports it, Next.js renders them to plain HTML on the server, so crawlers get the same markup as before. The main trade-off is that updates stop being instant: each site has to bump the package version and redeploy. A bot like Renovate that opens those bump PRs automatically makes that part painless, and the versioning also stops one site's change from breaking the others by surprise. For a small team that is a lot less to maintain than module federation.

[u/retr00two]

What's wrong with PHP?

[u/Fragrant_Guava_367]

Look into Astro, also Web components. Thank me later

[u/BlackHoneyTobacco]

Almost makes you wonder why you don't just stick with the php includes, doesn't it?

[u/TheRNGuy → u/BlackHoneyTobacco]

React is more modern and better. 

[u/CorpT]

And luddites say that AI makes bad code…

[u/lol_wut12 → u/CorpT]

If you're going to use a word, at least know what it means: luddites

Luddites protested adoption of new technologies primarily over concerns of working conditions and compensation, not because "technology bad".

[u/Business-Row-478 → u/lol_wut12]

Idk I feel like those are reasons why some people are anti ai

[u/lol_wut12 → u/Business-Row-478]

for sure, under this definition i would even describe myself as a luddite. i just think it's disingenuous to portray luddites as anti-tech for the sake of being anti-tech. it's not a matter of burying your head in the sand or anything like that.

[u/Ohggg]

If I understand correctly then it sounds like you need to migrate one project at a time into their own micro frontends. For sharing the common components I'd create my own npm package for and get storybook setup for this as well. Versioning can become a pain point in my experience though so maybe web components would help with this (I have limited experience of this). 

You're going to need server side rendering for SEO purposes. Next might be too heavy for your use case though. I've been using Vike.