Here are couple of tips to improve your NPM library.
1. Add NPM badge to your Github README.md
NPM badge is a small icon provided by shields.io that you can place in your README.md file. It will show the latest version of your library and clicking on the badge will take the user to your npm package page on npmjs.com.
You can show a badge similar to above using following markup in your README file:
For example:
2. Create automated build
I have automated my builds using CircleCI. All you have to do is to log in to CircleCI with your Github account and you will be able to add build projects for your public Github repositories.
Build configuration is done using a configuration file in the .circleci directory at the root of your project. Configuration file is named config.yml. Here is example of a config file I use for multiple NPM library projects:
In above example, the build is based on Node 10.16 docker image. After that we set the time zone. It is advisable to set the time zone. After that there are the actual steps for build:
Checkout code from Github repository
Restore dependencies from cache
Install dependencies
Save dependencies to cache
Run actual build(s)
You can also add a build passing/failing badge to your Github README file:
Use this markdown:
Example from one of my own Github repos:
After you have config.yml in place, every time you push new changes to Github repo, a build is triggered in CircleCI.
NOTE! Your package.json should contain a prebuild script, that does everything needed before build, like reformatting code, linting, type checking (flow/typescript) and testing with coverage reporting. Here is an example of such a script:
3. Report test coverage
I didn't mention the last step of config.yml in previous section. The last step is for reporting unit test coverage to codecov.io. Login in to codecov.io with your Github account and you are then ready to have reports on test coverage. No additional configuration is needed! Remember that you must enable test coverage reporting in your prebuild script. If you are using jest for unit testing, test coverage reporting can be enabled by adding --coverage command line flag to jest command.
You can also add a test coverage percentage badge to your Github README file:
Use this markdown:
Example from one of my git repos:
4. Add static code analysis
Adding static code analysis is easy with SonarCloud. Login to SonarCloud with your Github account and then add new projects for analysis. For JavaScript and TypeScript projects, you only need to add empty .sonarcloud.properties file to the root of your project. After this done, SonarCloud will trigger an analysis when you push new changes to your Github repo.
You can also add couple of badges to your Github README file:
First badge tells if you project passes the default quality gate. You can of course customize your quality gate in SonarCloud. Second badges tells number of bugs and third badge indicates number of vulnerabilities. There are also additional measures and badges for them also in available, for example: Duplicated code lines, maintainability, technical debt.
To get the markdown for badges, log in to SonarCloud, choose a project and on the Overview page of the project, there is a button named Get project badges in bottom right corner of the page. Click the button and you can get markdown for badges that you want. Copy paste the markdown code to your Github README.
5. Add license badge
Make it clear for everyone that your project is open source by adding a license badge:
Here is example how to add MIT license badge to your Github README:
Here is one of my projects in Github that uses all these 5 tips: semantic-ui-react-labeledinput