@hackingbay/react-package-boilerplate v0.1.9
React package boilerplate by HackingBay
- Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate
Inherits minimal boilerplate https://github.com/hackingbay/react-minimal-boilerplate with initial boilerplate setup and also a playground app setup to test the created component.
Reference document to setup Rollup.js based module bundle for reusability which helps properly export our React component created with create-react-app https://hinammehra.medium.com/build-a-private-react-component-library-cra-rollup-material-ui-github-package-registry-1e14da93e790
TODO: Check if any improvement can be taken from https://blog.bitsrc.io/trying-rollup-for-react-applications-d3c2304d16bf
TODO:
- Configuring jest snapshot location by specifying snapshotResolver in package.json is not supporting in CRA without eject https://github.com/facebook/jest/issues/1650
Editor Configuration
- Editor of your preference. I used some VSCode specific config in .vscode folder and recommend plugins for enhanced experience.
Recommended VSCode Extensions:
- Prettier (Official) - Code formatter
- ESLint (Official) - Real time JS syntax validation
- Stylelint (Official) - Real time CSS/Sass syntax validation
Technologies Used
- React 17
- Rollup.js
- Yarn
- Babel
- Prettier + ESlint + Stylelint
- Sass
- Jest
Steps to use this project
Update your library/component's name, license, publishConfig and repository fields in package.json as per your need.
If external styles are used, replace
output: 'sample.css'
with your project's expected output bundled css file name. People can import styles into their project asimport "sample/dist/sample.css"
;If .env file is used, make sure you updated your library/component name. Optionally, you can remove it.
yarn dev
for local development andyarn build
to prepare dist folder for publishing.yarn test-all
to run component and its playground app tests.Before publishing with npm make sure you are publishing to correct registry, public/private depending on project's need.\ Change private:true to private:false in package.json to publish package to public registry.
Note
You may see a warning like this when running lint, but we should ignore that as that is expected.
Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.
Available Scripts
In the project directory, you can run:
yarn build
To build the project
yarn fix:all
Runs prettier formatter followed by eslint and stylelint, to format code and fix lint issues. Prettier is not good enough to run alone, must always be followed lint fixes included in this command.
npm login --registry https://PACKAGE-REGISTRY-URL
If your account doesn't exist in internal registry, ask admin to enable account registration temporarily. And, run following for the first time. Run this command in the root of the project only, to make sure your account is created in our local internal registry not in the npm public registry.
npm adduser --registry https://PACKAGE-REGISTRY-URL
If your account exists, login to the registry and do npm publish to our internal registry but running following command. Do it carefully, else publish could be published to public npm registry, which requires taking immediate actions to get it removed with in few days of publishing.
npm publish --registry https://PACKAGE-REGISTRY-URL
This commands publishes your package to our internal npm package registry.
If you are publishing to public registry for the first time to npm you may need to provide --access=public
as argument. E.g.
npm publish --access=public --registry https://registry.npmjs.org
For every other time you need to upgrade version number in package.json before publish. Also, update license in package.json, which is currently set as restrictive UNLICENSED, not an open-source friendly license.
Playground app
Based on minimal boilerplate https://github.com/hackingbay/react-minimal-boilerplate created in playground/
folder. A sample usage of this component is demonstrated in playground app and can be very helpful while development of the component.