Using Node and Electron to build Desktop Apps - Revision history

Ghenne: /* Turn on Developer Mode */

2024-09-30T21:22:13Z

Turn on Developer Mode

← Older revision		Revision as of 21:22, 30 September 2024
Line 192:		Line 192:
	# build again		# build again

	==== Turn on Developer Mode ====		==== Turn on Developer Mode (Windows) ====

	Users report that changing this setting helps in cases where executables are not being created.		Users report that changing this setting helps in cases where executables are not being created.

	in Settings, in “System > For Developers”, set “Developer Mode - ~~Installs~~ from any source,, including loose files” to on.		In Windows Settings, in “System > For Developers”, set “Developer Mode - Install from any source, including loose files” to on.

	[[File:Screenshot 2024-08-26 at 10.47.06 AM.png]]		[[File:Screenshot 2024-08-26 at 10.47.06 AM.png]]

Ghenne: /* Reinstalling Electron */

2024-08-26T19:19:22Z

Reinstalling Electron

← Older revision		Revision as of 19:19, 26 August 2024
Line 181:		Line 181:
	If the above steps do not help, you may need to redo your installation of the toolchain. It can be thrown off by mismatches in version numbers. Here is how to do a complete reinstall:		If the above steps do not help, you may need to redo your installation of the toolchain. It can be thrown off by mismatches in version numbers. Here is how to do a complete reinstall:

	# uninstall node		# uninstall node (Use the Windows Installed Apps uninstaller)
	# uninstall AppStudio		# uninstall AppStudio
	# delete C:\Program Files\nodejs (if it is there)		# delete C:\Program Files\nodejs (if it is there)

Ghenne: /* Troubleshooting */

2024-08-26T16:51:47Z

Troubleshooting

← Older revision		Revision as of 16:51, 26 August 2024
Line 177:		Line 177:

	You may need to recreate the package.json used by Electron. To do so, exit AppStudio. Open {projectname}.appstudio in your project folder. Delete the electronPackage line and restart AppStudio.		You may need to recreate the package.json used by Electron. To do so, exit AppStudio. Open {projectname}.appstudio in your project folder. Delete the electronPackage line and restart AppStudio.

			==== Reinstalling Electron ====
			If the above steps do not help, you may need to redo your installation of the toolchain. It can be thrown off by mismatches in version numbers. Here is how to do a complete reinstall:

			# uninstall node
			# uninstall AppStudio
			# delete C:\Program Files\nodejs (if it is there)
			# delete C:\Program Files\NSB AppStudio (if it is there)
			# delete the electron folder in your project
			# reboot
			# install latest version of node
			# install AppStudio
			# delete electron folder from your app if present
			# build again

			==== Turn on Developer Mode ====

			Users report that changing this setting helps in cases where executables are not being created.

			in Settings, in “System > For Developers”, set “Developer Mode - Installs from any source,, including loose files” to on.

			[[File:Screenshot 2024-08-26 at 10.47.06 AM.png]]

			==== Install electron-builder-libraries ====

			Users report that changing this setting helps in cases where executables are not being created.

			You can download the installer for this here:
			https://github.com/electron-userland/electron-builder-binaries/releases

Ghenne: /* Troubleshooting */

2024-07-29T15:05:19Z

Troubleshooting

@@ Line 159: / Line 159: @@
 npm run pack
 npm run dist
 </pre>

Ghenne: /* Troubleshooting */

2023-12-12T21:17:14Z

Troubleshooting

← Older revision		Revision as of 21:17, 12 December 2023
Line 164:		Line 164:

	If your Electron apps are not running, you may have version mismatches in your electron folder. To resolve these, delete the folder (it's in your project directory). Next time you run, AppStudio will recreate it using the latest versions of everything.		If your Electron apps are not running, you may have version mismatches in your electron folder. To resolve these, delete the folder (it's in your project directory). Next time you run, AppStudio will recreate it using the latest versions of everything.

			You may need to recreate the package.json used by Electron. To do so, exit AppStudio. Open {projectname}.appstudio in your project folder. Delete the electronPackage line and restart AppStudio.

Ghenne: /* Debugging */

2021-02-24T15:40:45Z

Debugging

