react-pack-cli

A simple CLI for scaffolding React projects.

Installation

Prerequisites: Node.js (>=6.x) , npm version 3+ and Git.

$ npm install -g react-pack-cli

Usage

$ re init <template-name> <project-name>

Example:

$ re init react my-project

Custom Templates

It's unlikely to make everyone happy with the official templates. You can simply fork an official template and then use it via react-pack-cli with:

re init username/repo my-project

Where username/repo is the GitHub repo shorthand for your fork.

The shorthand repo notation is passed to download-git-repo so you can also use things like bitbucket:username/repo for a Bitbucket repo and username/repo#branch for tags or branches.

If you would like to download from a private repository use the --clone flag and the cli will use git clone so your SSH keys are used.

Local Templates

Instead of a GitHub repo, you can also use a template on your local file system:

re init ~/fs/path/to-custom-template my-project

Writing Custom Templates from Scratch

• A template repo must have a template directory that holds the template files.

• A template repo may have a bootstrap.js file for the template. It can contain the following fields:

  • prompts: used to collect user options data;

  • filters: used to conditional filter files to render.

  • ignore: used to ignore files to render.

  • completeMessage: the message to be displayed to the user when the template has been generated. You can include custom instruction here.

prompts

The prompts field in the metadata file should be an object hash containing prompts for the user. For each entry, the key is the variable name and the value is an Inquirer.js question object. Example:

{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "message": "Project name"
    }
  }
}

After all prompts are finished, all files inside template will be rendered using ejs, with the prompt results as the data.

Conditional Prompts

A prompt can be made conditional by adding a when field, which should be a JavaScript expression evaluated with data collected from previous prompts. For example:

{
  "prompts": {
    "lint": {
      "type": "confirm",
      "message": "Use a linter?"
    },
    "lintConfig": {
      "when": "lint",
      "type": "list",
      "message": "Pick a lint config",
      "choices": [
        "standard",
        "airbnb",
        "none"
      ]
    }
  }
}

The prompt for lintConfig will only be triggered when the user answered yes to the lint prompt.