How to enforce project standard structure with TempleMe

I think everyone has their own way of structuring their projects, and it's usually a painful task to follow this structure every time, like for instance:

• For every new react component, you need to create three files, one for props, one for css modules and other for the component itself, and you always have to write the same things following the same naming convention.
• For every new module of your API you need a controller, a module, a service, a interface, a repository and DTO layers, all of them following the same base structure

You can create maybe your own VSCode snippers for that, or a NX Generator, but sometimes you lack the motivation to do so, that's why I wanted to create an easier way to set up those default structures per project, that we can call our "Temples", sacred standards in your project that cannot be violated.

Code Temple It

This is the CLI tool that I created that makes easy to create those temples

pnpm install -g templeme

After installing it, you can create your first Temple by running

templeme init
templeme create react-component

This will create a new folder and a sample file at .templeme/react-component. You can open this file and start editing it with your default files. The catch is that you need to think your component/module name is PlaceholderName, so, let's create three files, one for the component, another one for the props and the last one for the CSS module.

import React from 'react';
import styles from './PlaceholderName.module.css';
import { PlaceholderNameProps } from './PlaceholderName.types';

export const PlaceholderNameComponent = ({}: PlaceholderNameProps ) => {
   return <div className={styles.placeholderName}>PlaceholderName works!</div>;
}

.placeholderName {
  color: black;
}

export type PlaceholderNameProps = {}

When you copy your temple, the CLI will search for all combinations of PlaceholderName, in different casings, and replace with your actual component name.

Let's try it!

templeme copy react-component src/components MyComponent

Now, if you open your new generated folder, you'll see that your files are there, named as MyComponent instead.

Other ways to share your temples

You can keep the temples inside your local repository, or, if you need, you can create your own git repository with your temples and use the repository name instead.

templeme copy git@github.com:user/repo.git@react-component src/component/MyComponentFromGit

This will search inside your repo the component react-component, without the need of keeping it on your own repository. You can use this to easily share your temples with friends.

I hope this tool helps you maintain a consistent project structure and saves you time. Feel free to contribute to the project or suggest new features. Happy coding!

You can find the source code and more information on the project's at TempleMe GitHub.