# Terminal implementation in Node-Red-Dashboard

**URL:** <https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [6 September 2022 07:35 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380 "2022-09-06T07:35:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 07:35 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/1 "2022-09-06T07:35:31Z")

</div>

Hello people,

I want to implement a web-based terminal in the dashboard.  
My thought was to use xterm but it wont show up in the Dashboard.  
The implementation should be correct:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b90aca90ac0a8102a6f0caa8e17bf324dc5e39e4.png)

Do I maybe have to import something, like the .js?  
I already tried to import it in my settings.js but this is just throwing errors.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/210434ab6a39736b4cd8ee840d48edeecd0996ec.png)

Any idea, what I am doing wrong or do you have some other suggestions, how to implement a terminal in the dashboard?

Thanks

Justin

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2022 07:43 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/2 "2022-09-06T07:43:11Z")

</div>

Firstly, the dashboard already has a `html` `head` `body` - dont enter these in the template node.

Next, to make xterm.css and xterm.js available to your dashboard, you need to "serve it up". That could be done by putting the necessary files in a static folder or use the http-in~http-respnse nodes to create an endpoint to serve them.

> [@JustinB](#):
>
> Do I maybe have to import something, like the .js?  
> I already tried to import it in my settings.js but this is just throwing errors.
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/210434ab6a39736b4cd8ee840d48edeecd0996ec.png)

This is for server side not for client side.

But since you have found the settings.js file - read through it - you should see `httpStatic` - that is where you can host files (somewhere you could dump the required files & make them available to the dashboard).

Search the forum for "httpStatic" and read the [docs](https://nodered.org/docs/user-guide/runtime/configuration)

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:07 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/3 "2022-09-06T08:07:18Z")

</div>

First, thanks for your help.

I found **httpStatic** in the settings.js and activated it (As I read in the docs I also activated **httpAdminRoot** ).

My question now is: How do I "serv it up" in the template-node, without using **head**?  
I put the whole xterm-folder from node\_modules inside

> /home/pi/node-red-static/

and the template is looking like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/640a4349623db746bb4d79f50901ad500ccb5883.png)

But as you said, I shouldnt enter **head** and **body** in the template-node.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 08:28 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/4 "2022-09-06T08:28:27Z")

</div>

> [@JustinB](#):
>
> My question now is: How do I "serv it up" in the template-node, without using **head**?

You don't need to put script links into the head, it is fine to put them into the body. So also fine for the link/script to go into the template.

But if you want to add to the head, change the template type:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c834e33b339dc33330da79c5ff14a908fcf223a.png)

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:34 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/5 "2022-09-06T08:34:02Z")

</div>

I tried to put everything inside the **body**.

But I'm still not able to get it done.

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2022 08:37 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/6 "2022-09-06T08:37:52Z")

</div>

> [@JustinB](#):
>
> But I'm still not able to get it done.
> 
> What am I doing wrong?

impossible to say without seeing what you have done.

Open the browser dev tools (F12), select the network TAB, refresh the dashboard page.  
Are the xterm css and js being fetched?

PS...

> [@JustinB](#):
>
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/640a4349623db746bb4d79f50901ad500ccb5883.png)
> 
> image695×264 8.55 KB

👆 if these are the URLs you are using, then that wont work.

> [@Steve-Mcl](#):
>
> Search the forum for "httpStatic" and read the [docs](https://nodered.org/docs/user-guide/runtime/configuration)

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:42 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/7 "2022-09-06T08:42:45Z")

</div>

Yeah, it's trying to GET it but throwing a **404**.

I've read the docs but I cant see how to access my static directory.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 08:44 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/8 "2022-09-06T08:44:32Z")

</div>

You have used a filing system path instead of a URL path. If you've not changed any other node-red settings, the path should probably be `/xterm/lib/xterm.js`

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2022 08:45 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/9 "2022-09-06T08:45:35Z")

</div>

> [@JustinB](#):
>
> I've read the docs but I cant see how to access my static directory.

> [@Steve-Mcl](#):
>
> Search the forum for "httpStatic"

e.g... [Use jquery in template node (not datshboard) - #4 by jbudd](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/4)

> If your settings.js file contains `httpStatic: '/home/pi/JQuery/',`  
> And you have restarted Node-red after editing it,  
> And that directory contains 123.png:  
> Then you should be able to see the image at `<IP Address>:1880/123.png`

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:45 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/10 "2022-09-06T08:45:41Z")

</div>

Yup, it's working now. Thank you guys! 👍

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:49 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/11 "2022-09-06T08:49:31Z")

</div>

Well I see the terminal but cant make any input 😂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 08:50 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/12 "2022-09-06T08:50:36Z")

</div>

Back to dev tools - go to the console and look for errors.

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:54 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/13 "2022-09-06T08:54:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/afcd586d45ee913574c8178bfab3d138e9594a06.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 08:56 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/14 "2022-09-06T08:56:55Z")

</div>

The .map warnings are nothing to worrry about. No errors. So now you need to head into the xterm.js docs to find out how to use it 🧙

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 08:58 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/15 "2022-09-06T08:58:19Z")

</div>

Alright, I gonna do that. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 September 2022 09:00 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/16 "2022-09-06T09:00:34Z")

</div>

> [@TotallyInformation](#):
>
> xterm/lib/xterm.js

Have you attached it to a real terminal?

I see you have managed to "host" a "web app" but it has to connect to a system!

See this...

> **[attach](https://xtermjs.org/docs/api/addons/attach/)**
>
> The attach addon provides methods for attaching a terminal to a WebSocket stream, such as Docker’s WebSocket attach endpoint.

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 09:05 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/17 "2022-09-06T09:05:00Z")

</div>

You guys are the best!

I think thats what I was searching for right now.

I gonna get into that and share my result later!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 09:15 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/18 "2022-09-06T09:15:39Z")

</div>

> [@JustinB](#):
>
> Alright, I gonna do that. Thanks a lot!

Looks like you also need [microsoft/node-pty: Fork pseudoterminals in Node.JS (github.com)](https://github.com/microsoft/node-pty) and to wire them together.

> [@Steve-Mcl](#):
>
> See this...

Or maybe that 🙂

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [6 September 2022 09:21 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/19 "2022-09-06T09:21:17Z")

</div>

I'm trying this right now. But I'm stuck at the point with the websocket.

I mean.. do I have to set up a websocket, if I want to communicate with the terminal on that local device which is hosting the node-red-dashboard?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 September 2022 09:22 UTC](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380/20 "2022-09-06T09:22:27Z")

</div>

Yes, looks like attach literally just attaches the xterm interactions to a websocket. With a matching listener in node-red, you will get the data back from the browser but will still have to do something with it.

[Next page](https://discourse.nodered.org/t/terminal-implementation-in-node-red-dashboard/67380.md?page=2)