Need help converting mean stack app to electron


#1

First of all im very new in programming and im stuck at this point, i have this mean stack app that i want to be able to install on several pcs and my pi without having to setup npm and all that. Basically i want my webapp to start on the local wifi with an exe file. After googling around i found this electron thing.

The app starts a web server that is connected by via localhost and controls a machine i built.

Im new to working with software i allways just focused on the hardware and im totally stuck at this point.

Would i need to totally rewrite the app for it to work with electron? im confused , if someone would tell me where to start i’d really appreciate it


#2

You don’t have to rewrite the app. You do have to add some things so that it knows how to behave like a desktop application. You can check out Wordpress Desktop for an example of a web app that just gets dropped into the desktop application component.


#3

Thankyou for your reply! Can you give me a simple guide what i need to do ? The instructions is unclear for me


#4

What are you getting hung up on?


#5

My app structure is different i think, and my views are in jade, not html, what is the first step in the conversion ? Is it only the package.json i must edit?


#6

You could use electron-compile which does a bunch of the compilation/transpilation for you: https://github.com/electron/electron-compile

Otherwise, you’ll want an npm/Gulp/Grunt script that compiles your scripts whenever you build the app.


#7

I am sorry if my questions are stupid but let me try to explain. My app starts a webpage on the local network that can be used on any browser on the local net to communicate with an machine i built. Are these assumptions correct ? With Electron i can easily install this app on other pc’s when compiled ? And if the app is running in electron will it still host the webpage on the wifi or only on the pc that is running it? And i start the app by running node app.js, not npm start . What is the difference ?

Again im sorry about my noobish questions i hope you can answer some of them :smiley:


#8

Is there something stopping you from hosting your app on the custom machine and navigating to it with a web browser?


#9

No, but the goal is to be able to install the app on several os and computers, and be able to update and install fast.
Can you give an example on how the start script should look like ?
“scripts”: {
“start”: “node ./bin/www”,
}
is how it is now, but it needs to be changed for electron right ?


#10

Here’s the section of the docs that discusses the basic structure.

If you have it on a web server, you don’t need to install it on the other computers because they all (presumably) have browsers. Using Electron is like using a web browser to access a web app that lives on your computer along with an instance of Node. I’m trying to figure out what you have to gain from Electron, because it sounds like you’re building an online interface like you use when changing the settings on a router.


#11

I think that maybe you’re missing the point of Electron, and maybe DamnedScholar’s solution is what you’re after. That being said, I don’t think Electron is the wrong approach.

The thing is with Electron is that it’s something you build once and put that on each device, rather than firing up a server, etc like in a web app. Your build scripts are for compiling your app, and that’s it, you’re “good to go”, you can generate .exe's and .app's and run them like regular desktop applications.


#12

There is 2 things i thought were smart with electron. First of all that it will be easy to install and update the app on the pi after developing on the pc, so that you do not have to do npm install etc. I have several of these machines so alot of time will be spared. 2: i will be able to install a touch display so the machine can be controlled directly. But is it not possible that the eletron app does exactly the same as my current app and that the window it opens connects to localhost so the machine can be controlled on the local electron app AND the web interface the eecton is running ?


#13

It’s possible, but is it not over-engineered?

DamnedScholar is suggesting you host a server and access the web app over the LAN, which also doesn’t require installing anything (except for the app with the server running, naturally). Although it sounds like maybe it doesn’t suit your requirements? I’m not entirely sure what’s controlling what, and where the logic should be in your set up.

There is the benefit of having an easily installed and moved around Electron app, but I don’t believe it’s entirely suited to a Raspberry Pi (depending on which model of Pi you have), as you’re bundling and running the resource-intensive Chromium by using an Electron app.

I suppose the issue here is that, while Electron does have its benefits, it seems that you’re trying to use it in a way it wasn’t designed for. Technically it should all be possible and Electron should be a reasonably easy solution, I’m not entirely convinced it’s the best solution.

(Although a bit more info on what you’re trying to do, could help us work out whether or not Electron is what you’re looking for. I’m not enitrely sure what your PCs, machines and Raspberry Pis are doing in relation to each other.)


#14

What the machine or product does is control 10 relays that can be controlled via the web interface that the pc/pi is running (the express app)

So right now my computer is connected to the arduino which controls the relays. You can then control the relays via all browsers on the local wifi. However, i want to be able to easily install the app like an exe file so i can update it and distribute it to other people with no technical knowledge. That is the first priority. I tried http://enclosejs.com/ but it didn’t work with jade.

The second thing i thought was smart was to also have the interface running on the machine itself (the pi) so i can connect a display ON the machine too.

Thankyou for helping me im not really good at this yet :slight_smile:


#15

In regards to using Jade in both Electron and Enclose.js, I’d just compile the Jade in my build process, so that it refers to generated HTML instead of Jade files.

So does the Pi need to be connected over the local area network or you controlling some hardware over GPIO?

It seems to me that there’s no real benefit or disadvantage to using Electron, either way it sounds as if you need a ‘server’ (either your MEAN server, or an Electron app acting in a server-like capacity) on the Pi and a ‘client’ on the user PCs (either a UI hosted at an IP they can access, or an Electron app acting in a client-like way). I suppose you could have a server running on the Pi and Electron clients (with a client app also installed on the Pi), but it seems like a lot of strain on weakest bit of the set-up, that being said it’ll probably suffice for your needs.

As an aside, is your codebase freely available somewhere for me to pick through? Although I imagine this is a work thing and you’re not at liberty to share it all.


#16

Hi thankyou foer your time again ! No this is an open source project that i have modified. Here is the base code https://github.com/ytham/barmixvah

So does the Pi need to be connected over the local area network or you controlling some hardware over GPIO?

Well yes it has t be running on the local web so i can use my phone etc, but if the interface could run on the pi too like on a display it would be very nice!. How would i compile the jade in the build process!

I have basic understanding on nodejs angular and express but i never compiled anything like this so im not sure about how to modify it without breaking it


#17

First off, see if you can run it using this (I’m assuming you’ve already set up the Electron app using all the quick start stuff in the app.js): https://github.com/electron/electron-compile

I don’t use Jade/Pug, so I couldn’t really tell you off the top of my head, and the project is more complex than I’d anticipated and I don’t have the headspace for it right now. But there should be CLI tools for compiling it, that being said, I don’t know how complex the templates are to know if this is a worthwhile endeavour.

But, since the server stuff is all already in place, you can run it off the Pi by using a web browser, like any other device, run it in fullscreen and it’s fundamentally the same.


#18

I really appreciate your help, can you answer one last thing?

I dont understand the instructions on electron-prebuilt-compile. I added electron-prebuilt-compile as a dev dep in the json file.

then the instructions say

Create a new file that will be the entry point of your app (perhaps changing ‘main’ in package.json) - you need to pass in the root directory of your application, which will vary based on your setup. The root directory is the directory that your package.json is in.

My “main” in the package.json is the app.js file. Do i need to create a new file called something else with the root directory or just add it to the app.js? And after that what is the command to actually compile it?


#19

I’d add it to your existing app.js, and open a browser window using the local address that Express is pumping out. This should work (or at least be a start) for your Pi/whatever is running your Arduino, and then anything listening should still just use the browser for now.


#20

Hi i think im pretty close getting it to work, i sucessfully compiled the native apps but now it gives me this

Error: Cannot find module 'C:\package.json’
at Module._resolveFilename (module.js:440:15)
at Function.Module._resolveFilename (C:\Users\marku_000\AppData\Roaming\npm\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35:12)

Do you know what is wrong ?