The nrg cli was released!

Developing Nodes
1

I would like to share with you that I released the first iteration of the nrg cli.

Release Notes

I'm excited to introduce the nrg (acronym for Node-RED Generator - reads as "energy") builder for Node-RED nodes. It streamlines your development workflow with powerful tools and features. Below is an overview of the features you can leverage to build, test, and optimize your custom Node-RED nodes.

:rocket: Core Features

1. Process Client and Server Javascript with esbuild

Harness the power of esbuild, a modern JavaScript bundler known for its speed and efficiency. Here’s how it supercharges your development:

  • Tree Shaking: Automatically eliminates unused code, keeping your builds clean and lightweight.
  • Bundling: Consolidates multiple files into a single output, optimizing your deployment.
  • Source Maps: Easily debug production code with source maps that link back to your original code.
  • Minification: Compresses and obfuscates your JavaScript, reducing file size and improving load times.

These features ensure that your Node-RED nodes are performant, compact, and production-ready.

2. Process Stylesheets with PostCSS

We’ve integrated PostCSS to process your stylesheets, giving you full control over CSS transformations:

  • Scoped styles for your node: Automatically prefixes all styles with the node’s unique type, ensuring styles are encapsulated and preventing any leakage into other nodes.
  • Vendor Prefixing: Automatically adds necessary vendor-specific prefixes, ensuring your styles work seamlessly across different browsers.
  • Minification: Compresses CSS files by removing unnecessary characters, improving load times and performance.
  • Customization: Use PostCSS plugins to extend its capabilities, from autoprefixing to advanced CSS features.

This integration ensures your nodes not only perform well but also look polished and professional in the UI.

3. HTML Minification with html-minifier

Optimizing HTML content is just as important as your JavaScript and CSS. With html-minifier, your HTML files, including node templates and documentation, are automatically:

  • Minified: Reduces file sizes by removing redundant spaces, comments, and other unnecessary characters.
  • Optimized for Performance: Smaller HTML files mean faster load times and reduced bandwidth usage.

4. Pre-Configured Node-RED dev environment

Quickly iterate on your node development with a seamless testing workflow:

  • Pre-configured Node-RED Environment: it provides a fully configured Node-RED instance that’s ready to go as soon as you start developing.
  • Immediate Testing: Simply start Node-RED, and begin testing your node’s functionality without any manual setup or additional configuration.

This fast feedback loop allows you to focus on writing and improving your nodes without worrying about configuration.

5. Structured Project Layout

The generator introduces a well-organized project structure, making it easier for developers to organize their code and maintain large projects:

  • Clear Separation of Concerns: Code is neatly organized into folders for source files, styles, assets, and more, allowing for logical code management.
  • Scalability: As your project grows, the structured layout ensures that you can easily add new features without clutter or confusion.

This structure promotes cleaner code and simplifies collaboration among team members, and cross projects.

:wrench: Developer Experience

7. Seamless Debugging for Client and Server Code

It provides robust debugging tools, allowing developers to debug both client and server-side code with ease:

  • Chrome DevTools Support: Debug client-side code directly in Chrome using the built-in developer tools.
  • VS Code Debugger Integration: Use the VS Code debugger to step through server-side code, inspect variables, and troubleshoot issues.

This enables a smooth debugging experience, ensuring that you can diagnose and resolve issues in both environments efficiently.

8. Watch Mode for Auto Rebuilds

Boost your productivity with Watch Mode:

  • Automatic Rebuilds: As soon as you save your source files, esbuild jumps into action to rebuild your JavaScript.
  • Node-RED Restart: The development server automatically restarts Node-RED, loading the latest changes for immediate testing.

No need to manually stop and restart Node-RED anymore. Watch mode ensures you stay in the flow of development, letting you see your changes in real time.

:hammer_and_wrench: Optimized for Speed and Simplicity

