Making a personal CRA typescript template

I often use CRA (create-react-app) to initialise React projects, and it’s great, but I always find myself adding/deleting the same files every time before I can actually get started, which is frustrating. Fortunately, CRA offer a templating solution to help you avoid this chore.

What my personal template does:

  • Adds a config file for Prettier (an awesome code formatter) and adds a pre-commit git hook (using Husky) to format all my code on every commit.
  • Deletes all the default CRA files and installs Styled Components (my favourite React styling solution).
  • Adds Normalize.css to fix key browser rendering differences.
  • Creates a folder which contains the files , , and - I always end up creating these for every app so it makes sense to include them in my personal template. Includes some common mixins and global styles that I always use.
  • Creates a folder. Includes an component file that can be copy-pasted to quickly make new components.
  • Adds a file for redirecting all routes to the SPA when I deploy to Netlify.
  • Adds a customised to allow absolute imports from (lets you avoid hell and import like this - - which makes refactoring easier).
  • Adds a script for analysing bundle(s) size with source-map-explorer (useful for every project).

How to make your own:

The easiest way is to simply initialise a new TS CRA app with . Remove any default CRA files you don’t want and add files/config that you’d like to have in all/most of your future React apps. Test that it’s all working with .

Then create a separate repository named . Make a folder and copy in everything from the CRA app you just created/edited except for , , and . And rename to .

Create a file in the root of the new repo. This lets you define key/values that you want to be added to the of new projects initialised with your template. Eg: dependencies, scripts, config (more detail here).

After doing this your repository should have the following structure:

README.md
template.json
package.json
template/
README.md
gitignore
public/
index.html
...other static files you want
src/
index.tsx
...other src files you want
...other config files you want

For reference: here’s my template and the default typescript template.

You can test your template locally by passing its file path to CRA like so:

npx create-react-app test-app --template file:../path/to/your/template/cra-template-[your-template-name]

If everything looks good, go back to your template repo, commit, and publish to NPM as a public package with a name structured like . Once that’s finished you can create a new React app with all your favourite personal customisations by just doing:

npx create-react-app [project-name] --template [your-template-name]

For example, I published my template as so I can use it with .

And that’s all there is to it! Now sit back, relax, and think about all the time you’ve saved your future self.

Links:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store