Skip to content

Latest commit

 

History

History
122 lines (118 loc) · 5.53 KB

README.md

File metadata and controls

122 lines (118 loc) · 5.53 KB

Config documentation

Documentation and guidelines for application's config.

Main areas

Area name Path Description Notes
Application config /application used for storing application configuration like React's root element ID, Server default port, etc
Environment config /environment used for storing environment configuration like project's main folders routes and entries, information about CSR/SSR flow, current environment type, etc
Unit/Integration Tests config /test/jest used for storing Unit/Integration Tests framework configuration (Jest config) and custom testing utils setup (e.g. RTL custom utils) A11y Tests setup included. Common and A11y tests run together.
E2E Tests config /test/cypress used for storing E2E Tests framework configuration (Cypress config) and E2E test cases - E2E Common Tests config
- E2E A11y Tests config
Adding new E2E Tests please follow Folder's Conventions (see below).
Performance & Insights Test config /test Performance & Insights (SEO, Best practices, etc), CI/CD level only Performance Testing is only set up on CI/CD pipeline level. For manual performance testing you can use Chrome built-in Lighthouse DevTool.
Code Styling config (/lint) used for storing Code Styling tools configuration - ESlint config
- Stylelint config
Code Formatting config /prettier used for storing Code Formatter tool configuration
Application bundler config /webpack used for storing Bundler configuration Client config and Server config are separated, reusable Webpack utilities (loaders, resolvers, plugins) moved to specific folder.

StoryBook Webpack config is also located here. After it is used in StoryBook config folder.
UI Components Library /storybook general configuration for Components Library
Search Engines traversing config (/robots) configuration to enhance Web Crawlers search engine (setup, restrictions, sitemap, etc.)

💡 Note: JS compiler config (Babel config) is located in project root folder.

Folder's conventions

  • Adding new Configuration Main area:
    • add it in new specific folder;
    • if configuration is assumed to be used in general application flow (/src folder) - add index export file;
    • once finished - update this README with new area;
  • Follow files naming conventions:
    • each new main config name should follow template: [name].config.{js,ts};
    • if config has sub-types - according files names should follow template: [name].config.[sub-type][...].{js,ts,json};
    • if new Webpack helpers (loaders, plugins, resolve) need to be added - files names should follow according template, e.g. [name].loader.{js,ts};
  • Adding new E2E tests: please check Testing Documentation for more details;:

Folder's structure

./
│
├───application
│
├───environment
│
├───test
│   │
│   ├───jest
│   │   │
│   │   ├───test-utils
│   │   │   │
│   │   │   ├───mocks
│   │   │   │
│   │   │   ├───custom
│   │   │   │
│   │   │   │   test-utils.js
│   │   │   │   index.js
│   │   │   └───
│   │   │
│   │   │   jest.setupAfterEnv.js
│   │   │   jest.setup.js
│   │   └───
│   ├───cypress
│   │   │
│   │   ├───downloads
│   │   │
│   │   ├───e2e
│   │   │
│   │   ├───fixtures
│   │   │
│   │   ├───support
│   │   │
│   │   │   cypress.config.a11y.json
│   │   │   cypress.config.e2e.json
│   │   └───
│   │
│   │   cypress.config.js
│   │   jest.config.js
│   │   lighthouse.config.js
│   └───
│
├───lint
│   │
│   ├───eslint
│   │
│   └───stylelint
│
├───prettier
│
├───webpack
│   │
│   ├───client
│   │
│   ├───helpers
│   │   │
│   │   ├───loaders
│   │   │
│   │   ├───plugins
│   │   │
│   │   └───resolve
│   │
│   ├───server
│   │
│   └───storybook
│
├───storybook
│   │
│   ├───docs
│   │
│   ├───helpers
│   │   │
│   │   ├───argTypes
│   │   │
│   │   └───decorators
│   │
│   │   constants.js
│   │   main.js
│   │   preview.js
│   │   webpack.config.storybook.es5.js
│   └───
│
├───robots
│   │
│   │   robots.txt
│   └───
│
│   README.md
└───