App launched from npm works perfectly, but complied x64 app works incorrect - node.js

I use the Electron-forge framework and try to make an audio player. When I launch my app from npm start it works perfectly. But when I compile app using npm run package to x64 app and launch from its .exe file, the app works incorrectly. Window creates, but audio doesn't play.
Error in console.log:"Uncaught (in promise) DOMException: Failed to load because no supported source was found."
Paths to audio files are definitely correct, I wrote them to console too.
Edit: I found it is better to use Promise for tag audio, but the problem still persists. Code:
$(document).ready(function () {
prepare_song('D:' + '\\' + 'Downloads' + '\\' + 'audio_1.mp3');
$("#button_play_pause").click(function () {
console.log("click play");
var playPromise = document.querySelector('audio').play();
if (playPromise !== undefined) {
playPromise.then(function () {
console.log("play !");
// triggered from npm start and music is playing
}).catch(function (error) {
console.log("play error:" + error);
// triggered from npm run package (x64 .exe app) Error: NotSupportedError: The element has no supported sources.
});
}
});
});
function prepare_song(filepath) {
console.log(" prepare: " + filepath);
$("#audio").attr("src", filepath);
let audio = document.getElementById('audio');
audio.load();
}

Related

electron app.getpath('exe') result is not what I expected

I want to start my app automatically on system startup.
I used auto-launch.
var AutoLaunch = require('auto-launch');
var autoLauncher = new AutoLaunch({
name: "App name",
path: app.getPath('exe'),
});
console.log(`app path : ${app.getPath('exe')}`)
//result : C:\Users\USER-PC\project_folder\dist\electron.exe
autoLauncher.isEnabled().then(function(isEnabled) {
if (isEnabled) return;
autoLauncher.enable();
}).catch(function (err) {
throw err;
});
The problem is, I am using electron-builder for building an exe file. And when I build an exe file its name is like : 'app-name 1.0.0.exe'.
So auto launch is not working properly because the option, 'path' is different from the actual exe file's path.
How can I solve this?
I tried to set the app name so app.getPath('exe') can return the actual .exe path. But it did not work.
app.setName('app-name')

Cypress for Electron - Using FS

I am using Cypress to test my Electron application.
Since Cypress uses the browser mode, FS is not supported.
So I am getting this error:
Error in mounted hook: "TypeError: fs.existsSync is not a function"
And I found this on the documentation:
https://docs.cypress.io/api/commands/task.html#Event
So I added this on my test:
it('Sample test', () => {
cy.task('readSettingsJson', settingsFolder).then((content) => {
// This can print the JSON file contents correctly
console.log('content = ' + content)
})
})
And on my plugins/index.js:
on('task', {
readSettingsJson(foldername) {
if (!fs.existsSync(foldername)) {
fs.mkdirSync(foldername, { recursive: true })
// some command to copy the file
} else {
// This is what I am testing at this moment
return fs.readFileSync(path.join(filename, '/settings.json'), 'utf8')
}
return null
}
})
However, it doesnt seem to work. I still get the error:
Error in mounted hook: "TypeError: fs.existsSync is not a function"
And despite the test printing the json file correctly, my app still can't load the JSON file.
Am I missing anything? Help please!
Cypress support for Electron apps are in very early alpha release:
https://www.cypress.io/blog/2019/09/26/testing-electron-js-applications-using-cypress-alpha-release/
As an alternative, try using Spectron, which is the testing framework that is currently recommended by Electron team:
https://www.electronjs.org/spectron

How to fix: Error: If .NET source is provided as JavaScript function, function body must be a /* ... */ comment

