Build Your Own CRA Template

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

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 👇

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 is 👇

"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.

Editing files

First I'll edit the index.js file. I imported the bootstrap.min.css file and BrowserRouter from react-router-dom your can also edit more but in my case those are all i need when started a new project. So tha 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 the all jsx and added just h1 tag with lorem text also i edit the README.md file. The README file also will shown in npm package web site.

Creating template folder and template.json

After all editing the project we're gonna build our actual template folder structure. In CRA documentation says the folder structure must have 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 all delete the node_modules folder. Then create template folder. Move the public and src folder to template folder. Also rename the **.gitignore ** to gitignore then move to template folder. Last thing about template folder create 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 the all of them to template.json file. My template.json file is;

{
  "package": {
    "dependencies": {
      "axios": "^0.25.0",
      "bootstrap": "^5.1.3",
      "react-bootstrap": "^2.1.2",
      "react-icons": "^4.3.1",
      "react-router-dom": "6",
      "react-scripts": "5.0.0",
      "sass": "^1.49.7"
    },
    "eslintConfig": {
      "extends": ["react-app"]
    }
  }
}

Copy all your from your package.json file. Thats all. 🙂

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

{
  "name": "cra-template-junior",
  "version": "0.0.1",
  "keywords": ["react", "create-react-app", "template"],
  "description": "The cra-template-junior template for create-react-app",
  "repository": {
    "type": "git",
    "url": "https://github.com/eyupucmaz/cra-template-junior.git"
  },
  "license": "MIT",
  "engines": {
    "node": ">=14"
  },
  "bugs": {
    "url": "https://github.com/eyupucmaz/cra-template-junior/issues"
  },
  "files": ["template", "template.json"]
}

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

Publishing Template

Finally we have own template but 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. 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.

My Npm Package

Thanks for reading 🙂

Also check it out

• React Docs
• CRA Template