create-cra-template

A cli tool to generate cra-template from current create-react-app project.

Usage no npm install needed!

<script type="module">
  import createCraTemplate from 'https://cdn.skypack.dev/create-cra-template';
</script>

README

Create Cra Template

brand

A cli tool to generate cra-template from current create-react-app project.

npm npm bundle size

GitHub tag (latest by date) GitHub repo size lines of code

Usage

Inside your own create-react-app project:

npx create-cra-template
# or
yarn create cra-template

Or install globally

yarn global add create-cra-template
cct
# or create-cra-template

template.json and template will be generated. You can also edit template.json manually.

Publish to npm

Make sure your package.json name is cra-template-[YOUR_TEMPLATE_NAME]

Example:

{
  "name": "cra-template-ui"
}
npm login
npm publish

Use your own template

npx create-react-app --template [YOUR_TEMPLATE_NAME]
# or
yarn create react-app --template [YOUR_TEMPLATE_NAME]

CLI details

There two commands create-cra-template and cct.

Run cct --help to see more details.

cct

 🕹 📤 A cli tool to generate cra-template from current create-react-app
 project.

Commands:
  cct                Generate template                                 [default]
  cct clear [--all]  Clear previous exports

Options:
  -h, --help     Show help                                             [boolean]
  -v, --version  Show version number                                   [boolean]
  -c, --clear    Clear previous exports before generation              [boolean]

Use in Node

Below is a simple example of using create-cra-template in your project:

const {
  generateTemplateJson,
  generateTemplateFiles,
  clearPackageFileField,
  clearTemplateFiles
} = require('create-cra-template')

const rootDir = process.cwd()

;(async()=>{
  await clearPackageFileField(rootDir)
  await clearTemplateFiles(rootDir)
  await generateTemplateJson(rootDir)
  await generateTemplateFiles(rootDir)
})()

Built-in templates

cra-template-popular

Work in progress...

cra-template-ui

Work in progress...


🎉 That's it! Enjoy your own template.