Skip to content
πŸ¦‹ Remake: A simple generator from locally defined templates
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

πŸ¦‹ Remake

Build Status npm version

A simple generator from locally defined templates!

Usage: remake
  πŸ¦‹  Remake

  remake <cmd> --option

  remake component --name=MyComponent --someProp=value

  -V, --version    output the version number
  -n, --name       The name for the generate file(s)
  -o, --output     Location to output generated file(s)
  -i, --entry      Location of the template file(s)
  -w, --overwrite  Overwrite existing files
  -s, --silence    Suppresses the logs
  -h, --help       output usage information

  *              The directory name for the template under .remake/

Table of contents


npm install --save-dev remake

To install it globally, run:

npm install -g remake


Create the template files

In your project's root directory, create a new directory called .remake:

β”œβ”€β”€ .remake/
└── .../

Within the .remake directory, create sub directories to associate with "commands" that you would like Remake to run. In this example, we'll create a directory called component, which Remake will use when running the command component:

β”œβ”€β”€ .remake/
β”‚   └── component/
└── .../

Under the new component directory, we'll add a couple of files that we want Remake to generate for us:

β”œβ”€β”€ .remake/
β”‚   └── component/
β”‚       └── remake-name/
β”‚           β”œβ”€β”€ index.js
β”‚           └── remake-name.js
└── .../

Notice the remake-name directory and remake-name.js file. Remake will use props you provide to replace any remake-* file name. For this example, the file name will be replaced with the name prop.

Within the remake-name.js, let's add some template content:

// component/remake-name/remake-name.js
import React from 'react'

export class <%= name %> extends React.PureComponent {
  render () {
    return <div />

export default <%= name %>

Notice the <%= name %>. Remake uses lodash.template to parse and modify template files. The name prop is provided to the template through CLI arguments. You can specify anything you'd like! Including if/else logic, if you wanna get fancy.

Run the command

Once you're happy with your template files, run the remake command.

The recommended way is to add a remake script to your project's package.json, like so:

  "remake": "remake",

You can even add the options to dedicated remake scripts for more commonly generated templates:

"remake:component": "remake component --output=src/components"

Alternatively, if you've installed remake globally, you can run:

remake component --name=Hello

For this example, remake will generate the following files:

β”œβ”€β”€ .remake/
β”‚   └── component/
β”‚       └── remake-name/
β”‚           β”œβ”€β”€ index.js
β”‚           └── remake-name.js
β”œβ”€β”€ Hello
β”‚   β”œβ”€β”€ index.js
β”‚   └── Hello.js
└── .../

If we take a look at Hello.js, you'll see that the <%= name %> variables have been replaced by Hello, specified by --name=Hello:

// Hello/Hello.js
import React from 'react'

export class Hello extends React.PureComponent {
  render() {
    return <div />

export default Hello


Check out the example in the example directory πŸ™Œ



You can’t perform that action at this time.