Collect & analyze examples of CLI apps

[KyleAMathews]

Particularly for software that's similar to Gatsby.

For each, try out installing and creating a project and write up what the experience is like and take screenshots of different workflows.

• [x] Vue CLI
• [x] Create React App
• [x] react-static
• [x] Next.js
• [x] Expo
• [x] Parcel
• [x] Ruby on Rails
• [x] Phoenix Framework
• [x] Django
• [x] create-next-app
• [x] gridsome
• [x] hugo
• [x] middleman
• [x] eleventy

Next phase

(look at these after implementing quick wins gained from list above)

• [ ] vuepress
• [ ] docusaurus Ideas from Twitter: https://twitter.com/kylemathews/status/1113623329875709952
• [x] https://cli.angular.io/
• [ ] nuxt.js
• [ ] https://wp-cli.org/ For example, if you have the WPGraphQL plugin active on your site you can use WP CLI to generate a schema.graphql file of your sites Schema using WP-CLI wp graphql generate-schema
• [ ] https://pantheon.io/docs/terminus/
• [ ] https://github.com/FormidableLabs/webpack-dashboard/
• [ ] @goserverless
• [ ] speed-test
• [ ] archey
• [ ] yarn
• [ ] cargo
• [ ] rocket
• [ ] huge great cli
• [ ] create-new-app
• [ ] nethack
• [ ] ghost
• [ ] curl
• [ ] heroku
• [ ] pgcli (https://www.pgcli.com)
• [ ] HTTPie (@clihttp)
• [ ] @goserverless

[shannonbux]

Vue CLI

Overall observations

• When a process is done, the command line interface anchors its position at the relevant info. For example, when localhost:8000 was ready, the text saying "Done!" + the link got anchored at the top.

  Installing

  Nice interface for selecting options instead of defaults

  

CLI help

seemed standard

Creating project

Emojis are fun, not super accessible, great landing page for first project w/ links to docs

- Emojis and fairly clear updates and links to learn new things - The homepage of the `hello-world starter` is a nice documentation introduction, although it made me want to open that same page on the docs site bc I'd probably delete it from my project

Develop

seemed standard. The graphical UI made it hard to edit files and seemed buggy

- CLI - the UI doesn't help you find the project's files--it's possible, just hard to find. Also, I clicked on "open the project in code editor" and it didn't work. No images here yet

Production

Nothing important to note here

- Nothing important to note here

Errors and recovery

some bugs w/ repeated error output. Graphical UI is worse than the command line output bc it just says "7 errors generated" w/ no link to greater details

- Repeated typescript warning many times when I ran `npm run build` to warn me that my version of typescript is above their currently supported versions

Vue graphical UI

• People say they like the Vue graphical UI, we had mixed experience, not sure about it yet. A lot they're doing well, such as reports and analytics, a lot of basic stuff that was tough (finding the project's code, finding error messaging)

Creating project

- The default vs. manually selecting options was easy to use - Lots of people say they love the `vue ui` idea - it's a graphical interface 

Develop

The graphical UI made it hard to edit files and seemed buggy

- the UI doesn't help you find the project's files--it's possible, just hard to find. Also, I clicked on "open the project in code editor" and it didn't work.

Production

Nothing important to note here

- Nothing important to note here

Errors and recovery

