Unable to run Electron Quick Start in WSL - javascript

Hi I'm running Ubuntu 16.04.3 LTS on Windows Subsystem Linux. I'm trying to run the Quick Start first app as listed in this section here https://electronjs.org/docs/tutorial/first-app however, I keep getting the same error no matter if I clone the repository, write it myself, or delete and reinstall the Electron module.
> electron .
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! first-electron#1.0.0 start: `electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the first-electron#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
For reference I'm running
Node: 9.11.1
NPM: 5.8.0

Electron needs to open a chrome browser window. So, when you run it from WSL using a node.js that was installed in WSL, I guess it would try to start the chromium browser for Ubuntu, which will not work out of the box, because:
Microsoft doesn't support graphical programs on WSL. Bash on WSL is intended for running command-line programs that developers might need, but it's possible to run graphical Linux desktop programs on Windows using the Bash shell. To be more precise, you'll be able to display graphical programs running in WSL on a Windows 10 desktop by using an X server which runs on Windows 10.
https://virtualizationreview.com/articles/2017/02/08/graphical-programs-on-windows-subsystem-on-linux.aspx

I found the easiest way is to install electron on Windows then start it from WSL.
Steps:
Make sure you have Node.js & npm installed on your Windows machine (you can remove them afterwards)
Open cmd.exe, move to your project directory and run npm install electron --save-dev.
This will install the Windows version of the prebuilt Electron binary instead of the Linux one, which would occur if you try to install from WSL. (This is the actual trick)
Enter Bash on Ubuntu on Windows, move to your project directory then run ./node_modules/.bin/electron (or use an npm script) to launch your Electron app
Though, I'm not sure this is very convenient, it seems to work well.
I hope this will help people encoutering the same issue in the future!
Ref: https://github.com/electron-userland/electron-prebuilt/issues/260

run a X-server app in windows, then export DISPLAY , run the npm start.

Related

Installing Firebase tools: Stuck at downloading Chromium

I am trying to run in the terminal of the vs code since I plan to host this online already:
npm install -g firebase-tools
But it is stuck here:
This is my package.json
The version of node.js installed in my computer is:
v14.15.4
Can you try the command with --loglevel verbose
This will show the log information, may point to the issue.
The install generally is pretty smooth, without any problems.

Npm install/run dev fails for not finding Git Bash

I have a Javascript project set using React.js. Npm install for nodemon package version 2.0.7 fails with following errors:
It seems that the installation is trying to spawn Git Bash but without success.
Should the installation spawn bash.exe from the folder C:\Program Files\Git\bin instead
of C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Git\Git Bash?
Same error message happens when running npm run dev to start the Node server:
Same errors happen when run from Git Bash.
Earlier nodemon version 1.10.0 installation succeeds with no errors.
I have
OS Windows 10
npm version 6.14.8
node version 14.15.0
git version 2.28.0.windows.1
I think my Git is set to environment path variable correctly.
What could be causing this error?

Integrate npm into VisualStudio

I got Linux. I have just installed Visual Studio and installed npm with it. However, when I type "npm init -y" into the Visual Studio console it says npm command not found. In the normal console I type npm version and it gives me back the version 3.5.2 though. So apparently I have not really integrated it into Visual Studio. Does anyone how to do so?
I had the same problem before... if you want to run npm commands you should go to a directory that your nodejs is installed... if you want to run npm commands in other directories you should go to the directory that you want and then run cmd and type in the commant
set path=C:\Program Files\nodejs\
then you can run all of the npm commands in your directory

How to run Visual Studio Code locally with localhost?

I need help running localhost to connect with vs code. I am trying to open a phaser 3 game I built.
I have tried npm install -g
I keep getting permissions denied.
Could you try with sudo command(if you are using mac or ubuntu)
sudo npm install -g
If you are using windows, then open the terminal with admin rights. (Run as administrator)

how to install node js canvas on windows

