main:
const { BrowserView, app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
// In the main process.
const { BrowserView, BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')
})
versions:
npm: '7.24.0',
node: '16.10.0',
start command:
npm start
This is just showing a blank page. I have spent 3+ hours debugging my original program, so I copied this from the docs and ran it, but it's still not working. Any idea why this is happening?
Edit: I found a similar issue on GitHub and I believe it's an issue with the recent version of Electron. I'll take any suggestions but I think I'll just have to wait for this to be fixed for now.
Question: What does your package.json look like?
Your package.json file determines what happens when you run commands such as npm run start or npm run dev
For example (please observe context, this is not a "one size fits all"), in my package.json I have this:
"scripts": {
"start": "cross-env NODE_ENV=production electron ./app/",
},
Mine may be a bit more "advanced" then some, a basic example would be to just do something like this:
"scripts": {
"start": "electron .",
},
The electron documentation goes over this in a bit more detail: Quick Start | Electron
Once you understand the concept, you may consider using a "boilerplate" type solution to properly start projects, this is just handy in general. I would not suggest doing this until you actually understand how a project should be setup because knowledge is magical.
One such solution I utilize and recommend: ElectronForge
I confirmed it, it's an issue with version 14.0.0. If you're having this same issue just rollback to version 13.4.0 with
npm install electron#13.4.0
and hope they fix it soon.
Related
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')}`
);
I'm building an electron app using Next.js and electron-next package so Electron can handle the "ouput" folder from Next.js.
The app works great (simple html "hello world" test for all) for development; however, when I'm packaging the app with electron-builder, the page doesn't load and the DevTools is saying that it cannot load local files. I can see the files generated by electron-builder and nowhere I can find the static html files. Is there something I'm missing? Are the static files are included in the *.asar file?
This is for Electron under Windows 10.
Below I'm showing the package.json file setup for electron-builder, as well as the call to open the initial HTML file on the app entry file (index.js)
// ---------package.json----------
"scripts": {
"start": "electron .",
"build": "next build renderer && next export renderer",
"dist": "npm run build && electron-builder"
},
"build": {
"files": [
"**/*",
"renderer"
]
},
// --------index.js----------
// I can confirm that /renderer/out/start.html file is created
const devPath = "http://localhost:8000/start"
const prodPath = path.resolve('renderer/out/start.html')
const entry = isDev ? devPath : ('file://' + prodPath)
console.log(entry)
win.loadURL(entry)
This is the error I get:
Not allowed to load local resource: file:///C:/Users//Desktop/text_exc_app/dist/win-unpacked/resources/renderer/out/start.html
I found from another post that you can also do this (using app.getAppPath()):
const prodPath = path.join(app.getAppPath() ,'renderer/out/start.html')
This solved my problem!
I'm still not sure as to what is the difference between the two ways of accessing the files is, and why one works and the other one doesn't.
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
I'm trying to create an easy workflow for package development and was hoping someone could pint me in the right direction. In short, once a css file has been updated I want to be able to run a command (php artisan vendor:publish --force) to automatically publish the files.
Can this be done with Elixir and if so could anyone point me in the right direction?
regards
This was incredibly useful to get me on the right track, but I found a slightly simpler solution that I thought I would share:
var elixir = require('laravel-elixir');
var gulp = require("gulp");
var shell = require("gulp-shell");
elixir(function(mix) {
mix.task('publish_assets', ['resources/assets/**/*.scss', 'resources/assets/**/*.js']);
});
gulp.task('publish_assets', shell.task([
"php ../../../../artisan vendor:publish --tag=public --force"
]));
It watches all of the js and sass files for changes and runs the publish assets task. Mine is set to only publish the "public" tagged files, and a quick note as well, you will need to install the gulp-shell utility (https://www.npmjs.com/package/gulp-shell) for either of these.
if anyone is looking, this works nicely:
var gulp = require("gulp");
var shell = require("gulp-shell");
var elixir = require("laravel-elixir");
elixir.extend("publish", function() {
var baseDir = this.assetsDir;
gulp.task("publish_assets", function() {
gulp.src("").pipe( shell( [
"php ../../../artisan vendor:publish --force",
"cd ../../../ ; gulp"
]));
});
this.registerWatcher("publish_assets", [
baseDir + '**/*.scss',
baseDir + '**/*.js'
]);
return this.queueTask("publish_assets");
});
Is there a way to use node-inspector to debug unit tests with Jest? It would be nice to step through sometimes to see why tests are failing
I have tried a few ways
node-debug jest --runInBand
from the as well as starting up the inspector first eg
$ node-inspector
$ node --debug-brk .\node_modules\jest-cli --runInBand
and then navigate to http://127.0.0.1:8080/debug?port=5858
I have found that occasionally (1 in 10 or so times), the debugger opens the jest src files and its possible to debug them. Generally though, the scripts in the debugger only contain a 'no domain' folder and another irrelevant folder.
Also the test scripts themselves are never loaded in the debugger.
Has anyone tried this before?
Looks like the issue is that jest is using harmonize, which spawns a child process to ensure that the --harmony option is used.
harmonize/harmonize.js, lines 30-35
var node = child_process.spawn(process.argv[0], ['--harmony'].concat(process.argv.slice(1)), {});
node.stdout.pipe(process.stdout);
node.stderr.pipe(process.stderr);
node.on("close", function(code) {
process.exit(code);
});
I was able to successfully debug jest tests (although tests that use JSX transforms are incredibly slow) by commenting out the code that jest is using to spawn the harmonized process.
node_modules/jest-cli/bin/jest.js, last lines of the file:
if (require.main === module) {
//harmonize(); <--- comment out
_main(function (success) {
process.exit(success ? 0 : 1);
});
}
Then you can run:
$ node-debug --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand
Jest relies on the --harmony flag being there, so that's why we need to add it back with --nodejs --harmony. We also add --runInBand so that the tests run in sequence, not in parallel.
This opens up the web debugger, and you can debug the tests, although it can be pretty slow to get to the test you want. Please comment if anyone knows a way to make this faster, and I'll update my answer.
You can add this to your package.json to make it easier to kick off:
...
scripts: {
"test": "jest",
"test-debug": "node-debug --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand"
}
...
Of course, main concern with this solution is the editing of the jest source code. Will think about how to make a pull request to make this stick.
Created Github Issue Here: https://github.com/facebook/jest/issues/152
This is now officially supported with Node >= 6.3.
Quoting Jest documentation:
Place a debugger; statement in any of your tests, and then, in your project's directory, run:
node --debug-brk --inspect ./node_modules/.bin/jest -i [any other arguments here]
This will output a link that you can open in Chrome. After opening that link, the Chrome Developer Tools will be displayed, and a breakpoint will be set at the first line of the Jest CLI script (this is done simply to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack.
Note: the -i cli option makes sure Jest runs test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
More information on the V8 inspector can be found here: https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js
Using Node 7.4.0, Jest 18.x, and the jest-environment-node-debug package (from this comment), it's now possible to use the chrome devtools to debug Jest tests:
$ npm install -D jest-environment-node-debug
$ node --inspect-brk ./node_modules/.bin/jest -i --env jest-environment-node-debug
Here's a Gruntfile.js config to automate #Sean's answer with Grunt.
grunt testd
OR
grunt testd --tests=MyTestName
OR
grunt testd --tests=MyTestName,AnotherTestName
Requires "node-inspector" (must be installed globally to get the node-debug bin in your path), "lodash", "jest-cli" and "grunt-shell" node modules.
var _ = require('lodash');
var commaSplitToRegex = function(input) {
return _.map(input.split(','), function(part) {
return '(' + part + ')';
}).join('|');
};
var getTestRegex = function(tests) {
if (tests) {
return '.*' + commaSplitToRegex(tests) + '.*';
}
return '.*';
}
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-shell');
grunt.initConfig({
shell: {
jestd: {
command: function() {
var testsRegex = getTestRegex(grunt.option('tests'));
var cmd = 'node-debug --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand --config="test_utils/jest.json"';
if (testsRegex) {
cmd += ' "' + testsRegex + '"';
}
return cmd;
}
},
monkeypatchjest: {
command: 'sed -i.bak s\\/harmonize\\(\\)\\;\\/\\\\/\\\\/wtf\\/g ./node_modules/jest-cli/bin/jest.js'
},
unmonkeypatchjest: {
command: 'sed -i.bak s\\/\\\\/\\\\/wtf\\/harmonize\\(\\)\\;\\/g ./node_modules/jest-cli/bin/jest.js'
}
}
});
grunt.registerTask('testd', 'Run tests with debugger.', ['shell:monkeypatchjest', 'shell:jestd']);
};