Custom template for create-react-app

2023-10-30 hit count image

Let's see how to create the custom template for create-react-app and make a React project with the custom template.


We can simply make a React project with create-react-app. create-react-app provides the --template option to use pre-made templates.

create-react-app basically provides a template for TypeScript.

So, we can simply make the React project based on TypeScript by using the following create-react-app command.

npx create-react-app [YOUR_PROJECT_NAME] --template typescript

In this blog post, I will introduce how to make a custom template for create-react-app.

Create create-react-app template project

In order to make the create-react-app template, you need to add the cra-template- prefix to the project name when you create the React project.

npx create-react-app cra-template-[Template Name]

In my case, I make the project named cra-template-deku.

npx create-react-app cra-template-deku

This custom template project will be deployed to NPM(Node Package Manager). So, you need to check the project name is already used by executing the following command.

npm info cra-template-[Template Name]

If the project name is alread used, you need to use another name for the project.

cra-tem[email protected] | MIT | deps: none | versions: 2
DeKu template for create-react-app

keywords: react, create-react-app, cra, template

.shasum: 89c7f5797c9bf12cfa45dee3de7c29867cc8e371
.integrity: sha512-9HAfk9OkBVfaJHcoIjuCZhQry64UU4OOlNNmUYvhtXrr0xoxzeq6jo1OgjU97Fav2kkyjmYupgmy4GYNAWWFHQ==
.unpackedSize: 275.8 kB

- dev-yakuza <[email protected]>

latest: 0.0.2

published yesterday by dev-yakuza <[email protected]>

If you see the 404 like the following, you can use it for the custom template.

npm ERR! code E404
npm ERR! 404 Not Found - GET - Not found
npm ERR! 404
npm ERR! 404  'cra-template-yakuza@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /.npm/_logs/2023-10-22T06_20_21_911Z-debug-0.log

Customize React project

Next, you need to customize the React project by installing the necessary libraries, example code, and custom folder structure for your custom template.

In my case, I install the following libraries.

And then, I change the folder structure like the following.

├── public
├── src
│   ├── api
│   ├── components
│   │   ├── atoms
│   │   ├── molecules
│   │   ├── organisms
│   │   ├── pages
│   │   └── templates
│   ├── data
│   ├── locales
│   ├── types
│   ├── utils
│   └── ...
└── ...

package-lock.json file and node_modules

After making the custom template, you need to delete the unnecessary file and folder. The package-lock.json and node_modules are not used anymore, so execute the following command to delete them.

rm -rf package-lock.json node_modules

template folder

To make the current React project to the template, you need to create the template folder, and move all files and folders to it.

Make the template folder and move all contents except the package.json file to it. And then, the template project has the following folder structure.

├── package.json
└── template
    ├── .gitignore
    ├── public
    ├── src
    └── tsconfig.json


You need to change the .gitignore file name to gitignore in the `template folder. If you don’t change the name, the following error occurs when you try to use the template.

Error: ENOENT: no such file or directory, open '/projects/temp/gitignore'
    at Object.openSync (node:fs:592:3)
    at Object.readFileSync (node:fs:460:35)
    at module.exports (/projects/temp/node_modules/react-scripts/scripts/init.js:260:21)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:122:12)
    at Object.runInThisContext (node:vm:298:38)
    at node:internal/process/execution:83:21
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:82:62)
    at evalScript (node:internal/process/execution:104:10) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/projects/temp/gitignore'

So, you must change the .gitignore file name to gitignore that the . is removed.

├── package.json
└── template
    ├── gitignore
    ├── public
    ├── src
    └── tsconfig.json


All information on the libraries for the template project is recorded in the package.json file. You need to create a template.json file and move them to this file.

Create the tempate.json file and modify it like the following.

  "package": {

And then, cut and paste all customized parts of the package.json file to the template.json file.

  "package": {
    "scripts": {
    "dependencies": {
    "devDependencies": {
    "eslintConfig": {
    "jest": {

In my template project, I make some commands(ex> ESLint, Prettier etc), so I cut and paste the scripts part of the package.json file.

Also, I install some libraries for the development and the project, I cut and paste dependencies and devDependencies.

Lastly, I cut and paste the configurations(eslintConfig and jest) in the package.json file.

After cutting and pasting to the template.json, the contents in the package.json file are like the following.

  "name": "cra-template-deku",
  "version": "0.1.0",
  "private": true,
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"

And, the folder structure is like the following.

├── package.json
├── template
│   ├──
│   ├── gitignore
│   ├── public
│   ├── src
│   └── tsconfig.json
└── template.json


Now, the custom template for create-react-app is ready. Before deploying it, we need to test whether it works well.

Go to the folder outside of the custom project folder, and execute the following command to check the custom template works well.

npx create-react-app [YOUR_REACT_PROJECT_NAME] --template file:./cra-template-deku

Then, you can see the project is created well like the following.

Creating a new React app in /projects/temp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-deku...

added 1463 packages in 2m

242 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.

added 1139 packages, and changed 4 packages in 2m

514 packages are looking for funding
  run `npm fund` for details

Removing template package using npm...

removed 1 package, and audited 2603 packages in 8s

514 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created temp at /projects/temp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd temp
  npm start

Happy hacking!

If you get some errors, you need to fix them before deploying. If you don’t fix them, the custom template will not work even if you deploy it.

Prepare deployment

The custom template for create-react-app is completed. Now, we deploy the project to NPM for using it.

The following is the folder structure including the files and folders for the deployment.

├── package.json
├── template
│   ├──
│   ├── gitignore
│   ├── public
│   ├── src
│   └── tsconfig.json
└── template.json

The package.json file and file in the root folder are for deploying to NPM. When creating a project with the --template option, they are not included.

The file in the template folder will be inlcuded when creating the React project with the --template option.


If you want to know how to deploy the open source to NPM, see the following blog post.


Done! We’ve seen how to make a custom template that can be used when creating a React project with create-react-app. I encourage you to create your own template and use it when creating a React project with create-react-app.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.