Looking for example of building multiple websites from a shared codebase

[ModalityZ]

I'm new to webpack, and I searched the web and this forum for examples but none have matched my situation closely enough for me to recognize.

I have a working local site built by webpack using ./src/index.html as a template. I want to create one folder under src for each of my projects, which would include js, json, and css to override the template. At the end of a webpack build, there should be one output folder per project that can be uploaded to our CDN, so that each project has an unchanging query path, each of which is a standalone site.

Ideally, adding a new project folder in src would automatically create the corresponding output folder.

No framework like React is being used, but I plan to look into generic web components later.

Based on https://medium.com/paloit/a-beginners-guide-to-micro-frontends-with-webpack-module-federation-712f3855f813#b96a I think Module Federation is the best way to achieve this. But I cannot see how that example's mount fn would be used by the host's src/index.js to apply the overrides available in the project folders. And when the example says "Finally, your subA folder should have this structure", the structure looks like the top-level of a webpack project, not a 'subA' folder that would contain just a few override files.

[ScriptedAlchemy]

Check our documentation site. Framework bridges are what you want.

[ModalityZ]

Thank you for your response, Zack. Do you mean this documentation? https://module-federation.io/practice/bridge/ I'm using pure JS, and I don't see anything relevant to building multiple sites (which do not route to each other) in the same build config.

…

On Fri, Oct 25, 2024, 9:35 AM Zack Jackson ***@***.***> wrote: Check our documentation site. Framework bridges are what you want. — Reply to this email directly, view it on GitHub <#4028 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKJXV3CD3UAQXM45BQRNINLZ5HRBRAVCNFSM6AAAAABJGIAYZWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMBUHA3DSNA> . You are receiving this because you authored the thread.Message ID: <module-federation/module-federation-examples/repo-discussions/4028/comments/11048694 @github.com>

[ScriptedAlchemy]

What do you mean pure js?
Like you dont use react or vue etc? just plain JS?

Do you have a repo example of what you want to do?

[ModalityZ]

Hi Zack, Yes, just plain JS. I don't have a public repo, but imagine src/ contains one folder for each site to be built. Each of those folders contains assets like images, css, and json. The build output have corresponding folders containing one index.html, all assets now with a content hash in thier filename, and an index.js that is cloned from one in src/ but now references all its assets by their content-hashed filename. This is like a bsic webpack tutorial example for a simple site, but takes arbitrarily many folders to create corresponding sites. David

…

On Sat, Nov 2, 2024, 12:27 AM Zack Jackson ***@***.***> wrote: What do you mean pure js? Like you dont use react or vue etc? just plain JS? Do you have a repo example of what you want to do? — Reply to this email directly, view it on GitHub <#4028 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKJXV3B3XN5UNTGVOX2NUP3Z6P55TAVCNFSM6AAAAABJGIAYZWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMJSGY2DIMQ> . You are receiving this because you authored the thread.Message ID: <module-federation/module-federation-examples/repo-discussions/4028/comments/11126442 @github.com>

[ScriptedAlchemy]

Dm me on Twitter. Can do zoom call to discuss.
What you want is a "scout file" an ancient solution i used in the backbone.js days.