π‘ Note: Default development Client host port: 1337
npm start
(npm run build:and:start:dev
) - Application development build task -> start with Webpack Watcher (port 1337)npm run build:and:start:prod
- Application production build task -> start hosting (using http-server)npm run build
- Application general build task (development is default)npm run build:dev
- Application development build tasknpm run build:prod
- Application production build tasknpm run build:prod:pwa
- Application production build task (with PWA support)npm run deploy:s3
- Application deploy to AWS S3 task (used for Static Site Hosting)npm run build:and:deploy:s3
- Application production build -> deploy to AWS S3 task (used for Static Site Hosting)npm run build:clean
- Clean build ("dist") foldernpm test
(npm run test
) - run Application Unit/Integration Tests (Common + A11y)npm run test:with:reports
- run Application Unit/Integration Tests (Common + A11y). Reports (results and coverage) enabled.npm run test:ci
- run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing)npm run test:ci:with:reports
- run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing). Reports (results and coverage) enabled.npm run test:e2e
(npm run test:e2e:dev
) - run All (Common + A11y) E2E Tests (development build used)npm run test:e2e:dev:open
- open launcher of All (Common + A11y) E2E Tests (development build used)npm run test:e2e:common:prod
- run Common E2E Tests (production build used)npm run test:e2e:a11y:prod
- run A11y E2E Tests (production build used)npm run test:perf:ci
- run Application Performance + Insights testing (Lighthouse CI, used for CI/CD pipeline level testing)npm run test:tsc
- run Application Typescript's types checking (no Libraries level checking)npm run lint:scripts
- lint JS/TS filesnpm run lint:scripts:fix
- lint JS/TS files with autofixnpm run lint:styles
- lint Styles filesnpm run lint:styles:fix
- lint Styles files with autofixnpm run lint
- lint all (JS/TS+Styles) filesnpm run lint:fix
- lint all (JS/TS+Styles) files with autofixnpm run sca:test
- scan for vulnerabilities for known issues (with disrupting processes) - CI/CD integration.npm run sca:test:dev
- scan for vulnerabilities for known issues (with disrupting processes), include dev dependenciesnpm run sca:monitor
- scan for vulnerabilities with exposing and storing results snapshot (without disrupting processes)npm run sca:auth
- SCA tool (Snyk) authenticate (auth token required)npm run storybook:start
- start Components Library application (localy)npm run storybook:build
- build Components Library (dist folder: 'storybook-static')npm run storybook:build:clean
- clean Components Library buildnpm run storybook:deploy:s3
- Components Library deploy to AWS S3 task for (used for Static Site Hosting)npm run storybook:build:and:deploy:s3
- Components Library build -> deploy to AWS S3 task (used for Static Site Hosting)./
β
ββββ.circleci // application CI/CD configuration (using CircleCI)
β
ββββ.github // GitHub templates for Projects
β
ββββ.husky // Git Hooks configuration
β
ββββ.vscode // VSCode Workspace configuration (additionally for .editorconfig)
β
ββββconfig // configurations folder
β β
β ββββapplication
β β
β ββββenvironment
β β
β ββββtest
β β β
β β ββββjest // Unit/Integration Tests configuration folder
β β β β
β β β ββββmocks // Jest setup mocks (e.g. no-JS pattern files mock)
β β β β
β β β ββββtest-utils // Testing utils enhancement (e.g. RTL custom "render" util)
β β β β β
β β β β ββββcustom
β β β β β
β β β β β test-utils.js
β β β β β index.js
β β β β ββββ
β β β β
β β β β jest.setupAfterEnv.js // Jest pre-setup execution (after installed to environment)
β β β β jest.setup.js // Jest pre-setup execution (before installed to environment)
β β β ββββ
β β ββββcypress // E2E Tests configuration folder
β β β β
β β β ββββdownloads
β β β β
β β β ββββe2e
β β β β
β β β ββββfixtures
β β β β
β β β ββββsupport
β β β β
β β β β cypress.config.a11y.json // E2E A11y Tests override configuration
β β β β cypress.config.e2e.json // E2E General Tests override configuration
β β β ββββ
β β β
β β β cypress.config.js // E2E Tests (Cypress) main config file
β β β jest.config.js // Unit/Integration Tests (Jest) main config file
β β β lighthouse.config.js // Performance Tests main config file (used for CI/CD pipeline)
β β ββββ
β β
β ββββlint
β β β
β β ββββeslint
β β β
β β ββββstylelint
β β
β ββββprettier
β β
β ββββwebpack
β β β
β β ββββapp // Webpack Application configuration
β β β
β β ββββhelpers
β β β β
β β β ββββloaders // Webpack loaders (babel-loader, sass-loader, etc.)
β β β β
β β β ββββplugins // Webpack plugins (Favicon plugin, HTML plugin, etc.)
β β β β
β β β ββββresolve // Webpack resolves (aliases, etc.)
β β β
β β ββββstorybook // Webpack Components Library (StoryBook) configuration
β β
β ββββstorybook // UI Components Library configuration
β β β
β β ββββdocs
β β β
β β ββββhelpers
β β β β
β β β ββββargTypes // StoryBook global argTypes and args (e.g. device type)
β β β β
β β β ββββdecorators // StoryBook global decorators (e.g. Providers wrapper)
β β β
β β β constants.js // StoryBook sharable constants
β β β main.js // StoryBook main config file
β β β preview.js // StoryBook global stories setup (decorators, parameters, args, etc.)
β β β webpack.config.storybook.es5.js // StoryBook Webpack config loader (use Babel transpiler to provide ES6 Webpack config usage)
β β ββββ
β β
β ββββrobots
β β β
β β β robots.txt // Robots configuration to enhance Web crawlers search
β β β sitemap.xml // SiteMap configuration
β β ββββ
β β
β β README.md // Config folder info
β ββββ
β
ββββsrc
β β
β ββββapi
β β
β ββββservices // device detection, i18n, etc.
β β
β ββββutils // reusable utils
β β β
β β ββββfunctions
β β β
β β ββββobjects
β β β
β β ββββstrings
β β β
β β ββββuser
β β
β ββββassets
β β β
β β ββββfonts
β β β
β β ββββimages
β β β
β β β preload.config.js
β β ββββ
β β
β ββββcomponents // React components folder
β β β
β β ββββbase // base components (Button, Icon, etc.)
| | |
| | ββββcommon //common components (Header, Footer, etc.)
β β β
β β ββββpages // general pages components (MainPage, etc.)
β β β
β β ββββroutes // application routes setup
β β
β ββββreusables
β β β
β β ββββcustom-hooks
β β β
β β ββββhocs
β β β
β β β services.context.tsx // Services context for components injection using specific Custom Hook/HOC
| | | skip-to-content.context.tsx // Skip To Content (A11y enhancement) context for components injection using specific Custom Hook/HOC
β β ββββ
β β
β ββββstore // Redux's Store
β β β
β β ββββmiddlewares
β β β
β β ββββslices
β β β
β β β store.ts // main Store setup file
β β β store.reducer.ts // main reducer setup file
β β β store.saga.ts // root saga setup file (main init + watch sagas)
β β β store.types.ts // general Store types
β β ββββ
β β
β ββββstyles // main styles folder
β β β
β β ββββbase // base styles (mixins, functions, variables, etc.)
β β β
β β β main.scss // main styles file
β β β font-declarations.scss // fonts declarations main file
β β β reset-normalize.scss // reset & normalize basic styles
β β β scrollbar.scss // scrollbar styles
β β ββββ
β β
β β Application.component.tsx // main application Component
β β Application.module.scss // entry styles file
β β application.tsx // main Create App file
β β application.types.ts // application types models file
β β declarations.d.ts // non-TS files declarations and globals
β β index.ts // main entry file
| | index.html // source HTML file
β β README.md // Source folder info
β ββββ
β
ββββdist
β β
β ββββassets
β β β
β β ββββfavicons // favicons collection folder (generated by Webpack Favicon plugin)
β β β
β β ββββfonts
β β β
β β ββββimages
β β
β ββββcss
β β
β ββββjs
β β
β β robots.txt
β β sitemap.xml
β β index.html // result HTML file
β ββββ
ββββ
β
β .editorconfig // editor basic setup for IDE
β babel.config.js // Babel configuration
β commitlint.config.ts // Commit linting configuration
β jsconfig.json // JS configuration file for indicating directory root, aliases setup, etc.
β tsconfig.json // TS configuration file for indicating basic setup, including directory root, aliases setup, etc.
β package.json
β package-lock.json
β .gitignore
β LICENSE
β README.md
ββββ
Name | Description |
---|---|
Config README | general configuration setup |
Source README | major source of truth for Source folder |
Name | Description |
---|---|
Branching Strategy & CI/CD | Project's branching strategy info and CI/CD approach description |
TypeScript | Project's TypeScript usage details and general Code Convention |
PWA | Project's PWA support information (tech stack, build process, etc.) |
Testing | Project's testing approaches (Unit+Integration, E2E) + according CI/CD quality gates description |
Typography | Project's typography configuration and conventions |
Project's UI components library, created with StoryBook, could be found here
Find a bug or enhancement and want provide help? Please submit an issue.