Incrementally migrating from React Router v6.3.0 vite app to Remix.
shadcn/ui for components.
MSW for mocking the api calls.
@tanstack/react-query in the mix.
Some steps in migrating intentionally have some poorly implemented stuff for demo purposes.
-
https://remix.run/docs/en/main/guides/spa-mode#what-is-spa-mode
-
https://tanstack.com/query/latest/docs/framework/react/examples/react-router
-
https://remix.run/docs/en/main/guides/migrating-react-router-app
If you want to commit and push your work as you go, you'll want to fork first and then clone your fork rather than this repo directly.
Choose whatever package manager you want (I am using pnpm) and install packages.
pnpm i
To get the app up and running (and really see if it worked), run:
pnpm dev
Hardcoded user in app.
Username: admin@admin.com, Password: admin.
Change it if you want so you can work with multiple users.
-
- initial app setup with React Router v6.3.0, tailwind, shadcn components, zustand and msw for mocking api calls
- useEffects for fetching data
- when mutating data changes are not visible until refresh is hit
- formik and yup for forms and validation
- zustand stores authenticated user
-
- @tanstack/react-query setup and using it for fetching and mutating data instead of useEffects
- no more stale data after mutations
-
react router 6.23.1, w/o react query
- using new RouterProvider with loader and action functions on Route objects for fetching and mutating data
- protected routes handled through loaders instead of
ProtectedRoute
component - zod and tiny-invariant for validating data instead of yup
- removed formik since state is not needed while working with actions and form
- added error boundaries
-
- using react-query alongside new router
-
- using Hydrating a div instead of the full document approach
- manual route config via vite.config.ts
-
root layout and meta for routes
- hydrating full HTML document
Layout
in root.tsx- using meta
-
- using react-query alongside remix spa mode
-
- remix-auth for authentication, removed zustand store
- msw on server
- removed localforage, working with in-memory notes - will get reset to initial values when server is restarted!