By leveraging esbuild, PostCSS, html-minifier , and a well-organized project layout, nrg ensures a fast and modern development experience. It keeps your code optimized for performance and compatibility, while also:

  • Ensuring Compatibility with Current and Future Browsers: PostCSS vendor prefixing and ES module support ensure that your code is compatible with current browser standards, and future-proof for emerging technologies.
  • Seamless Debugging and Development: Modern tools and watch mode ensure smooth iteration and debugging, allowing you to focus on building better nodes.

Whether you’re aiming for high performance, clean modularity, or smooth debugging,nrg provides the tools to build and optimize robust Node-RED nodes.

Get Started Today!

Experience the improved speed and ease of building Node-RED nodes with nrg.

5 Likes
2

It would be great to have some review of this work by the node-RED techies :wink:

@AllanOricil has committed substantial work & time by developing & documenting this project in support of node-RED, and I'm sure it will be disappointing to him that he hasn't received any feedback, good or bad...

1 Like
3

Well that's me out the running :joy:

.....

"No Marcus! you're an awesome Developer!"..... Anyone? :wink:

But FWIW: While this is cool and likely very helpful for many, I have a workflow that fits my approach well. I primarily use TypeScript, which already provides IntelliSense and works efficiently for contributors.

I prefer keeping things as transparent as possible, and tend to avoid tools that hide the 'magic' I enjoy working with.

Here’s how I see it:

  • Those wanting to create Nodes will likely rely on the existing, well-understood documentation (not to mention its well understood in these forums)
  • For those already developing Nodes (like myself), I don’t see this framework improving my current process.
  • However, those who are framework junkies or prefer less code-heavy approaches will probably appreciate this.

Again, it's great work, and I hope my feedback is taken constructively!

2 Likes
4

Could you share a template project with a very simple node so that we can see your workflow, please? Im looking for the following specs: It has to let us debug client and server side, watch mode for quick iterations, minify builds for fast loading, update css and js to comply with new browser versions.

5

I wont support typescript yet, because I tried @types/node-red and they were not good. There are things missing in the "RED" object. Node-RED team also told me they do not maintain those types, unfortunately. But once official types are released, it is a very simple change in nrg-core.

6

I don't have a "template" - If I can envision a new idea, I get my Dubstep playing as loud as possible (wife leaves home here), and start coding.

But for info:

  • It has to let us debug client and server side
  • watch mode for quick iterations
    • I Start Node RED, test my code, try and break it, fix it where needed - stop/restart Node RED
      I symlink my project to a local install of Node RED and setting the extra nodesDir directory (see below perma)
  • minify builds for fast loading
    Currently, never really had a need to "make it faster"
  • update css and js to comply with new browser versions.
    • How complicated can the client code be?
    • If an issue is raised for a certain UA , then I fix it, once my users alert me to some UA quirk - most client code is minimal on the editor front for a Node
7

I'm the same, my workflow for new nodes is more than sufficient. The only thing I might consider in the future would be to create an npm create-* package so you could instantly create a new templated node. Though even that's probably overkill since you could just make a GitHub repo into a template.

:scream: No thanks. JavaScript is complex enough for me without doubling the number of files to create, adding a build step, and overlaying weird (to me) syntax.

Rather like no longer wanting to use frameworks, I don't want to learn/write yet another language just to generate one I already know. Having a single language was one of the driving factors for me switching from PHP to server-side JavaScript years ago - wow, that must be at least 15years or more ago, I can't even remember now!

VSCode with some JSDoc comments, @types dev installs, and a single typedefs.js file already does all of that without needing to resort to TS itself.

Odd, to me TS is exactly that kind of tool. I personally don't consider it at all transparent. But each to their own of course :slight_smile:

I think that most of us don't create enough nodes to make this worth-while. However, I can see that if you were in a pro development house creating stuff day-in-day-out for customers then I'm sure it would be helpful.

8

2 posts were split to a new topic: Four Yorkshiremen

9

You can now add a badge to your Nodes that are built with the nrg CLI

image
image1117×273 17.6 KB

10

I created an icon for nrg nodes

image
image997×671 58.1 KB

And a badge you can add to your nodes

image
image977×287 17.2 KB

11

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