React Router (framework mode, formerly Remix) project structure

React Router (framework mode, formerly Remix) project structure

Explorer

  • .git…
  • .agents
  • .react-router…, not committed
  • .vscodenew
  • extensions.jsonnew
  • .dockerignore
  • .envnew, not committed
  • .env.examplenew
  • .gitignore
  • .nvmrcnew
  • .prettierrcnew
  • build…, not committed
  • Dockerfile
  • README.md
  • docker-compose.ymlnew
  • drizzlenew
  • 0000_init.sqlnew
  • meta…new
  • drizzle.config.tsnew
  • eslint.config.jsnew
  • node_modules…, not committed
  • package-lock.json
  • package.json
  • public
  • favicon.ico
  • react-router.config.ts
  • scriptsnew
  • seed.tsnew
  • testnew
  • setup.tsnew
  • factories.tsnew
  • routes-stub.tsxnew
  • tsconfig.json
  • vite.config.ts
  • vitest.config.tsnew
  • app
  • root.tsx
  • routes.ts
  • app.css
  • context.tsnew

  1. # Create the app from the default template (installs, runs git init, adds the agent skill)

    npx create-react-router@latest team-tasks

  2. # Start the dev server on port 5173

    cd team-tasks && npm run dev

  3. # Add the database, validation and forms

    npm install drizzle-orm pg zod @conform-to/react @conform-to/zod

  4. # Add the migration tool and Postgres types

    npm install -D drizzle-kit @types/pg

  5. # Add unit and route tests

    npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom msw

  6. # Add linting (the template ships none)

    npm init @eslint/config@latest

  7. # Add end-to-end tests

    npm init playwright@latest

  8. # Reveal the server and client entries when you add error reporting

    npx react-router reveal

  9. # Add error reporting for React Router

    npx @sentry/wizard@latest -i reactRouter