• This repository has been archived on 01/Dec/2021
  • Stars
    star
    618
  • Rank 72,605 (Top 2 %)
  • Language
  • License
    MIT License
  • Created over 5 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

helpful libraries for *building* CLIs. Not a list of CLIs.

this list is now archived - look inside https://github.com/sw-yx/brain if you would like an updated list! thank you.

cli-cheatsheet

helpful libraries and resources for building Node.js CLIs. Not a list of CLIs.

I put together a 90 minute Egghead.io Course and Workshop on how to put these tools together, if you like video learning. I also make some money if you watch those videos if you want to help :)

CLI Design Thinking

  • 12 Factor CLI Apps (Blogpost, Talk): Jeff Dickey's list of requirements for UX.

  • Heroku CLI Style Guide (Guide, Talk, Talk): Heroku's CLI Style Guide.

  • CLI Guidelines (Guide, Source): An open-source guide to help you write better command-line programs, taking traditional UNIX principles and updating them for the modern day.

  • The Poetics of CLI Command Names: Command naming anti-patterns and excellent names

  • CLI State Machines (Gist): My little thoughts on state management

  • Add a dry run mode for expensive commands like gatsby dry-run

  • The Art of Command Line

Frameworks

  • Commander: Built by TJ, used in create-react-app, vue-cli, and many others. Key feature: pluggability. Vorpal is another framework inspired by Commander and is seeking maintainers
  • Oclif: Built by Heroku, used in Heroku and Salesforce CLI's. Key feature: pluggability.
  • Sade: Built by lukeed, used in tsdx. Key feature: lightweight?
  • Gluegun: Built by Infinite Red, used in Ignite and AWS Amplify. Key feature: templating/filesystem
  • Ink: Built by Vadim & Sindre. Key Feature: React Components and Yoga Layout. See also import-jsx
  • Scritch: Built by Jamie, used at Eventbrite. Key Feature: compose multiple scripts regardless of language into one CLI.
  • Yargs: Built by bcoe, used by webpack-cli, mocha, react-native, nyc, and 14,343 other modules.
  • arg: Built by Vercel, used by vercel, ncc, micro, serve, and many others. Key Feature: tiny
  • cac: Built by Egoist, used by create-nuxt-app and many others.
  • Pastel for React-ink - used in Twilio https://www.twilio.com/blog/building-conference-cli-in-react

New: see CLUI https://blog.repl.it/clui

Inspiration from other languages - the http://charm.sh/ universe.

Utility Libraries

Performance Optimization

For performance logging, you can try process.htime() instead of console.time() (altho the latter uses the former under the hood)

Update Management/Nagging

Context/Config

Context from Git/CI

Context from filesystem/PATH

Config validation

Loading config from json, rc file, etc*

don't need but nice to know: https://www.npmjs.com/package/read-package-json

Beware the race condition when you check if file exists and then open it. the file could be deleted in betwee. instead, just open the file and handle the error if it doesnt exist.

Loading/Storing config from a persistent store

⚠️ Be aware of the XDG spec. Sindre's libraries use env-paths to get paths compliant with this.

🌟Input

Stdin Parsing

Argument Parsing

⚠️ Your framework may come with parsing built in

Input/Stdin/Argument Processing

make sure to also normalize inputted stuff before you compare

🌟Processing

Command execution

Remember Windows users for cross-platform nodejs (Guide). e.g. dont execute pkg.json or shell commands with single quotes instead of escaped double quotes

Sometimes processes can spawn processes. This is troublesome for watch/reload features. Kill them all with tree-kill.

You'll probably also use these in conjunction with port monitors (e.g. the process you're working with opens a port, like CRA for Netlify Dev):

If child_processes are going to be a key part of your CLI, be sure to read the docs and this guide to be aware of the API.

You may also want to poll for conditions to be true to execute async processes:

Spinners/Loaders

Templating

Temp folders

🌟Output

Files

Icons & Coloring

Note that you may want to offer the option to FORCE_COLOR in CI logging.

PrettyPrinting

there are also react based renderers

Boxing

Tables

Banners

Debug Logging

You often also find specialized logger tools for each domain, like @dazn/lambda-powertools-logger for AWS Lambda, but at their core they all support the core pattern of Log Levels DEBUG, INFO, WARN and ERROR.

Plugin/Release Management

⚠️ None of these are offline-first. Keen on finding one that respects offline first.

Dependency installs and Upgrading Scaffolds

import { spawn, hasYarn } from 'yarn-or-npm'
// optionalDir for installing?
const prefixFlag = hasYarn() ? '--cwd' : '--prefix'
spawn.sync(['install', prefixFlag, optionalDir], { stdio: 'inherit' })

Error Stacks/Error Handling

Serving Files

Misc

New: see CLUI https://blog.repl.it/clui

Other useful lists

Beginner Tutorials

More Repositories

1

spark-joy

✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
9,387
star
2

ai-notes

notes for software engineers getting up to speed on new AI developments. Serves as datastore for https://latent.space writing, and product brainstorming, but has cleaned up canonical references under the /Resources folder.
2,778
star
3

