Headless browser automation app via electron js app - node.js

I would like to create an electron app that can do some web automation based on user input into a GUI. In my research it seems my two best bets are Phantom and Selenium+Chromedriver.
The thing I'd like to do is have an app that someone else could download and run without any additional setup. It seems with Chromedriver and Phantom that I'd need to have others download and add these things to their PATH. In order to get things functioning.
Is there a way around this? Or is there another approach I should be taking? Any advice is appreciated. Thanks!

First off, you should have a look at Nightmare.js which is like PhantomJS in many ways, but uses Electron under the hood (and that's good, because Chromium in Electron is very fresh compared to PhantomJS engine).
If you still want to use PhantomJS in Electron that's quite fine too. You may bundle it with your application or install npm module as a dependency and require that in your script. The main thing is - PhantomJS will be installed together with your app and you know the path to that folder.

Related

Single executable for React App and Express API

I have a React App and a Express API. I want to package those two components into one single executable. Is there a way to do this? I don’t want a solution to my problem I want a hint into the right direction if this is possible.
I believe what you mean is not to keep the bundler running as well as the express server, unfortunately that's not possible if you're in developer mode (and) you're expecting realtime updates in your browser, but if you were in production, then it's not even the case that you need to run your bundler, cause your main.bundle.js is already built and ready.
I think this is what you are looking for. https://electronjs.org/
Electron or similar libraries help you to create an executable application which can be installed an run like a desktop application.
The only point you have to keep in mind is for accessing the database you will have to create a REST API and communicate via that.
Link for a simple tutorial.

Configuring Cypress's Electron browser to handle downloads

Is there a way to configure the Electron browser that is within Cypress, by directly modifying the Electron browser's configuration?
Namely, there's an issue with Cypress where it cannot detect download prompts. However, there's a solution that could hypothetically be applied to Electron, which would fix this issue with Cypress.
My thought was to go directly to wherever Electron is being run from within the Cypress library after installing it via npm. However, I cannot find anything pertaining to Electron in my node_modules/, even though Cypress's GitHub repository has mentions of Electron in its code.
I had the same issue and I know your questions is quiet a bit old but anyway - a solution is in development directly at Cypress:
https://github.com/cypress-io/cypress/issues/949#issuecomment-755975882
Update: It is available in Cypress >=6.3.0: https://github.com/cypress-io/cypress/issues/949#issuecomment-763323357

Angular + Electron app: query web API or DataBase according to deskop or web mode

I would like to build an app using Angular + Electron. My app should be able to run both on desktop and browser platforms. I'm considering to use angular-electron starter kit (but I'm open to other possibilities).
What concerns my is the way I read and write data. The data must be stored in a MySQL database. Ideally I would like to:
make the app call an api when NOT running on Electron (browser mode)
make the app query directly the mysql database when running on Electron (desktop mode)
I know I could check for window && window.process && window.process.type to let the app understand wheter running on Electron or not, however I'm a bit concerned about how to handle this. Also because I probably need to import node packages like mysqljs but ONLY in the desktop mode.
You can simply pass in different environment files in Angular during build this allow you to control the environment variables so that you can tell that it is a web app build or an electron app build.
https://angular.io/guide/build
EXTRA
But if you are importing binary packages this is where it gets tricky. I dont think there is a clean way for you to do conditional imports. I did not manage to find a way to do it cleanly and sort of maintained another repository for all my services that needs to import binary files.
To import the binary files you will also need to edit some webpack settings to tell angular to not compile/include the binary files during the build process so that you can use you librarys like mysqljs that require binary files. There is also some settings on the electron end to make binary files compatible for different platforms ie Windows, Mac , Linux. Basically it is really a pain to do it.
Link to how to edit webpack settings for angular 7+
https://github.com/manfredsteyer/ngx-build-plus
I will totally suggest you not to do it unless you really have a very good reason that you need to use these libraries.
EDIT 10/1/19
Okay I was referring to the MySqlJs but it seems like it does not have native modules modules. Native/binary modules basically means javascript code that relies on c++ compiled binaries(Or any native language like rust...).
For my case I was using the grpc modules which has a native dependency. Had to switch to grpc-web in the end.
I will add some footnotes here if you ever need them
https://electronjs.org/docs/tutorial/using-native-node-modules
Node.js / npm - anyway to tell if a package is pure JS or not?

Distribute Node.js application as single cross-platform executable

I have a web app where the front and back ends are both written in Node. The backend needs to run on (recent) Windows, OSX, and Linux. The front end, obviously, will run in a (modern) web browser, with pages served out from the backend.
For ease of deployment/installation, I would like to provide an executable file that installs "the right way" for each of those platforms. In browsing StackOverflow, I found a couple candidates:
1) I see that Electron helps make native apps that run cross platform, but I haven't seen anything that describes how Electron could listen on (say) port 80 and serve out the desired set of pages.
Is using Electron a rational strategy? Can anyone give me pointers to projects that work like this?
2) I also see that pkg (https://github.com/zeit/pkg) claims to produce cross-platform binaries. Can anyone give their experience with it?
3) Any other alternatives?
Free/Open-source somewat preferred, but commercial packages are a possibility. Many thanks!
#saille seems to have nailed it. Searches for "electron and express" on https://discuss.atom.io/ yield multiple articles for the combination.
pkg will also support an Express backend server.
So I do not plan to search for alternatives, but will investigate whether Electron or pkg work best for me.

Desktop applications with Meteor.js

The options I've found for creating desktop applications in HTML, CSS, and JavaScript are:
Electron (formerly Atom-Shell)
NW.js (formerly Node-Webkit)
However, there doesn't seem to be any clear implementation for using meteor.js with these.
NW.js
I've seen some other questions of people asking this, but no implementation. Can't even figure out by the answers what I should be trying to put together:
Meteor leaderboard app on node-webkit
Demeteorizer with node-webkit
How can I start a Meteor instance before launching a node-webkit?
This guys actually got it running but doesn't say how: https://stackoverflow.com/questions/25508737/iron-router-routing-fails-on-reload-in-node-webkit
The idea proposed here is interesting—loading the desktop application completely from the web. However, I would like to allow my users to use the application offline.
Electron
There is an actual implementation, meteor-desktop-app, but it has no clear support for Windows. However, the atom-shell does support Windows just as NW.js does.
Has anyone figured out an implementation to allow meteor.js to operate as a desktop application?
If you drop the code from meteor-desktop-app into Electron Starter, you'll get Windows + Mac + Linux for free, as well as a build system you can definitely use for Real Apps.
Check out mongoclient's scaffold directory, it'll lead you to your electron app if you follow the steps from readme.

Resources