DEV Community

loading...
Cover image for How to make use of a simple scaffolding tool

How to make use of a simple scaffolding tool

otho
A simple javascript developer
・3 min read

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

GitHub logo codeBelt / generate-template-files

A simple generator to create custom template files for any application

It's pretty straight-forward. The guy also made an article about its package. But I wanted to talk about it!

So !

You need to have node and npm installed.

First, install the package as a dev dependency.

npm install -D generate-template-files
Enter fullscreen mode Exit fullscreen mode

Then, create a file (filename is your choice!) where we'll put our scaffolding logic.

mkdir tools/scaffold
touch tools/scaffold/generate.js
Enter fullscreen mode Exit fullscreen mode

Add a little helper script in your package.json :

// ./package.json
"scripts": {
        "generate": "node tools/generate.js"
    }
Enter fullscreen mode Exit fullscreen mode

Open it in your favorite editor and put the base content in :

/* ./tools/generate.js */
const { generateTemplateFiles } = require('generate-template-files');

generateTemplateFiles([]);
Enter fullscreen mode Exit fullscreen mode

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.

/* ./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]);
Enter fullscreen mode Exit fullscreen mode

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.

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

Perfect

Now, if we start the tool :

npm run generate
Enter fullscreen mode Exit fullscreen mode

It should prompt:

Screenshot from 2021-04-09 17-42-36

And if we look at the generated files :

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

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 if you find the project useful.

Find codeBelt here :

codebelt image

Discussion (0)