Skip to content

Quickly setup ESM React repositories with preconfigured functionality.

License

Notifications You must be signed in to change notification settings

idesigncode/template-esm-react

Repository files navigation

template-esm-react

Quickly setup ESM React repositories with preconfigured functionality.

Installation

  1. Run npm init and answer the required prompts
  2. Run npm install

Usage

Remove/replace the sample source files in src & stories with your own.

When adding source files, remember to add the build output file details to the files & exports fields of package.json and .gitignore.

🛠️ Build

npm run prepare runs all preparation clean & build scripts:

  • npm run prepare:clean removes any files as specified in the files fields of package.json
  • npm run prepare:css compiles SCSS files from src into CSS files in the root directory with PostCSS & Sass
  • npm run prepare:js compiles JavaScript source files into the root directory files with Babel

Note: the "prepare" Life Cycle Script runs automatically during publish, pack and on local install.

🚀 Deployments

The GitHub action release.yml is used to automatically deploy a release to the NPM package registry. The action requires the NPM_TOKEN secrets to be set.

📕 Storybook
  • npm run storybook will run Storybook for local use
  • npm run storybook:build will build Storybook to ./storybook-static for deployment use
🧪 Testing

Code linting tests

The GitHub action node-tests.yml is used to run the code linting tests on pull requests and commit pushes into the main branch. The action requires the NPM_TOKEN secrets to be set.

npm run test runs the code linting tests:

  • npm run test:eslint runs the ESLint JavaScript linting checks
  • npm run test:prettier runs the Prettier code formatting checks

Storybook CI tests

The GitHub action storybook-tests.yml is used to run the Storybook CI tests on pull requests and commit pushes into the main branch. The action requires the following secrets to be set:

  • NETLIFY_SITE_ID
  • NETLIFY_TOKEN
  • NPM_TOKEN

These Storybook CI tests can also be run while running Storybook locally:

🕵️ Code linting

Husky & lint-staged are used to automatically run code linting checks on each file of a commit.

You can manually run linting error fixes with:

  • npm run eslint fixes JavaScript linting issues with ESLint
  • npm run prettier fixes code formatting issues with Prettier

Custom dev tooling

npm init
  • Automatically resets name with --scope arg (if given) and directory name (lowercased)
  • Automatically resets version to 0.0.0
  • Automatically sets repository, bugs & homepage from .git/config
  • Prompts user for description (required)
  • Prompts user for keywords, license & author (optional)
postprepare

npm run postprepare runs the following formatting:

  • Updates package.json:
    • Formats repository & bugs to shorthand urls
    • Sorts the order of keys - see KEYS_ORDER
    • Sorts the order of sub-keys alphabetically
    • Sorts the order of dependencies, devDependencies & peerDependencies fields to the end
  • Updates the README.md:
    • Uses the package name for the main title
    • Uses the package description for the first paragraph after the main title
    • Keeps anything from the second title and below

Note: the "postprepare" Life Cycle Script runs automatically on install.