Customizing default template

[fcaldera]

Hey guys!

We would like to use all the power provided by create-react-app every time we start with a new project. As we always add few extra libraries after the app is created like react-router, redux, classnames and use a slightly different project structure to the provided by the default template, I was wondering if there is a recommended way of doing this repetitive work.

Here is what I tried so far:

1. Fork of react-scripts and modify the default template
   With this solution is possible to modify the generated app structure. However, adding new dependencies is not quite simple. It takes adding a .template.dependencies.json and modifying the scripts/init.js so it installs the additional dependencies if present even when a custom template is not provided via --internal-testing-template and avoid installing react and react-dom when previously installed. I'm wondering if this could be a feature request itself.

   A downside I see with this approach is it takes maintaining your own version of react-scripts even when you don't need to modify the react-scripts dependencies itself but the template's dependencies.

2. CRAFT. React Create App From Template
   This is a very interesting concept. This command line utility allows you to use your own template when creating a new app. The problem is it doesn't really create a new app but basically copies a repository with a previously created react app then applies some changes to the output, as far as I could see. This is far from being ideal since when I'm creating a new app, I would prefer using the most recent version of react-scripts as possible rather on rely on the one installed in the template, which may be outdated.

This may be an advanced use case and not sure if it is out of the core ideas for this awesome project but it seems create-react-app already contains most of the things needed to support something like this:

create-react-app MyApp --template <url-to-template>

Does anyone know what is the general recommendation from the community to deal with this case?

Thanks!

[GAumala]

Here's a third alternative that does all that you want without too much extra work: Write a script that works on top of create-react-app.

#!/usr/bin/env bash

create-react-app $1
cd $1 
yarn add react-router redux classnames
# use mv and mkdir commands to get desired project structure

You can use it like this:

./create-custom-react-app.sh my-new-app

[likun7981]

@fcaldera I create a create-react-app wrapper . May be satisfied with what you say. you can see create-custom-react-app

[fcaldera]

Thanks @GAumala. It looks like a good approach. Our needs however demanded a more flexible and maintainable solution since we wanted to share this across teams and every team may have different needs on dependencies and project structure. In simpler scenarios it can definitely work.

[fcaldera]

@likun7981 it seems we ended up like building the same thing. You can see ours here: https://github.com/fcaldera/craft. This is pretty much a WIP so please disregard our lack of documentation.

I like several things you did down there, specially the support for local templates and the use of the hidden option of create-react-app which simplifies everything. Not sure how much we should rely on that hidden feature but it was definitely a smart move. Thanks for sharing!

[markerikson]

I think this is an excellent idea, and should be added as a built-in option to the CRA CLI tool.

This would possibly help address complaints that CRA doesn't deal with app setup at all. This way, the Redux docs could tell people to use --template react-app-template-simple-redux-starter, the MobX docs could point to --template react-app-template-mobx-setup, and someone else could point to --template my-awesome-kitchen-sink-template.

I'm going to cheat a bit and tag @gaearon and @Timer to see if I can bring this to their attention.

[iansu]

I'd be willing to implement this if it's something the CRA team would like to include. I personally think it would be useful.

I just looked at the code and it seems like everything is in place for this already. There's even a super secret option that will let you use it:

.option(
    '--internal-testing-template <path-to-template>',
    '(internal usage only, DO NOT RELY ON THIS) ' +
      'use a non-standard application template'
  )

It would be very easy to make this an officially supported option so I'm guessing there's a reason it's not exposed. I'd love to know what that is though.

[gaearon]

create-react-app MyApp --template

Can you explain how this is different from just git clone + npm install? The project you create is just a repository so you can make your own and use it as a template.

[fcaldera]

CRA moves fast and it is good you can always use the most recent version of react-scripts as possible when creating new apps. git clone + npm install would rely upon a repository that would most likely have an outdated version of react-scripts. So the main difference is you would have to remember updating your template prior to creating a new app, which may not be necessary for example when the template has just folder structure.

Imagine if we had to remember updating create-react-app before creating a new app to get the most recent version of the scripts. We don't have to do that fortunately and with cloning I feel we are loosing some of this magic.

[gaearon]

Doesn't semver sort of give you that? You can set "react-scripts": "1.x" if you always want to get the latest compatible version.

There's no guarantee your template will be compatible with future major versions. So this is a problem in either case.

[fcaldera]

That's an interesting point. It will take some manual steps like setting a specific version for react-scripts in the cloned app and changing the git origin but I can see value on it.

Don't you think it would be nice that we can also use the most recent version of public/index.html and src/registerServiceWorker.js when creating an app based on a custom template?

As I envision this, a custom template doesn't necessarily need to play as a full replacement of the default template but as a complement. That said, I may only need to include some extras files and folders to my template and then gets everything merged with the default template. It would mean I don't need to include and maintaining a public/index.html file to my template, unless I want to actual replace it.

[dimas-cyriaco]

Having this option officially supported would be useful for people who want to extend CRA (something like this.

Just having a repository to be used as a initial app template is not as useful as having a package that extends CRA as a dependency of your project.

Having a package allow us to update script and push this updates via package update, allowing the user to get the new code just by updating the version of the package. Doing this with a template repository is not as practical.

[corysimmons]

#2960 (comment)

This logic can be applied to CRA itself, right?

Lots of boilerplate generating CLI's have a --template flag.

They make the mistake of making those templates 3rd party, but if CRA team would maintain a few variants then --template could be handy.

Very specifically: I hate having to delete all the junk in a CRA app (yes I fire up a lot of CRA apps just to test misc stacks) and would love a --template=bare or just --bare flag. I really don't care about the rest.

[marcopeg]

Hello everyone, I was digging the same issue as I'm creating a small fork (as suggested into the official docs) to support some webpack extensions (like in react-app-rewired) and adding some custom templates.

I found out that --internal-testing-template is currently supported and will try to fetch a template folder from the cwd.

It works decently enough for me, but I've tweaked a little bit the init.js so to be able to host more basic templates in my own version of react-scripts.

I hope this flag that seems so experimental will one day become just --template as you all suggest!

[robphoenix]

Can this be closed now the --template flag has been added? https://create-react-app.dev/docs/custom-templates/

[corysimmons]

Whoa I need to read release blog posts. :O Nice! Thank you CRA Team! <3