web-scripts – creating NPM libraries in a snap at Spotify

At Spotify, we love sharing code. We have many autonomous teams creating new stuff every day, and we need to be able to share code between those teams in an efficient manner, with a high degree of confidence and reliability. For web libraries, that means NPM.

We are also really excited about TypeScript. For apps and libraries, TypeScript is helping us move quickly and safely when sharing code and creating new features. But, as often happens in modern JavaScript development, we began to feel pain with first-time tooling setup in new libraries, and the speed we strive to have for creating new projects was beginning to suffer. And, as more web libraries were created, the cost to maintain them increased as well. Teams were spending more time setting up and upgrading “infrastructure” tools, like building, linting, and type checking, instead of writing the library! This hindered code sharing: some teams even chose to duplicate code, rather than take on the overhead of maintaining library tooling.

We began to wonder if there was a simpler way to set up new libraries with all of the bells and whistles we think helps teams move fast at Spotify. Should teams really have to remember to set up main, module, and types in a new repo’s package.json? Should teams really have to decide whether to build with Babel + TypeScript or just tsc directly? And should we really have to remember to install and update 20 boilerplate dev dependencies for every new repo to adhere to our global code style and testing strategy?

Inspired by projects like react-scripts and kcd-scripts, engineers inside Spotify began the process of creating an opinionated dependency bundle that would help make all of those problems go away for our engineers. And now, we’re proud to announce we’ve opened sourced @spotify/web-scripts, along with 5 other projects which contain our shared ESLint, Prettier, and TypeScript configurations at Spotify. With these libraries available as open source projects, developers inside and outside Spotify can kick-start a TypeScript NPM library in a snap.

Some key features it ships with:

• Static analysis via ESLint and TypeScript, including base Spotify configs
• Auto-formatting via Prettier
• Unit testing via Jest
• A pre-commit hook to run static analysis, auto formatting, and relevant unit tests via lint-staged
• A build script which creates CommonJS, ESM, and types in parallel via tsc
• semantic-release and commitizen configured to release your library continuously
• Tips for how to set up your config files so your editor support works seamlessly
• Mix ‘n match scripts and directly provide configuration if you need to override. No “eject” necessary!

Interested in trying it out? You can use our project scaffolding tool to create a fully set-up repo.

yarn create @spotify/web-scripts-library my-new-library

Or, follow our instructions to get started in your existing project. Let us know what you think, and feel free to open a PR or raise an issue!

Tags: web