#30DaysOfCode: Building a CLI with React

I'll start with some background on why I'm taking on this challenge of building and learning something in public for the next 30-ish days. Some weeks ago I read this Twitter thread from Sam Julien

Feeling stuck is often a sign that you've exhausted the shallow end of knowledge. As a boss once told me, "Dig deeper."

Start looking through the layers of abstraction. What's happening inside that framework? What's happening in the browser?

See samjulien.com/how-to-get-uns…

19:29 PM - 19 Nov 2021

Don't underestimate the value of learning in public, even just with micro-blogging. (I am still learning this.) It helps other people just as much as it helps you, and it gives you a reason to keep yourself accountable. I love this article by @swyx: swyx.io/learn-in-publi…

19:29 PM - 19 Nov 2021

These suggestions are supposed to help you get past the beginner level in your 2 - 3 years as a developer. It's been 8 years for me but I want to improve in certain areas, so I decided to apply the pattern of learning in public. Since I blog somewhat frequently, I decided to write micro-blogs as a way of learning in public, and hopefully discuss with people here and get their perspective on things.

Shawn's post, Learning in public will help you understand this topic.

I've focused most of my study time this year on learning more about different cloud computing topics. There is so much to learn in this space. I started learning Kubernetes and after a while, I got hooked on the subject of serverless on Kubernetes. I tried OpenFaaS and Knative, and briefly considered OpenWhisk and Kubeless. That experience lead me towards writing a book that I recently published. It's a book on the topic of serverless and cloud native titled How to build a serverless app platform on Kubernetes. I also participate in the Knative project as much as I can, and I've grown to enjoy the people I interact with in the slack workspace.

P.S I write about web development as well, especially React. See my other posts and website for more info.

When I considered the point "dig deeper", I decided to go a little more into Knative and hopefully the journey will lead me towards more insight into serverless, containers, and observability. I also decided to write a journal, in the form of a blog post (this one) so that I can reference and see how I progress or use it as a reference in the future.

Building A Serverless Functions CLI with React

To go deep into Knative, I decided to build a CLI so I can deploy and manage serverless functions that run in containers. I do not know how far I can go with this idea, but I will only know if I take action and build this. Besides, it could end up being a nice project to support the Knative community.

So, I decided to build a CLI, but how do I do it? I never built a CLI except for some code contributions I made to cf-migrations, which is a CLI tool we use at work for managing our Contentful environment.

TLDR; I did some research and decided to use ink, a library for building interactive CLIs with React.

There were quite a lot of libraries out there, and you can find some of them in awesome-nodejs. I learnt about ink from Twilio's blog and went through their source code to understand how they used it. I chose ink because I was hoping to pull metrics from the server and display them in the CLI, and the React library might enable me to do that more easily.

Building a proof of concept

I set out to learn ink and build a CLI by the end of the week. I started on Monday night, 29th of November 2021. For the CLI, I set out to build the following features:

Create a function's project.

Deploy the function.

Get function info (e.g URL to access the function).

It's Friday, and so far I have the first two functionalities working minimally. If I have some downtime and energy this weekend, I may get to work on the third feature. I'm just glad I got those working, and the fun time debugging some errors while calling the Kubernetes API.

The Challenges

I struggled with getting ES modules and CommonJS modules to play well together but I got past it and decided to look into my configuration later in the future. The hard part for me was querying the Kubernetes API. I used the official JavaScript client but it wasn't so intuitive for me to read and understand the API/JS client. I was able to deploy and run the function as a Knative Service, but I couldn't update it and it took a long time to figure out how to do this (I'm not sure if it's the best way but it works 😁).

What's Next?

At the moment, I can't show off what I built, it's still full of console.log() statements. I hope to be able to show something next week, and also hopefully have a short tutorial for those that want to try it out. If you're curious and want to follow my journey, you can watch the project repository on GitHub and follow me here or on Twitter. There's not much on GitHub yet. Hopefully, there'll be updates to share next week.

References

Knative

ink