Clear screen to show only relevant information after gatsby develop in the CLI

[shannonbux]

Summary

I have seen some other CLI's clear the command line of past information once a process is successful or when there is an error. This issue describes how we could apply that principle to the gatsby develop command.

Basic example

Right now, this is what my terminal looks like after I run gatsby develop.

$ gatsby develop
blah blah blah blah
blah blah blah blah
blah blah blah blah
blah blah blah blah
stuff is getting updated stuff is working
things are happening
just wait...
it's gonna be pretty cool

Success!

Visit your site at
localhost:8000

Visit GraphiQL at
localhost:8000___graphiql

Well, not exactly. All those lines above the "success" line seem sort of irrelevant unless you're a) working on actual code that controls the CLI and trying to see what's happening or b) something goes wrong. If it's successful, you probably just want the local host links so you can move on to hot reloading!

Suggested solution

Once the status reaches a success state, scroll down to show the success line and below.

`gatsby develop` success!

Visit your site at
localhost:8000

Visit GraphiQL at
localhost:8000___graphiql

stop the development server with CTRL+c and restart with `gatsby develop`

Additional enhancement

• Open localhost:8000 and localhost:8000___graphiql automatically in default browser.

Other options

• Another option is for gatsby develop to be interactive (like jest --watch) where you can use commands while it's running and we could have a command to open the browser with development site / graphiql as part of the available commands. With Ink we can make sure we don't add too much info at the bottom.)
• Other solutions could include showing bootstrap on one line that keeps updating itself unless something goes wrong.
• @jamo had some counterarguments against this change too, which are worth noting. Some developers do want to see what happened during the develop process and for them, it's annoying to have to scroll back. Something that could mitigate this annoyance is to clearly show that the screen has been cleared (so they know they can scroll up) and perhaps provide time stamps to all the processes in the develop output. I'm not exactly sure how to design this yet. Will need to give it some thought. Maybe this:

--------scroll up to see development output------------
`gatsby develop` success!

Visit your site at
localhost:8000

Visit GraphiQL at
localhost:8000___graphiql

To stop the development server, use CTRL+c and to restart, run `gatsby develop`

Motivation

We are doing this because a solid learning principle is to give people the minimum amount of information they need to learn and act. #12951

Thanks and fyi @DSchau @jamo @KyleAMathews @sidharthachatterjee

[LekoArts]

When I'm working with Headless CMS I'm not quite familiar with and e.g. try to add some fields in onCreateNode I often console.log the data I'm getting — or generally speaking: I'd assume that I'm not the only one using console.log to see what data I get. In these runs the CLI is not failing.

Removing the CLI content would be bad for this usecase.

[KyleAMathews]

We wouldn't literally clear anything, just scroll down so only the success message is showing.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[shannonbux]

Another note: Another option is for gatsby develop to be interactive (like jest --watch) where you can use commands while it's running and we could have command to open browser with development site / graphiql as part of the available commands. With ink we can make sure we don't add too much info at the bottom.

[shannonbux]

Figma file ready for commenting: https://www.figma.com/file/z81zOLund5Z5FCjnHnUIrN/CLI?node-id=163%3A0