To begin, I would just like to thank you for taking the time to read this post. I would also like to mention that I took the time to read and try to understand most of the exchanges that are made on the subject. Example here : I also took the time to read the "Ultimate Electron Guide" created by reZach at [https://www.debugandrelease.com/the-ultimate-electron-guide/]. I understand the theory behind "electron main process access to require, and anytime our renderer process needs to use require, marshal a request to the main process." ... I took the time to analyze several code examples, I took the time to read the tutorial on preload script here https://www.electronjs.org/docs/latest/tutorial/tutorial-preload but despite all that, I can't adjust an extremely simple code.
Here is my problem, very simple though, but I'm too stupid to find the solution ;). I had no problem to run this code with an Electron versions below v12, but since the adjustment of the security of the nodeintegration, I can't do it anymore. So basically,
in my main.js I create a "browserwindow", standard, with nothing spécial
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
}
});
in my html file, I simply have this line
<script src="js/client.js"></script>
in my client.js I have
let net;
net = require('net');
this.soc = new net.Socket();
How to make so that the module "net" is imported ? ... I know it should be simple though, but I tried a lot of things with a preload.js, a renderer.js, but no way i'm able to make this simple code work without the error "Electron require() is not defined". Someone would be kind enough to help me ? Everything works fine with versions below 12, but I want to adjust to new versions of Electron
Related
Looking to better understand the way to approach my desired goal. Building an electron application that will perform processor intense tasks. I would like to utilize multithreaded design using the approach of creating a hidden BrowserWindow() for each task.
I am currently using electron-webpack and webpack-dev-serve for development. I am having limited success at the moment. What would be the best/cleanest way to have the following architecture that runs both in development and production mode.
Desired Architecture
I currently have main.js and renderer.js working well. Now I am attempting to run additional BrowserWindows that will perform more processor intensive task, but I am not sure on how to get this working. I did find a good example here of electron background processing, but this does not involve using electron-webpack and webpack-dev-serve.
I was thinking to have my src code like this
src/common/task1/
- task1.html
- task1.js
src/common/task2/
- task2.html
- task2.js
In my main.js (production) I would have:
let bg = new BrowserWindow({ show: false })
bg.loadURL(url.format({
pathname: path.join(__dirname, 'common/task1/task1.html'),
protocol: 'file',
slashes: true
}))
currently, I can see common/* bundled in my app.asar. However, it does not seem to load the task1.html file. I have the BrowserWindow set show: true. So I do see the window and I don't see any errors. However, my <h1> tag to prove the html is loaded is not showing in the window. I don't need any HTML to display, because the window should be hidden and I only wish to use the window to run processor intensive javascript code.
I'm using the admin-on-rest npm package starter project and trying to plug in a simple SSO Facebook login button using the FacebookAuth npm package. Every time I try to click the "Login" button, I get the following error:
FB.login() called before FB.init()
I'm using an .env file with the following variable: REACT_APP_FACEBOOK_APP_ID and setting it to the right value. I even did console.log() within my app and can see it output.
I checked and I'm only loading the FB SDK once, not multiple times (this was a common issue reported on other threads).
Ok, it turned out to be something pretty dumb, but something to point out nonetheless!
In my .env file, I had accidentally placed a semicolon (;) at the end of the declaration, like this:
REACT_APP_FACEBOOK_APP_ID = XXXXXXXXXXXX;
Apparently .env files do NOT like semi-colons. This was just very difficult to figure out from the error above.
So if any of you want to pull your hair out because of this issue, and you're using similar tech, check to make sure you're syntactically kosher EVERYWHERE variables are being declared.
the funny thing was i forgot to replace your-app-id with my app id:
<script>
FB.init({
appId: 'your-app-id',
autoLogAppEvents: true,
xfbml: true,
version: 'v8.0'
});
</script>
I'm new to web development and I'm currently in the process of building my own website for my portfolio. My app uses node, express, and Heroku to launch it online. However, the page isn't as smooth as I'd like it to be. It drops a lot of frames when scrolling and viewing animations. I'm wondering what I can do to make my app feel buttery smooth. I've looked all around for solutions but I'm too new to development to really understand what to do. I've attempted to use the inspector to see if the css or javascript files are slowing down the processes via the waterfall insepctor, but came up dry. So far, I've compressed the files and lowered the scale of all images. Also, the entire website is static content so I can't imagine why its running so slowly. Any help would be much appreciated.
The website in question
The "lag" could be caused by the ScrollFire plugin. Every time you call Materialize.scrollFire(..) you actually add a JavaScript listener for the "scroll" event. The way you use it, you call Materialize.scrollFire for each of your target objects, so you actually create multiple "scroll" listeners. But the scrollFire options is actually an array of targets, so you could get away with only initializing it once. Like so:
var options = [
{selector: '.iphone1', offset: 300, callback: function(el) {
$('.iphone1').css('visibility', 'visible');
$('.iphone1').addClass('animated slideInLeft');
}},
{selector: '#paragraph_intro', offset: 300, callback: function(el) {
$('#paragraph_intro').css('visibility', 'visible');
$('#paragraph_intro').addClass('animated slideInRight');
}},
// ... And so on
];
Materialize.scrollFire(options);
It could also be caused by your own scroll listener at:
$(window).on('scroll', function(){
updateNavigation();
changeNavColor();
changeHeaderColor();
});
I would consider adding some kind of throttling, so these functions are called less frequent while the user is scrolling.
These may not be the problem, or the whole problem, as I cannot see how the page would behave without it, but it could have an impact, so it's worth investigating.
I use node js, selenium server standalone with chromedriver and webdriver.io
I want to say that if buttonxyz .isVisible or .isExisting that my script is using .click() on it. If the button does not exist the function will be ignored.
so webdriver.io told me this
client.isExisting('#someRandomNonExistingElement').then(function(isExisting) {
console.log(isExisting); // outputs: false
})
I want a structure like this
client.isExisting('#someRandomNonExistingElement').then(function(isExisting) {
client.click('#someRandomNonExistingElement')
})
But it´s not working for me. the script stops on pages where the buttons don't exist and if the CSS selector is existing the function does not work.
Then I tried something like
.isExisting('.buttoncsshere').click('buttoncsshere')
Well with this code it clicks on the button if it exist, but if the button not exist the script stop working. Sorry I´am a newbie code girl can you help me pls
EDIT: this was the solution for me
.isVisible('css').then(function(isVisible) {
if (isVisible) {
client
.click('css')
.pause(1000)
}
})
Using pause() compromises the robustness of your tests. Especially if you have network latency issues. You really should be using waitForVisible. http://webdriver.io/api/utility/waitForVisible.html
client.waitForVisible('css')
.click('css')
One of the pleasures of frameworks like Rails is being able to interact with models on the command line. Being very new to node.js, I often find myself pasting chunks of app code into the REPL to play with objects. It's dirty.
Is there a magic bullet that more experienced node developers use to get access to their app specific stuff from within the node prompt? Would a solution be to package up the whole app, or parts of the app, into modules to be require()d? I'm still living in one-big-ol'-file land, so pulling everything out is, while inevitable, a little daunting.
Thanks in advance for any helpful hints you can offer!
One-big-ol'-file land is actually a good place to be in for what you want to do. Nodejs can also require it's REPL in the code itself, which will save you copy and pasting.
Here is a simple example from one of my projects. Near the top of your file do something similar to this:
function _cb() {
console.log(arguments)
}
var repl = require("repl");
var context = repl.start("$ ").context;
context.cb = _cb;
Now just add to the context throughout your code. The _cb is a dummy callback to play with function calls that require one (and see what they'll return).
Seems like the REPL API has changed quite a bit, this code works for me:
var replServer = repl.start({
prompt: "node > ",
input: process.stdin,
output: process.stdout,
useGlobal: true
});
replServer.on('exit', function() {
console.log("REPL DONE");
});
You can also take a look at this answer https://stackoverflow.com/a/27536499/1936097. This code will automatically load a REPL if the file is run directly from node AND add all your declared methods and variables to the context automatically.