Skip to content

msrxse/default-scaffold

Repository files navigation

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Uses Axios, react-query and MSW.

Vite should have started dev server, otherwise: To start development server:

pnpm run dev

Next, open your browser and visit http://localhost:4000/.

Tests

pnpm test:watch

or

pnpm test:watch <path-to-file>

Tooling:

  • Vite: Frontend build tool that serves your source files over native ES modules, with rich features and fast Hot Module Replacement (HMR). Vite is fast because it doesn't bundle your code at all. It leverages the native support for ESM (ECMAScript Modules) of modern browsers. It sends your file directly without being bundled
  • @vitejs/plugin-react-swc: This speeds up your Vite dev server with SWC (~20x faster than Babel)
  • ESLint and Prettier: For linting and pretty-printing JavaScript code respectively
  • Jest and @testing-library/react: for unit testing
  • Vitest: Modern testing framework
  • MSW: Mock Service Worker (MSW) is an API mocking library for browser and Node.js. See stop mocking fetch. With MSW, you can intercept outgoing requests, observe them, and respond to them using mocked responses. MSW can integrate throughout your entire stack, allowing you to reuse and customize network behavior on demand. Imagine using the same API mocks during development, integration and end-to-end testing, and then in your Storybook or during a live demo.

POSSIBLE NEXT TODOS

  • Add commitlint (Helps team adhere to a commit convention)
  • Add ContextModule with data and possibility of persistent article edition

Useful links