skills.rest
samdop
samdopCOMMUNITY
Explore all skills by this author →
GitHub

react-project-structure

Scaffolds a pnpm monorepo layout for migrating ASP.NET MVC solutions to Node.js and React.

Updated Jul 23, 2026
Search Tags:#typescript#react#monorepo#vite#project-scaffolding#pnpm-workspaces#aspnet-mvc-migration
One-click install
npx skills add https://github.com/samdop/convertonode --skill react-project-structure-samdop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-project-structure
Source: https://github.com/samdop/convertonode/tree/main/.github/skills/react-project-structure
Command: npx skills add https://github.com/samdop/convertonode --skill react-project-structure-samdop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Migrating an ASP.NET MVC solution to Node.js + React requires deciding where controllers, Razor views, models, and services belong in a new repository. This Skill provides a canonical monorepo layout (apps/web, apps/api, packages/shared) with ready-to-use configuration templates so teams avoid ad-hoc folder decisions. ## Core Features & Use Cases - Canonical Monorepo Layout: Defines apps/web (Vite + React 18 + TypeScript + Tailwind + shadcn/ui), apps/api (Node.js 20 TypeScript base), and packages/shared (zod schemas and generated OpenAPI types). - ASP.NET MVC Mapping Table: Maps .sln files, Controllers, Views, ViewModels, Web.config, and Global.asax to their Node.js/React equivalents. - Ready-to-Use Templates: Ships pnpm-workspace.yaml, tsconfig chains, ESLint/Prettier configs, Dockerfile, Vite config, Tailwind config, and starter React source files. - Use Case: During Phase 1 of a migration, scaffold the target repository by copying the templates, then run pnpm install and pnpm dev to start both the web and API workspaces. ## Quick Start Ask the AI to scaffold the migration monorepo using the react-project-structure skill with apps/web, apps/api, and packages/shared workspaces.

Frequently Asked Questions about react-project-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a React and Node.js monorepo for an ASP.NET MVC migration?▼

Use a pnpm workspace with apps/web for the Vite React app, apps/api for the Node.js TypeScript API, and packages/shared for zod schemas and generated OpenAPI types. Map Controllers to API routes, Razor Views to React route components, and ViewModels to shared zod schemas.

Should I use pnpm workspaces or npm workspaces for a monorepo?▼

pnpm workspaces is the default choice because of stricter hoisting, a content-addressable store, and a stable lockfile. Use npm workspaces only when enterprise tooling or CI images block pnpm, keeping the same folder layout and package names.

Where do ASP.NET MVC Razor views and controllers go in React?▼

Razor Views map to page components in apps/web/src/routes, _Layout.cshtml becomes src/layout/RootLayout.tsx, and partials become reusable components. Controllers split into server-side HTTP routes in apps/api/src/routes and client-side navigation handled by React Router.

How do I share TypeScript types between a React frontend and Node.js backend?▼

Place zod schemas and inferred types in packages/shared, and generate OpenAPI types from the backend's openapi.json using openapi-typescript. Both apps import from the @repo/shared package, keeping generated files read-only and separate from handwritten schemas.

Does this structure prescribe a specific Node.js backend framework?▼

No, the apps/api base is framework-agnostic with only tsx, pino, and zod. Framework-specific structure for NestJS, Fastify, Express, or Hono is deferred to a separately generated backend mapping skill.

Can I put API secrets in Vite environment variables?▼

No, VITE_* variables are exposed to the browser bundle and must only hold web-safe values like the API base URL. Server secrets such as DATABASE_URL and JWT_SECRET belong in the API package's process.env, validated at startup with zod or envalid.

Related Skills

Explore More Software Engineering Skills→
microsoftmicrosoft
19

migrating-mvc-bundling

Migrate ASP.NET MVC System.Web.Optimization bundles to direct script and link tags in Razor views.

Official
Intermediate
DanielPodolskyDanielPodolsky
274

backend-fundamentals

Evaluate API route handlers and backend architecture for RESTful design.

Community
Intermediate
lgerard314lgerard314

frontend-implementation-guard

Enforce React component design and data flow best practices.

Official
Advanced
hanu-tayalhanu-tayal

copilotkit-setup

Configure CopilotKit runtime and frontend providers for React and Node.js applications.

Community
Intermediate