Build Your Own CRA Template

4 min readFeb 6, 2022

Today we’re gonna build our own create-react-app template. I have used a cra been a while. I clearing some files on the app when I used cra. (Like test files, icons, and inside of app.js file). I thought why am I not using a template a few days ago. Therefore I googled “how I create my own template?”. After looking at some blogs and documentation I built one. Let’s take look at how you can build your own.

1. Create a new App

Create a new react app as always you did. Basically;

npx create-react-app cra-template-[template-name]

After all installation clear all files which are you don’t want to on your template. In this case my project is look like this 👇

2. Adding Files and Dependencies

So add all dependencies usually you use on your projects. Just type on console npm i <dependency> or npm i <dependency> --save-dev install whatever you want. I installed my own also I deleted a few dependencies from package.json My dependencies are 👇

"dependencies": {
 "axios": "^0.25.0",
 "bootstrap": "^5.1.3",
 "react": "^17.0.2",
 "react-bootstrap": "^2.1.2",
 "react-dom": "^17.0.2",
 "react-icons": "^4.3.1",
 "react-router-dom": "6",
 "react-scripts": "5.0.0",
 "sass": "^1.49.7"
}

I will also add components folder to my template. I added a dummy component in this folder. The final folder structure is 👇

3. Editing Files

First i’ll edit the index.js file. I imported the bootstrap.min.css file and BrowserRouter from react-router-dom you can also edit more but in my case those are all i need when started a new project. So that my index file 👇

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.scss";
import { BrowserRouter } from "react-router-dom";
import App from "./App";ReactDOM.render(
 <BrowserRouter>
  <App />
 </BrowserRouter>,
 document.getElementById("root")
);

In App.js I removed all jsx and added just React as a React Project 🙂 also i edit the README.md file. The README file also will be shown on the npm package website.

4. Creating template folder and template.json file

After all editing the project, we’re going to build our actual template folder structure. In CRA documentation says the folder structure must have the following structure,

cra-template-[template-name]/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

So, first of all, delete the node_modules folder. Then create a template folder. Move the public and src folders to the template folder. Also, rename the .gitignore to gitignore then move it to the template folder. The last thing about the template folder creates a README.md file for projects created from this template.

Let’s create a template.json file and edit. Remember we already added our dependencies for our template. We’ll move all of them to the template.json file. My template.json file is;

Copy all your from your package.json file. That's all. 🙂

The last thing before publishing to npm we should edit the package.json file. I used the official template to edit my own. You can also use it. So my package.json file is;

You should add your own name and own GitHub repository. Also, there is the last thing you must have, your project name should start with cra-template- for me cra-template-junior 🔴

5. Publishing Template

Finally we have own template but we can not able to use. We should publish our template to npm package manager. Open npmjs.com and create a profile. We’ll use account to publish our template.

Open a console and login to npm. Use your username and password for login.

npm login

If you successfully logged in you should see a message on console.

Succes Login ✅

Final part is publishing to do that just type npm publish and press enter. 🚀

Congrats 👏 You published your own cra template 🙂 Let’s use our template for our new project 🙂.

npx create-react-app --template [templatename] my-project

The [templatename] is what you named after cra-template- for me is junior so my actual template name is cra-template-junior so you should use your own. Feel free to use mine as well. 🙂

Thank you for reading. 🙂