Make your own Create-React-App (the quick and easy way)
Tags: react, npm, template, bundle
Published: 2020-06-17 17:59:39


## Make a Create-React-App custom template

---

I am sure that your are already sick of dealing with erasing all the boilerplate every time you start a new react project with CRA. While dealing with [Webpack](https://webpack.js.org/) could be valuable learning journey, it is at the same time a bit intimidating and for sure more time consuming.

Luckily, for us, CRA supports templating from ***react-scripts@3.3.0*** and higher. And in this article I am going to show you how to create your own and publish it at **npm**, so anyone can use it from anywhere.

## Creating the template

We are going to use the main CRA project as foundations, so lets start by:

```jsx
npx create-react-app my-template
```

*You can use the `yarn` equivalent, and name the project however you prefer.*

Now we have to make a couple modifications to the project structure:

- ❌  Erase the package-lock.json
- ❌  Erase the node_modules
- ⏹  Leave the package.json ( we will modify it afterwards)
- 📁  Create a template folder at root level
- ⤴️  Move the rest in the template folder
- ✏️  Rename .gitignore to `gitignor` with **NO DOT** (".")
- 📄  Create a README.md file at root level ( for npm)
- 📄  Create a template.json file at root level

The project file structure should look like this:

![project structure](https://dev-to-uploads.s3.amazonaws.com/i/otzbl3qws2ddzq5un6al.png)

Replace the package.json content with this:

```jsx
{
  "name": "<cra-template-Yourtemplatename>",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "<Your template description>",
	"main": "template.json",
  "license": "MIT",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "template",
    "template.json"
  ]
}
```

After that, dependencies will be added to the template.json file:

```jsx
{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.9.0",
      "@testing-library/react": "^10.2.1",
      "@testing-library/user-event": "^11.3.2",
    }
  }
}
```

These are the official [cra-template](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template.json) dependencies, but you can always add more.

![dependencies behaviour](https://dev-to-uploads.s3.amazonaws.com/i/v0ggibznsiagcyprp3cr.png)

Now is time to make it to your liking! Erase ServiceWorkers, rearrange folder structure, add .prettierrc config file... you name it.

I created this simple example, just erasing all the boilerplate for the App file and adding a components folder. Check it out **[here](https://github.com/AlejandroGutierrezB/CRA-template-noboilerplate).**

## Publishing the template in npm

To publish an npm package you first need an [account](https://www.npmjs.com/signup). Then make sure you are in the project directory and run the following command:

```bash
nbp-template git:(master) ✗ npm login
```

Type in your username, password and email. And you are ready to publish.

```bash
npm publish
```

## Using the template

This is the easiest part, simply run:

```bash
npx create-react-app my-app --template [template-name]

//try my own template I mentioned above

npx create-react-app my-app --template nbp
```

Hope you enjoyed the article and make your own custom templates.   It is my first article and also the first time I publish an npm package. So feedback in both will be well appreciated.
I am also currently looking for a front-end engineer position in Barcelona or remote, hit me up in [linkedin](www.linkedin.com/in/alejandrogutierrezb), if you have an interesting project.

## Additional Resources:

[https://create-react-app.dev/docs/custom-templates/](https://create-react-app.dev/docs/custom-templates/)

[https://www.npmjs.com/package/cra-template](https://www.npmjs.com/package/cra-template)