Vite React example (Javascript + Typescript)

[nvh95]

Is your feature request related to a problem? Please describe. Vite is a blazing fast build tool that supports many frontend frameworks, including React and React Typescript. I personally set up Redux for Vite React Typescript manually many times in the last couple of months. It would be helpful for the community if we have an official Vite template for Redux/ Redux Toolkit

Describe the solution you'd like

• Add official templates for Vite React Redux Javascript and Vite React Redux Typescript.

Describe how should we implement this feature

• Add new repositories vite-react-template-redux and vite-react-template-redux-typescript
• Or move all examples to a single monorepo

Other things to keep in mind

• React 18 is pretty new and React 17 is still widely used. We might need to consider adding examples for react@17 and react-redux@17 as well? Need a discussion for this.

[markerikson]

Hey, thanks for helping with this!

I'd say we should go with React 18 / React-Redux v8. That's what the CRA templates already do, and those are the "latest" versions of each package. I know there's still some compat issues in the broader ecosystem, but I don't think going with the older versions in a new project template would really be helpful.

[nvh95]

@markerikson Absolutely agreed. I spend some time making the Vite React Example. I placed it here: https://github.com/nvh95/vite-react-template-redux

There are still some opening items I want to bring to the discussion.

1. Where should we place the new templates for Vite React? As discussed in https://twitter.com/acemarke/status/1518406422400323584, if we end up adding more templates, we could consider grouping them in a single monorepo. Should we create a new repo under reduxjs or just rename cra-template-redux to something like redux-templates?

2. For scaffolding a monorepo, would you like to architecture it? I can also lend a hand if needed, just need to know which one we should choose: lerna, nx, turborepo, yarn workspaces... or just go with anything.

3. Can you look at my repository (try to init a project if you want) and feedback if any? I just copied the example from cra-template-redux and update something from Vite to make it works.

4. I dropped the tests when adding Vite React examples. Since Vite doesn't have a built-in testing setup bundled with it. They are working on Vitest. In the future, Vitest can be the default when initializing a Vite project, but we are not there yet. So we have 3 options

   • Setup minimal jest's config to port tests from CRA to Vite React examples.
   • Setup minimal Vitest's config to port tests from CRA to Vite React examples.
   • Just don't move the tests, since we are trying to integrate only redux to Vite React (official template for redux, not for jest or vitest, we can add tests when Vitest is built-in in Vite).

So what do you think? Thanks in advance.

[gengjiawen]

@nvh95 Thanks for sharing. Looks vite-react-template-redux not using redux-toolkit.

[nvh95]

@gengjiawen I am not quite sure that you are looking at the correct repo. Both examples (typescript and javascript) in https://github.com/nvh95/vite-react-template-redux are using redux-toolkit

https://github.com/nvh95/vite-react-template-redux/blob/021b4f6c9b2e5f4c71e83900f655f76d1c60ab3c/javascript/src/features/counter/counterSlice.js#L1

https://github.com/nvh95/vite-react-template-redux/blob/b7cddcb11fb985d6c1347ced2de2c66737da1f1a/typescript/src/features/counter/counterSlice.ts#L1

[gengjiawen]

@gengjiawen I am not quite sure that you are looking at the correct repo. Both examples (typescript and javascript) in nvh95/vite-react-template-redux are using redux-toolkit

nvh95/vite-react-template-redux@021b4f6/javascript/src/features/counter/counterSlice.js#L1

nvh95/vite-react-template-redux@b7cddcb/typescript/src/features/counter/counterSlice.ts#L1

I missed the deps part. Works good on my side. Thx for sharing this.

[gengjiawen]

Also truly blazing fast.

[markerikson]

Hiya, folks. We're consolidating all the templates over in https://github.com/reduxjs/redux-templates (which used to be the CRA+TS repo, now renamed), and we're going to set up a Vite template shortly. Closing this and archiving the repo!