# Creating nodes using vite and vitest?

**URL:** <https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373>\
**Category:** General\
**Created:** [13 February 2025 11:42 UTC](https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373 "2025-02-13T11:42:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stwissel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stwissel/32/126_2.png) [@Stwissel](https://discourse.nodered.org/u/Stwissel)\
**Post date:** [13 February 2025 11:42 UTC](https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373/1 "2025-02-13T11:42:52Z")

</div>

For frontend development we switched to vite/vitest retireing a melange of other tooling like jest mocha chai webpack etc. So I was thinking to apply it to node development. I started with vitest and GitHub copilot did a reasonable job matching the test syntax.

Next step is vite (love the hot reload). I was wondering if someone had tried this before and can share experience, successes, obstacles or failures?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 February 2025 12:57 UTC](https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373/2 "2025-02-13T12:57:21Z")

</div>

I've not personally, I'm still stuck in the world of Gulp. 🙂 Though I do now make extensive use of both ESBUILD, which I love for its ability to output working JavaScript/NodeJS set to a specific version, and LightningCSS which does the same for CSS.

Hot reload not really applicable generally I think? I use a watch function in PM2 (which I use to run my dev version of Node-RED) to restart Node-RED if appropriate files change. Nodes under development are simply installed from my dev source folders so it all just works.

I'd love to see some Vite config for node-red dev to see if it would be worth switching from Gulp which is a bit clunky - but works.

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [15 February 2025 00:20 UTC](https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373/3 "2025-02-15T00:20:03Z")

</div>

I enabled the official node-red test helper package to be used with vitest

> <https://github.com/node-red/node-red-node-test-helper/commit/505ccc74a9c815939174b35d6286db52e027eca1>
>
> this is a continuation of https://github.com/node-red/node-red-node-test-helper/…pull/81

Here is an example

> **[GitHub - AllanOricil/nrg-template: Build Node-red nodes using ES6+ and esm...](https://github.com/AllanOricil/nrg-template/tree/main)**
>
> main

Because I couldn't make Vite dev server serve Node-RED asssets, I decided to build my own cli. It is called nrg. It builds both client and server-side parts of the node using esbuild, html is processed by html-minifier, and css by postcss. You can use esbuild plugins to load other types of assets if you need. The nrg cli offers hard reload with watch mode, and dev debugging for both client and server side parts of a node. Because there is no official support to TS, I decided to not add support to it. Additionally, you will see that nrg enables node developers to create Nodes using classes

> **[GitHub - AllanOricil/nrg-template: Build Node-red nodes using ES6+ and esm module...](https://github.com/AllanOricil/nrg-template)**
>
> Build Node-red nodes using ES6+ and esm module system with the nrg cli

One of my goals for the nrg cli was to enable devs to build nodes using LWC/Vue/Svelte/React. However, I couldn't make it work because I realized I would have to rewrite all jquery widgets as components, and this is too much work.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 May 2025 00:20 UTC](https://discourse.nodered.org/t/creating-nodes-using-vite-and-vitest/95373/4 "2025-05-16T00:20:52Z")

</div>

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