Create React App From Template

Create React apps using custom templates. This is a wrapper of create-react-app so you can use all its power here. See the docs for more details.

Quick Start

If you are using npm 5.2 or later, no installation is required. You can simply use npx to run Craft as follows:

$ npx -p craft-cli craft <project-directory> <template-url>

If you are using an older version of npm, you must install Craft and create-react-app before running:

$ npm install -g craft-cli
$ npm install -g create-react-app
$ craft <project-directory> <template-url>

Craft will verify that create-react-app is available and warn you if you need to install it.

Template

A template is simply a Git repository containing files that you wish to add to the project generated by create-react-app. There are no constraints on the contents of your templates. By default, all files will be copied from your template, overriding generated files with the same name, except for node_modules, package.json, package-lock.json, craft.yaml, and .git.

If your template contains a package.json file, the scripts and dependencies will be merged with the ones generated by create-react-app. Any other changes to sections defined in the generated file will be ignored, and any other sections not generated will be included.

Spec definition

Your template can include a craft.yaml file that declares a spec, customizing the application of the template to the project generated by create-react-app. Here is an example:

# A sample craft spec
spec:
  ignore:
  - .gitignore
  - public
  delete:
  - src/App.css
  - src/logo.svg
  - src/serviceWorker.js

This example specifies that the generated .gitignore file and public directory should be left unchanged, even if the template includes those files, and that the generated App.css, logo.svg and serviceWorker.js files in src should be deleted.

Notice that the spec is an object. Each of its properties is a directive, with a value listing the paths of files and/or directories to which it applies. The valid directives are replace, ignore, and delete:

• replace copies the file or directory from the template, replacing a generated file or directory with the same name, if one exists.
• ignore leaves the specified file or directory exactly as generated (or not) by create-react-app. A file or directory with the same name in the template is ignored.
• delete deletes the file or directory from the generated project.

Each path is relative to the project root, always uses forward slash (/) as a delimiter, and never has a leading or trailing slash. If a directive only has one path, it can be expressed directly as the value of the directive property, rather than in a single-item list.

By default, package.json is merged; node_modules, package-lock.json, craft.yaml, and .git are ignored, and everything else is replaced. You can specify any of these files in your spec to override these defaults.