Create Your Own React Template

Are you tired of deleting the same things and adding the same extra packages to create-react-app just to get up and running? Don't you just wish you could type a command... like say yarn create react-app <app-name> --template <template-name> and -- POOF! -- it spits out a version of CRA that has only what you need and everything you want so you can just start coding right away! Well, friend, you're in luck!

After using create-react-app for quite a while, I got tired of having to delete files and code, and then I would have to go in and install react-router, redux, and a few other things just to get off of the ground. It became something that started to slowly chip away at my soul having to go through the same lengthy setup process each time (I don't know how react dev's survived before CRA).

So here we are, going over the steps you need to create your own react-app template and publish it to npm! Let's get started.

Step 1:

Go to Facebook's create-react-app repo, fork it then, clone the CRA repo to your machine.

Step 2:

Once you are inside the create-react-app directory on your machine, cd packages/.
Now that you are in the packages directory, you are going to want to create the folder for your template file. To make a template it would be wise to follow the naming convention cra-template-<template-name> when you make this new directory. Example: mkdir cra-template-bushido (Named mine after the old samurai code of honor.)

Step 3:

Now that you have your appropriately named template directory inside the packages directory, we can start setting up our template. Inside your cra-template directory, touch template.json. This template.json is where you want to add any additional packages and scripts and stuff. Don't worry about adding things CRA already does for you. My template.json ended up looking something like this:

{
  "devDependencies": {
    "@testing-library/react": "^9.3.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/user-event": "^7.1.2"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "normalize.css": "^8.0.1",
    "react-redux": "^7.1.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "serve": "^11.2.0",
    "styled-components": "^4.4.0"
  },
  "scripts": {
    "serve": "serve -s build",
    "build-and-serve": "npm run build && npm run serve"
  }
}

Now we can create a README.md, give a good description of what our amazing new template hopes to accomplish and move on to the next step.

Step 4:

Let's make template directory now. So far, our file structure should look a little something like this:

create-react-app/
  .github/
  docusaurus/
  packages/
    ...
    cra-template-<template-name>/
      template/
      README.md
      template.json
  ...

The files and directories inside of this template folder is what CRA is going to spit out when we call our template. So inside template/ we want to have a public/ and a src/ folder with a gitignore file (CRA will add the '.' to the gitignore file when you run the command so no worries) and a README.md that describes the code and what this template has to offer to anybody who decides to use our template. To get the public folder, I recommend running the command cp -R ../cra-template/template/public ./template to copy the public folder from the default template directory and into the new template folder.

You're going to need an App.js, index.js, maybe a index.css or maybe a components folder. This is where you really get to be yourself, so set up the perfect boilerplate for you inside the src folder.

Step 5:

We are almost done! Now that we have our template folder with a public and src folder, a gitignore, a README.md and a template.json, it is time time to do an npm init. Make sure your main points at template.json and not index.js. Here is what my package.json looks like:

{
  "name": "cra-template-bushido",
  "version": "1.0.1",
  "description": "CRA plus redux, router, axios, normalize.css, styled components",
  "main": "template.json",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JimmyMcBride/create-react-app.git"
  },
  "keywords": [
    "redux",
    "router",
    "axios",
    "styled-components"
  ],
  "author": "Jimmy McBride",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/JimmyMcBride/create-react-app/issues"
  },
  "homepage": "https://github.com/JimmyMcBride/create-react-app#readme"
}

Step 6:

Before we run npm login, we must make sure we have an npm account and our email is verified before this will work. Once you have your account set up and email verified, run npm login once you are logged in then just run npm publish and BOOM! Just like that, your template should be live, you can run create-react-app with the --template <template-name> tag on the end and you're good to go! Since I named my template cra-template-bushido, I run the command yarn create react-app <app-name> --template bushido, and it spins up my own custom react app boilerplate.

I hope you found this as helpful as I have. Let me know what your thoughts and feedback are in the comments below! Thanks, guys! If you want to check out my cra-template code as a reference and/or to see how I did it, click here.

