node-red-uibuillder-vite-template

This is a tempalte about Node-Red uibuilder and vite

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tool that significantly improves the frontend development experience.

How does this tempalte works?

The rule for uibuilder is simple and elegant: "Make sure there is index.html in the src or dist folder and all its resources available". During my struggle with following the vue and webpack approach from the nodered forum, the main problem is comming from the src path(.js .css .icon .svg) in the dist index.html. It finally worked after changing those path to uibuilder rule (eg: from src="/index.js" to src="index.js" or src="./index.js"). The second problem: poor debugging feedback because you have to build first and then check the change.

Uibuilder dist folder url

The answer is add a set the base './' in the vite.config.js. The default base is '/' which will cause many errors. The reason is that the dist static files is hosted by node-red. The base as '/' would be intepreted into the root url(http://localhost:1880/). The base as './' would be intepreted into dist folder url(http://localhost:1880/vue-app);

// vite.config.js
export default defineConfig({
  ...
  base: './'
  ...
})

Better debugging experience

Run vite dev command

yarn dev

How to use uibuilder frontend library

Install libraries

yarn add node-red-contrib-uibuilder
yarn add socket.io-client

Add optimizaDeps in vite.config.json

// vite.config.json
defineConfig({
  ...
  optimizeDeps: {
      include: [
          'node-red-contrib-uibuilder/front-end/src/uibuilderfe.js'
      ]
  }
  ...
})

Steps

// Create a project in the node red.

// Change the Node-Red Project Settings-Dependencies
    Add node-red-contrib-uibuilder

// Create a uibuilder node
    Create a simple flow and drag a uibuider node in
    Double click this node
        Change Properties 'Name' and 'URL' to 'react-app' or 'vue-app'
        Expand Advanced Settings: set Template to 'dist' instead of 'src'
    Save and deploy

// Go to uibuilder folder and create react-app or vue-app with vite

Legacy browser compatiblility - Optional

The dist files generated by vite build require a browser to support Natvie ESM. Luckily, we have @vitejs/plugin-legacy to provide support for legacy browser. This is not must. Just use it incase your browser cannot support Navite ESM.

yarn add @vitejs/legacy-plugin

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  ...
    plugins:[
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ]
  ...
})

Vue2, React and Vue3 examples

Reference the README file inside each folder vue-app react-app vue3-appfor details. The vue3-app contains the modern front end approach with Vue3, Typescript, Vue3 Inject and Provide pattern in usage of uibuilder.

7dir/node-red-uibuillder-vite-template