Build an Electron App in Under 60 Minutes

Traversy Media · 963K views · 2017 · 55:35

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as a beginner-friendly Electron crash course, and many askers say they are following it when they hit IPC, require, or module-sharing problems.

Recommended by 2 people across 2 different months, 2018 to 2020.

What it is

A roughly hour-long Electron.js tutorial from Traversy Media that builds a desktop shopping list app in plain JavaScript. It covers a custom menu, multiple windows, Materialize CSS styling, and packaging the app as a Windows .exe with Electron Packager.

What people said

Recommends alphainfinitus · 2019-03 · Stack Overflow · on “Make a React WebPage for local use”

I think you should use Electron it helps you to build cross-platform desktop apps with JavaScript, HTML, and CSS. I've used phpDesktop for building a desktop application using PHP, but this is better in every aspect. ElectronJS Homepage [LINK] This is a great Electron Crash Course [this video]

Recommends Z Kubota · 2019-12 · Stack Overflow · on “Q: What should I use to create simple local web app that stores and give out information”

There are so many possible answers, but it basically boils down to what you need your app to do. Since you need to 'grab information more easily' I'd say use a SQL tutorial to get started, then gradually modify it to make it your own. Some examples are: [LINK] [this video] [LINK] Just try different things: most important is to just start something.

Cites rares_dude · 2018-01 · Stack Overflow · on “Require module that uses a singleton array”

I want to create a really basic CRUD (sort-of) example app, to see how things work. I want to store items (items of a shopping-list) in an array, using functions defined in my listService.js such as addItem(item) , getAllItems() and so on. My problems come when using the same module ( listService.js ) in different files, because it creates the array, in which it stores the data, multiple times, and I want it to be like a static "global" (but not a global variable) array. listService.js looks like this: const items = []; function addItem (item) { items.push(item); } function getItems () { return items; } module.exports = {addItem, getItems}; and I want to use it in mainWindowScript.js and add

Cites José Miguel Lapa · 2020-01 · Stack Overflow · on “IPCRenderer not receiving messages via ipcmain between pages”

So i'm following this tutorial [this video] along but i just can't get messages to get across pages and manipulate the DOM to create a list under a ul main.js const electron = require('electron'); const url = require('url'); const path = require('path'); const { app, BrowserWindow, Menu, ipcMain } = electron; let mainWindow; let addWindow; //Listen for app to be ready app.on('ready', function () { //Create window mainWindow = new BrowserWindow({}); //load html to window mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'mainWindow.html'), protocol: 'file:', slashes: true, webPreferences: { nodeIntegration: true } })); mainWindow.on('close', function () { app.quit(); }); const mainMen

Cites Hydra · 2020-09 · Stack Overflow · on “How to access require, from an HTML file, when contextIsolation is set to true”

I’m trying to get electron into this HTML file, but require is undefined: <script> const electron = require("electron"); const {icpRenderer} = electron; const form = document.querySelector("form"); form.addEventListener("submit", submitForm); function submitForm(e){ e.preventDefault(); const item = document.querySelector("#item").value; } </script> I have nodeIntegration as True, and contextIsolation as True for the web preferences which is used to prevent security warnings. How can I get require through this file? Full source code [LINK] Guide Video Adding Script tags [this video] In main.js : function createAddWindow(){ addWindow = new BrowserWindow({ width: 300, height: 200, title: "Add Invent