Question: Best practice for automating UI Builder dependency installation?

We’re using docker to run Node-RED. Currently we have uibuilder getting installed automatically by providing a package.json to Node-RED, per these instructions https://nodered.org/docs/getting-started/docker:

# Copy package.json to the WORKDIR so npm builds all
# of your added nodes modules for Node-RED
COPY package.json .
RUN npm install --unsafe-perm --no-update-notifier --no-fund --only=production

This gets us halfway there with node-red’s dependencies, but then we still need to manually install uibuilder dependencies (vue, etc.) through the admin interface after starting Node-RED.

I did some testing and it seems like we can provide a minimal /data/uibuilder/package.json file and run an npm install in the Dockerfile and everything works for the most part. (“PACKAGE vue NOT FOUND” error if we provide package.json but don’t run an npm install before starting)

---

Dockerfile which installs uibuilder and its dependencies, sets up minimal index.html for testing:

FROM nodered/node-red:3.0.1

# Install node-red dependencies (uibuilder)
COPY package.json .
RUN npm install --unsafe-perm --no-update-notifier --no-fund --only=production

COPY flows.json /data/flows.json

# Prepare uibuilder directory
RUN mkdir -p /data/uibuilder/ui/src
RUN echo "Hello from /ui/" > /data/uibuilder/ui/src/index.html

# Install uibuilder's dependencies (vue)
COPY uib-package.json /data/uibuilder/package.json

USER 0
RUN chown -R node-red:node-red /data
USER node-red

WORKDIR /data/uibuilder
RUN npm install

WORKDIR /usr/src/node-red

Minimal test flows.json:

[
    {
        "id": "f6f2187d.f17ca8",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "32a328ad2c36f043",
        "type": "uibuilder",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "topic": "",
        "url": "ui",
        "fwdInMessages": false,
        "allowScripts": false,
        "allowStyles": false,
        "copyIndex": true,
        "templateFolder": "blank",
        "extTemplate": "",
        "showfolder": false,
        "reload": false,
        "sourceFolder": "src",
        "deployedVersion": "5.1.1",
        "x": 530,
        "y": 340,
        "wires": [
            [],
            []
        ]
    }
]

Node-RED package.json:

{
  "name": "uib-dependencies-test",
  "description": "Node-RED dependencies",
  "scripts": {
    "start": "node $NODE_OPTIONS node_modules/node-red/red.js $FLOWS"
  },
  "dependencies": {
    "node-red": "^2.2.2",
    "node-red-contrib-uibuilder": "^5.0.2"
  }
}

Minimal uib-package.json:

{
  "name": "uib_root",
  "version": "5.1.1",
  "description": "Root configuration and data folder for uibuilder",
  "scripts": {},
  "dependencies": {
    "vue": "^2.7.8"
  }
}

---

The only issues I see doing it this way is that UI Builder isn’t updating the package.json’s uibuilder.packages, only creating an empty stub:

uib-package.json after starting Node-RED:

{
  "name": "uib_root",
  "version": "5.1.1",
  "description": "Root configuration and data folder for uibuilder",
  "scripts": {},
  "dependencies": {
    "vue": "^2.7.8"
  },
  "uibuilder": {
    "packages": {}  // <- this gets added, but not populated
  }
}

which results in an incorrect/missing “Est. link” in the admin interface:

This isn’t really an issue though since our actual index.html already has the correct paths for the dependencies so this is just a small visual issue as far as I can tell. The file itself is still available where it should be at http://localhost:1880/uibuilder/vendor/vue/dist/vue.js, and no errors are logged.

---

So I guess my question is, is this the most correct/reliable way to be doing this?

1. Provide only a minimal package.json to uibuilder
2. Run npm install at the build stage from the Dockerfile
3. Just deal with the empty uibuilder.packages entry in package.json as it seems to only cause visual issues and no actual errors?

I don’t really like the idea of providing a package.json with a pre-populated uibuilder.packages, since that seems like something that may change over time (like it just did in the last major release!) and should be handled internally by uibuilder instead so we don’t have to keep up with changes to the structure of this file. Are there any hidden issues I may have missed that could be introduced by installing uibuilder dependencies this way? Or any planned changes to uibuilder that may break this in the future?

[TotallyInformation]

Confirmed that manually installed packages in your uibRoot folder correctly populate all of the metadata after node-red is restarted.

[dczysz]

I can try your v6 branch tomorrow so we’re on the same page, just been a bit distracted with other stuff today.