i'm trying to create a desktop app that can do printing after i clicked some button.
so here is my code.
main.js
const {app,BrowserWindow} = require('electron');
function createWindow(){
const win = new BrowserWindow({
resizable:false
})
win.maximize()
win.removeMenu()
win.loadFile("./index.html")
win.webContents.on('did-create-window',(window,detail)=>{
window.removeMenu()
window.resizable = false
window.webContents.print({silent:false})
})
}
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 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>Document</title>
</head>
<body>
whatever
<button onclick="newPrint()">BIGGIE</button>
</body>
<script>
function newPrint(){
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
}
</script>
</html>
package.json
{
"name": "electron-print",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^19.0.2"
}
}
So after i clicked the button, the electron app just suddenly close ! i just don't know why it happened.
and i tried re-creating this app on other computer (Mine was running Win 11 and i thought maybe that was the problem) and it worked just fine !
Could it be that Electron is not fully compatible with Win 11 yet ?
This seems very much like this Electron bug, which is fixed in Electron 19.0.2 which you're apparently on.
Can you reinstall your node modules to confirm that you still see the issue in 19.0.2? This issue would have been present in Electron 19.0.1.
Related
i started to work with electron tabs and i can show the sites, that i wanted. Now i wanted to show my own little html site in the app.
The HTML site has a button and when you click it, there should be a message in the console. But the .js data (renderer) will not be executed. When i just load the site without the tabview, everything works. I found out, that electron don't load the js script in the DOM. But i dont know a solution for this problem. Here the code for the examples:
this worked
main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webviewTag: true,
nodeIntegration: true,
contextIsolation: false
}
})
// and load the index.html of the app.
mainWindow.loadFile('page.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
html site
<!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>Document</title>
</head>
<body>
<button id="Hello">Say hello</button>
<p id="text">Guten Tag</p>
<script src="renderer.js"></script>
</body>
</html>
renderer.js
const {dialog} = require ('electron');
const button = document.getElementById("Hello");
console.log (button);
function hello () {
const label = document.getElementById("text");
console.log(label.innerHTML);
label.innerHTML = "Hello";
console.log("hello");
}
if (button) {
button.addEventListener('click',hello);
}
package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^21.2.0"
},
"dependencies": {
"electron-tabs": "^1.0.1"
}
}
2nd exapmle (didnt work):
is the same code but in the main you load the page.html and the you need the tab.js.
page.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>Document</title>
</head>
<body>
<button id="Hello">Say hello</button>
<p id="text">Guten Tag</p>
<script src="renderer.js"></script>
</body>
</html>
Tabs.js
tabGroup = document.querySelector("tab-group");
tabGroup.on("ready", () => console.info("TabGroup is ready"));
tabGroup.setDefaultTab({
title: "Wikipedia",
src: "https://www.wikipedia.org/",
active: true,
ready: () => console.info("New Tab is ready")
});
tabGroup.addTab({
title: "electron-tabs on NPM",
src: "https://www.npmjs.com/package/electron-tabs",
badge: {
text: "5",
classname: "my-badge"
}
});
tabGroup.addTab({
title: "electron-tabs on Github",
src: "https://www.youtube.com/",
active: true
});
tabGroup.addTab({
title: "My Custom Tab",
src: "page.html",
ready: function(tab) {
tab.element.classList.add("my-custom-tab");
}
});
I'm starting with electron and for some unknown reason I can't use require() function in renderer process.
Uncaught ReferenceError: require is not defined at index.js:1
package.json
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"electron": "^12.0.2"
}
}
main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const ipc = ipcMain;
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntergration: true,
contextIsolation: false,
devTools: true,
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
win.webContents.openDevTools()
ipc.on("closeApp", ()=>{
console.log("clicked on Close btn")
win.close();
})
}
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>
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
<button id="closeBtn">close</button>
<script defer src="index.js"></script>
</body>
</html>
index.js
const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;
var closeBtn = document.getElementById('closeBtn');
closeBtn.addEventListener("click", ()=>{
ipc.send("closeApp");
});
Screenshot of my program
I am doing everything like in the tutorial, I have searched for solution for two days and tried everything, nothing works. I am worried that only I have that problem :v
There's a typo in nodeIntegration (you spelled it nodeIntergration). That's probably the problem
I'm trying to deploy a simple javascript/css/html app on heroku but I can't seem to link the js files properly. It works fine with no error without deploying.
This is my index.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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body class="mt-0">
<button type="button" class="btn btn-primary ml-5 mt-5 position-fixed" style="right: 50px">Background mode</button>
<-- more html code -->
<script type="text/javascript" src='./js/sky-widget.js'></script>
<script type="text/javascript" src='./js/examples.js'></script>
</body>
</html>
server.js
const express = require('express')
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, '/pub')));
app.get('/', (req, res) => {
res.send('<h1>This should be the root route!</h1>')
})
// Error codes
app.get('/problem', (req, res) => {
res.status(500).send('There was a problem on the server')
});
const port = process.env.PORT || 5000
app.listen(port, () => {
log(`Listening on port ${port}...`)
})
package.json
{
"name": "weather-sky",
"version": "1.0.0",
"description": "Weather widget library",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
},
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
And I get "Failed to load resource: the server responded with a status of 404 (Not Found)" on both sky-widget.js and examples.js
Any help will be much appreciated
Could you please add more information about the example.js / sky-widget.js.
Also could you try to change your static files for this:
app.use(express.static(path.join(__dirname, 'public')));
I need help with my simple hello world program based for electron.js.
I was reading the quick guide documentation on the official electronjs.org website.
Esentially I did everything it told me to do on that page including the package.json, package-lock.json, index.html and main.js; and installing electron.js however when I tried to boot up my program in cmd using npm start, I just got 2 messages instead of the program opening.
From there it shows me the cmd command line again waiting for an input which is shown in the picture
I don't know what's wrong and no matter how much I try to edit the package.json and the main.js it still seems to spit out the same error. I was getting so desperate that I just copy and pasted the exact same code in the docs and just edited the author and description as asked in the quick guide.
I am well and truly stuck if anyone has any ideas on how to fix this please let me know, I've also tried some simple troubleshooting, the simple reinstall of the electronjs API, tried administrator cmd, read the forums etc and I can't find anything code will be below..
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
});
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 style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>
package.json
{
"name": "my-first-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"aws-sdk": "^2.814.0",
"electron": "^11.1.0",
"electron.js": "^0.0.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC"
}
Apologies for what will likely be a beginners mistake. I have searched for days to try and find the answer, but am unable to successfully connect to a Firebase Database.
Extracts of all files are below.
I have installed node.js, then firebase init, firebase login, and then firebase serve.
I get the same result whether hosting locally, or after deploying to firebase hosting. I have tried the full paths to the firebase js files previously and similarly got the same result.
What do I need to do to be able to prove its connecting to Firebase ok?
Many many thanks!
index.html...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/4.0.0/firebase-database.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="app.js"></script>
<title>Page Title</title>
I'm the header ...
</head>
<body>
I'm the body...
<script> getDatabaseRef() </script>
</body>
</html>
app.js...
function getDatabaseRef(){
console.log('Script called');
var firebaseRef = firebase.Database().ref();
console.log(firebaseRef.ref);
window.alert(firebaseRef);
console.log('Script finished');
}
firebase.json....
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
package.json
{
"name": "jobsheetpoc",
"version": "1.0.0",
"description": "my JS proof of concept",
"main": "app.js",
"dependencies": {
"firebase": "^4.0.0"
},
"devDependencies": {
"firebase-server": "^0.10.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jim",
"license": "ISC",
"keywords": [
"job",
"sheet",
"poc"
]
}
Output in Browser...
Output in Browser Window
I have a strange feeling you made a typo. You have a capital Database in firebase.Database instead of a normal one (firebase.database).