This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules, integrated with the Contents Headless Content Management System framework.
- React with Vite for fast development
- ESLint for code quality
- Cypress for E2E testing
- Storybook for UI component development
- Jest for unit testing
To run the project locally, use the following commands:
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open http://localhost:3000 to view it in the browser.
To run unit tests with Jest:
npm run test
To run end-to-end tests with Cypress:
-
Open Cypress Test Runner:
npm run cypress:open
-
Run Cypress tests in headless mode:
npm run cypress:run
To develop and test UI components in isolation, use Storybook:
-
Start Storybook:
npm run storybook
-
Build Storybook:
npm run build-storybook
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
Configure the top-level
parserOptions
property like this:export default { // other rules... parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname } }
-
Replace
plugin:@typescript-eslint/recommended
withplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
-
Optionally add
plugin:@typescript-eslint/stylistic-type-checked
-
Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list
.gitignore
.prettierrc
.storybook/
main.ts
preview.ts
cypress/
downloads/
e2e/
spec.cy.js
fixtures/
example.json
screenshots/
support/
commands.js
e2e.js
cypress.config.js
eslint.config.js
index.html
jest.config.cjs
LICENSE
package.json
README.md
src/
components/
molecules/
Footer/
Header/
index.ts
organisms/
Contents/
index.ts
Session/
pages/
...
templates/
index.css
index.tsx
types.ts
vite-env.d.ts
tsconfig.json
tsconfig.node.json
vite.config.ts
This project is licensed under the MIT License.