brain

Swyx's second brain!
1,458
star
4

launch-cheatsheet

how smart people launch things - collected advice for beginner indiehackers, focused on pricing, landing pages, and everything else that you need going up to a launch.
852
star
5

swyxkit

An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for SvelteKit 1.0!
Svelte
673
star
6

awesome-dev-podcasts

a curated list of awesome dev podcasts and why they are awesome
664
star
7

devtools-angels

active angel investors in developer tools!
588
star
8

swyxdotio

This is the repo for swyx's blog - Blog content is created in github issues, then posted on swyx.io as blog pages! Comment/watch to follow along my blog within GitHub
Svelte
334
star
9

async-render-toolbox

BECAUSE PERFORMANCE SHOULD BE SEXY
JavaScript
320
star
10

gpt3-list

List of things that people are claiming is enabled by GPT3. unverified but links to sources.
267
star
11

svelte-actions

prototype official actions for Svelte
TypeScript
228
star
12

gh-action-data-scraping

this shows how to use github actions to do periodic data scraping
JavaScript
171
star
13

ssg

Svelte Site Generator. why try this? because sapper has a lot of setup, and isn't great at pipelining data:
TypeScript
165
star
14

fresh

Community curated lists that never go out of style! 🍅
137
star
15

page-transitions-react-travelapp

react port of https://github.com/sdras/page-transitions-travelapp. See the deployed metlife site:
JavaScript
93
star
16

ask-cli

a cli to ask questions of gpt3 and iterate/chain of thought
TypeScript
90
star
17

svelte-data-fetching

Data Fetching For Developers Who Are New to Svelte And Wanna Learn To Do Other Stuff Good Too
CSS
84
star
18

uuid-list

list of unique id implementations, design considerations, and resources.
84
star
19

sw-yx

readmeee
Python
80
star
20

netlify-plugin-search-index

Generate a Search Index you can query via a static JSON blob or a Netlify Function! A completely framework agnostic Netlify Build plugin that crawls your static site to generate a search index.
JavaScript
79
star
21

automation

bots and their source
75
star
22

gatsby-netlify-form-example-v2

CSS
70
star
23

awesome-monaco-editor

awesome-monaco-editor
64
star
24

svelte-amplify-datastore-demo

How to do Auth + Amplify Data Store with Svelte
JavaScript
64
star
25

tracking

Developer industry stats and where to find them.
62
star
26

README

a readme for people working with me. always a work in progress.
60
star
27

react-typescript-storybook-starter

react-typescript-storybook-starter
JavaScript
58
star
28

bettertwitter

a better twitter UI
Svelte
56
star
29

egghead-cli-workshop

Build Custom CLI Tooling with OClif and React-Ink!
TypeScript
54
star
30

swyx-react-typescript-snippets

swyx react ts snippets
54
star
31

buying-domains

useful data and advice for buying domains.
44
star
32

codingcareer.com

Career Guides, Principles, Strategies & Tactics to build an exceptional dev career
Svelte
43
star
33

amplify-react-serverless-components

a trial app to deploy React Server Components inside of a serverless AWS Lambda function, scaffolded using the AWS Amplify CLI
CSS
41
star
34

technical-community-builders

companies hiring technical community builders
39
star
35

gatsby-theme-netlify-identity

Add Netlify Identity Authentication to any Gatsby app
JavaScript
38
star
36

hooks

hooks for personal use
TypeScript
38
star
37

rincewind

Rincewind: A boilerplate for React + PostCSS (with Tailwind) + TypeScript
TypeScript
36
star
38

sveltekit-monorepo

sveltekit + turborepo + histoire in a turborepo
JavaScript
36
star
39

digital-garden-tos

Digital Garden Terms of Service
33
star
40

demo-amplify-storage-file-upload

Full Amplify Storage demo showing how to build an app to upload and navigate files in AWS S3
Svelte
33
star
41

company-youtubes

Resource: The Best Company YouTubes
32
star
42

svelte-zen-garden

svelte-zen-garden
CSS
30
star
43

domainblocklist

domains that are mostly just automated reposts of content sites like CSS Tricks
29
star
44

netlify-google-spreadsheet-demo

netlify-google-spreadsheet-demo
JavaScript
28
star
45

podcats

make podcast feeds with markdown, mp3s, and typescript
TypeScript
28
star
46

netlify-plugin-rss

Generate an RSS feed from your static html files, agnostic of static site generator!
HTML
27
star
47

everything-store

Svelte
26
star
48

react-static-podcast-hosting

react-static-podcast-hosting
TypeScript
26
star
49

create-react-app-lambda-typescript

create-react-app-lambda-typescript
TypeScript
26
star
50

alumni-startups

startups by alums of bigname startups
25
star
51

reactive-react

An overly-simplistic mockup of a "Reactive" version of React. See talk slides:
JavaScript
24
star
52

react-blade

Inline GraphQL for the age of Suspense - NO LONGER MAINTAINED
JavaScript
23
star
53

