How to make use of a simple scaffolding tool
Tags: cli, scaffold, generate, tooling
Published: 2021-04-09 15:34:02

If you've already worked with a popular framework like Angular or Vue, you probably used their wonderful scaffolding tooling.

Just go with a `ng generate component my-component` and there you go, it creates for you a directory and a bunch of files inside.

What's nice with that is obviously the time saving you've got. So you can focus on your features and business logic, not boring configuration.

### Perks : 

- Time savy
- Less error prone (Make sure you always have a nice and proper base structure for your component)
- Dry

Let's dive in.

I've found a wonderful github repo called [generate-template-files](https://github.com/codeBelt/generate-template-files)

{% github codeBelt/generate-template-files no-readme %}

It's pretty **straight-forward**. The guy also made an [article](https://medium.com/@robertsavian/generate-template-files-with-ease-19b320615359) about its package. But I wanted to talk about it!


# So !
You **need** to have [node and npm](https://nodejs.org/en/download/)  installed.

First, install the package as a dev dependency.
```bash
npm install -D generate-template-files
```

Then, create a file (filename is your choice!) where we'll put our scaffolding logic. 
```bash
mkdir tools/scaffold
touch tools/scaffold/generate.js
```
Add a little helper script in your `package.json` : 
```json
// ./package.json
"scripts": {
		"generate": "node tools/generate.js"
	}
```
Open it in your favorite editor and put the base content in :
```javascript
/* ./tools/generate.js */
const { generateTemplateFiles } = require('generate-template-files');

generateTemplateFiles([]);
```

Basically, when you fire the tool, it give you choices. Each choices is simply an object here. 

The tool will search your choice by iterating through that array (as a function parameter) and pick it.

We can create a first choice.
```javascript
/* ./tools/generate.js */
const { generateTemplateFiles } = require('generate-template-files');

const create_component_basic = {
		option: 'Create a basic component',
		defaultCase: '(pascalCase)',
		entry: {
			folderPath: './tools/templates/components/basic',
		},
		stringReplacers: [
			{ question: 'Insert component name', slot: '__name__' },
			{ question: 'Insert id css selector', slot: '__idSelector__' },
		],
		output: {
			path: './dist/components/__name__',
			pathAndFileNameDefaultCase: '(pascalCase)',
			overwrite: true,
		},
		onComplete: (res) => console.log(res),
	}

generateTemplateFiles([create_component_basic]);
```

## So, let's break it down.

`option` : It's the name of the choice as shown in the CLI when using it.

`defaultCase` : let you specify the type of case you want. You can use for example pascalCase or camelCase etc... default is (noCase) : it doesn't touch your input.

`entry`: Basically where it need to get the templates (you can have as many template files for one choice)

`stringReplacers` : This is important. It's the prompts where the tool ask you for the specifics data of your generated component. You choose a string to search for (like `__name__` but it could be anything that can be unique like `%%|name|%%` if you want) and will replace all its occurrence by what your tell it to replace.

`output` : Where it need to output the files. You can also specify a custom file name using those strings replacers. In my example, it will create a folder with the `__name__` given value and then throw all generated files inside it.

`onComplete`: a simple function to execute when task finished. I just console log the result.


## Now, let's create our template files.

I prefer to create a folder named 'templates', then one folder by type, then one by type instance.

```bash
mkdir tools/templates/components/basic
touch tools/template/components/basic/{__name__.component.html,__name__.css}
```
```html
<!-- ./tools/template/components/basic/__name__.component.html -->
<div id="__idSelector__">Hello I'm the __name__</div>
<link rel="stylesheet" href="./__name__.css">
```
```css
/* ./tools/template/components/basic/__name__.css */
#__idSelector__ {
	color: red;
}
```

## Perfect 

Now, if we **start** the tool :
```bash
npm run generate
```

It **should** prompt:

![Screenshot from 2021-04-09 17-42-36](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o87rd28um44k0qgo4r7w.png)
 

And if we look at the generated files :

```html
<!-- ./dist/components/Header/Header.component.html -->
<div id="HeaderMain">Hello I'm the Header</div>
<link rel="stylesheet" href="./Header.css">
```
```css
/* ./dist/components/Header/Header.css */
#HeaderMain {
	color: red;
}
```

Note how the `#Header` in the `css` file is now capitalized. It's because of the `(pascalCase)` setting we've put.

That's it.
You've got the basics of this tools.

If you check the `*.d.ts` files of the project, you'll have plenty of useful documentation for each of you cases !

Thanks for reading.
Don't forget to star the [repo](https://github.com/codeBelt/generate-template-files) if you find the project useful. 

Find codeBelt here :
{% user codebelt %}