Electron with node red existing project errors

General
1

I'm trying to wrap a project(with uibuilder) with electron.
I managed to get it as desktop app with my first page runing, but it threw some errors.
Some were about the locations of script files, I tried to solve those by changing the locations.
Now, there is an error which shown in the following screenshot, and I don't know if it's related to the files I've changed or not.Capture

It seems something is included wrong or not included but I don't know what.
This is my index.html after I changed the dependencies locations.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Node-RED UI Builder</title>
    <meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue version">

    <link rel="icon" href="./images/node-blue.ico">

    <!-- See https://goo.gl/OOhYW5 -->
    <link rel="manifest" href="./manifest.json">
    <meta name="theme-color" content="#3f51b5">

    <!-- Used if adding to homescreen for Chrome on Android. Fallback for manifest.json -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Node-RED UI Builder">

    <!-- Used if adding to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Node-RED UI Builder">

    <link type="text/css" rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../../../node_modules/bootstrap-vue/dist/bootstrap-vue.min.css" />
    
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">
    <!--<script src="C:/Users/verina.alber/.node-red/CryptoJS v3.1.2/components/md5-min.js"></script>-->
    <script src="https://unpkg.com/vue@2.4.2"></script>
</head>
<body class="no-scrolling">   
    <div id="app" class="wrapper">
        <header>
			<div class=" img-container">
				<img src="../../../../../static/logo.png" alt="Insert Logo Here">
			</div>
			
        </header>
            
		<b-container id="app_container" class="myform" >
		    <h1>Login</h1>
            <div class="form">       
                <form name="form1" action="#">
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">Name <code>*</code></label>
                        <div class="col-sm-10">
                            <input v-model="name" type="text" class="form-control" id="name" name="name" placeholder="Enter Your Name.." required>
                            <!--<span id='errorname' name="errorname" style="color:red; font-weight:bold;"></span>-->
                        </div>
                    </div>
                    
                    <div class="form-group row">
                        <label for="password" class="col-sm-2 col-form-label">Password <code>*</code></label>
                        <div class="col-sm-10">
                            <input v-model="password" type="password" class="form-control" id="password" name="password" placeholder="Enter Your Password.." required>
                            <!--<span id='errorpassword' name="errorpassword" style="color:red; font-weight:bold;"></span>-->
                        </div>
                    </div>
                    <span id='error' name="error" style="color:red; font-weight:bold;"></span>
                    
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button  class="btn" id="btn_increment" name="submit"  v-on:click.prevent="increment">Log in</button>
                        </div>
                    </div>
                </form>
                
            
            </div> 
        </b-container>
        <footer>
			<h6 id="footer"></h6>
    	</footer>
    </div>
    <script src="../../../node_modules/socket.io/lib/socket.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script> 
    <script src="../../../node_modules/bootstrap-vue/dist/bootstrap-vue.min.js"></script>
    <script src="../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.min.js"></script> 
    <script src="./index.js"></script>
    <script type="text/javascript">
        document.getElementById("footer").innerHTML = "Alfa Group © " + new Date().getFullYear() + " All rights reserved.";
    </script>
</body>

</html>
2

I've not tried Node-RED or uibuilder with Electron but I believe others have.

It looks to me as though you have some location issues. For starters, you seem to be assuming that you can use filing system locations to load scripts "../../../node_modules/socket.io/lib/socket.js" and similar won't ever work I don't believe, you need to load them via the built-in web server. Check out the "Show Detailed Information" button in uibuilder in the Editor, it shows you all of the URL's you need.

3

If you mean using URLs ../uibuilder/vendor/bootstrap/dist/js/bootstrap.js

It throws an error

GET file:///C:/Users/verina.alber/.node-red/projects/PROJECT%2020.12.2020/uibuilder/Login/uibuilder/vendor/bootstrap/dist/js/bootstrap.js net::ERR_FILE_NOT_FOUND

It navigates inside the project.

4

Working with electron seems difficult to me, although I tried multiple sources from the Internet.
Is there another way that gives me a portable application to be easily installed anywhere and package my files so the end-user can't access them.
Note: the project is uibuilder-based , not dashboard-based.

5

Hi, Electron can be a little tricky to work with. I'm not sure but I think the fact that you are also using Node-RED projects isn't helping. Can you try with projects turned off?

Are you using Dave's Electron package:

dceejay/electron-node-red: Electron Node-RED template (github.com)

What does the "Show Detailed Information" page show you?

Not really as far as I know. Of course, the usual thing to do in these cases is to keep your back-end processing away from the user. That would be running your flows on a server with uibuilder providing the client side. But that isn't self-contained of course, you need to be able to run a server somewhere that can be scaled up or out to meet your customer needs.

6

Thanks for your help,
I tried this package and it worked easily.
https://github.com/cinhcet/node-red-contrib-electron-dashboard
Then I applied packaging and distributing part of electron from here.
https://www.electronjs.org/docs/tutorial/quick-start#package-and-distribute-the-application
Now I have an electron executable project working on desktop (that solved the part where I wanted the project to run on clients devices without open codes)
But I still have a problem with the project codes that's deployed on the server, any help how can I make it unreadable.
Note: of course the server is not mine.

7

Hi, there is no way that I know of to protect the flows on the server without the use of a secure data module that only you have the keys to.

If you really want to protect the back-end code, you have to run it in your own environment.

8

I haven't found a way neither.
But what is secure data module??

Hi, there is no way that I know of to protect the flows on the server without the use of a secure data module that only you have the keys to

9

Something like an HSM module.

10

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