UIBuilder directory structure

I have read in uibuilder's wiki (V2 URI Paths · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub) about the priorities of the various folders that I am reproducing an excerpt here:

<httpNodeRoot>/<instanceName>/ is mapped to several folders (shown in priority order):

  • <uibRoot>/<instanceName>/dest/ (only if index.html exists there)
  • <uibRoot>/<instanceName>/src/
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/dest/ (only if index.html exists there)
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/

What is the purpose for the src vs dist (originally said dest before correction from post 2) folders? Why would one use one versus the other to hold the needed files? Is there a particular convention that I could read about that explains it?

I ask mainly because it feels like it is better to follow a well thought out plan rather than make it up myself only to stumble over something that other stumbled over before coming up with the well thought out plan.

dest is dist

"usually" when creating sites with certain frameworks there is a buildstep - the build step generates either vanilla javascript, or convert sass/scss to css for example. The output of this building process ends up in the dist(ribution) folder, which will be used for production. The dist is more like a unwritten law, but commonly used for this.

The source code goes in the src directory. (ie. ~/.node-red/uibuilder/<instance>/src)

1 Like

That explains why priority-wise dist is higher priority than src. So if one is building without needing a build step (Vue+Bootstrap), I am thinking that placing in src is the better plan so that if I ever shift to a framework needing the build step, the source versus distribution structure will already be in place and it will be natural to continue placing the original in src.

Yes always place your code it in the src folder.

1 Like

Hi all, @bakman2 is correct.

The dist folder is starting to come into its own as people are using uibuilder for more complex SPA's. If your needs are simple, you shouldn't need it. That is one of the reasons for using VueJS as the default template - it has lots of examples, tutorials and features that do not require a build step.

Note that the dist folder is ignored unless it contains an index.html file.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.