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
.cssfiles and installs Styled Components (my favourite React styling solution).
- Adds Normalize.css to fix key browser rendering differences.
- Creates a
src/stylefolder which contains the files
global- 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
src/componentsfolder. Includes an
Example.tsxcomponent file that can be copy-pasted to quickly make new components.
- Adds a
_redirectsfile for redirecting all routes to the SPA when I deploy to Netlify.
- Adds a customised
.tsconfig.jsonto allow absolute imports from
/src(lets you avoid
../../../hell and import like this -
import colors from "src/style/colors”- 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
npx create-react-app my-template-structure --template typescript . 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
yarn start .
Then create a separate repository named
cra-template-[your-template-name] . Make a
/template folder and copy in everything from the CRA app you just created/edited except for
package.json , and
yarn.lock . And rename
template.json file in the root of the new repo. This lets you define key/values that you want to be added to the
package.json of new projects initialised with your template. Eg: dependencies, scripts, config (more detail here).
After doing this your repository should have the following structure:
...other static files you want
...other src files you want
...other config files you want
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
cra-template-[your-template-name] . 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
cra-template-dronz so I can use it with
npx create-react-app some-new-project --template dronz .
And that’s all there is to it! Now sit back, relax, and think about all the time you’ve saved your future self.