I am working on a project with electron and vuejs (i am using vue-cli-plugin-electron-builder) and I require real time face detection system the fastest and most effective solution so far is OpenCV.js (i have done my research).
The problem that i have been facing is according to the OpenCV.js Docs we need to add the script tag to the html file like,
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"></script>
I have tested it and it works fine only if I turn off nodeIntegration in electron window. But this is not possible because the electron-builder plugin works only if the nodeIntegrations are turned on.
new BrowserWindow({
webPreferences: {
nodeIntegration: true // I need this but i also need opencv
// but opencv is not working if i turn it off.
}
})
Secondly, should I keep using electron or move to NW.js i have noted that the build size of electron.js are huge.
First of all, the following statement is not true:
electron-builder plugin works only if the nodeIntegrations are turned on.
In fact, nodeIntegration is going to be disabled in electron-builder v2.0 by default.
Now let's get to the point. Do not download anything using a <script> tag, if you do this, every time a user opens the app, it will download the script. What you should do is to install all the node modules during development, so that everything comes with the app.
To use opencv in Electron, you can simply Install this npm module. Check out the example on how to use it in Electron.
If that module doesn't work for you, try this npm module and follow the opencv docs if needed.
And to answer your question about NW.js, it depends on your needs. Google the differences between Electron and NW.js and decide what you want to use for your app. In short, Electron is more powerful and more secure, even if the app takes up 200mb more on the drive, it's still a better option. Besides, who cares if the build is 400mb in size? It's not 2010, nowadays most people who's going to use your app in the first place, most likely have half a terrabyte of free space on their drives.
Related
The tutor of my video tutorial compiles javascript/react on save with his VS Code editor. Mine dont.
How can I config VS Code to do this?
Remark:
I find solution for typescript "Visual Studio Code - compile on save", but suggested solution does not work for me.
#added information:
the project is created with create.react-app. npm start opens chrome, and compilation errors are then shown in Chrome's DEV-Console, as noted by Shishani . My tutor has the code compiled on VS Code Terminal console. This offers a quick check of the code compilation before I go to webbrowser, to check for errors there, which seems to me much more intimidating with it's long callstacks.
If you create your React project with create-react-app, and then start it with npm start, it compiles automatically on save. Also, if it's not a React project, but just JS/HTML/CSS, you can open your project with the "Live Server" extension in VSCode, and it will update your page every time you save a file in your VSCode workspace.
You can even do like I do, and enable constant autosave, with the AutoSave: afterDelay setting in VSCode (if you dare), and then set the save delay to a super small number (mine is 2ms) so you don't even need to hit save anymore (go to File>Preferences>Settings>[Search "Auto Save"]).
If you have created react project using there official cli tool (create-react-app) then on saving js files it gets re-compile. This is because they are using webpack bundler behind the scene.
If you have created normal html or js files without any such cli tools then it won't work directly, You have to use some kind of bundler with dev-server support to do it.
Parcel! is a great bundler to use without configuration
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.
right now, I have a React-native project which I created with the vanilla CLI.
I just heard of expo, and I wanted to use it, but it seems I must create my project on it first.
is there a way to migrate a react-native-vanilla project to expo?
Yes, if you have exp installed, you can run exp convert in your project directory. Note that this process won't check whether you have any native modules in your project, and if you do you'll likely have some issues.
As of this writing, there's one notable bug in this process where it may leave your project with both an exp.json file and an app.json file, which need to be manually merged.
I'm trying to evaluate electron (http://electron.atom.io/) for our needs which are as follows:
OS X and Windows desktops platforms support
ability to launch local external executable (our installer)
support a rich UI, at least image background, image buttons, retina display etc.
The result should be a nice wrapper to our installation program (which will run in silent mode).
So, the first question:
Is the electron is the right technology to support the minimal requirements above?
If yes, where can I find the example how to run the local executable? I was unable to find one....
And how can I pack the application to get a single .exe for Win or .app for Mac? I looked in electron distribution documentation, but was unable to achieve the desired result.
The command to make an exe file for mac:
electron-packager <sourcedir> <appname> --platform=darwin
For windows :
electron-packager <sourcedir> <appname> --platform=win32
Just run this command on CMD outside your source directory.
You're not thinking along the right axis. Both Electron and other cross-platform UI tooklits (such as wxWidgets, GTK or QT) meet your requirements.
More relevant differences:
Electron uses HTML, CSS and Javascript. If you're familiar with these technologies, your development process will be faster. The alternatives are harder to use, with the usual modern developer skill set.
Electron is heavier and slower than the alternatives. This means a larger download and poor performance on low-end machines. For a small installer, it may be overkill.
As for your 2nd question, you can bundle your application using ElectronPackager.
I, too have evaluated electron and find it to be fairly easy to work with. As you know it does boast being cross platform, basically due to it's nature of running a version of chrome for the desktop.
Based on your requirements, I would give electron a good look. If you know basic web development, then learning electron will not be too difficult.
One of the ways I took to learning more about electron was to clone an electron project off of GitHub. The project is called mongotron and it can be cloned from Here.
In this project, the developer uses gulp to build the code. He uses gulp, with electron packager to build the various outputs. For instance to build an OS-X version the command would be:
gulp.task('release-osx', ['pre-release'], (next) => {
electronPackager(_.extend(RELEASE_SETTINGS, {
platform: 'darwin',
arch: 'x64',
icon: RELEASE_OSX_IMAGE_ICON,
}), next);
});
A windows build task may look something like this:
gulp.task('release-win', ['pre-release'], (next) => {
electronPackager(_.extend(RELEASE_SETTINGS, {
platform: 'win32',
arch: 'all',
icon: RELEASE_WIN_IMAGE_ICON,
}), next);
});
I am trying to learn Electron (Atom-Shell) but I am finding it pretty tough to find documentation for it...
I am simply trying to figure out how to create a link with in index.html, and have it open a terminal window or run some sort of program.
I learn languages by learning specific tasks as I need them in a program, so that is why I am asking so then I can utilize the technique used in other ways in my programs.
Thank you for helping.
Well, essentially Electron is just a customised version of a Chromium browser that comes packaged with Nodejs and some really cool packages that basically allow you to run the custom browser as if it was a native platform application. Because of that creating an Electron app is very similar to creating a web-app that has a Nodejs back-end.
So to get started with a simple "Hello World!" app, you can just run the following npm...
npm install electron-prebuilt --save-dev
Once the npm is installed you'll need three files to run an Electron app.
A package.json file
A javascript file (default is main.js)
An html file (default is index.html)
See this GitHub repo for a quick copy/paste version of each and more detailed instructions: https://github.com/mafintosh/electron-prebuilt
after that you're ready to simply run your app...
$ electron .
Finally, one way to open a terminal window would be to use an onclick attribute in your html to trigger a child_process, found here, in a function.
That's it! You should be able to edit your html and javascript files as you would for any web-app, and take advantage of the added features that Electron provides.
I'd also check out these resources for more info:
A Quick Start intro to how Electron works -- https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
The Atom discussion forum (Because Atom was built with Electron, and is made to be hackable, the community is quite active) -- https://discuss.atom.io/c/electron
A cool repo to keep up with the latest info. It includes links for apps that currently use Electron, tutorials, videos, and more --
https://github.com/sindresorhus/awesome-electron
I hope that helps!