[{"data":1,"prerenderedAt":277},["ShallowReactive",2],{"blog-\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0":3,"blog-all-for-related":276},{"id":4,"title":5,"authors":6,"body":9,"cta":253,"date":254,"description":255,"extension":256,"image":257,"lastUpdated":253,"meta":258,"navigation":263,"path":264,"seo":265,"sitemap":266,"stem":267,"subtitle":268,"tags":269,"tldr":253,"video":253,"__hash__":275},"blog\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0.md","Overhauling the Dashboard 2.0 Build Pipeline",[7,8],"joe-pavitt","pez-cuckow",{"type":10,"value":11,"toc":244},"minimark",[12,16,32,40,58,63,71,93,100,107,116,120,130,133,139,150,158,162,165,204,207,216,220,228],[13,14,15],"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.",[13,17,18,19,24,25,31],{},"Having shipped the ",[20,21,23],"a",{"href":22},"\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 ",[20,26,30],{"href":27,"rel":28},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues\u002F307",[29],"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.",[13,33,34,35,39],{},"So, that's exactly what we've done with the ",[36,37,38],"code",{},"0.8.0"," release, amongst a few other things.",[41,42,44,45,49,50,53,54,57],"div",{"style":43},"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 ",[36,46,48],{"style":47},"background-color: transparent;","@flowfuse"," namespace, so you'll need to update to use ",[36,51,52],{"style":47},"@flowfuse\u002Fnode-red-dashboard",", and not ",[36,55,56],{"style":47},"@flowforge",".",[59,60,62],"h2",{"id":61},"migrating-our-build-pipeline","Migrating our Build Pipeline",[13,64,65,66,70],{},"Without getting ",[67,68,69],"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.",[13,72,73,74,80,81,86,87,92],{},"Previously, we used ",[67,75,76],{},[77,78,79],"strong",{},"Webpack",", but now, we've switched over to ",[67,82,83],{},[77,84,85],{},"Vite",". This is a newer build tool, and is much faster than Webpack. It's also what we've now updated out ",[20,88,91],{"href":89,"rel":90},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard-2-ui-example",[29],"Example Node"," to use too.",[13,94,95,96,99],{},"So now, when working with a third-party widget, Vite builds up all of your code, wraps it into a single ",[36,97,98],{},"umd.js"," file, and Node-RED then serves that file up for Dashboard 2.0 to load in.",[13,101,102],{},[103,104],"img",{"alt":105,"src":106},"Vite Build Process","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fdashboard-build.png",[13,108,109,110,115],{},"We've also re-written our ",[20,111,114],{"href":112,"rel":113},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fwidgets\u002Fthird-party.html",[29],"\"Building Third Party Widgets\""," guide to reflect this change.",[59,117,119],{"id":118},"debugging-dashboard","Debugging Dashboard",[13,121,122,123,125,126,129],{},"A new feature we've added in ",[36,124,38],{}," is also for those developing Dashboard's core and third-party widgets. You can now navigate to ",[36,127,128],{},"\u002Fdashboard\u002F_debug"," to explore the full configuration that Dashboard receives from Node-RED.",[13,131,132],{},"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.",[13,134,135],{},[103,136],{"alt":137,"src":138},"Dashboard's Debug View","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fdebug-view.png",[13,140,141,142,145,146,149],{},"Note in the above example, where we can see that the ",[36,143,144],{},"ui-dropdown"," has had it's options overriden by ",[36,147,148],{},"msg.options"," on injection.",[13,151,152,153],{},"You can read more about the debugging view ",[20,154,157],{"href":155,"rel":156},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fwidgets\u002Fdebugging.html",[29],"here",[59,159,161],{"id":160},"what-else-is-new-in-080","What else is new in 0.8.0?",[13,163,164],{},"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:",[166,167,168,176,183,190,197],"ul",{},[169,170,171],"li",{},[20,172,175],{"href":173,"rel":174},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F345",[29],"Dynamic setting of msg.options for UI Dropdown",[169,177,178],{},[20,179,182],{"href":180,"rel":181},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F346",[29],"\"Date\" type for UI Text Input",[169,184,185],{},[20,186,189],{"href":187,"rel":188},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F365",[29],"Finer grain controls of Text Input event emissions",[169,191,192],{},[20,193,196],{"href":194,"rel":195},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F367",[29],"Control over when UI Slider emits events",[169,198,199],{},[20,200,203],{"href":201,"rel":202},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F364",[29],"Improved documentation for Bar Charts",[13,205,206],{},"You can also read the more comprehensive release notes for the release here:",[166,208,209],{},[169,210,211],{},[20,212,215],{"href":213,"rel":214},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.8.0",[29],"0.8.0 Release Notes",[59,217,219],{"id":218},"follow-our-progress","Follow our Progress",[13,221,222,223,57],{},"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 ",[20,224,227],{"href":225,"rel":226},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[29],"GitHub repository",[166,229,230,237],{},[169,231,232],{},[20,233,236],{"href":234,"rel":235},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[29],"Dashboard 2.0 Activity Tracker",[169,238,239],{},[20,240,243],{"href":241,"rel":242},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[29],"Dashboard 2.0 Planning Board",{"title":245,"searchDepth":246,"depth":246,"links":247},"",4,[248,250,251,252],{"id":61,"depth":249,"text":62},2,{"id":118,"depth":249,"text":119},{"id":160,"depth":249,"text":161},{"id":218,"depth":249,"text":219},null,"2023-11-23","Explore the latest updates in Dashboard 2.0 with the 0.8.0 release, featuring an overhauled build pipeline, improved debugging capabilities, and more.","md","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fdashboard-0-8-0.png",{"excerpt":259},{"type":10,"value":260},[261],[13,262,15],{},true,"\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-8-0",{"title":5,"description":255},{"loc":264},"blog\u002F2023\u002F11\u002Fdashboard-0-8-0","A month or so ago, we released the Third-Party widget support for Dashboard 2.0, but having seen the feedback, we missed the beat, so we've built it again!",[270,271,272,273,274],"posts","releases","community","changelog","dashboard","XKtaP6Lj7REJ386OQmkvAg_66ojpS4zP8x38fRnFbUM",[],1785528688659]