Skip to content

Latest commit

 

History

History
64 lines (46 loc) · 3.12 KB

ReadMe.md

File metadata and controls

64 lines (46 loc) · 3.12 KB
Raw

react-app-boilerplate

A simplified boilerplate app for websites that's better organized than create-react-app in that:

Features

  • Dependencies not required for the build are moved to devDependencies
  • npm scripts are more clearly defined
  • webpack config is exposed and configurable
  • The service-worker both
    • Automatically caches all build output on first page load so subsequent visits/refreshes serve from cache (as opposed to needing two visits/one refresh before it caches them).
    • Will serve the app in a cache-then-network response so any changes will be shown in the next page load/refresh.
    • Dynamically caches non-build-output files that were requested after the app loads so they're ready for offline viewing.
      • This should be tweaked based on your app's needs so you only cache the files you want.
      • e.g. You don't want to cache images from user's posts in a social media app.
  • Processes SCSS files to CSS and post-processes the CSS to make it cross-browser functional
  • Allows both JavaScript and TypeScript codebases
  • Has front-end mocking system built in natively along with usage examples (using MockRequests)
  • All configurations are moved to the config/ folder for cleaner root directory and purpose distinction
  • Uses ESM (.mjs) for Node scripts/configs while still allowing your source code to drop file extensions for .js/.ts files.

Installation

  • git clone <repo-url> [optional-custom-directory-name]
  • npm install

Usage

  • View all available commands: npm run
  • Examples:
    • Start the local development server: npm [run] start
    • Start the local dev-server, mocking endpoint/API requests: npm run mock
    • Run unit tests: npm [run] test
    • Build the app: npm run build

IDE Notes

  • If using WebStorm

    • It doesn't always properly interpret the webpack.config.mjs file because it's not in the root directory. So, to point to the correct files, update your settings via:

      • WebStorm Settings | Languages & Frameworks
        • | JavaScript | Webpack: config/webpack.config.mjs

    • Since @/ and / import aliases are used instead of relative imports (e.g. ../../File.js), WebStorm doesn't always correctly mark src/ as the root for imports.
      If this occurs, it can be resolved by right-clicking on src/ -> Mark Directory as -> Resource Root.

Diagrams

UML diagrams for classes, DBs, etc. can be made and embedded into ReadMe files using:

  • Mermaid - Playground
    • Officially supported in GitHub, but possibly other providers as well.
    • See the related blog post for more details.
  • DrawIO - Playground
    • Give permission to GitHub, Google Drive, OneDrive, etc.
    • Export as an SVG file to your repo.
    • Display the SVG in ReadMe files via ![Display text](./MyUml.svg).
    • Each edit can be saved by exporting the new diagram to the same SVG via a commit.