node templated folder generator

Usage no npm install needed!

<script type="module">
  import templatedFolderGenerator from 'https://cdn.skypack.dev/templated-folder-generator';


Templated Folder Generator

npm license github-issues npm-downloads


npm i templated-folder-generator -g

or locally

npm i templated-folder-generator -D

and use it with npm scripts

    "tfg": "tfg"
npm run tfg -- g default-react-class

or npx

npx tfg g default-react-class

Quick Start

The generator comes with 2 react component templates. I will be using it for quickstart examples.

Generating Components

cd path/to/target/folder
tfg g <templateName>


tfg g <templateName> <path/to/target/folder>


cd src/my-react-component
tfg g default-react-class


tfg g default-react-class path/to/my/new/react/component/directory

Generating Components with custom name:

tfg g default-react-class -n super-cool-component

Generating Components with custom template folder


  1. create a folder with the below structure within your project

template folder structure:

├── package.json
├── templates
│   ├── my-less-template
│   │   ├── {{filename}}.js
│   │   ├── {{filename}}.less
│   ├── my-scss-template
│   │   ├── {{filename}}.js
│   │   ├── {{filename}}.scss
  1. Execute below commands to generate from your custom template
cd path/to/my/scss/folder
tfg g my-scss-template -p <absolute or relative path to /templates | relative path to /templates from project root containing package.json>
cd path/to/my/scss/folder
tfg g my-scss-template -p ./templates

You can also use Environment Variable TEMPLATE_PATH to specify default path to search for the template and can be used in your package.json

  "scripts": {
    "gen": "TEMPLATE_PATH=templates tfg g"

then use it like:

npm run gen -- my-scss-template

Please Refer to Template Creation for how to create templates

Check Available Templates

tfg t
Checking Available Templates with your own template dir
tfg t -p path/to/my/custom/template/folder

Dry Run (won't generate file)

tfg g my-template -d

Custom Template Variables

please refer to user defined context section

Custom File Type Mapping

please refer to User Defined File Type Mapping



Usage: tfg [options] [command]

  -v, --version                 output the version number
  -p, --path <templatePath>     custom template folder path
  -n, --name <name>             change the name of the component (default is based on dest dir name)
  -c, --context <context>       pass in a file path to a js file containing an export of a context builder callback
  -f, --filetypemap <map>       give a filetype map to change the file types of templates
  -x, --prefix <name>           add prefix to component file name
  -X, --postfix <name>          add postfix to component file name
  -d, --dryrun                  dry run
  -h, --help                    output usage information

  generate|g [template] [dest]

Template Creation

tfg uses handlebars.js syntax.

Default Template Variables:

Example Template

import * as React from 'react';
import './index.less';

class {{component.name.capitalizedCamelCase}} extends React.Component{
    return (
      <div className="{{component.name.camelCase}}">

User Defined Context

Suppose you have a template:

function Person(){
  this.name = "{{person.name}}";
  this.age = {{person.age}};

you can create a custom context file:

// context.js

module.exports = function initContext({componentName, filename, dirName}) {
  return {
    name: 'Bob',
    age: '40'

then import it like so:

tfg g my-template -c [relative|absolute path to context.js]

this will generate:

function Person(){
  this.name = "Bob";
  this.age = 40;

tfg comes with a default set of context. Based either by the current working directory name (process.cwd()) or given -n --name argument

suppose the user is in /Desktop/myProject/myComponent. But the user gave a name arg -n myCoolComponent. The context will be as follows:

const context = {
  component: {
    name: {
      original: 'myCoolComponent',
      hypen: 'my-cool-component',
      snakeCase: 'my_cool_component',
      lowerCasedSnakeCase: 'my_cool_component',
      camelCase: 'myCoolComponent',
      capitalizedCamelCase: 'MyCoolComponent',
      upperCase: 'MYCOOLCOMPONENT',
      lowerCase: 'mycoolcomponent'
  filename: 'index',
  dirName: 'myComponent',

User Defined File Type Mapping

Suppose you had a template like below:

├── package.json
├── templates
│   ├── my-react-component
│   │   ├── {{filename}}.js

but I want to change file extension from .js to .jsx you can do this:

tfg g my-template -f '{"js":"jsx"}'
# will output my-react-component.jsx
Please note to not include the '.' and put single quotes around the json string and double quotes on field names

Change Filenames

Generating with custom name:

tfg g default-react-class -n super-cool-component
# super-cool-component.js

Generating with prefix :

tfg g default-react-class -x my-
# my-super-cool-component.js

Generating with postfix :

tfg g default-react-class -X .test
# my-super-cool-component.test.js

Dry Run

dry run will not output files but give you a stdout output of the compiled template

tfg g default-react-class g -d


[Dry run] will generate file to path: /absolute/path/to/target/folder
================== SOF ==========================
import React, { Component } from 'react';
import './index.css'

export default Test extends Component{
  static defaultProps = {
  state = {
    return true;
    return true;
    return (
      <div className="test">

<<<<<<<<<<<<<<<<<< EOF <<<<<<<<<<<<<<<<<<<<<<<<<<