Skip to content

How to build multiple web apps using the same layout, pages, components, services, graphql but changing specific things such as colors, images, styles, images, data, etc. This is possible and easy to achieve, thanks to gatsby-theme

lucashfreitas/gatsby-monorepository-shared-theme

Repository files navigation

gatsby-monorepository-shared-theme - Under development 🏃

Blog Post: https://lucasfsantos.com/gatsby-react-shared-theme-monorepository

This repository shows how you can setup multiple websites using the same "layout" theme and changing specific things as colors, images. This makes possible to build a SaaS application for multiple customers using the same code base, for example.

Shared-theme-arch.png

Why?:point_up:

In many situations, specially for SaaS applications, we can have multiples web applications using the same components, layouts, features , services, etc.

Let's imagine you have to set up a same web application with the same data structure for different customers, then you might need to change little things such as images, colors, and all the data with is sitting on your backend crm system. (I will use contentful in this example).

We will use Gatsby Theme which is perfect for this situation. We'll share componentes, services, graphQL queries, pages, everything!

It's easy, simple to maintain & deploy!

Utility? 💪

If you want to have completely separated and idenpendent web applications that share same logic, pages but differ in specific aspects like colors, data, you can wrap all that logic in a shared plugin and use that in your web applications.

Positive Points? 👍

  • Maintenability: If your functions code on shared theme are tested and working fine, you will be sure that it will work across all the websites. If you find a bug, you can fix it for multiple websites at once, etc.
  • Dry Code: You won't duplicate same things across different websites.
  • Development Speed: You can abstract things and build an entire website by just importing a plugin and adding things to configuration. You can even use the shared theme as a npm package and build multiple web applications quickly.

Negative Points? 👎

  • Abstractions: Abstractions are great, right? You save time, your code is clean and not repeatable, but...... In some cases it can make things really complex and inflexible, so this solution is definitely not a good fit for all cases. Be careful when delegating things to the shared theme. You might want to watch these two great talks done by Chenglow and Dan Abramov, you will get easily what I mean with that:

Monorepository? 💪

You might be thinking, does not make sense to keep all the websites and the shared theme in different respositories, right? To solve that we will use lerna/yarn workspaces to manage our monorepository structure. It will be super easy to integrate that with web hosting services such as Netlify

Stack 🚀

  • Gatsby
  • Contentful
  • Lerna/Yarn Workspaces
  • Netlify for deployment

About

How to build multiple web apps using the same layout, pages, components, services, graphql but changing specific things such as colors, images, styles, images, data, etc. This is possible and easy to achieve, thanks to gatsby-theme

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published