msrxse / default-scaffold

FE app showcase - displaying a list of items

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

To start development server:

pnpm run dev

Next, open your browser and visit http://localhost:5173/. The default React project will be running on port 5173.

Note:

if running `antfu.vite` and `antfu.browse-lite`, vite server will start itself at port 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

• How to set up a react project with vite
• Adding eslint and prettier to a vitejs react project
• @vitejs/plugin-react-swc uses SWC for Fast Refresh
• How to setup MSW in a React project using Vite
• Vitest