Aug 11, 2022

Universal Configuration-As-Code: The Future of Stellate’s Configuration (and beyond?)

Blog post's hero image

Stellate is being used for GraphQL APIs across many industries, from e-commerce stores and marketplaces to travel platforms, political advocacy websites, and music magazines. When first trying Stellate, we want you to be able to understand the value of our products for your specific use case without having to leave the browser.

You might also want to use Stellate in front of a GraphQL API you don’t control, where the actual backend API implementation is owned by a third-party that you do not have access to.

That’s why we need you to be able to edit your configuration from the browser.

We need 2-way configurability.

twitterscreencap
twitterscreencap

Achieving this 2-way configurability, however, is not trivial. For our initial dashboard, we built custom UI elements for each piece of configuration. For example, this is what configuring cache rules looked like:

CleanShot 2022-08-11 at 10.19.41
CleanShot 2022-08-11 at 10.19.41

As part of rebuilding our dashboard for our new GraphQL Metrics, we rethought every piece of the Stellate experience — including how you configure your service in the browser. Allow me to introduce our new configuration UI… 🥁 drum roll, please

A code editor.

config view
config view

We call this “Universal configuration-as-code.”

Benefits of Universal Configuration-As-Code

While this might seem ridiculous at first glance (”You just put an editor in the browser?!”), having universal configuration-as-code from the browser to the terminal comes with a set of benefits that are too good to ignore:

1. Knowledge transfer between UI and terminal

Once you understand what the different configuration options in the stellate.ts file do, you’re done, no matter whether you’re editing a local copy of the file after stellate pulling or editing the file in your dashboard in the browser.

To get a full GitOps workflow and leverage your code review processes for the configuration, simply check in your stellate.ts file and run the stellate push command to your CI workflow. That’s it because it’s the exact same configuration as you were using all along!

2. Instant feature parity & faster shipping

We had to design and build both an abstraction for our configuration file and a UI for any new configuration option we wanted to support. The same thing is true for many developer tooling SaaS companies, who then often launch API-only at first and add UIs later (or even forget to build the UI entirely sometimes!) to avoid slowing down too much — making the UI a half-baked second-class citizen.

Keeping feature parity between two different configuration interfaces is a Sisyphean task. With universal configuration-as-code, this problem is completely gone.

New options we add to our configuration neither need to ship half-baked nor wait for somebody to build a UI. Once we update the TypeScript configuration file format, both the CLI and the dashboard UI immediately have full feature parity! This allows us to iterate much quicker:

extended view
extended view

3. DRY code reuse across environments

Last but not least, universal configuration-as-code allows us to reuse a bunch of code between our dashboard, CLI and API.

For example, we show you a confirmation dialog with a diff of the latest changes whenever you push a change to your configuration. We also show you the history of configuration changes you’ve made with the specific diff of the changes.

That means that the exact same diffing code runs in three different places:

  1. In the browser:

diff overlay
diff overlay

2. In the CLI:

cli diff
cli diff

3. On the server for the historical diffs:

Service History
Service History

The Future

How far can we take this? How much can we utilize UI to enhance the experience with a TypeScript-based configuration?

The following is an idea we had to use the UI as a supporting element of the universal configuration-as-code:

extended view
extended view

How can we combine UI and a TypeScript-based config to create an ever better developer experience? We’d love to hear your thoughts.

Wrapping Up

With Stellate, we want to make configuration as easy as possible and provide a good transition to a CLI-based workflow once you’re familiar with the product. Universal configuration-as-code is a huge step in the right direction for us.

If you’re not already a Stellate user, sign up for free and take a look at your first stellate.ts today. (psst, Stellate is completely free for developers!) Finally, join the discussion in our Discord community, and thank you for joining our first ever launch week! 🚀