Electron quick start

This is not a full tutorial but just the commands I need to run inorder to get electron installed in a new project

Electron quick start

This is not a full tutorial but just the commands I need to run inorder to get electron installed in a new project

Your package.json file should look something like this:

"name": "my-electron-app",
"main": "main.js",
"scripts": {
    "start": "electron ."
"license": "MIT"

Create the following files...



<!DOCTYPE html>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>


// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')

  // and load the index.html of the app.

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


// preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])

quick start comands

development at this stage

npm install --save-dev electron
npm start

Package the app executable

npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

where the resulting exe is located! ./out/<name-of-app>-win32-x64/<name-of-app>.exe

open that shit!

Sucess! 🎉🎊🎉

Bonus advanced github actions

name: Build/release

on: push

    runs-on: ${{ matrix.os }}

        os: [macos-latest, ubuntu-latest, windows-latest]

      - name: Check out Git repository
        uses: actions/checkout@v1

      - name: Install Node.js, NPM and Yarn
        uses: actions/setup-node@v1
          node-version: 10

      - name: Build/release Electron app
        uses: samuelmeuli/action-electron-builder@v1
          # GitHub token, automatically provided to the action
          # (No need to define this secret in the repo settings)
          github_token: ${{ secrets.github_token }}

          # If the commit is tagged with a version (e.g. "v1.0.0"),
          # release the app after building
          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

how to test locally

I have a blog post about this for more info

How to run test github actions locally!
I was looking for a faster way to debug github actions, and i found it!

For the lazy:

windows: this is important ADMIN WINDOW!

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
choco install act-cli
act -l


by oran collins


If you want to help me out and give some donations here's my monero address: 432ZNGoNLjTXZHz7UCJ8HLQQsRGDHXRRVLJi5yoqu719Mp31x4EQWKaQ9DCQ5p2FvjQ8mJSQHbD9WVmFNhctJsjkLVHpDEZ I use a tracker that is pravicy focused so if you block its cool, im big on blocking stuff on my own machine. im doing it to see if anyone is actualy reading my blog posts...:)