Minimal Mode

[kenwheeler]

• Adds -minimal flag
• Adds template without additional css, service worker or svg
• Switches to functional components and createRoot
• React dependencies @next

[iansu]

Perhaps --minimal isn't the right name but I think this idea does have merit. In my opinion, Create React App has two main audiences: people new to React who want an easy way to get started and more experienced developers who want to prototype an idea or try something out quickly. In general we focus on people new to React but this could be useful for more experienced developers. Revising the template to use functional components and createRoot seems like something we might want to do anyway with hooks and suspense coming soon.

This approach does have some issues. We would need to have a minimal template for JavaScript as well as TypeScript so we'd be going from 2 templates to 4. Installing the @next versions of React and ReactDOM might not be what everyone wants or expects.

People have also requested the ability to specify custom templates in the past, which we've chosen not to allow. There are some technical reasons, as well as some philosophical ones but maybe it's time to revisit that discussion.

[kenwheeler]

Removed the @next stuff, happy to implement first class custom templates if you want.

[kenwheeler]

Also, re: template count, thats a toughie. In the past I've done things like have evaluated templates and file inclusion/exclusion lists, but it makes editing and reading the templates a real pain in the snooch.

[iansu]

Yeah, I don't think we want to go down that road. We also don't want to maintain a large number of templates. That's why revisiting custom templates might make sense. It's been rejected in the past though. I don't know what the right answer is. I'd like to hear what some of the other maintainers think.

[jimthedev]

As someone who maintains a fork of react-scripts so that we can offer a customized template, out of the box dependencies and pre selected options I love the opinionated nature of this template. My problem is that including it out of the box means more out of the box templates that I need to watch with each upgrade when I'd really just love ways to be able to declare side effects in certain key areas of the CRA lifecycle. I know my use-case is outside the current CRA ecosystem but the more templates that are added, the more templates we need to support and patch with each upgrade. CRA is a wonderful tool and templates seem like they offer a good way to deal with file or config differences but don't really allow us to tap into or customize in the init or prepare steps. Not a blocker for this PR but something to think about if more modes/templates like minimal get added.

[kenwheeler]

Preliminarily speaking, based upon these results, I’d posit that a large group of users are wasting their time deleting stuff:

https://twitter.com/ken_wheeler/status/1088567547811766272?s=21

[gaearon]

Can —template accept a (partial) npm package name? Like —template wheeler would init with react-scripts-template-wheeler.

I guess —scripts-version does something like this. But in this case only template itself would be customizable.

[iansu]

That does seem like a good option. It would be similar to the --scripts-version flag but makes life easier for people who only want a custom template. Maintaining a fork of react-scripts just to customize the template introduces a lot of overhead. Requiring it to be an npm package would allow the template to specify its own dependencies as well.

[gaearon]

Yep. Let’s make it happen?

[kenwheeler]

It could but I think that adds a couple issues:

• The cognitive burden of knowing which scripts
• the optics around using non official scripts
• can’t use cli opts to get docs about why it’s wrong if it is

My point here is that create-react-app’s purpose is to provide an easy starting point to create a react app. But when a large, if not majority, number of users spend their first minutes deleting half of it, then it’s not doing the best it can, right?

[gaearon]

We can improve the default template. But this problem came up in many different ways. People want this feature. I don’t think discoverability will be a problem. Someone will make a website with categorised popular ones. Think “boilerplates” but without the build config debt.

I’m pretty sure we want this and it will be glorious.

[gaearon]

(For you the only change would be —template minimal and the ability to tweak it. :-)

[kenwheeler]

Ok, I’ll update it to make template resolve from npm

[iansu]

I'm excited for you to land your first PR in Create React App. 😂

[gaearon]

Imagine all you had to do to launch library Foobar examples is to run create-react-app —use foobar. It can be a convention. Redux will make a starter, MobX, styled, emotion, etc. And then there can be higher level curation.

[mvolkmann]

Someone said “In my opinion, Create React App has two main audiences: people new to React who want an easy way to get started and more experienced developers who want to prototype an idea or try something out quickly.” I think there’s a third audience ... experienced developers that build real applications with create-react-app and never eject. That’s what I do. I want the benefit of future enhancements to react-scripts without having to maintain it myself.

[mwarger]

Imagine all you had to do to launch library Foobar examples is to run create-react-app —use foobar. It can be a convention. Redux will make a starter, MobX, styled, emotion, etc. And then there can be higher level curation.

I would like this - been thinking a while about how I like the option selection enabled by Vue-CLI. If you could default to "minimal" if a --use flag was passed. Then say I want to --use emotion,typescript,mobx and have the templates add their stuff... Maybe this is too much? Does this exist elsewhere?

[harrysolovay]

It should also be possible to resolve a template locally. A solution could be to just check if the provided value is a repo url, local path, or, assume it's an npm name as a fallback. That way you could do any of the following:

create-react-app -template ~/Desktop/my-custom-template

create-react-app -template https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/template

create-react-app -template cra-template-redux

[mrmckeb]

So I'm all for custom templates too, in fact I've raised it with the other maintainers a few times - so this is great.

I think we need to settle on a convention that makes sense. Personally, I prefer --template makes more sense than --use - as these will be templates.

Perhaps we resolve in a similar way to ESLint configs, in that --template airbnb would resolve cra-template-airbnb from GitHub? That was my original thinking.

[iansu]

The way we resolve scripts-version is similar to what @harrysolovay is suggesting. I think it makes sense to default to npm but allow people to specify local paths or GitHub URLs.

[mrmckeb]

Agreed, @iansu. We can use NPM/Yarn-style resolution, where prefixing with file: would to just that, as we do with --scripts-version.

The major difference I'm suggesting is that we add some standardisation (and make templates easier to find) by using a prefix, that users can omit when installing via --template. With this approach, I could search NPM for cra-template-* and see all templates.

We could also adopt the same for scripts at a later date, but that's not for this discussion.

[iansu]

I agree that we should use a standard prefix. @gaearon suggested react-scripts-template-<name> which might be better than cra-template-<name>. We don't really use the CRA acronym officially right now and I'm not sure if we want to start.

[mrmckeb]

Agreed @iansu.

@kenwheeler, do you need any help on this? I have a lot of time this weekend to take a look... so I would be happy to pick this up, as it's evolved a little since the initial PR.

[harrysolovay]

If a template system is gonna happen, the --typescript flag should be removed in favor of specifying the TypeScript template (create-react-app --template typescript).

[jimthedev]

@iansu a convention would be great but with namespaces or organizational packages like ‘@jimthedev/my-template’ it sorta falls apart doesn’t it?

[harrysolovay]

@jimthedev agreed. No point in trying to create a template naming convention... especially since I'd imagine many users will create their own templates and reference it locally.

[mrmckeb]

Hi @jimthedev and @harrysolovay. In fact it can work - you'd just, as with many other tools, use @jimthedev/some-template - which would reference @jimthedev/create-react-app-template-some-template.

I think many users will publish templates... and this wouldn't stop you from simply referencing any local module.

I agree we could deprecate the --typescript flag with this feature.

[mrmckeb]

I've given this some more thought, and I think we'll want to require that templates indicate the minimum compatible version of react-scripts - peerDependencies should do the job.

Another thought - should templates be listed as dependencies once used? I can't think of a good use for this, but it would be nice to keep track of which template was used to initialize a project.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[iansu]

Closing this in favour of the more general template approach in #6514. Thanks for kicking this all off in typical Ken Wheeler style. 😀