- Technology Stack
- Run tasks
- Project structure
- Additional documentation
- UI Components Library
- Issues
- License
π‘ Note (TypeScript tranpiling using Babel)
Transpiling TypeScript using Babel (with Webpack 'babel-loader', NOT 'ts-loader') was chosen: 1) faster compilation (no types check); 2) having single source of compilation - Babel.On the other hand, using Babel compilation results in completely lose of type safety and TypeScript checks during this phase. That's why additional test script (tsc) were presented to check as pre-commit(push) hook + in scope of CI/CD.
π‘ Note (Performance Testing usage)
Performance Testing is only set up on CI/CD pipeline level. For manual performance testing you can use Chrome built-in Lighthouse DevTool.π‘ 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") folder
- Unit/Integration Testing
npm 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.
- E2E Testing
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)
- Performance Testing
npm run test:perf:ci
- run Application Performance + Insights testing (Lighthouse CI, used for CI/CD pipeline level testing)
- TypeScript Types checking
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 autofix
npm 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.