Full Stack Flashcards
What is the approach used to integrate Vite with NestJS?
A monorepo setup where NestJS serves React at production and accommodates SSR.
What builder tool is used to manage a monorepo for NestJS and React?
Turbo (https://turbo.build/).
What are the steps to set up a monorepo for NestJS and React?
- Create a project folder, 2. Install Turbo, 3. Set up workspaces in package.json, 4. Create backend and frontend projects inside apps directory.
How do you create a new NestJS backend project in a monorepo?
Run: nest new demo-backend inside the apps directory.
How do you create a new React frontend project in a monorepo?
Run: npm create vite@latest demo-frontend inside the apps directory.
What is the purpose of turbo.json in a monorepo?
To configure pipelines for simultaneous development and builds.
How do you start both frontend and backend applications simultaneously in a monorepo?
Run: npm run dev from the root directory.
How do you proxy backend requests from the frontend in Vite?
Add a proxy statement to vite.config.ts linking frontend paths to backend URLs.
What is the purpose of adding SSR in a full-stack application?
To improve performance by rendering React components on the server before sending them to the client.
How do you configure SSR in NestJS?
Modify app.module.ts and use renderToPipeableStream for React server-side rendering.
How do you enable API versioning in NestJS?
Use NestJS versioning techniques such as global, controller-level, or route-level versioning.
How do you add PWA support to a Vite project?
Install vite-plugin-pwa and configure vite.config.ts.
What files are created when enabling PWA in Vite?
manifest.webmanifest, registerSW.js, and sw.js.
How do you add code splitting and lazy loading in React?
Use React.lazy along with Suspense or loadable-components.
What is the purpose of internationalization (i18n) in React?
To support multiple languages in a web application.
How do you set up i18n in React?
Install react-i18next and i18next, then configure language detection and translation loading.
How do you create a microservice in NestJS?
Use nest new <service-name> and set up gRPC as the transport layer.</service-name>
What is gRPC and why is it used?
A high-performance RPC framework used for communication between microservices.
How do you generate TypeScript definitions from .proto files for gRPC?
Use protoc along with ts-proto to generate TypeScript files from .proto definitions.
What are the benefits of using a monorepo for full-stack applications?
Unified development workflow, shared dependencies, simultaneous builds, and easier deployment.
