React TypeScript NPM Boilerplate
This is a boilerplate project for writing React NPM modules (or component libraries) in TypeScript. The code is compiled and published to NPM via CircleCI v2 Workflows and Github Releases.
This boilderplate includes a Storybook to visualize and demonstrate your components. The Storybook is automatically deployed to Zeit once configured (see the Storybook for this template here). This allows you to test each PR visually and in isolation.
- TypeScript with automatic linting via ESLint + Prettier
- Unit testing with Jest + Enzyme
- Storybook + hot reloading, including the addons Actions, Knobs, Storysource, Notes, Viewport, Console, and Centered. I have also included various utilities for creating stories.
- Automatic Storybook deployment to Zeit via Now for GitHub for all branches and PRs
- Continuous Integration via Circle CI
- NPM publishing via GitHub Releases (version must follow the
- Editor settings for VS Code
- Bootstrap & Reactstrap
- Fork or clone this repository
- If using VS Code, install recommended extensions
- Create your components
- Export your components in
- Publish your module by creating a new GitHub Release (with a
v.*.*.*version number). CircleCI will automatically build and deploy.
test- run unit tests
test:cover- run unit tests with test coverage
lint:fix- autofix unmet
local-pack- create the
tgzpackage locally to test consumers without publishing
start- start the storybook server and automatically open in browser
compile- standard typescript compile
now-build- used by Zeit when building your storybook for deployment (do not rename this script)
Before each commit,
lint-staged will automatically lint your staged
ts, tsx, js, jsx files.
You need to configure one environment variable in CircleCI, for publishing to NPM.
You need to authorize Zeit with your GitHub account to enable automatic deployments. Once configured, you can enable Zeit to deploy any repository that contains a
I recommend enabling Dependabot on this repository to keep your dependencies up to date. Each dependency update will be created as a PR, which will automatically validate via Circle CI and you can manually validate via Zeit.
This code is released under the MIT license - feel free to use it.
Please contribute any improvements or fixes to this project!
To make sure you have a pleasant experience, please read the code of conduct. It outlines core values and beliefs and will make working together a happier experience.