Electron Quick Start - vanillaJS

Clone and run for a quick way to see Electron in action.

This is a minimal Electron application based on the Quick Start Guide within the Electron documentation.

A basic Electron application needs just these files:

package.json - Points to the app's main file and lists its details and dependencies. main.js - Starts the app and creates a browser window to render HTML. This is the app's main process. index.html - A web page to render. This is the app's renderer process. preload.js - A content script that runs before the renderer process loads. You can learn more about each of these components in depth within the Tutorial.

Features

• Stands out

  • 🔥 Fast and Ready-to-go with a well-thought-out structure
  • 🚀 Auto reload for main and Fast Refresh for renderer process
  • 🎉 Window and Screen routing included
  • 😎 Preload (context bridge) already configured
  • 🙀 IPC communication example included
  • 🔮 GitHub Action releases with Windows, Mac and Linux binaries

• Technologies:

  • 🔋 Electron
  • 🔥 Javascript
  • 📦 Electron Builder
  • 🔮 action-electron-builder

⚠️ If Windows 7 and 8 support is important for your project, you should know that Electron in a version greater than 22x no longer supports it. You can read more about it here. Therefore, you must downgrade Electron to the version cited in this context!

To Use

To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/heliomarpm/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
-- or --
# Run the app mode develop
npm run dev

Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Releasing

Note: to be able to perform auto-updates you will need a code signed app, for this purpose you will need to configure it by yourself, so check the electron-builder and action-electron-builder docs please to get know how to do this.

To release your app on a GitHub release with Windows, Mac and Linux binaries, you can perform the following commands:

git pull
npm run make:release

Note: Script for make release is contribution by @daltonmenezes

Dev Dependencies

• electron: Build cross platform desktop apps with JavaScript, HTML, and CSS
• electron-builder: A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box
• open: Open stuff like URLs, files, executables. Cross-platform.
• semver: The semantic version parser used by npm.

Resources for Learning Electron

• electronjs.org/docs - all of Electron's documentation

Contributing

Please make sure to read the Contributing Guide before making a pull request.

Thank you to all the people who already contributed to project!

Made with contrib.rocks.

That said, there's a bunch of ways you can contribute to this project, like by:

• 🪲 Reporting a bug
• 📄 Improving this documentation
• 🚨 Sharing this project and recommending it to your friends
• 💵 Supporting this project on GitHub Sponsors or Ko-fi
• 🌟 Giving a star on this repository

Donate

If you appreciate that, please consider donating to the Developer.

License

MIT © Heliomar P. Marques 🔝