Lambda Brownbag: How To Make And Publish Your Own CRA Template!
Tags: react, productivity, webdev, npm
Published: 2020-01-24 01:52:35

[![Live walkthrough.](https://thepracticaldev.s3.amazonaws.com/i/srlq1bhe2uwxol3vn1b6.png)](https://youtu.be/XfrhqRbcguY)

## Why should you create your own react app template?

- Productivity:
  - If you spend less time setting up you project you can spend more time coding your project.
  - If you spend more time coding your project, the better your project will be.
  - If you spend less time repeating yourself, the more time you can spend exploring.
  - The more time you spend exploring, the more you will discover!
- Made just for you!
  - You start each project with a template that covers all your needs! React router, redux, your fav style library and so much more!
- It will help you get hired!
  - Recruiters and hiring managers want to see what you've learned outside of class.
  - Having your own create react app template published on npm will look good on your resume!
- It will open up the world of creating and publishing your own npm packages!
  - Once you've learned how to publish your own CRA template to npm, why stop there?!
  - The best developers build their own tools.
  - You will understand packages you built better than any package somebody else has built.

## Steps

#### Step 1:

Go to Facebook's create-react-app repo, fork it and clone it.

#### Step 2:

After your project is cloned, go to the repo directory inside your terminal and cd into the packages directory.
Now it's time to create a folder here for our template. Create react app wants us to follow their naming convention of cra-template-[template-name].
Let's create our directory and cd inside of it now:

`git clone BROWNBAG_REPO && cd cra-template-brownbag`.

#### Step 3:

Now let's build the structure for our template! We can start by creating; a template folder (this is where all of our files and folders we want in our template go), a template.json (this is where we can define the packages and scripts we want to add to CRA's installation), and a README.md with a detailed description of our template.

#### Step 4:

Let's make our template directory and template.json file:

`mkdir template && touch template.json`

**Open README.md and paste:**

```markdown
# Welcome to My Custom Template!

## How To Install

### yarn

`yarn create react-app <app-name> --template brownbag`

### npm

`npm init react-app <app-name> --template brownbag`

### npx

`npx create-react-app <app-name> --template brownbag`

### global

> If create-react-app is installed globally on your computer you can use this command:

`create-react -app <app-name> --template brownbag`

Just like regular create-react-app but so much more. This template includes:

- bushido-strap
- node-sass
- styled-components

## BUSHIDO_STRAP

What is bushido-strap? Well, friend, it is a personal style library of mine. It has a bunch of handy styled-components I've slowly crafted over time. It's already set up in this project. [Check out the documentation here to see everything this modest style library has to offer!](https://www.npmjs.com/package/bushido-strap)
```

It's time to define our packages in our template.json. We don't have to define packages such as react and react-dom that already come with CRA, just additional packages we would like to add.

**In template.json paste:**

```json
{
  "dependencies": {
    "bushido-strap": "^1.3.5",
    "node-sass": "^4.13.0",
    "styled-components": "^4.4.0"
  }
}
```

Now that we have those pasted, lets copy the defualt template over to populate our personal template directory for a base. Run:

`cp -R ../cra-template/template/public ./template && cp -R ../cra-template/template/src ./template && cp ../cra-template/template/gitignore ./template`

> I like to add .env, yarn.lock, and package-lock.json to gitignore at this point. You will notice that the gitignore file does not have a "." in front of it. 

#### Step 5:

Modify your custom react template in your template folder and your template.json to your heart's content.

#### Step 6:

Run `yarn init`: make sure you make the "main" file template.json and **not** index.js.
Run `npm login`. **Must** have an email verified account.
Git add, commit and push.
Run `yarn publish`. And just like that, you're live!