0

NodeRED

I am looking to use the xterm.js library from https://xtermjs.org/, which I installed with the command npm install xterm.

I would like to use the template node to run the following code but I do not know how to import the xterm.js library.

enter image description here

<link rel="stylesheet" href="what-path-do-i-use/xterm/css/xterm.css" />
<script src="what-path-do-i-use/xterm/lib/xterm.js"></script>

<div id="terminal"></div>

<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>

I used docker-compose to launch the project:

docker-compose.yml

version: "3.7"

services:
  node-red:
    image: nodered/node-red:latest
    user: root
    environment:
      - TZ=America/New_York
    ports:
      - "1880:1880"
    networks:
      - node-red-net
    volumes:
      - .node-red-data:/data

networks:
  node-red-net:

Not looking to CDN

A CDN link like below is a temp solution, but there should be a way to reference npm modules libraries.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
Jairus
  • 816
  • 8
  • 27
  • 2
    `npm install` only installs things, which is not what you want. You want the fact that it should be installed to be _saved_ so that from now on it'll _always_ get installed. Use `npm install ... --save` (or `npm i -s ...` if you like to shortened commands) – Mike 'Pomax' Kamermans Jan 21 '20 at 16:13
  • Thanks, I am new to npm and I ran with --save option as you specified. I do have the xterm model in the node_modules folder, but I am not sure where to go from there. I found this [Import Libary Discussion](https://discourse.nodered.org/t/import-a-library-by-global-method-vs-script-src-method/14823/10), but I am not sure how to include the js or css libary. – Jairus Jan 21 '20 at 16:21
  • 2
    @Mike'Pomax'Kamermans *As of npm 5.0.0, installed modules are added as a dependency by default, so the --save option is no longer needed*, check [What is the --save option for npm install?](https://stackoverflow.com/a/19578808/1889685). – Christos Lytras Jan 21 '20 at 16:22
  • ... sure but I assume you visited the link you put in your post? https://xtermjs.org/ clearly shows which path you should use pretty much immediately, in the "Getting Started" section. Does following that example not work? – Mike 'Pomax' Kamermans Jan 21 '20 at 16:23
  • 2
    @Mike'Pomax'Kamermans the complication here is they want to use this in the context of Node-RED - so it isn't quite as straightforward – knolleary Jan 21 '20 at 16:27
  • Correct, this is specific to Node-RED and files are not found on page load. – Jairus Jan 21 '20 at 16:34

1 Answers1

2

Node-RED won't just serve up files from npm installed modules. You will have to do one of the following:

  1. Enable the httpStatic path in your settings.js file (path to this is listed in the early log output) and place the xterm.js file in that path. It can then be accessed with something like http:localhost:1880/xterm.js
  2. Use a http-in/http-out pair of nodes with a file node between them to server the file up on a path of your choice. The file node will need to be set with the full path to the xterm.js file.

You haven't said which directory you were in when you ran the npm install so I can't suggest where the file will have ended up.

hardillb
  • 54,545
  • 11
  • 67
  • 105
  • I used docker-compose and set the volume to mount the `.node-red-data` folder to the `/data`. So /data/lib and data/node_modules. – Jairus Jan 22 '20 at 16:10