I am trying to run the basic hello world example from the documentation from here (it's the first example on the page):
https://github.com/agracio/edge-js
I have a typescript file that I am running (see the code below). I am on node version 9.9.0 on a Windows 10 64 bit. I have made only the following installations:
npm install edge
npm install edge.js
npm install #types/node --save-dev
I have made the installations to the same directory as the typescript file.
I am able to run ts-node app.ts in the command line and have it console.log("hi") successfully in that directory.
However, when I change my code to the example below, it is giving me the error throw new Error('If .NET source is provided as JavaScript function, function body must be a /* ... */ comment.');
I had originally tried doing this using edge.js but I kept getting the error that I needed to precompile. For the life of me I couldn't get it to find my python executable when executing build.bat release 10.5.3. (Despite including an environment variable PYTHON with a value of c:\Python\Python37\python.exe) I wanted to try using edge-js because it was already precompiled. I downgraded node to 9.9 (I uninstalled node 10.15.3 and then installed the 9.9.0 msi from the website) because I thought edge-js only supported version 9. Well here I am trying to run edge-js with version 9 and I am still getting an error, although it is a different error.
Here is the code I am trying to run:
var edge = require('edge-js');
var helloWorld = edge.func(function () {/*
async (input) => {
return ".NET Welcomes " + input.ToString();
}
*/});
helloWorld('JavaScript', function (error, result) {
if (error) throw error;
console.log(result);
});
I can't believe this worked. It was a syntax error. A problem with the amount of whitespace between the comment and the end of the function. Here is the correct syntax:
var edge = require('edge-js');
var helloWorld = edge.func(function () {
/*async (input) => {
return ".NET Welcomes " + input.ToString();
}*/
});
helloWorld('JavaScript', function (error, result) {
if (error) throw error;
console.log(result);
});

Electron app createWriteStream throwing ENOENT error

I'm trying to download files to the filesystem in an electron app. My code, in the main thread, looks like this:
const dir = `${__dirname}/media`;
if (!fs.existsSync(dir)){
fs.mkdirSync(dir);
}
const file = fs.createWriteStream(`${dir}/${name}`);
file.on("open", function() {
const request = http.get(url, function(response) {
response.pipe(file);
response.on('end', function() {
file.close();
...
});
});
request.on('error', function(err) {
...
});
});
This works when running in development using electron . But after I build it with electron-builder, I get the error in an alert:
Uncaught Exception:
Error: ENOENT, media/uploads_2016_02_BASF_Holistic_Program.jpg not found in /Users/nicholasstephan/Desktop/XXXXXXX/dist/Mac/XXXXXX.app/Contents/Resources/app.asar
at notFoundError (ELECTRON_ASAR.js:109:19)
at Object.module.(anonymous function) [as open] (ELECTRON_ASAR.js:209:16)
at WriteStream.open (fs.js:1890:6)
at new WriteStream (fs.js:1876:10)
at Object.fs.createWriteStream (fs.js:1831:10)
at next (/Users/nicholasstephan/Desktop/XXXXXXXX/dist/Mac/XXXXXXXX.app/Contents/Resources/app.asar/media.js:19:18)
at /Users/nicholasstephan/Desktop/XXXXXXXX/dist/Mac/XXXXXXXX.app/Contents/Resources/app.asar/media.js:52:4
...
where the media.js, ln 19, being referred to is the const file = fs.createWriteStream(${dir}/${name}); line in the code.
I've tried the solutions offered in about a dozen other similar stackoverflow answers, but none have fixed the problem.
What's going on here?
Thanks.
The built Electron app uses the Asar format. Asar is an archive format (it's really just one big file) though in Electron you are able to read from it as if it were a standard directory.
I presume (though I have not seen it explicitly documented) that it is not possible to write to an Asar with the fs functions. In any case there are almost certainly more appropriate locations to write data.
Try writing to a different path. Electron provides a number of useful paths using app.getPath(name) so you could for example write to the userData directory which holds configuration files for your app.

How to package node webkit app

I'm developing my first node webkit app. I'm confused about packing the files. Is the end product a single file that can be executed ?
The end result will not be a single executable, you must also include some DLLs in your zip-file.
These line in github made me more confused.
How is the packaging done ?
Do I need to include the webkit files also in the package or just the files I have created ?
I packaged my node-webkit app successfully for various platforms by using the below gulp script. Below is the script which is self explanatory.
Reference : https://github.com/nwjs/nwbuilder/blob/master/example/Gulpfile.js
var NwBuilder = require('nw-builder');
var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('nw', function () {
var nw = new NwBuilder({
version: '0.12.3',
files: '../nodepoc/**',
platforms: ['osx64','win32','win64']
});
// Log stuff you want
nw.on('log', function (msg) {
gutil.log('nw-builder', msg);
});
// Build returns a promise, return it so the task isn't called in parallel
return nw.build().catch(function (err) {
gutil.log('nw-builder', err);
});
});
gulp.task('default', ['nw']);
Save the file as gulpFile.js. In terminal , simply run gulp command in the same location as that of the gulpFile.js and it will download the necessary node-webkit distributions for the platforms and build the package for you.

Resources