i'm kinda new to electron and tried a few things with it. I'm currently working on a bigger project with a lot of existing code, where we want to integrate electron to our application. I made a extension for our app which is directly loaded and used require('electron') to get the things started.
I cannot get electron to work because i'm running this from node.
I have experimented with the electron-quick-start and when i run electron-quick-start with electron . it works without problems, but i cannot run it with node main.js.
Is there a way to pack electron in an existing app or is the only way to use electron to wrap the application into electron?
Is there a way to pack electron in an existing app or is the only way to use electron to wrap the application into electron?
Well, the answer to that is probably yes but which way to start from would be more convenient or appropriate for an existing application is an entirely different matter. Personally what I'd do would be instead of requiring electron in your existing app, to create a new Electron app that would include the needed UI and that would require your existing modules, so instead of requiring the UI from your existing module, I would require your existing module from the UI app. Of course not having seen even a single line of code and not knowing anything bout your app I cannot say for sure that it would be a good approach.
Related
Some things to know:
I understand how to make a HTML / CSS / JS website.
I understand how to make a Node JS app and host it on Heroku
I encountered a problem that was very confusing and I still working it out. I am making a firebase project using their latest tree-shaking V9 SDK
import { initializeApp } from 'firebase/app';
I understand Node JS is meant for backend (it can't be run in a browser) so how am I supposed to "build" this into something that I can reference in a script tag? I've heard of webpack but that requires you to run npm run build so how is that practical in any way? That would mean every change I make I would have to build it?
Developer Testing:
How would one live preview this Node JS app on a localhost if Node JS can't be run in a browser? I would live to be able to preview this Node JS app and quickly make changes if that's possible.
I've heard of webpack but that requires you to run npm run build so how is that practical in any way? That would mean every change I make I would have to build it?
Yes, that's the general idea. You make changes to script files on your local machine (or network), and then in order to see the changes take effect, you rebuild the app so that a new bundle is generated. This bundle can then be hosted on your web server or development server, and once it's there, you can refresh the page to see the differences.
But almost all of this can be automated, resulting in it not really being much of a chore at all.
Nodemon is a popular tool that watches a directory for changes and can run Node scripts when a change is detected. With it, you could, for example, make a change to a file, and then it'll automatically rebuild your app.
For Webpack in particular, there's webpack-dev-server, which can automatically refresh a page when the app gets rebuilt.
So, during development, the workflow can be as simple as - make a change, then alt-tab to your browser (hosting the app on localhost) to look at the changes.
Bundles built for the purpose of eventually hosting them on the front-end can easily incorporate Node modules - the build process can take the code from the module, and the bundle produced can include that code. This sort of thing is extraordinarily common.
I want to create a desktop app with Electron JS and form front end I can use React JS as I'm familiar with it.
I have a good grasp of Python I checked over the internet but they all wanted me to create an API and run it on local I can do that and connect to react electron app but for distribution, I need the user to install Python as well.
I know I can go for node js as a backend but I have a lot of work ready in Python like backend logic and the app will run on desktop only no need to connect to Internet for that.
I need to know if I need user to install python as well. I don't want that.
I think this is exactly what you're looking for, it's a reusable Electron template that uses a React front-end with Redux & Redux Toolkit, and is integrated with Python/Flask for microservices. Packaging functions with build scripts are available for Windows and macOS.
You can just copy the parts you need or clone the template and use it.
https://github.com/iPzard/electron-react-python-template
If you don't want the user to have to install Python then you need to use something to package it together. Check out Pyinstaller, once you've created an exe it can be distributed and doesn't require the user to install Python
https://www.pyinstaller.org/
I am currently trying to build a native C++ add-on for an electron app.
I have successfully built and ran a testaddon.node from the index.js file as specified in the following link (really is a fantastic guide, very worth a read).
https://medium.com/#atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f
I am currently including the addon I made in my package.json folder, and running my electron app via npm start.
However, I cannot seem to get at the require('./test-addon/build/Release/testaddon.node');
My best guess is that the folder is simply not making it into my .asar. I have tried every conceivable combination of electron-rebuilder, electron packager, etc.
From what I see, electron.asar only triggers when I modify the node_modules folder through node. However, I don't see how to do this if I am making my own C++ module.
Try the bindings module,
https://github.com/TooTallNate/node-bindings
, it finds and loads your native .node file. Works for me as follows:
const B2 = require('bindings')('b2')
This line has been taken from here
After considerable smashing my head into a wall, I used these tutorials. Please note that some of the C++ code is now out of date, particularly with the later examples. However, the first 3 or 4 examples build and run fine.
https://github.com/nodejs/abi-stable-node-addon-examples
1) Make sure your example works as advertised in the node addon example link.
2) Bring it into your electron build.
3) Make sure that you run .\node_modules.bin\electron-rebuild.cmd after install
The require will be the same from the electron renderer as it is from the example file.
I have an Electron 1.7.9 Windows application that has been working well and I decided to update to the latest version of Electron, 2.0.8. The application needs to copy some template files from the Electron repository to the users file system. With the 1.7.9 application this works fine, however with 2.0.8 the copy fails because the template file cannot be found. The path to the template file relative to the application is:
resources\app.asar\Templates\ICC_V8\Startup.S
When I debug the application, I am using VS Code, it works just fine.
Any input would be much appreciated,
Sid
This issue has been resolved by moving the templates out of the repository of the Electron app and updating the code to access the templates in the new location.
While this complicates the build of the app, using electron-packager, it does resolve the issue and brings with it the additional benefit of being able to maintain the template files without needing to rebuild the app.
We're trying to create an app to track some logfiles and push those data to our API for our company. It'll be working on Mac OSX and Windows
So, we're really newbie at Electron. I just wonder there is a accepted file structure or framework for Electron ? Because, I don't want to mess up my codes in the future.
Depending on the features you want (angular, react, webpack, etc.), there are starter projects out there. Just have a look on Github for electron starters. However, most projects follow a very similar structure, having at least the following directories:
config
app (or src)
component 1
component 2
assets
fonts
images
test
You may also search for electron prebuilt, electron boilerplate or electron seed.
You can use any boilerplate in the web.
see if this fit your needs:
https://github.com/szwacz/electron-boilerplate