RobHameetman/esra

A powerful framework for enterprise-strength React apps.

📦 @{{scope}}/{{name}}

{{description}}

⚠️ NOTE: This README file is templatized and does not include information about how to use this repository template.

Overview · Getting Started · Development · Testing · Publishing · Contact · License

§1: Overview

This project includes the following features:

Accessibility

• Accessibility testing
• WCAG compliance

Architecture

• Framework agnosticism (WebComponents)
• Module Federation (micro-frontend architecture)
• Zero-trust architecture

Design

• Atomic Design principles
• Design tokens
• Mobile-first styling
• Responsive layouts
• View Transitions API

Development

• Automated scaffolding
• ESLint/Stylelint editor integration (VSCode, Webstorm/IntelliJ)
• Component-driven UI Library
• Just-In-Time CSS compilation
• Centralized build pipeline
• Plug'n'play
• Intrinsic CI/CD pipeline
• Strong type-checking

Infrastructure

• Bucket versioning
• Managed services
• Multi-regional redundancy
• Zero-downtime deployment strategy (e.g. blue/green, canary)

Performance

• Code splitting
• Edge caching
• Lazy-loading
• Static/Server-side Rendering
• Web Vitals

Project Management

• Clean commit history
• Demoable PRs
• Issue template
• Pull request template
• Semantically versioned releases

Testing

• Enforced coverage thresholds (80% functional)
• Unit/integration testing (Jest, @testing-library/react)
• Snapshot testing
• Visual regression testing (Playwrite)
• Coverage reporting

⬆️ back to top

§2: Getting Started

Follow these steps to get the project up and running on your local machine:

1. Prerequisites

• Node v{{node}}+
• NPM v{{npm}}+

2. Installation

git clone git@github.com:{{org}}/{{repo}}
cd {{repo}}
npm run setup

3. Editor Configuration

For VSCode, save the following as editor.code-workspace in the project root directory:

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "editor.rulers": [
     80,
     120
    ],
    "eslint.nodeEnv": "development",
    "files.autoSave": "onFocusChange",
    "yaml.format.enable": true,
    "yaml.format.singleQuote": true,
  },
}

⬆️ back to top

§3: Development

NPM Commands

• npm run build: Create a production build artifact.
• npm run format: Perform static analysis and auto-fix errors.
• npm run reset: Perform a full node_modules/ reset.
• npm run setup: Set up the project for development.
• npm test: Execute the Jest test suite.

Environment Variables

App

Variable	Required	Description
APP_NAME	Yes	The name of this service. Used as the namespace for exposed remotes, as well as for logging and rendering.
APP_DEBUG	No	Print extra information to the browser console to debug redundant re-rendering issues.1
APP_ENDPOINT	Yes	Used as the base URL for fetching data from the backend. Add more env variables below.

Build

Variable	Required	Description
HOST	No	The host used by Webpack Dev Server to serve the application for local development. Default host is localhost.2
PORT	No	The port used by Webpack Dev Server to serve the application for local development. Default port is 8080.
PUBLIC_PATH	No	Used by Wepback Dev Server to retrieve chunks from the chunk graph.
ANALYZE_BUNDLE	No	Set to true to enable webpack-bundle-analyzer.
SERVE_FROM_DISK	No	Set to true to write to disk when running Webpack Dev Server.

⬆️ back to top

§4: Testing

This project uses the following tiers of testing:

• Unit & Integration Tests: Use npm run test to run all tests.

These commands accept additional inputs following a -- modifier as in the common use-case examples below:

• npm run test -- --watch: Watch for changes and re-run all tests.
• npm run test -- src/path/to/test.spec.ts: Run tests in a specific test file.

⬆️ back to top

§5: Publishing

Creating and merging PRs will create new package versions that you can monitor by vising the Actions tab in Github.

Channels

• alpha: Used for manual testing in other packages
• beta: Used for UAT and testing by external consumers
• next: Everything that will be included in the next major version release

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

An beta pre-release version will be published whenever you create a PR and incremented as you update your changes. Once the PR is merged, a release version is created automatically. This is handled with semantic-release.

Major versions should have a corresponding release in Github. Click here to create a new release once your version meets acceptance criteria.

⬆️ back to top

§6: Contact

For inquiries and additional information, please reach out to:

Rob Hameetman
Front End Architect | Chicago, IL
engineering@robhameetman.com

⬆️ back to top

§7: License

Distributed under the MIT License.
See the LICENSE file for details.

⬆️ back to top

Footnotes

1. NODE_ENV must also be development, meaning this works when the app is run with npm start but not npm run prod. ↩

2. In order to run cypress tests in Firefox, set this var to 127.0.0.1 locally. ↩