Launch Node-Red dashboard from React application

General
1

Hello All,
I am having a react app (frontend) and nodejs (backend)
In my existing UI, I want to give a button and when user click that button I want to launch node-red dashboard.

I am following this guide:
https://nodered.org/docs/user-guide/runtime/embedding

Created a react app:
$ npx create-next-app

Currently, In App.js, I just included:
var RED = require("node-red");

and in package.json:

"dependencies": {
    "node-red": "^3.2.0"
}

I tried to build it using:
$ npm build or yarn build

and tried running using:
$ npm start or yarn start

But while starting it is giving too many errors:

Failed to compile.
Logs:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack

<!doctype html>
|
|
WARNING in ./node_modules/@mapbox/node-pre-gyp/lib/util/compile.js 30:26-53
Module not found: Error: Can't resolve 'node-gyp' in '~/react_app/node_modules/@mapbox/node-pre-gyp/lib/util'

WARNING in ./node_modules/@mapbox/node-pre-gyp/lib/util/compile.js 40:23-45
Module not found: Error: Can't resolve 'npm' in '~/react_app/node_modules/@mapbox/node-pre-gyp/lib/util'

Module not found: Error: Can't resolve 'crypto' in '~/react_app/node_modules/bcryptjs/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

Failed to parse source map from '~/react_app/node_modules/https-proxy-agent/src/agent.ts' file: Error: ENOENT: no such file or directory, open '~/react_app/node_modules/https-proxy-agent/src/agent.ts'

........

Linux Env details:

Node version: v20.5.1
npm version: 9.8.0
2

A much easier and more manageable approach - rather than trying to embed Node-RED into an existing node.js app - would be to have a proxy sitting "above" your app and Node-RED so that they would work side-by-side.

You would then get the proxy to serve both apps as different virtual URI's (hiding node-red's port number for example).

Then you can treat Dashboard and your web app as peers and moving between them is as simple as having a link. An HTML button can, of course, do a location change in a users browser so this is trivial. The browser itself would take care of location history so getting back to your app from Dashboard would also be trivial for the user.

3

@TotallyInformation Thank you for reply.

But that will be kind of last solution. where we are having proxy interface and based on user interest he can switch between two URLs.

In what cases this guide will be useful:
https://nodered.org/docs/user-guide/runtime/embedding

4

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