Hi all,
As a beginner of node-red and uibuilder, I spent few days to understand the webpack by following these links using-uibuilder-with webpack and uibuilder-webpack-wiki. All these articles leads me to a new approach 'Vite'
How uibuilder work:
- uibuilder instance src folder: watch files changes and loading automatically
- uibuilder instance dist folder: use express to host static index.html
- uibuilder front-end lib uibuilder.js contains a wrapper of socket.io-client
Main issue with webpack approach - Cannot debug in development, you have to build first and then check
Main issue with vue/cli created project - the path src(eg src="/index.js") in the dist/index.html is not compatible to uibuilder, you have to change it to (src="index.js") or (src="./index.js").
Main issue with CRA (Create-React-App)created project - difficult or danger to change webpack config directly.
Based on these, there would be another approach: that is using vite for dev and build.
Step 1: use vite to create vue or react application in the project's uibuilder folder. (eg: vue-app)
Step 2: install library "node-red-contrib-uibuilder" and "socket.io-client"
Step 3: run in the development mode. eg: "npm run dev" or "yarn dev"
Step 4: open localhost:3000/vue-app. Attention, must add the folder name in the url end, or there would be socket.io-client invalid namespace issue. This is a trick to handle the url check in the uibuilder.js.
With Step 1 to Step 4, we can already have a fast developing and testing experience.
Step 5: Create format.js and its function is to format the index.html and index.js in the dist folder after build. Change the package.json build script from 'vite build' to 'vite build && node ./scripts/format.js'
After this, you get the well formatted index.html in the dist folder.
For the code behind this, refer the github link.node-red-uibuilder-vite-template