• Webpack.config
  • Tools
    • Dev Environment Setup
  • Steps
    • 0001-use-webpack-for-bundling
    • 0002-start-from-node-18-lts
    • 0003-typescript-enabled-solution
    • 0004-enable-typescript-support-in-webpack
    • 0005-enable-caching-for-webpack
    • 0006-connect-react-to-project
    • 0007-enabled-assets-support-for-react-project
    • 0008-enable-svg-and-fonts-support
    • 0009-enable-css-styles-support
    • 0010-collect-metrics-of-the-webpack-configuration
    • 0011-enable-esbuild-and-environment-variables-injection
    • 0012-customize-html-file-creation
    • 0013-proxy-configuration-support
    • 0014-cjs-and-esm-modules-mix
  • TODO

• volta
• direnv

graph LR;
  A[React App] --> P[Webpack\nDev Server\nProxy];
  P -->|`/api` ~> `https://localhost:8280`| B[Mocks Server\nport: 8280, 9280];
  B -->|HTTP| C[Json Server\nport:8282];
  C -.->|HTTP| B;
  B -.->|HTTPS| A;

Export HAR to mocks-server collections/routes:

# convert HAR file to set of JSON files that mocks-server can automatically load
mocks/scripts/export.har.ts ./mocks/fixtures/16b19ff8-640f-4489-af03-9adff0e902da/recorded.har

details: mocks-server

• Inject environment variables REACT_APP_*
• Define environment variables into webpack
• Support proxy configuration for Dev Server
• Support Jest
• Support Cypress
• Support EsLint
• Support Prettier
• Support browserslist
• Compose a manifest file for the project