Create-react-app: Prettier console output

Created on 29 Jul 2016 · 12Comments · Source: facebook/create-react-app

Hello I'm working on a library to prettify the output to console
I would like to use it on create-react-app in order to offer clearer outputs and nicer user experience that for beginners is fundamental.

I'm asking for opinions before stating to work on a huge PR :)
http://bit.ly/pretty-cli
Thanks

proposal

Source

MichaelCereda

Most helpful comment

https://github.com/SamVerschueren/listr is cool too.

sotojuan on 30 Jul 2016

👍3 ❤1

All 12 comments

Is there anything in particular you’d like to make prettier?
We kinda use chalk here and there but further improvements are welcome.
(As long as we can agree that those _are_ improvements—some screenshots of your ideas would be best for this.)

gaearon on 29 Jul 2016

Yes, I completely agree.
I'm currently working on start and build script in create-react-app in order to publish some screenshots.

My idea is to create small "templates" with pretty-cli and add colors with chalk.
In this way is possible to have a well structured output, and change the way this package shows errors just editing those templates.

Pretty-cli it's at its early stages but it is already well tested and stable, I'm working actively on the project.
I will soon post updates.

MichaelCereda on 29 Jul 2016

👍1

https://github.com/SamVerschueren/listr is cool too.

sotojuan on 30 Jul 2016

👍3 ❤1

Yes it's nice but IMHO I think that beginners should have a nice scrollable output to have the possibility of browsing and understanding all the errors.
listr is great but it's very task oriented and with a "fixed" design.
I'm working on a more manageable solution (pretty-cli) that can be future-proof (for example if it's necessary to change all the styling of the application).

MichaelCereda on 30 Jul 2016

This is a first try.
As I said previously, instead of editing the output of the console directly I created a template using pretty-cli and I simply substitute the _console.log_.
Also the formattation of the messages as been exported into the cli in order to have a unique file that contains all the styling.
If you guys like my idea I can publish some code or a first PR, the thing you see is the output from create-react-app.

The style in the screenshot is just a proposal, if there are better ideas I can totally do some changes.

out

MichaelCereda on 30 Jul 2016

🎉2

I'm working on the PR.
I added more info about the current app and styled the output a little bit more.

MichaelCereda on 4 Aug 2016

Cool, will be happy to review a PR.

gaearon on 4 Aug 2016

The PR is on its way, I apologize but I got married in these days so I had other priorities :)
I'm trying to include important information during the compilation process such as package name, version and so on.
Even if those information aren't useful for pro I think they are important for beginners who need a place to check what's happening with the package they are creating and receive a continuous feedback even if a little bit redundant.
Please reply if there are some info that you guys think can be important to show during the start script.
Thanks

MichaelCereda on 9 Aug 2016

It’s a bit hard to say without playing with it 😄

gaearon on 9 Aug 2016

Yes... Don't worry so let me release the PR. I apologize for the delay.

On Tue, Aug 9, 2016, 5:29 PM Dan Abramov [email protected] wrote:

It’s a bit hard to say without playing with it 😄

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/285#issuecomment-238590686,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGjfqa19pj5-EmRcaJeXkmegWM7uiCDks5qeJzhgaJpZM4JYf51
.

Michael Cereda
http://michaelcereda.com