react-wired

wired.js styled components for the discerning react user. not actively developed.
JavaScript
23
star
54

netlify-plugin-no-more-404

Netlify Build plugin to guarantee you preserve your own internal URL structure between builds. Don't break the web! Demo:
JavaScript
22
star
55

async-react-future

high level api's to try with async react
JavaScript
20
star
56

talk-typesafe-fullstack-react-demo-cms

talk-react-summit-demo-cms
TypeScript
20
star
57

smaller-safer-serverless-starter

Build Smaller Safer Serverless web apps faster with Preact, TypeScript, Tailwind, and Next.js
TypeScript
20
star
58

DEPRECATED-netlify-fauna-todo

(DEPRECATED) Netlify Identity + FaunaDB app with most recent versions of FaunaDB client and React
JavaScript
20
star
59

react-todomvc

A simple React component to demo your CRUD backend by implementing just 3 methods!
CSS
19
star
60

podcasting-cheatsheet

tools for podcasting
19
star
61

is-this-netlify

check if a site is hosted on netlify by just prepending "http://is-this.netlify.com"
Svelte
19
star
62

crossbones

Fullstackian award, 1707-FSA-NY. a cross-platform barebones react native setup inspired by https://github.com/FullstackAcademy/bones by
JavaScript
19
star
63

svelte-filesystem-demo

Svelte
18
star
64

bash-cheatsheet

concrete examples of bash syntax for people too lazy to actually learn bash
17
star
65

dev-to-cms

dev-to-cms
TypeScript
17
star
66

gatsby-theme-dev-blog

Swyx's personal opinionated Gatsby Theme for Dev Blogs. See https://swyx.io and see neutral demo at
JavaScript
17
star
67

cli-state

Single, mutable sources of truth for your CLIs
TypeScript
16
star
68

TwoSitesOneRepo

demonstrating how to host multiple sites on netlify from one repo
JavaScript
16
star
69

jamstack-jumpstart

Jamstack-Jumpstart, a workshop for MidDevCon and JSConfAsia 2019
JavaScript
16
star
70

netlify-plugin-encrypted-files

Netlify Build Plugin to obscure files in git repos! (both filenames and their contents) This enables you to partially open source your site, while still being able to work as normal on your local machine and in your Netlify builds.
JavaScript
15
star
71

HNX

swyx's hacker news chrome extension
JavaScript
14
star
72

netlify-fauna-graphql-todo

netlify-fauna-graphql-todo
JavaScript
13
star
73

cli-state-machine

Componentizing and Self-Healing Business Logic with xState Machine
TypeScript
13
star
74

talk-reacts-new-defaults

talk-reacts-new-defaults
JavaScript
12
star
75

blade.macro

this is a placeholder repo speccing out the blade "inline graphql" idea. for a prototype see this site =>
12
star
76

gatsby-plugin-netlify-identity

gatsby-plugin-netlify-identity
JavaScript
11
star
77

FSA-GraphQL-of-Thrones

FSA-GraphQL-of-Thrones
JavaScript
10
star
78

react-static-typescript-starter

react-static-typescript-starter
TypeScript
10
star
79

react-demos

TypeScript
9
star
80

learn-you-a-cloud

learn-you-a-cloud
9
star
81

stateful-serverless

stateful-serverless
JavaScript
9
star
82

gatsby-theme-dev-blog-demo

(DEPRECATED) demo now deploys directly from https://github.com/sw-yx/gatsby-theme-dev-blog
JavaScript
9
star
83

distsys-tldr

TLDRs of Distsys Papers
8
star
84

svelte-cubed-starter

JavaScript
8
star
85

amplify-vscode-snippets

8
star
86

technical-artists

technical-artists
8
star
87

boring-SSG

a proof of concept static site generator with React, Reach Router and Parcel
JavaScript
8
star
88

gatsby-netlify-i18n-redirects

gatsby-netlify-i18n-redirects
CSS
8
star
89

fullstack-serverless-stripe-aws

fullstack-serverless-stripe-aws with Thor & Swyx livestream
JavaScript
8
star
90

react.macro

small babel macros for react
JavaScript
8
star
91

email-tools-list

8
star
92

fresh-react-hooks

DEPRECATED: THIS REPO IS NOT MAINTAINED 😂
8
star
93

react-hero-video

A small styled React component to play your hero videos! Check out the demo:
JavaScript
8
star
94

egghead-storybook2

continuation of my egghead course on storybook
JavaScript
7
star
95

awesometalksdata

data dump from awesometalks.party
JavaScript
7
star
96

rincewind-demo

Rincewind: A boilerplate for React + PostCSS (with Tailwind) + TypeScript
TypeScript
7
star
97

life

The Source Code for Life. A book in progress.
7
star
98

hooks-suspense-faunadb-todo

netlify + faunadb + react hooks
JavaScript
7
star
99

react-static-mdx

react-static-mdx
CSS
7
star
100

AuthApiTesting

Testing Passport.js Authentication gated API routes with Mocha/Chai/Supertest
JavaScript
7
star