search

leo / electron-next

Build Electron apps using Next.js
https://github.com/leo/site/blob/beef3a7dc1dfd435a9d8377e3b1b59761ccb7fc7/pages/2017/electron-next.js
MIT License
546 stars 41 forks source link

Allow spaces in the application name #6

Closed manovotny closed 7 years ago

manovotny commented 7 years ago

Description

Electron apps with spaces in their names were loading with a blank white screen, while throwing console errors saying that it could't find the files within the packaged app.

An example error message that was being thrown.

Not allowed to load local resource: file:///Users/manovotny/Developer/electron-next-skeleton/dist/mac/Electron%20Next.app/Contents/Resources/app.asar/renderer/out/start/index.html

Specifically notice the %20 in the app name. This made Electron very unhappy.

The fix was to decode the path name, which made Electron happy again and the app files were able to load properly.

Steps to Reproduce Error

  1. Clone electron-next-skeleton
  2. Change productName in package.json from ElectronNext to Electron Next
  3. Run npm run dist
  4. Double click dist/mac/Electron Next.app to open the app
  5. Notice it loads a blank white page and there is an error in the console (might need to install electron-debug to see console error)

I also narrowed down the problem to electron-next by verify that electron-packager and electron-builder can handle spaces in app names by using the following steps.

  1. Download the minimalistic electron-quick-start project, initialize it, and test that it works.
git clone git@github.com:electron/electron-quick-start.git
cd electron-quick-start
npm i
npm start
  1. Install electron-packager and / or electron-builder which wraps ASAR.
npm i electron-packager
  1. Add a productName, with spaces, to package.json.
"productName": "Electron Quick Start"
  1. Add dist script by adding the following to scripts in package.json.
"dist": "electron-packager . --out dist"
  1. Run the dist script.
npm run dist
  1. Double click the Electron Quick Start.app app in the generated dist directory and notice that the app loads / runs without errors.

Testing

I have tested this locally by using npm link with electron-next-skeleton and with the with-electron example in next.js, though I wound't mind some additional verification by a second set of eyes. 👀