[{"data":1,"prerenderedAt":260},["ShallowReactive",2],{"blog-\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0":3},{"id":4,"title":5,"body":6,"description":12,"extension":249,"meta":250,"navigation":255,"path":256,"seo":257,"stem":258,"__hash__":259},"blog\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0.md","Overhauling the Dashboard 2.0 Build Pipeline",{"type":7,"value":8,"toc":241},"minimark",[9,13,29,37,55,60,68,90,97,104,113,117,127,130,136,147,155,159,162,201,204,213,217,225],[10,11,12],"p",{},"As a developer, sometimes you have to hold up your hands and realise something you've spent two weeks building needs to be thrown away and restarted.",[10,14,15,16,21,22,28],{},"Having shipped the ",[17,18,20],"a",{"href":19},"\u002Fblog\u002F2023\u002F10\u002Fdashboard-integrations\u002F","third-party widget support for Dashboard 2.0"," in line with Dashboard 1.0's approach, we then had the ",[17,23,27],{"href":24,"rel":25},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues\u002F307",[26],"nofollow","feedback"," that the way Dashboard 1.0 did things really wasn't good, and asking us to consider re-building the process to make the developer experience of working with Dashboard 2.0 far more seamless.",[10,30,31,32,36],{},"So, that's exactly what we've done with the ",[33,34,35],"code",{},"0.8.0"," release, amongst a few other things.",[38,39,41,42,46,47,50,51,54],"div",{"style":40},"background-color: #fff4b9; border:1px solid #ffc400; color: #a27110; padding: 12px; border-radius: 6px; font-style: italic;","Reminder: all new releases of Dashboard are now under the ",[33,43,45],{"style":44},"background-color: transparent;","@flowfuse"," namespace, so you'll need to update to use ",[33,48,49],{"style":44},"@flowfuse\u002Fnode-red-dashboard",", and not ",[33,52,53],{"style":44},"@flowforge",".",[56,57,59],"h2",{"id":58},"migrating-our-build-pipeline","Migrating our Build Pipeline",[10,61,62,63,67],{},"Without getting ",[64,65,66],"em",{},"too"," technical, as part of this work in supporting third-party widgets, we overhauled our build pipeline for Dashboard 2.0. This pipeline is responsible for taking our source code, and compiling it into a format that then gets deployed by Node-RED when running Dashboard.",[10,69,70,71,77,78,83,84,89],{},"Previously, we used ",[64,72,73],{},[74,75,76],"strong",{},"Webpack",", but now, we've switched over to ",[64,79,80],{},[74,81,82],{},"Vite",". This is a newer build tool, and is much faster than Webpack. It's also what we've now updated out ",[17,85,88],{"href":86,"rel":87},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard-2-ui-example",[26],"Example Node"," to use too.",[10,91,92,93,96],{},"So now, when working with a third-party widget, Vite builds up all of your code, wraps it into a single ",[33,94,95],{},"umd.js"," file, and Node-RED then serves that file up for Dashboard 2.0 to load in.",[10,98,99],{},[100,101],"img",{"alt":102,"src":103},"Vite Build Process","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fdashboard-build.png",[10,105,106,107,112],{},"We've also re-written our ",[17,108,111],{"href":109,"rel":110},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fwidgets\u002Fthird-party.html",[26],"\"Building Third Party Widgets\""," guide to reflect this change.",[56,114,116],{"id":115},"debugging-dashboard","Debugging Dashboard",[10,118,119,120,122,123,126],{},"A new feature we've added in ",[33,121,35],{}," is also for those developing Dashboard's core and third-party widgets. You can now navigate to ",[33,124,125],{},"\u002Fdashboard\u002F_debug"," to explore the full configuration that Dashboard receives from Node-RED.",[10,128,129],{},"This is particularly useful when you're trying to debug why a widget isn't loading, showing the correct data, or generally isn't behaving as you expect.",[10,131,132],{},[100,133],{"alt":134,"src":135},"Dashboard's Debug View","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fdebug-view.png",[10,137,138,139,142,143,146],{},"Note in the above example, where we can see that the ",[33,140,141],{},"ui-dropdown"," has had it's options overriden by ",[33,144,145],{},"msg.options"," on injection.",[10,148,149,150],{},"You can read more about the debugging view ",[17,151,154],{"href":152,"rel":153},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fwidgets\u002Fdebugging.html",[26],"here",[56,156,158],{"id":157},"what-else-is-new-in-080","What else is new in 0.8.0?",[10,160,161],{},"Whilst we focussed this article on the build pipeline overhaul, changes to third-party wdgets and debugging Dashboard, we did also squeeze quite a lot more into the 0.8.0 releases too with plenty other fixes and improvements:",[163,164,165,173,180,187,194],"ul",{},[166,167,168],"li",{},[17,169,172],{"href":170,"rel":171},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F345",[26],"Dynamic setting of msg.options for UI Dropdown",[166,174,175],{},[17,176,179],{"href":177,"rel":178},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F346",[26],"\"Date\" type for UI Text Input",[166,181,182],{},[17,183,186],{"href":184,"rel":185},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F365",[26],"Finer grain controls of Text Input event emissions",[166,188,189],{},[17,190,193],{"href":191,"rel":192},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F367",[26],"Control over when UI Slider emits events",[166,195,196],{},[17,197,200],{"href":198,"rel":199},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F364",[26],"Improved documentation for Bar Charts",[10,202,203],{},"You can also read the more comprehensive release notes for the release here:",[163,205,206],{},[166,207,208],{},[17,209,212],{"href":210,"rel":211},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.8.0",[26],"0.8.0 Release Notes",[56,214,216],{"id":215},"follow-our-progress","Follow our Progress",[10,218,219,220,54],{},"As always, thanks for reading and your interested in Dashboard 2.0. If you have any feature requests, bugs\u002Fcomplaints or general feedback, please do reach out, and raise issues on our relevant ",[17,221,224],{"href":222,"rel":223},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[26],"GitHub repository",[163,226,227,234],{},[166,228,229],{},[17,230,233],{"href":231,"rel":232},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[26],"Dashboard 2.0 Activity Tracker",[166,235,236],{},[17,237,240],{"href":238,"rel":239},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[26],"Dashboard 2.0 Planning Board",{"title":242,"searchDepth":243,"depth":243,"links":244},"",2,[245,246,247,248],{"id":58,"depth":243,"text":59},{"id":115,"depth":243,"text":116},{"id":157,"depth":243,"text":158},{"id":215,"depth":243,"text":216},"md",{"navTitle":5,"excerpt":251},{"type":7,"value":252},[253],[10,254,12],{},true,"\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0",{"title":5,"description":12},"blog\u002F2023\u002F11\u002Fdashboard-0-8-0","OXOCAoz-i_RE_ZTy1CS9WvfyJwLUguL31C9CCvkhsaI",1780070551148]