Chrome extension for errors (haven't tried yet). Graphical UI is worse than the command line output bc it just says "7 errors generated" w/ no link to greater details

- interesting Chrome extension - The UI also didn't make warnings and errors easy. The dashboard shows how many warnings got generated, but isn't clickable. The output is better; you just have to remember to click on the tab.

[KyleAMathews]

Phoenix Framework

Based on Elixir which is based on Erlang

Installation

Has a bunch of dependencies to install — Elixir & Postgres — homebrew handled these easily

Then had to install `hex` which is a Elixir or Phoenix package manager

Create new project

👍

Postinstall

Very nice postinstall messages on what to do next

Help command

Pretty standard help text

Develop

Interesting mix of Phoenix output + webpack — ok organized, no color

Error handling

Pretty adequate error messages on simple problem in browser/terminal

Browser Terminal

[KyleAMathews]

Ruby on Rails

Played with the hosted RoR on repl.it for 5 minutes https://repl.it/languages/rails

Develop

Really verbose output for each handled request

Fun initial screen

Couldn't figure out how to edit the page so couldn't trigger an error to see how that was handled.

[KyleAMathews]

Django

https://repl.it/languages/django

Develop

output

Verbose server software style output - Doesn't hot reload styles - Hot reloads python which is fun (handled by repl.it though?)

Error handling

Prints very long error trace w/ no colors and has error message nestled in middle — so kinda confusing

[KyleAMathews]

Parcel

Install global cli

Pretty good except for noise from NPM from installing binaries

Development

Use html as entry point. No fancy way to start projects. Has a basic html file in README (which points to an index.js which it doesn't say to add).

Errors

Well written errors in both browser overlay & terminal

Build

[shannonbux]

Create-react-app

Install & create project

Really fast, looooong list of dependencies seemed unnecessary to read, installation and creating project occurred in one command which was nice

- Installation was really fast = 27.63 seconds - Not sure why I need to see a readout of the entire list of dependencies. Was super long (screenshot doesn't show them all) - Creating a project was included in installation `npx create-react-app my-app` which was nice although it confused me since it's one less step than I'm used to

CLI help

appeared after I installed w/o needing additional command, which was nice

- appeared after I installed, which was nice

Develop

localhost:3000 opened automatically after developing which was nice

- localhost:3000 opened automatically once I ran `npm start` in the project, which was nice, although the terminal said I would need to open it myself, so that was confusing bc I was about to type it in and then it just opened by itself - hot reloading worked great

Test

Hadn't seen `npm test` options before this, seems useful

- `npm test` gave me some options for testing

Build

`npm run build` comes up with some options that don't seem common enough to be front and center

- `npm run build` comes up with some options that don't seem common enough to be front and center

Errors and recovery

Command line and browser show same error

- Command line and browser show same error when I entered 1/0 into a .js file

[KyleAMathews]

Next.js

Install

Oddly they assume that you've already setup a node project (but don't tell you this) as they're first instruction is to install next/react/react-dom — wonder how often that bites people. No postinstall message

Develop

Clear the screen and show nice success message

Errors

Show nice & similar errors in both terminal and browser. Returns to success message in terminal + regular stuff in browser upon fixing error

Production

With next.js you build the assets and then start the server. Spartan output that gets the job done but nothing more

[shannonbux]

React-static

Install

Nothing noteworthy here

CLI Help

Seemed fairly standard, came up at end of create new project process

Create new project

Suggested name for the project, prompted me to `cd my-project-name`, provided a list of templates to choose from, and then suggested what to do next. Very nice!

Develop

Hot reloading required me to refresh the page on Chrome. The CLI did a nice job converting my `npm start` command to what it needed me to run instead. I guess it could have prompted me to change my behavior too. Finally, I had to look a while for the link to the localhost:3000

- The CLI did a nice job converting my `npm start` command to what it needed me to run instead. - Finally, I had to look a while for the link to the localhost:3000

Build

Ran into what seems to be an error and couldn't run the build process using `react-static-build` or go back to development mode either. `npm run build` worked though. So choosing npm early on must lock you into npm commands, but I didn't know that.

- Lots of output from build process. - End of the screenshot. Couldn't fit all on one screen

Error & recovery

A little frustrating that each build didn't show timestamp of when it succeeded. Also only uses green text for "Build updated" and a check mark to mean "success". Wondering why they don't just say "build updated successfully" to be a little clearer, especially for accessibility purposes

[KyleAMathews]

Hugo

Install

Easy with homebrew

Develop

Fast and simple

Handling errors

showed error in browser & terminal and cleared both once the error was fixed

[KyleAMathews]

create-next-app

Simple helper for quickly setting up new Next.js apps. Creates directory, installs dependencies, displays success message and help with commands people can run

[KyleAMathews]

Middleman

Ruby-based SSG

Install

New project creation is easy from CLI. Clones repo and installs gems

Error handling

There's no hot reloading so you have to refresh to see errors. I was only able to trigger their error screen by calling a non-existent ruby function in the erb file. The error wasn't shown in the terminal until I stopped and started the dev server. JS/frontmatter errors were ignored. The build failed with this error as well but it didn't show it — you needed to re-run the build with a `--verbose` flag

[KyleAMathews]

@11ty/eleventy

Install

Standard NPM install

New project

Docs instruct you to echo a string into a file to create your first file :-) Everything is run out of the global so there's nothing to install in the project

Error handling

I created a JS page and triggered an error. The CLI showed the error and the browser didn't. When I fixed the error, the CLI showed the build running again successfully

[KyleAMathews]

Gridsome

Install

Standard NPM global install

New project

Did something pretty clever where they hid output cloning / installing packages (presumably _unless_ there's an error). Ended up being very clean

Develop

Shows log during bootstrap and then clears the screen to show the normal webpack successful compilation output

Error and recovery

Shows error in browser & terminal and clears them on fixing

[shannonbux]

Angular CLI

Angular Console

A desktop app that allows you to run commands in a graphical interface.

Features: - nav bar = recent, create, import. Also has icons to open project in finder, code editor, or terminal - run schematics, see options and descriptions for each option, toggle & set options with toggle button and text input fields - serve, test, build buttons - works w/ any schematics you have set up Pros: - way simpler than Vue's graphical UI Cons: - not sure what the audience is--how hard is it to look up schematic options and find out what they mean in a regular CLI?

Really good doc on CLI

This doc was super clear, concise, etc. https://angular.io/cli

Install & create project

Pretty standard

- Installation was really fast - Pretty standard

CLI help

If I tried to run a command that wasn't supported, a nice suggestion would remind me to look run `ng help`

Develop

Couldn't see the link to the localhost address. I think we're doing this better

Build

Seemed standard, not much output, just date, hash, and time it took with some "chunks", whatever those are

Errors and recovery

haven't tested yet