Contents
Outline
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.
- Official document: Custom Templates
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.
[email protected] | MIT | deps: none | versions: 2
DeKu template for create-react-app
https://github.com/dev-yakuza/cra-template-deku
keywords: react, create-react-app, cra, template
dist
.tarball: https://registry.npmjs.org/cra-template-deku/-/cra-template-deku-0.0.2.tgz
.shasum: 89c7f5797c9bf12cfa45dee3de7c29867cc8e371
.integrity: sha512-9HAfk9OkBVfaJHcoIjuCZhQry64UU4OOlNNmUYvhtXrr0xoxzeq6jo1OgjU97Fav2kkyjmYupgmy4GYNAWWFHQ==
.unpackedSize: 275.8 kB
maintainers:
- dev-yakuza <[email protected]>
dist-tags:
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 https://registry.npmjs.org/cra-template-yakuza - 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.
- React UI library: MUI, Emotion
- Component driven development: Storybook
- Calling API: Axios, React Query
- State management: Recoil
- Routing: React Router
- i18n: react-i18next
And then, I change the folder structure like the following.
cra-template-deku
├── 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.
cra-template-deku
├── package.json
└── template
├── README.md
├── .gitignore
├── public
├── src
└── tsconfig.json
.gitignore
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.
cra-template-deku
├── package.json
└── template
├── README.md
├── gitignore
├── public
├── src
└── tsconfig.json
template.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": [
">0.2%",
"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.
cra-template-deku
├── package.json
├── template
│ ├── README.md
│ ├── gitignore
│ ├── public
│ ├── src
│ └── tsconfig.json
└── template.json
Test
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.
cra-template-deku
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── template
│ ├── README.md
│ ├── gitignore
│ ├── public
│ ├── src
│ └── tsconfig.json
└── template.json
The package.json file and README.md file in the root folder are for deploying to NPM. When creating a project with the --template option, they are not included.
The README.md file in the template folder will be inlcuded when creating the React project with the --template option.
Deploy
If you want to know how to deploy the open source to NPM, see the following blog post.
Completed
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
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
