Lambda Brownbag: How To Make And Publish Your Own CRA Template!

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:

# 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:

{
  "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!