I am new to electron. While learning it i came across require not define error on browserwindow. So i searched about it and find out we should need to add nodeIntegration: true, so i did it but still it doesnt solve my problem.
here is my app.js (entry file)
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.on("close", () => {
win = null;
});
}
app.on("ready", createWindow);
and my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main renderer</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>main renderer</h1>
<script>
require("./index.js")
</script>
</body>
</html>
Related
I am creating simple eletronjs app. I need if i click button want show admin.html file new window. But I added correct code inside admin.js file but error this displayed Uncaught TypeError: Cannot read properties of undefined (reading 'BrowserWindow') I referred more reference but could not solve this issue. could you please solve this issue.
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<button id="test">Test</button>
<script>
require('./admin.js')
</script>
</body>
</html>
admin.js
const BrowserWindow = require('electron').remote.BrowserWindow;
const path = require('path')
const url = require('url');
const newbtn = document.getElementById('test');
newbtn.addEventListener('click', function(event){
let window1 = new BrowserWindow();
window1.loadURL(url.format({
pathname: path.join(__dirname, 'admin.html'),
protocal: 'file',
slashes: true
}));
});
admin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="assets/css/styles.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>This is admin window</h1>
</div>
</body>
</html>
I'm trying to make a simple desktop application for my colleagues at work to use.
I designed the interface and I am using webview.
I removed the frame with the frame: false command, made a custom design frame, and I control the buttons with ipcrenderer.
So far everything is going very well.
But,
I am using bootstrap in my index.html and I have to use jquery. I am using tabs partitions here.
If I do nodeintegration:false in webPreferences, the bootstrap and jquery features, namely the tabs section, work as they should. but the buttons I use ipcrenderer do not work.
Conversely, if I change it to nodeintegration: true, all my ipcrenderer buttons work correctly, but my tabs sections, ie other menus that require jquery, stop working.
How can I run both ipcrenderer processes and jquery processes together.
I've been dealing with this problem for days and it doesn't get resolved.
I tried various solution methods, but I could not get a result that works correctly.
How can i solve this problem.
Thank you, best regards.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<title>MY APP</title>
<link rel="stylesheet" href="./js/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./css/electron_appstyle.css">
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./js/electron_appfunctions.js" async type="text/javascript"></script>
</head>
<body>
.....
.....
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./js/bootstrap/popper.min.js" async type="text/javascript"></script>
<script src="./js/bootstrap/bootstrap.min.js" async type="text/javascript"></script>
<script src="./js/bootstrap/bootstrap.bundle.min.js" async type="text/javascript"></script>
</body>
</html>
part of main.js
const { app, BrowserWindow, ipcMain} = require('electron');
const { join } = require('path');
const path = require('path');
function createWindow () {
win = new BrowserWindow({
icon: path.join(__dirname, "icon.png"),
width: 960,
height: 600,
minWidth: 940,
minHeight: 560,
frame: false,
resizable: true,
autoHideMenuBar: true,
x: 0,
y: 0,
webPreferences: {
preload: path.join(__dirname, './preload.js'),
enableRemoteModule: true,
nodeIntegration: false,
contextIsolation: false,
disablewebsecurity: false,
webviewTag: true,
allowRunningInsecureContent: false,
allowpopups: false,
devTools: true
},
show: false,
})
win.loadFile(join(__dirname, "src/index.html"));
win.on("ready-to-show", () => {
// RUN
win.show()
});
}
I have configured Babel for my project with ".babelrc" file. My .babelrc file is,
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
I have imported "core-js/stable" and "regenerator-runtime/runtime" using index.js in my index.html as follows. I'm using Parcel as the packaging tool.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/index.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello Second App</h1>
<script>
(() => {
console.log('welcome ...');
})();
function getUserById(id) {
return Promise.try(function () {
if (typeof id !== "number") {
throw new Error("id must be a number");
}
return "done";
});
}
getUserById();
</script>
</body>
</html>
Also as you can see I'm trying to use "Promise.try". But I'm getting
Promise.try is not a function
So why Babel is not fixing this? Please help me. I'm trying to understand Babel.
My app structure is following:
-gulp
-src
-app
-assets
-css
I want to insert files from "css" folder in index.html which is in "src" folder.
use the below code and set the path accurately.
var inject = require('gulp-inject');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('inject', function () {
var injectStyles = gulp.src(['css/*.css'], { read: false } );
return gulp.src( '/src/index.html')
.pipe($.inject(injectStyles, { relative: true }))
.pipe(gulp.dest('/src'));
});
specially you need to enter styles comment tag in your html file as below:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- inject:css -->
<!-- endinject -->
</head>
I'm learning app testing at the moment, using this course: https://code.tutsplus.com/courses/angularjs-for-test-driven-development/
I'm on lesson 2.3 where we have Mocha and Chai installed, a test folder with main.spec.js setup and gulp task setup to serve the app and tests.
When he updated his main.spec.js file with this simple describe statement:
describe('The Address Book App', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
It ran fine for him:
However here is my setup:
test/main.spec.js
describe('The Dashboard app', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
Basic markup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mocha Spec Runner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="../app/favicon.ico">
<link rel="apple-touch-icon" href="../app/assets/imgs/apple-touch-icon.png">
<link href="testing.css" rel="stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../bower_components/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="../bower_components/chai/chai.js"></script>
<script>
mocha.run();
</script>
<script src="main.spec.js"></script>
</body>
</html>
However my test file isn't displaying my first test:
Gulpfile setup, same as the authors, cept PORT numbers are different:
gulp.task('serve', function() {
browserSync.init({
notify : false,
port : 3333,
server: {
baseDir: ['app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
gulp.task('serve-test', function() {
browserSync.init({
notify : false,
port : 4444,
server: {
baseDir: ['test', 'app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
Any idea why my first basic test isn't running?
Everything looks right except the ordering.
Just swap the
<script>
mocha.run();
</script>
with
<script src="main.spec.js"></script>
You want to run mocha at the end when all your specs and setup is done.