Let’s say we have an idea for a cool component. We want to build it and share it with the community by publishing it to NPM registry. The code to implement the component functionality appears intuitive. But the boilerplate we have to put together for the open-source project is convoluted. In this tutorial, we will put together a boilerplate project for publishing components.…
Tag: NPM
In this tutorial, we are going to build 2 CRA projects and share components between them. The solution is to have a mono repository or monorepo built with Lerna and Yarn workspace.
Lerna and Yarn workspace are complementary tools to build monorepo. Lerna allows to execute npm scripts in package.json for all sub-projects. Yarn workspace allows to manage dependencies and reference types from other sub-projects.…
When we have multiple projects using similar code, there is an urge to publish them as NPM packages. Should we publish them as public NPM packages or private NPM packages which can be used only within our enterprise? Or when should we avoid publishing a NPM package?
Let’s assume we have this question for UI projects. Most UI projects run on the browser.…
Istanbul is a code coverage utility for JavaScript apps. It is integrated with most unit-testing frameworks like Jest. It is also possible to produce an instrumentation build with a babel plugin named babel-plugin-istanbul. This works for any React app scaffolded with Webpack configuration. However, it does not work for create-react-app (CRA). CRA does not expose webpack.config or .babelrc file, files where we can add the istanbul plugin.…
Istanbul provides code coverage metrics for automated unit tests. It provides those metrics by instrumenting the JavaScript code. Official documentation on the website provides how to integrate Istanbul with various unit testing frameworks.
But, let’s say we do not have unit tests. And we do manual testing. How much of code coverage does our testing do? For this problem, there is very little official support.…
Prettier is a code formatter. It improves code consistency. Often, we have developers with their own styles of writing code. And it is quite difficult to tell them something as silly as formatting. But with this new utility, we don’t need to have ground rules on code formatting. It is taken care for us. The following screenshot shows how it works.…
Searchtabular is a npm package that is part of the reactabular family. It has search utilities that can be applied to rows of data before rendering it in a table. Searchtabular has only text filter as part of the package. It does not have filters for date, number or boolean. This is where the searchtabular-antd package comes in. The searchtabular-antd package takes help of antd component library for various UI elements for the filters.…
I built an app where the port number of the API can be configured. The user can set a new port number. If the port number is not valid, the API call will hang for 100 seconds! I wanted to introduce a feature where the API call times out in 10 seconds.
Before I started to work on this task, I did not know that the fetch specification does not have a timeout option.…