Skip to main content

Monorepos

A monorepo (short for monolithic repository) is a version control strategy where the code for multiple projects, often including libraries, services, and applications, is stored in a single repository. This approach contrasts with a multi-repo setup, where each project has its own repository. Monorepos are commonly used by large organizations and projects to streamline collaboration, code sharing, and dependency management.

Guidelines / Instructions​

In many development environments, themes can be structured in a hierarchical manner where child themes inherit templates and styles from parent themes. This setup allows for efficient reuse of code and consistent design across various themes.

Here's a look at how this structure works:

customer
├── <theme 1> (Parent Theme)
├── <theme 2> (Child Theme) <- inherits templates and styles from <theme 1>
└── <theme 3> (Child Theme) <- inherits templates and styles from <theme 1>

Parent Theme Structure​

<theme 1>/
└── src/
    ├── templates/
    │   ├── header.html
    │   ├── footer.html
    │   └── ...
    ├── styles/
    │   └── main.scss
    └── scripts/
        └── main.ts

Benefits of Using a Monorepo​

Code Reusability: Common elements and styles are defined once in the parent theme and reused across child themes, reducing duplication. Consistency: Ensures a consistent look and feel across all themes by sharing base templates and styles. Easy Customization: Allows for easy customization of themes by overriding or extending the parent theme's resources. Simplified Maintenance: Centralizes core design elements in the parent theme, making it easier to update and maintain.

Best Practices​

Tips​

Keep all the main functionality in the parent theme

Do not implement a feature that has to work in every theme separately in every theme, rather do it once in the parent theme.

Common Pitfalls​

Not updating Mosaic Templates in all themes

When you update Mosaic Templates, make sure you do it for every child theme.

Examples / Use Cases​

Imagine <theme 1> defines a standard header, footer, and base styles. Both <theme 2> and <theme 3> will use these components, ensuring consistency. However, <theme 2> might introduce a unique color scheme and <theme 3> might add custom widgets.

Overriding Styles​

In the webpack.config.js, we have an alias called ~parentStyles; this is a reference to the relative path to the parent theme.

// <theme 2>/src/styles/main.scss

@import "~parentStyles/main";

// <theme 2> - Specific Styles
@import "elements";
@import "components/footer";
@import "components/header";
@import "components/shop";
@import "layouts";

Tools and Resources​

Resources:

Troubleshooting​

How do I override a template in the child theme?

To override a template, simply copy the template file from the parent theme to the corresponding directory in the child theme and make your changes there. For example, to override header.html, place a modified version in the child theme's directory.

Can a child theme have multiple parent themes?

No, a child theme can inherit from only one parent theme. However, you can create multiple child themes that inherit from the same parent theme if needed.

Are there any performance issues with using child themes?

Generally, using child themes does not introduce significant performance issues. However, extensive customizations and additional resources in child themes should be optimized to maintain performance.