Connection refused when launching Electron app generated with electron-packager/ electron-builder - electron

I have a React Electron app with Webpack and try to build it into an executable.
I used the CLI commands of electron-packager and electron-builder which ran without errors.
But when I run the exe I get a blank screen and from terminal the error message:
(node:8172) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED
(Use mixmatch --trace-warnings ... to show where the warning was created)
Running with the option doesn't give any additional information.
Searching the source code for localhost leads to index.js in the webpack directory:
var createWindow = function () {
var preload = path_1.default.join(__dirname, '../renderer/main_window', "preload.js");
exports.mainWindow = new electron_1.BrowserWindow({
// show: false,
webPreferences: {
enableRemoteModule: false,
// nodeIntegration: false, // is default value after Electron v5
preload: preload // use a preload script
}
});
exports.mainWindow.loadURL('http://localhost:3000/main_window');
exports.mainWindow.maximize();
exports.mainWindow.webContents.openDevTools();
};
So I guess a server is being started, which probably is the same for every app, but the app is not allowed to access localhost.
So why does it seem to work easily for everyone else but not for me?

Once the build is created, you need to loadURL from build/index.html.
Replace your code of export.mainWindow.loadURL with this
e.g.
const isDev = require('electron-is-dev');
exports.mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);

Related

Cypress crashes (Electron) with error 324 net err_empty_response

I can use only Electron as browser for my intranet Application,
Test
Launch intranet application
Click on link
new window opened with external link
Code:
cy.window().then((win) => {
cy.stub(win, "open") .as("popup");
});
this.click(webelement);
cy.get("#popup").should("be.called");
cy.get('#popup').should('have.been.calledOnce', path);
Stub works no error in runner, new window (blank) is opened , after some time , cypress crashes with error as
cypress ERR_EMPTY_RESPONSE (-324) loading "extrenal link url"
I added websecurity to false in config
chromeWebSecurity: false,
webPreferences: { webSecurity: false }, --> This is for Electron
Unfortunately I can use only Electron

Laravel 8 jetstream hot reload and browser sync do not work

I have a big problem with a system I just created.
I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...
However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...
My files are standard with laravel 8 and I haven't made any changes to the code yet.
Informations:
Laravel: v8.41.0
PHP: PHP v8.0.5
Jetstream: v2.3.5
npm: v7.7.6
NodeJS: v15.14.0
my webpack.mix.js looks like this:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
my webpack.config.js looks like this:
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?
While a browsersync script is already included in app.blade.php I did not get it to work either. I removed that line and expanded my webpack.mix.js as follows:
mix.browserSync({
proxy: 'YOURDOMAIN.test',
host: 'YOURDOMAIN.test',
open: 'external'
});
Then run npm run watch- probably twice because it's going to install browsersync - and it's working.
open: 'external' save me ( same i use valet and https )
.browserSync({
proxy: 'https://app.tunnel.test',
host: 'app.tunnel.test',
open: 'external',
https: {
key: homedir + '/.config/valet/Certificates/' + domain + '.key',
cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
},
})

Cypress uploadfile failed with 100MB video file in docker cypress/included:4.4.0 but successful locally

I am trying to upload a video file through a web app's form that will first analyse the duration, resolution and FPS of the video. With this information, the video file will then be sent to back end server upon clicking a submit button.
I tried to upload a 100MB video file using the following way:
The following is the uploadFile cypress command in support/commands.js.
Cypress.Commands.add('uploadFile', { prevSubject: true }, (subject, fileName, fileType = '') => {
cy.fixture(fileName,'base64', { timeout: 20000 }).then(content => {
console.log(fileName, content)
return Cypress.Blob.base64StringToBlob(content, fileType).then(blob => {
const fileInput = subject[0];
const testFile = new File([blob], fileName, {type: fileType});
const dataTransfer = new DataTransfer();
dataTransfer.items.add(testFile);
fileInput.files = dataTransfer.files;
console.log(fileInput, testFile, dataTransfer);
cy.wrap(subject).trigger('change', { force: true });
});
});
});
In the spec.js
cy.get('input[type=file]').uploadFile('largeVideo.mp4', 'video/mp4');
Cypress uploadfile failed with 100MB video file in docker cypress/included:4.4.0 yet when running locally with npx cypress run, the video file managed to upload successfully.
The error from cypress was
CypressError: cy.fixture() timed out waiting 200000ms to receive a fixture. No fixture was ever sent by the server.
Details
cypress version 4.4.0
chrome version 80.0.3987.116
node version 12.13.0
What is the difference between local cypress and docker version that causes this to happen?

Using electron-boilerplate to create an .exe for windows. It needs to run a .bat file. Once it's packaged, it doesn't run

Using the electron-boilerplate to create an .exe for windows, it needs to run a .bat file. However, using npm start it works but when it gets packaged with npm run release, it doesn't run the .bat
This is my code for the function
const spawn = require('child_process').spawn;
const bat = spawn('cmd.exe', ['/c', 'Install.bat']);
bat.stdout.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data);
console.info(str);
});
bat.stderr.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data,"error");
console.error(str);
});
bat.on('exit', (code) => {
console.log(`Exit ${code}`);
});
Already checked for child-process
When you run electron via npm start it will typically set the current working directory to the folder for the app (containing your package.json). So it will look for cmd.exe in that folder.
After you build the app and run it, the current working directory might be somewhere else, for example C:\\ (on Windows). You can find the current working directory with process.cwd().
To find the app folder regardless of how the app is running, Electron provides electron.app.getAppPath().
So you can use it like this:
const path = require('path');
const cmdPath = path.join(electron.app.getAppPath(),'cmd.exe');
const bat = spawn(cmdPath, ['/c', 'Install.bat']);

Electron - How to add react dev tool

What is the easy way to add react dev tool to electron window? I try add the extension hash
BrowserWindow.addDevToolsExtension('path/to/extension/ade2343nd23k234bdb').15.01
But when the extension update, I had to manually update the string in main.js. I'm looking for a better way.
Here is a Solution for Electron <= 1.2.1 version
1- In your app folder
npm install --save-dev electron-react-devtools
2- Open your electron app, click on (view/toggle developer tools). In the console tab insert the following code and hit enter:
require('electron-react-devtools').install()
3- Reload/refresh your electron app page and you'll see the react dev tools appear.
4- Done!
See screen shots bellow
You can add react devtools directly from your main.js file like this
const installExtensions = async () => {
const installer = require('electron-devtools-installer')
const forceDownload = !!process.env.UPGRADE_EXTENSIONS
const extensions = [
'REACT_DEVELOPER_TOOLS',
'REDUX_DEVTOOLS',
'DEVTRON'
]
return Promise
.all(extensions.map(name => installer.default(installer[name], forceDownload)))
.catch(console.log)
}
app.on('ready', async () => {
if (dev && process.argv.indexOf('--noDevServer') === -1) {
await installExtensions()
}
createWindow()
})
addDevToolsExtension is not an instance method, so you need to call BrowserWindow.addDevToolsExtension('path/to/extension').
Below solution worked for me (https://github.com/MarshallOfSound/electron-devtools-installer#usage) -
npm install electron-devtools-installer --save-dev
or
yarn add electron-devtools-installer -D
import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
*/
const { app } = require('electron');
app.whenReady().then(() => {
installExtension(REDUX_DEVTOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
});
If you see a blank component when launching react-devtools, it's probably because you've installed the package globally as it is recommended in the react-native docs, in the debugging section. What's happening is it doesn't get connected to your app, because it's not your app-specific.
You need to install it locally.
npm install --save-dev react-devtools
or
yarn add -D react-devtools

Resources