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!
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 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.
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 often use the Ext.require() functionality of Extjs which lets the it dynamically load the specific content.
But the documentation specifies that when released to the production environment, the dynamic loading feature should never be used. So how can I deal with so many Ext.requires() in my code? The official doc said that the sencha cmd could solve this problem if you follow the scaffolding. But I didn't know about the sencha cmd when I wrote the code.
So, how should I update my code?
The simplest way to merge all your JS files into a production build (taking care of ExtJS requirements) is to use SenchaCMD.
If you didn't follow CMD practices during development it could be quite hard. Fortunately your JS source code will not be changed, you must only be sure to have defined "requires" attribute correctly instead of using Ext.requires (otherwise it would continue to use dynamic loading...).
It really depends on you project structure and you coding style, but steps are:
Download Sencha CMD (last version)
Create a fresh Sencha app with "sencha generate app"
Add your application start logic in the "launch" method of Application.js (consider adding also all your missing requirements in this class)
Add all your source files in the app folder and try to run "sencha app build" (better if you add a subset of your app, try to build it, eventually fix it, the add another part).
Now you should have 2 new builds: "production build" is a single file minified JS, "testing build" is single file non mified. There is also a "development mode" of sencha CMD that starts a Tomcat server and deploy you application as you are doing now.
Im looking for a way to minify my extjs app. The app has already (and will have more) 100+ files like views etc which are loading on the launch and I heard that using a Sencha CMD to minify it would be a good idea, when the app will finally get to production.
Unfortunately, Ive ran into some problems while using the Sencha cmd.
Here's what I did:
downloaded the app to my local
installed sencha cmd v5.1.2.52
Now I try to simply do 'sencha app build', like the tutorials say. It throws me an error [ERR] Command must be run from an app or package folder.
Already tried doing it in main folder, but also tried in "app" inside it. Always the same error.
I probably missed something, because I read about the .sencha folder, it probably should be in my application's folder, but it isnt. Maybe its because of that?
I've also seen a solution to do a 'sencha app init' (thought it could generate some init folders like .sencha) but the command doesnt exists (maybe it would work on older sencha cmd?).
If someone could be that nice and provide me some steps I should take, or point me the steps I missed, itd be very helpful. I did search for it, most of infos say the 'sencha app build' should work but it didn't, Ive also ran into the 'Sencha SDK' but people says its outdated.
If you want to use this facility,first you must use Compiler-Friendly Code Guidelines include:
Framework Awareness
Code Organization
Class Declaration
...
Read more:
http://docs-origin.sencha.com/cmd/5.x/cmd_compiler.html
It sounds like you're missing the metadata that Cmd needs to run an application build.
Try generating a new "app" with Sencha Cmd via the sencha generate app command in a new folder. Then copy your existing application into this folder (replacing the app.js file, /app/ and other bits).
Then try building your application using sencha app build