React Router to Remix

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://reactrouter.com/en/main/start/tutorial

• 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

Setup

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

Running the app

To get the app up and running (and really see if it worked), run:

pnpm dev

Authenticating in the app

Hardcoded user in app.

Username: [email protected], Password: admin.

Change it if you want so you can work with multiple users.

Migrating steps by commits

1. initial app with router 6.3.0

   • 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

2. react-query

   • @tanstack/react-query setup and using it for fetching and mutating data instead of useEffects
   • no more stale data after mutations

3. 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

4. react router with react query

   • using react-query alongside new router

5. react router to remix spa

   • using Hydrating a div instead of the full document approach
   • manual route config via vite.config.ts

6. root layout and meta for routes

   • hydrating full HTML document
   • Layout in root.tsx
   • using meta

7. remix spa with react query

   • using react-query alongside remix spa mode

8. spa mode to remix

   • 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!