Add .devcontainer config

[fullmetal-fred]

Description

In order to unify the development environment for anyone who wants to contribute to D2.0, I was thinking it could be helpful to include a .devcontainer configuration for those of us using VS Code. That would ensure that everyone who touches the repo does so with a consistent environment. If there's any interest in this LMK...happy to take in feedback and submit a PR.

Epic/Story

No response

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

What kind of thing are you thinking of including for this?

[fullmetal-fred]

Usually what you'd see is a .devcontainer directory:

# repository root

├── devcontainer
│   ├── devcontainer.json
│   ├── Dockerfile
│   ├── ...other resource files
...

I would build a devcontainer & Dockerfile that had Node-RED installed and automatically installs D2.0 into that Node-RED instance so you don't need to run any setup scripts or install D2.0 locally into a pet Node-RED instance....similar to my own setup that I use for building plugins (below as example). You could also include a default flows.json & settings.js for testing / demo with Node-RED. I would think that at a minimum you'd want a devcontainer that installs and runs Node-RED, installs the local node-red-dashboard into the Node-RED instance, and reloads Node-RED on change.

This dev experience creates a devcontainer with Node-RED and a sample dash & NR settings file preloaded and ready to roll. It then installs my local plugin on startup. If I make any changes to my src/ directory for my plugin, it hot-reloads Node-RED using nodemon. This makes for a really nice streamlined development process.

// devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "forwardPorts": ["1880"],
  "onCreateCommand": "cd /home/node/.node-red && npm install ${containerWorkspaceFolder}",
  "postStartCommand": "nodemon --watch '${containerWorkspaceFolder}/src/*' --ext html,js,vue --exec \"node-red\""
}

// flows.json...some preseeded flows to simplify local dev

[
    {
        "id": "cb6421d77edb1435",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b73122f96ab00c8d",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "1c6e6163b86b217f",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "64927572c0866a0d",
        "type": "ui-page",
        "name": "Page N",
        "ui": "b73122f96ab00c8d",
        "path": "/pageN",
        "icon": "home",
        "layout": "grid",
        "theme": "1c6e6163b86b217f",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c5fb8b28164c128d",
        "type": "ui-group",
        "name": "My Group",
        "page": "64927572c0866a0d",
        "width": 6,
        "height": 1,
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "535fa07365a66cc5",
        "type": "ui-button",
        "z": "cb6421d77edb1435",
        "group": "c5fb8b28164c128d",
        "name": "",
        "label": "button",
        "order": 0,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 270,
        "y": 360,
        "wires": [
            []
        ]
    }
]

// settings.js

...
tours: false
...

And finally for the Dockerfile

# Dockerfile
FROM mcr.microsoft.com/devcontainers/javascript-node:20-bullseye
USER node
WORKDIR /home/node
RUN mkdir .node-red && \
    npm install -g --unsafe-perm \
    node-red \
    nodemon
COPY flows.json /home/node/.node-red/flows.json
COPY settings.js /home/node/.node-red/settings.js

[fullmetal-fred]

Also, important to note here that for my plugin I include @flowfuse/node-red-dashboard in my package.json as a dependency...which is why it doesn't show up in the files above.