How to show colours and clear when running React development server in eshell?

Question

Here is how the usual Ubuntu terminal looks when you run the React development serving using npm start and make changes to your source:

Say the server was already running and you tried to do npm start again, you get notified in a colourful message:

And, if you say no, it exits cleanly.

However, I use eshell. This is how the same thing (the react dev. server) looks in eshell:

Observe how the output is appended onto the previous contents instead of clearing the screen. The colours are also missing. If the server is already running, this is how the eshell prompt looks like:

This is kind of a mess. Once you say no, it does not exit cleanly but shows the same message again before exiting.

My question is, is there a way to make eshell more like the ubuntu terminal? Is there a modern terminal package for Emacs that could handle these kind of things?

Answer 1

FWIW, color handling works out of the box for me with eshell

Anything more complicated than that is the task of a terminal emulator, not a shell. Eshell is a replacement for shells, like bash, zsh, you name it, its original purpose was a more familiar environment for developers using Emacs on Windows.

If you want a terminal emulator which runs a shell (like bash or zsh) and handles these escape sequences, your choices are term.el with the M-x term and M-x ansi-term commands and more recently, the vterm package. It might work better for you as it has greater compatibility with xterm (for some reason lots of software in the node.js ecosystem assumes you're using xterm) due to its strategy of letting libvterm handle all the hard work. This means however that you'll need Emacs with dynamic modules support and have to compile the module yourself.