16
Electron Adventures: Episode 1: Creating New Electron App
Browsers won. Every day you use like 100 apps, and 99 of them are browser apps. Or phone apps, which are basically browser apps with extra steps. Most of the rest are games.
This is especially true for cross-platform apps, where every alternative - like Java, C#, Qt, terminal - fails on some fundamental level.
Unfortunately while browsers make great UIs, they are extremely limited at doing everything else.
One way to do apps is to ship an app with a small local web server, and have user's browser connect to that. This works for some apps, but as just a regular server you'll have very limited control over the browser. You also don't know which browser the user has, which might be a problem if you depend on any advanced features.
Our best solution is to just write an app in whichever way we like, and just ship a browser with it. Electron!
I'll talk more about various alternatives and their shortcomings in future episodes, for now let's get to starting our first Electron app.
As I couldn't decide which platform to use, I'll be double-posting this series to dev.to and hashnode, at least for the time being.
All code will be in this github repo, organized by episode.
Most episodes are going to be fairly short, and I'd like to post the episodes at a rate of about one a day, but I will probably be fairly disorganized about it.
Hopefully you already have node installed.
Create a new folder and let's go!
$ npm init -y
$ npm install --save-dev electron
$ npx electron .
Cannot find module 'index.js'. Please verify that the package.json has a valid "main" entryWell, OK, it tells us to create index.js.
We need to import some stuff from electron package, create a window, and load a file for it to show. Then it's helpful to have some extra code to shut down the app when that main window is closed.
let { app, BrowserWindow } = require("electron")
function createWindow() {
let win = new BrowserWindow({})
win.maximize()
win.loadFile("index.html")
}
app.on("ready", createWindow)
app.on("window-all-closed", () => {
app.quit()
})Now we just need to create index.html:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to the Internet!</h1>
</body>
</html>Now if you run npx electron ., it will show the window we just created.
And here's what we got:
See you in the next episode.
16