Introducing kyt — Our Web App Configuration Toolkit

Fire emoji Welcome to configuration hell

Every sizable JavaScript web app needs a common foundation: a setup to build, run, test and lint your code. Fortunately, there’s a multitude of tools to assist you, but they have one downside: extensive configuration. It’s not uncommon to see a combined several hundred lines of configuration and script before you can start building your product. Typically, you’ll need the following configurations: transpiler, server build, client build, test, style and script linting and several scripts to tie those tools together. To make matters worse, configuration can lead to a complicated matrix of dependencies, where one minor change can cause bugs with cryptic errors and waste hours of time spent on debugging and searching the internet.

As a consequence of this configuration hell, boilerplates have become a popular resource to start an app. The most significant benefit to using a boilerplate is getting to more quickly start a new project with an opinionated toolset. There are many ways to cut a client-side app, which frustrates users from the outset.

While boilerplates make setup easy, they become problematic soon after you start using them. They dump several hundred lines of configuration into your app. What made initial startup easy thereby becomes burdensome and it is now the developer’s responsibility to understand and maintain hundreds of lines of code written by someone else, which is brittle and time consuming.

kyt logo

Introducing kyt: your escape from configuration hell

There is a need for a tool that exists in between large boilerplates and their customizable toolsets. That’s why we built kyt (pronounced “kit”). kyt is designed to abstract away complicated configurations and allow developers to focus on writing their source code, while still having the power to make important choices about their app. It provides a solid base for building web apps in Node, while being flexible enough to be useful for a variety of projects.

How it works

kyt manages configuration for all aspects of development. It can be installed as a dependency into a new or existing project. kyt’s goal is to encapsulate only development tools, giving users the freedom to control their source directory and make important decisions about app architecture.

kyt architecture

kyt includes base features such as Node server support, client and server hot reloading, latest stable ES feature syntax, style and script linter rulesets, production performance optimizations, and a pre-configured test runner. Developers design their own architecture, choosing the tools they need for rendering, styling and handling data.

kyt provides a simple command line interface for running all development tools: dev runs a development server with live reloading; build and start compiles and runs source code, optimized and ready for a production environment; test and lint keep code healthy; and proto creates a simple scratch space for prototyping alongside your app. In advanced use cases, kyt’s base opinions can be extended.

starter-kyts: Choose what matters

While kyt can be easily integrated into new or existing Node projects, it is even more powerful when used with a starter-kyt. The kyt CLI includes a setup command, which installs any preconfigured starter-kyt git repository, adding additional dependencies and building a source directory.

kyt setup -r git@github.com:NYTimes/kyt-starter-universal.git

A starter-kyt offers the benefits of boilerplates while minimizing the number of new tools to learn and maintain. Current starter-kyts support a variety of use cases including universal React and Angular2 apps. Developers can create new starter-kyts and share them with the community.

kyt is different

kyt lies on a spectrum of tools created for web development. Some simple tools, such as Create React App, work well for quickly setting up an app. However, these kinds of tools are of limited utility when building an advanced application. If a project becomes too complex for Create React App, developers are forced to “eject,” leaving them with yet another configuration boilerplate. Frameworks for advanced use cases have also popped up. In these cases developers are given a lot of power, and only one way to use it.

kyt is designed for a variety of intermediate to advanced projects, existing in between these two extremes. It gives developers control to make choices about their app architecture, while avoiding the configuration hell that comes with setting up and maintaining development pipelines.

✅ Use kyt in real life

Developers at The New York Times are currently using kyt in several new projects and working to create new features and starter-kyts. Today we’re open sourcing kyt and offering other developers a chance to escape from configuration hell. Feedback and contributions are welcome. We (Matt DeLambo, Carrie Price, Jeremy Gayed, Olov Sundström, Jared McDonald, Ken Kaji, Felipe Da Silva, Eitan Konigsburg) hope kyt will help you as much as it’s helped us.