https://github.com/luisdelavega/comet-starter-vite-app
Comet Component Library Starter App using Vite
https://github.com/luisdelavega/comet-starter-vite-app
axios comet cypress cypress-axe eslint jest prettier react recoil tanstack-react-query typescript uswds victory-charts
Last synced: 3 months ago
JSON representation
Comet Component Library Starter App using Vite
- Host: GitHub
- URL: https://github.com/luisdelavega/comet-starter-vite-app
- Owner: LuisdelaVega
- License: apache-2.0
- Created: 2023-07-26T22:15:25.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-31T12:55:46.000Z (almost 3 years ago)
- Last Synced: 2025-09-03T02:52:32.547Z (10 months ago)
- Topics: axios, comet, cypress, cypress-axe, eslint, jest, prettier, react, recoil, tanstack-react-query, typescript, uswds, victory-charts
- Language: TypeScript
- Homepage:
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Welcome to the Comet Starter Vite App
The goal of this project is to provide a React with TypeScript starter application, which comes pre-configured with the USWDS-based [Comet Component Library](https://github.com/MetroStar/comet) as well as other tools to accelerate development. Some of these tools are as follows:
- Tooling: [Vite](https://vitejs.dev/)
- Platform: [React](https://react.dev/) with [TypeScript](https://www.typescriptlang.org/)
- Component Library: [Comet Component Library](https://github.com/MetroStar/comet)
- Data Visualization: [Victory Charts](https://formidable.com/open-source/victory/)
- State Management: [TanStack Query](https://tanstack.com/query/latest) & [Recoil](https://recoiljs.org/)
- Forms: [React Hook Form](https://www.react-hook-form.com/)
- Unit Testing: [Jest](https://jestjs.io/) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- Code Analysis: [ES Lint](https://eslint.org/)
- Code Formatting: [Prettier](https://prettier.io/)
- End-to-End (E2E) Testing: [Cypress](https://www.cypress.io/)
- Accessibility Testing: [cypress-axe](https://www.npmjs.com/package/cypress-axe)
- API support: [axios](https://axios-http.com/)
- Authentication support (coming soon): TBD
## Table of Contents
1. [Running the Project Locally](#running-the-project-locally)
2. [Running Unit Tests](#running-unit-tests)
3. [Running Code Quality Checks](#running-code-quality-checks)
4. [Running End-to-End (E2E) Tests](#running-end-to-end-e2e-tests)
5. [Contributing](#contributing)
## Running the Project Locally
1. To install dependencies, run the following:
```sh
npm install
```
2. To start the app, run the following:
```sh
npm run dev
```
## Running Unit Tests
To make sure your changes do not break any unit tests, run the following:
```sh
npm run test
```
Ensure to review the coverage directory for code coverage details.
```sh
npm run coverage
```
## Running Code Quality Checks
To make sure your changes adhere to additional code quality standards, run the following:
```sh
npm run lint
npm run format
```
You can also see the `.vscode/settings.json` file to find how to enable auto-formatting on save.
## Running End-to-End (E2E) Tests
Note: running E2E tests requires the app to be running as well, run the following:
```sh
npm run e2e
```
## Contributing
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature_a`)
3. Commit your Changes (`git commit -m 'Added new feature_a'`)
4. Push to the Branch (`git push origin feature_a`)
5. Open a Pull Request
## Notes
### When to use `EnvironmentPlugin`?
Use `EnvironmentPlugin` to expose specific values in from your `.env` files through `process.env` instead of the vite provided `import.meta.env` way.
You would want to use `EnvironmentPlugin` when you're creating unit test for code that tries to read a value through `import.meta.env`.