Comments

[Vlad Burlutskiy]

I followed your steps but somehow I keep getting this message. Getting stuck there:

Error: ENOENT: no such file or directory, stat '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'
    at Object.statSync (fs.js:1086:3)
    at Object.statSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/graceful-fs/polyfills.js:307:34)
    at statSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:10:52)
    at getStatsSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:24:19)
    at Object.checkPathsSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:49:33)
    at Object.moveSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/move-sync/move-sync.js:14:28)
    at module.exports (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/react-scripts/scripts/init.js:273:8)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:133:18)
    at Object.runInThisContext (vm.js:310:38) {
  errno: -2,
  syscall: 'stat',
  code: 'ENOENT',
  path: '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'
}

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
npm ERR! code 1
npm ERR! path /Users/vladislavburlutskiy/Documents/Lambda
npm ERR! command failed
npm ERR! command sh -c create-react-app "my-app" "--template" "astra"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vladislavburlutskiy/.npm/_logs/2021-02-13T17_51_18_481Z-debug.log

[Michelangelo Markus]

Error: ENOENT: no such file or directory, stat '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'

This is your error. No such file as gitignore

.gitignore !== gitignore

Check the file name.

[Vlad Burlutskiy]

I know, somehow cra is not adding the dot in front of gitignore

[Jimmy McBride]

Can you push your code to GitHub so I can check it out? I've never encountered this error myself, so I don't have a quick solution. But if I can see you code maybe I'll have a better idea.

[Vlad Burlutskiy]

I found the bug and fixed it already.

[Jimmy McBride]

What was it?

[Vlad Burlutskiy]

I initially had gitignore outside the template folder and npm published it as such. Then I fixed that and moved it inside the template folder, however I didn't npm publish an updated version.

[Jimmy McBride]

Ah! That makes sense! Yeah, once you said the dot wasn't in front of it, that's what I figured. Forgetting to publish my changes has got me a time or two as well! Glad you got it figured out!

[Vlad Burlutskiy]

I also created a separate repo for my cra template:
github.com/nezlobnaya/cra-template...

[Vlad Burlutskiy]

and I added an alias (alias create-react-app-custom="npx create-react-app --template=file: path/to/folder) to my .zshrc file to quickly run it locally

[Jimmy McBride]

If you have a .gitignore delete the dot and do just gitignore maybe?

[Jimmy McBride]

Looks like it can't find gitignore, do you have a dot in front of it?

[Vlad Burlutskiy]

I don't, Jimmy. Obviously, there is something else

[Jimmy McBride]

Check the path that your gitignore file is compared to where the error says it isn't. The error is obviously trying to tell you what's wrong.

[Rich Winter]

I like your template's idea, but I think you are creating confusion by using/mixing both SASS and styled-components.

Personally, I would want all styling variables handled by styled-components. It is easy to
import { createGlobalStyle }... and define CSS globals there. Then apply them by wrapping the main <App> with a <ThemeProvider> component - See styled-components.com/docs/api#cre...

I don't see you using SASS color manipulation functions, so I'm wondering, other than those, why choose to use SASS at all?

[Jimmy McBride]

At this point, just for color variables. But I'm really digging what you're putting down. I'm actually refactoring my style library to lean solely on styled-components and factoring out sass. 👍

Why it was in there at all was because the style library I had created was (and is) a baby. It helps you lay out a page really well, but it wasn't that pretty. So I included sass to pretty up everything after it was laid out.

[Ahmad Ichsan Baihaqi]

Hello Jimmy, thank you for this great article. Help me so much for starting to create my custom CRA template. However, I have question. As mentioned in this article, you also provide devDependencies inside template.json. I also did the same. But, unfortunately, the devDependencies not installed when I run the CRA command. After several minutes trying to solve, I found out that devDependencies is blacklisted to be present inside the template.json. Here is the code I found in CRA github github.com/facebook/create-react-a.... Are you face the same problem?

Thank you in advance.