This is the frontend application for the Boilerplate Webapp, built with React and TypeScript.

Features

React 19 with TypeScript for type safety and modern DX.
Boilerplate now includes a matured example component: HelloWorld
- HelloWorld.tsx - React component code
- HelloWorld.css - Separate CSS file for component styles
- HelloWorld.test.tsx - Unit test for the component
- HelloWorld.integration.test.tsx - Integration test for the component
Encourages good structure: separate CSS per component, unit tests, and optional integration tests based on component complexity.
Integrated SAST and DAST security scans for frontend code.

Prerequisites

Node.js 20+ (recommended)
npm or yarn package manager

Running Locally

# 1. Clone the repository

git clone <https://github.com/ghdrope/boilerplate-webapp.git>
cd boilerplate-webapp/frontend

# 2. Install dependencies

npm install
# or
yarn install

# 3. Start the development server:

npm run dev
# or
yarn dev

# 4. Open your browser at <http://localhost:3000>.

Available Scripts

This project includes a variety of scripts to help with development, testing, linting, formatting, building, and security scanning:

Script	Description
`npm run dev`	Starts the development server using Vite.
`npm run build`	Builds the app for production, outputting optimized static files in the `dist/` folder.
`npm run preview`	Serves the production build locally for testing.
`npm run test`	Runs all tests with coverage reporting.
`npm run test:unit`	Runs unit tests only, excluding integration tests.
`npm run test:integration`	Runs integration tests only (files matching `.integration.test.tsx`).
`npm run lint`	Runs ESLint to check JS/TS files for code quality issues.
`npm run lint:fix`	Automatically fixes ESLint issues where possible.
`npm run lint:css`	Runs Stylelint to check CSS files for style issues.
`npm run lint:css:fix`	Automatically fixes Stylelint issues where possible.
`npm run format`	Formats the entire codebase using Prettier.
`npm run format:check`	Checks if files are correctly formatted (Prettier).
`npm run type-check`	Runs the TypeScript compiler to check for type errors (no output).
`npm run ci_workflow_test_push`	Runs lint, type-check, format check, CSS lint, build, and unit tests (as in CI).
`npm run ci_workflow_test_pr`	Runs integration tests (as in PR checks).
`npm run sast_workflow_test_pr`	Runs static analysis tools: ESLint, type-check, Yarn Audit, Trivy (FS + Dockerfile).
`npm run fix`	Runs lint fix, formatting, and CSS lint fix scripts together.
`npm run app-dev`	Starts app services using docker-compose for local dev environment.
`npm run app-dev-down`	Stops app services containers started with docker-compose.
`npm run clean`	Removes `node_modules`, build artifacts, coverage, and lock files.

Testing Strategy

Unit tests: Cover isolated component logic and functionality using Jest and React Testing Library.
Integration tests: Focus on component integration scenarios and user interactions (optional, depending on component complexity)