Web App Project Starter

Overview

This is a project starter for building scalable and maintainable web applications with React, TypeScript, and Tailwind. It implements the following tools:

• Static analysis: TypeScript, ESLint, Prettier
• Testing: Vitest, Testing Library, Mock Service Worker
• Build process: Vite, PostCSS

Quick Start

1. Get the repository to start your new project.
2. Run npm install in your project directory to install the dependencies.
3. Run npm run dev to start the development server.
4. Start building your application in src/App.tsx.

Installation

Packages

Note: The project requires Node.js version 18+ or 20+.

After you clone or download the repository, navigate to the project's folder:

cd starter-app-react-ts-tailwind

Then install the dependencies:

npm install

VS Code Extensions

If you are using Visual Studio Code, you will be prompted to install several recommended extensions after opening the project:

• Tailwind CSS IntelliSense
• Prettier - Code formatter
• Formatting Toggle
• ESLint
• Vitest
• EditorConfig for VS Code

Usage

Development

To start developing your React/TypeScript application, go to src/App.tsx. You can use the Tailwind classes right away.

Static Analysis

To check the formatting with Prettier (without modifying the files):

npm run format:check

To actually format (modify) the files with Prettier:

npm run format

To lint the files using ESLint:

npm run lint

To statically check types with TypeScript:

npm run types

Testing

Writing Tests

A sample unit test for the App component has been included. You can find it in src/App.test.tsx.

You can start describing the network using the MSW request handlers in src/tests/mocks/handlers.ts. The MSW/Node.js integration module (src/tests/mocks/server.ts) is already started in vitest.setup.ts.

Running Tests

To run all tests and view the results in the terminal:

npm run test

To run all tests and view the results in the browser:

npm run test:ui

To run all tests and generate a test coverage report:

npm run coverage

Build Process

To run Vite's development server:

npm run dev

To preview the production build locally (after building the project with the build script):

npm run preview

To run the TypeScript compiler and Vite's build process:

npm run build

Configuration

Tailwind CSS

Tailwind CSS is installed as a PostCSS plugin (see postcss.config.js) and configured to process the contents of the root index.html and all .ts/.tsx files in the src directory. No customizations are provided by default. You can change the configuration in tailwind.config.js.

Any additional plugins (like tailwindcss-typography, tailwindcss-forms, tailwindcss-aspect-ratio, or tailwindcss-container-queries) can also be added in tailwind.config.js.

Tailwind's base styles and the other two layers are included by default (see src/index.css).

Prettier

Prettier uses the default configuration. It also has the prettier-plugin-tailwindcss plugin enabled to automatically sort classes based on Tailwind's recommended class order. You can change the configuration in .prettierrc.

Ignored files (not to be formatted) can be specified in .prettierignore. According to its documentation, Prettier also respects the .gitignore configuration and ignores node_modules/.

ESLint

By default, ESLint uses the recommended configuration and the following plugins with their respective recommended configurations:

• typescript-eslint
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y
• eslint-plugin-react-refresh

You can see the details and tweak the configuration to your needs in eslint.config.js.

TypeScript

By default, all .ts/.tsx files in the src directory are included for analysis. Strict type checking and several linting options are enabled to catch unused local variables or function parameters and to prevent unsafe switch cases. The configuration ensures that the code complies with the JavaScript features supported by ES2020.

The compiler won't emit JavaScript files, leaving that responsibility to Vite.

You can change the configuration in tsconfig.app.json.

Vitest

By default, Vitest is configured to use the @vitejs/plugin-react plugin to handle React's JSX syntax. It also uses jsdom as its testing environment. You can change the configuration in vitest.config.ts.

Mock Service Worker

The MSW/Node.js integration module (src/tests/mocks/server.ts) is handled in vitest.setup.ts.

Vite

By default, Vite is configured to use the @vitejs/plugin-react plugin to handle React's JSX syntax. You can change the configuration in vite.config.ts.

PostCSS

PostCSS can be configured in postcss.config.js. By default, it uses Tailwind CSS (configured in tailwind.config.js) to generate CSS and Autoprefixer (which uses the recommended default Browserslist configuration from .browserslistrc) to ensure cross-browser support by automatically adding necessary CSS prefixes.

EditorConfig

To keep line endings consistent across different development environments, EditorConfig is set to use LF. You can change the configuration in .editorconfig.

VS Code

Visual Studio Code has some workspace settings added by default. These set Prettier as the default formatter and make the editor always open .css files in Tailwind CSS mode. You can change these settings in .vscode/setttings.json.

You can also add the following to your global VS Code user settings to automatically format files with Prettier:

"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true

Git

Line endings are set to LF in .gitattributes. Files to be ignored by Git can be specified in .gitignore.

License

This project is licensed under the MIT License.