I'm trying to get working canvas on node js. I'm using Windows Vista. After basic approach npm install canvas failed (see error below), I have looked up some tutorials, here is what I have tried:
sources:
installing-node-canvas-for-windows
LearnBoost/node-canvas/wiki/Installation---Windows
I have installed older Python (2.7.5) and add it to PATH (and remove Python 3.2. from PATH)
I have checked that I do have Microsoft Visual Studio 2010 Professional installed
I have downloaded the 'all in one' GTK package from http://ftp.gnome.org/pub/gnome/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip, unziped it in C:\GTK\ and add 'C:\GTK\bin' to PATH
log in console (after running npm install canvas in cmd):
log contains several warnings, I don't thing these are the problem - it is mostly something like 'conversion from double to float', and one error marked in red color:
init.cc
d:\pathToApp\node_modules\canvas\src\PNG.h(5): fatal error C1083: Cannot
open include file: 'cairo.h': No such file or directory [d:\pathToApp\n
ode_modules\canvas\build\canvas.vcxproj]
And at the very end of log there is:
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:789:
12)
gyp ERR! System Windows_NT 6.0.6002
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd d:\pathToApp\node_modules\canvas
gyp ERR! node -v v0.10.16
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
npm ERR! weird error 1
npm ERR! not ok code 0
After that, nothing appeared in node-module folder (no canvas subdirectory, npm after unsuccessful installation removed the subdirectory).
So I have also tried to download canvas module manually from github, unzip it in node-modules and then run node-gyp configure in node-modules/canvas with success, and node-gyp build, which unfortunatelly gave me the same error Cannot open include file: 'cairo.h'.
I have read everything that I found on this carefully. If you can suggest any help, please do it.
I have managed to get it working on my new Windows 8 machine, so I want to share some details that can be helpful to others.
I am using:
Windows 8.1 (64 bit)
Visual Studio 2013 (update 2)
Python 2.7.8
GTK for Windows 64 bit (http://www.gtk.org/download/win64.php)
node 0.10.28
node-gyp 1.0.1
Procedure
Be sure to have Python 2 and GTK\bin in your path.
I have downloaded files manualy from https://github.com/Automattic/node-canvas and saved it to node_modules/canvas.
Then I run node-gyp configure build in canvas directory. Errors occured. I had to edit binding.gyp (https://github.com/Automattic/node-canvas/blob/master/binding.gyp) in order to match actual files in GTK folder.
For example:
line 59: "(GTK_Root)/lib/libpng.lib" -> "(GTK_Root)/lib/libpng.dll.a"
line 34: "(GTK_Root)/bin/libpng14-14.dll" -> "(GTK_Root)/bin/libpng15-15.dll"
...
There can be more, you should be able to read which files are making problems from error log and then edit the names to match files in GTK folder.
After editing binding.gyp, command node-gyp configure build finished successfuly. Although I am not able to work with some jpg files in Canvas (I have not tested it properly), png files work fine.
If node-gyp fails
It can happen to you, that every node-gyp command fails with message (possibly marked in red) similar to:
"...bcrypt_lib.vcxproj(47,46): error MSB4025: Could not load file project. An invalid character for the specified encoding., Line 47, position 46."
It it most probably because you have special character in the name of your user folder. (The fact, that Windows 8 automatically creates the name of your user folder from your first name is the lamest thing about Win 8).
2 quick solutions:
create another user with normal (without special characters) name a and run node-gyp configure build from that account
use this quick fix (it has worked for me): https://github.com/TooTallNate/node-gyp/pull/366
Hope this helps.
I managed to get this working on windows after a long arduous process. I have a last couple of suggestions that you might try that I had on my list.
Copy all the dll files from c:\GTK to the canvas\build\Release folder.
Copy IEShims.dll from c:\program files(x86)\Internet Explorer to the canvas\build\Release folder.
Then run node-gyp build.
Best of luck.
I ran into trouble with canvas while trying to install paperjs.
Here's what worked for me.
My specifics
Windows 7 x64
node-v0.10.26-x64
GTK+ 2.22 x64
GTK
Make sure you read the README. There are necessary instructions here that I overlooked the first time around. For instance:
Run: pkg-config --cflags gtk+-2.0
Run: gtk-demo and verify that it works
Running pkg-config let me know that I needed to have <GTK Directory>\lib\pkgconfig in the PKG_CONFIG_PATH environment variable.
canvas
I used this as a guide:
https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows
NOTE: I have Visual Studio 2010, 2012 and 2013 installed on my machine, so I didn't have to deal with MSVC dependencies.
npm install canvas was always failing - and cleaning up after itself (the jerk) - so I grabbed the cached version from the npm-cache:
%USERPROFILE%\AppData\Roaming\npm-cache\canvas\1.1.3\package. Copy this directory to your project's node_modules directory and rename it canvas. Enter the newly created canvas directory on the command line.
Run npm install nan.
Before you you can run node-gyp configure successfully, you need to verify your GTK path in binding.gyp
On line 5:
'GTK_Root%': 'C:/GTK', # Set the location of GTK all-in-one bundle
Now you can try node-gyp configure. If this is successful, awesome!
Now you can build it: node-gyp build.
That should do it. If you were trying to install paper, now you can. Hooray!
If this doesn't work, or you have something to add, don't be shy! Please comment so we can all benefit.
You will need cairo library which is bundled in GTK
Here is the most up-to-date information I've found on how to install the components required to run node-gyp which is in turn required to compile the code for canvas (and jsdom). I'm going to replicate it here in case the link dies. I have tested these instructions on my Win7 x64 machine and it worked first time.
On Windows XP/Vista/7, node-gyp requires Python 2.7 and Visual Studio 2010
According to the readme file in Microsoft Visual C++ 2010 Service Pack 1 Compiler Update for the Windows SDK 7.1, to ensure that your system has a supported configuration, uninstall the following products and then reinstall them in the order listed:
Visual Studio 2010
Windows SDK 7.1 Note: If you get error on installation, maybe this link will help you.
Visual Studio 2010 SP1
Visual C++ 2010 SP1 Compiler Update for the Windows SDK 7.1
On x64 environments, the last update in the list fixes errors about missing compilers and error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found.

Categories

Resources