← Older revision		Revision as of 15:40, 24 February 2021
Line 160:		Line 160:
	npm run dist		npm run dist
	</pre>		</pre>

			=== Troubleshooting ===

			If your Electron apps are not running, you may have version mismatches in your electron folder. To resolve these, delete the folder (it's in your project directory). Next time you run, AppStudio will recreate it using the latest versions of everything.

Ghenne at 22:49, 12 November 2020

2020-11-12T22:49:59Z

← Older revision		Revision as of 22:49, 12 November 2020
Line 17:		Line 17:
	[https://electronjs.org/ Electron] is framework which allows for the development of desktop GUI applications. Since it's built on Node.js, it already has the ability to run JavaScript code. It also uses Chrome's browser engine to render the UI using regular HTML. Each Electron app includes the V8 Runtime as well as the Chrome browser. Slack, Github Desktop and WhatsApp are examples of apps built using Electron.		[https://electronjs.org/ Electron] is framework which allows for the development of desktop GUI applications. Since it's built on Node.js, it already has the ability to run JavaScript code. It also uses Chrome's browser engine to render the UI using regular HTML. Each Electron app includes the V8 Runtime as well as the Chrome browser. Slack, Github Desktop and WhatsApp are examples of apps built using Electron.

	=== How is this compare to ~~PhoneGap~~? ===		=== How is this compare to VoltBuilder? ===

	~~PhoneGap~~ (Cordova) is used to package apps for iOS and Android. Electron is used to package apps for Windows, MacOS and Linux. It's quite reasonable to have one AppStudio project that you use with both ~~PhoneGap~~ and Electron, letting you build for all 5 platforms.		VoltBuilder (Cordova) is used to package apps for iOS and Android. Electron is used to package apps for Windows, MacOS and Linux. It's quite reasonable to have one AppStudio project that you use with both VoltBuilder and Electron, letting you build for all 5 platforms.

	Nodejs/npm modules are similar to ~~PhoneGap~~ Plugins. Since they are operating system specific, ~~PhoneGap~~ Plugins will not work with Electron (and vice versa).		Nodejs/npm modules are similar to VoltBuilder Plugins. Since they are operating system specific, Cordova Plugins will not work with Electron (and vice versa).

	== Tutorial: Make an Electron app ==		== Tutorial: Make an Electron app ==
Line 53:		Line 53:
	5. To add your own icon, follow these steps. (Skip this step if you're using the sample).		5. To add your own icon, follow these steps. (Skip this step if you're using the sample).
	* Put an png file at least 512x512 in your project directory.		* Put an png file at least 512x512 in your project directory.
	* Set ~~PhoneGap~~ icon(1024) to that icon in Project Properties.		* Set VoltBuilder icon(1024) to that icon in Project Properties.

	=== Add the Weather Code ===		=== Add the Weather Code ===

Ghenne: /* Set up the project */

2020-02-19T18:19:52Z

Set up the project

← Older revision		Revision as of 18:19, 19 February 2020
Line 52:		Line 52:

	5. To add your own icon, follow these steps. (Skip this step if you're using the sample).		5. To add your own icon, follow these steps. (Skip this step if you're using the sample).
	* ~~create a folder named build~~ in your project ~~folder~~.		* Put an png file at least 512x512 in your project directory.
	* ~~put a 512x512 png into the build folder. Name it~~ icon~~.png.~~		* Set PhoneGap icon(1024) to that icon in Project Properties.
	* Add build to ~~'extraheaders'~~ in Project Properties.

	=== Add the Weather Code ===		=== Add the Weather Code ===

Ghenne: /* Distributing the App */

2020-01-10T18:17:49Z

Distributing the App

← Older revision		Revision as of 18:17, 10 January 2020
Line 113:		Line 113:
	We now have a running app. The next step is to package it for distribution. We can make regular executables for distribution on MacOS, Windows and Linux. The packaging has to done on a computer running the OS we are targeting: the MacOS version needs to be build on a Mac, etc.		We now have a running app. The next step is to package it for distribution. We can make regular executables for distribution on MacOS, Windows and Linux. The packaging has to done on a computer running the OS we are targeting: the MacOS version needs to be build on a Mac, etc.

	There is more documentation on packaging at https://www.electron.build/		There is more documentation on packaging at https://www.electron.build/. You'll need to pay special attention to code signing requirements.

	On the Run menu, choose "Make Desktop App for Distribution using Electron". If the build fails, look at the log in "About AppStudio" for more information.		On the Run menu, choose "Make Desktop App for Distribution using Electron". If the build fails, look at the log in "About AppStudio" for more information.

Ghenne: /* Debugging */

2020-01-10T18:15:48Z

Debugging

← Older revision		Revision as of 18:15, 10 January 2020
Line 152:		Line 152:
	# Check the AppStudio Log in 'About AppStudio'. It will have more info.		# Check the AppStudio Log in 'About AppStudio'. It will have more info.
	# To reset the Electron environment, simply delete the electron folder in your project. It will be recreated next time you start your app.		# To reset the Electron environment, simply delete the electron folder in your project. It will be recreated next time you start your app.
			# To start your Electron app in a console, open it in the electron folder of your project directory and enter:
			<pre>
			npm start
			</pre>
			# To build your Electron distributable in a console, open it in the electron folder of your project directory and enter:
			<pre>
			npm run pack
			npm run dist
			</pre>