[examples] Better support of Vite examples

[oliviertassinari]

Summary 💡

Per https://github.com/reactjs/react.dev/pull/5487 and https://npm-stat.com/charts.html?package=vite&package=react-scripts&package=next it doesn't make a lot of sense to have all these Create React App demos.

https://github.com/mui/material-ui/tree/master/examples

I think that we could either move them to be specialized examples with Vite or create them

Examples 🌈

No response

Motivation 🔦

No response

[acomanescu]

Since CRA is no longer supported and there are many packages that fail to run/install (e.g. TypeScript v5.x), I support the migration to Vite.

[nithins1]

I would like to work on this. I could start with a joy-vite-ts example.

[misyel]

I'd like to help with this too! I can make a material-vite-styled-components-ts example.

[samuelsycamore]

Do we want to remove CRA examples entirely? See: https://github.com/mui/material-ui/pull/37595#issuecomment-1591747158. I think we should definitively answer that question before proceeding.

[dvkam]

Happy to help with the migration from CRA to Vite. In most of this examples this should be straightforward as you still use React. For context the React documentation removed CRA and some reasoning behind this decision

[oliviertassinari]

Do we want to remove CRA examples entirely?

@samuelsycamore I would personally keep CRA, but only in its basic form. I think that TS & JS examples are enough, no need for examples with other libraries.

[BearCooder]

@oliviertassinari Your statement contradicts a bit what you said in your initial post? Od do you mean to have a folder with CRA examples and one with Vite? Anyway CRA is littered with so many stuff there isnt something like "CRA in its basic form". And Vite is no library, Vite is a bundler like Parcel. That does the job 100x better and is maintained actively compared to CRA. Vite is even more basic than setting up the examples with a framework e.g. Next.

Mui shouldnt lure new people into CRA (with the examples) that is not even recommended by React maintainers.

[samuelsycamore]

@BearCooder I believe what @oliviertassinari meant is that it's enough to have examples of CRA + Material UI, CRA + Base UI, and CRA + Joy UI—no need, for example, to keep additional examples involving CRA + MUI libs + Tailwind CSS (#37595) or other libraries that folks could add to the mix. I agree with this position FWIW. CRA definitely still exists out in the world even if it's fallen out of favor for brand-new projects, so I think there's value in continuing to provide boilerplate examples.

[BearCooder]

@BearCooder I believe what @oliviertassinari meant is that it's enough to have examples of CRA + Material UI, CRA + Base UI, and CRA + Joy UI—no need, for example, to keep additional examples involving CRA + MUI libs + Tailwind CSS (#37595) or other libraries that folks could add to the mix.

Let me quote Olivier Tassinari from the beginning of this thread:

Per reactjs/react.dev#5487 and https://npm-stat.com/charts.html?package=vite&package=react-scripts&package=next it doesn't make a lot of sense to have all these Create React App demos.

I think that we could either move them to be specialized examples with Vite or create them

"I think that we could either move them to be specialized examples with Vite or create them"

I am not sure how to understand that but when simply reading it, for me this sounds like to move to Vite? Even here in this issue https://github.com/mui/material-ui/issues/37358#issuecomment-1556320291 Olivier Tassinari asked you to move the special examples to Vite?

It might be good to definitely clear the lack of clarity, as I was also gonna start to rewrite examples into Vite and I guess I am not the only one.

CRA still exists thats true but its illusory to say it brings value when its clearly not recommended by their own creators. CRA is not the official way to create React apps and definitely not what we want to ship to production.

And thats the thing, many will use the example templates as their starter and build on top of it. Thats what we should avoid.

In short: CSR: Pick Parcel or Vite SSR: Next or Remix for example

[samuelsycamore]

@BearCooder with all due respect, I think you've misunderstood what @oliviertassinari was saying. "[...] either move them to be specialized examples with Vite or create them". What I'm proposing is the latter—to create new Vite examples and not necessarily trash all of the existing CRA examples. I don't think we need CRA + Material UI + Tailwind, CRA + Material UI + Styled Components, etc. It's enough just to have CRA + Material UI.

[samuelsycamore]

In the interest of moving forward here, let's do this:

• keep and/or create CRA examples for Material UI, Base UI, and Joy UI in JS and TS
• remove all other CRA examples
• create Vite examples for all Core libs and use Vite as the default for more "complex" examples (Vite + Material UI + Tailwind CSS for example)

[amitava82]

Can we have an example of Vite + Express + SSR similar to material-ui-express-ssr?

[oliviertassinari]

The ones that make no sense to me to be with CRA and not Vite: https://mui.com/material-ui/getting-started/example-projects/. I think we should migrate those:

• [ ] Tailwind CSS

• [ ] Styled-components

• [ ] Preact