Migrate to Vite

[dfosco]

This is a major update to react-template that:

• Moves away from CRA as tooling for the template, since it has been officially deprecated and breaks very easily on modern React apps
• Adds GH-pages deployment configuration and instructions for easily sharing React prototypes
• Adds simple file-based routing with generouted
• Adds detailed documentation for how to run locally and on Codespaces
• Adds a few GitHub layout Templates with links to more documentation

I appreciate if the team feels this PR is too big to merge at once, and I'd be happy to find smaller slices if that's a better way!

This started as a separate (private) repo on https://github.com/github/primer-react-prototype, and I was encouraged to merge it back. Since there are no private forks however, it was messy to pull changes back, so apologies if the git history
looks... weird 😅

[joshblack]

Hi there! 👋 Thanks so much for taking the time to make this PR 🙏 Definitely agreed moving off CRA would be 💯

Just had some questions that came up when looking at this and would love to hear your thoughts 👀

• Is Vite preferable to something like Next.js or Tanstack Start for prototyping for most folks?
• Is the key thing for generouted that it sets up file-based routing?

[dfosco]

Is Vite preferable to something like Next.js or Tanstack Start for prototyping for most folks?

@joshblack The goal with using Vite was to stay as close as possible to "pure React", where folks can just write HTML / CSS / import Primer React components. For most designers starting a prototype, what they're looking for is a way to render static layouts in code, with some interactivity sprinkled on top.

Next and Tanstack are great for larger, stateful prototypes. @victoriaNine started a prototype with this template and migrated to Next bc she needed client-side routing.

I think having a Next/Tanstack variant of this template would also be good, but they aim at different needs / experience levels IMO.

Is the key thing for generouted that it sets up file-based routing?

Yeah, it reads the /pages folder and creates static routes. It helps users not have to manually fiddle with <Routes> markup from React Router, or having to import all of Next's kitchen sink into the template.

Keep in mind that while Next is "not complicated", the target audience for this template is folks who don't really know how to use React, so the goal is to avoid stacking multiple concepts/frameworks for them to understand.

[dfosco]

@joshblack Let me know if you have any other thoughts in the way of merging this PR 😄

I'd be happy to keep this Vite-based version as a separate template, but staying with CRA makes adoption pretty tough at this point, and Vite seems to be the winning comparable solution at the moment.

[dfosco]

Just found out our React codespaces template also uses Vite: https://github.com/github/codespaces-react

[TylerJDev]

Thanks for this PR @dfosco! I think everything looks good! I left one comment which I think should be it 😁

[dfosco]

@TylerJDev Thanks for the review! Fixed the merge conflicts, including the upcoming one with the package.json from main. Let me know if it looks good now!