It seemed a more streamlined approach so we’ll use this as our JavaScript bundler/packager. esbuildĮsbuild is gaining a lot of traction lately due to its simplified API, speed, native support for TypeScript and a host of other great features. If you’d like to jump straight to the code, here’s an example repo of the final code. A public API for how to use this component via types and IntelliSense support in any IDE (via TypeScript)Īlthough there are many helpful articles on varying combinations of the above technologies, we thought we’d share our particular use case.

Establish a simple development environment (featuring live reloading, fast bundling, etc), without using extra helpers like Create React App, Next.js, etc.

Re-use the component in a variety of applications.

Recently our dev team at Northwestern University Libraries set out to create an open-source, image, audio and video viewer component to display items from our Digital Collections UI application. Looking for a simple, straightforward, development environment for a React component(s) that can be bundled and packaged for NPM distribution? Here’s our team’s approach using esbuild, TypeScript and React.

Npm typescript