Connect 4 with Electron

What is Electron?

How are Electron Applications structured?

your-app/
├── package.json
├── main.js
└── index.html
  • The package.json file obviously manages your projects dependencies, but also defines the main entry point of your application and (optionally) a build configuration.
  • The main.js file is where you define the application window behavior including size, toolbar menus, closing, icons, and a lot more.
  • The index.html page is the main presentation or "view" of your application. You can also pull in additional JavaScript libraries like you would with any other project.
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
const { app, BrowserWindow } = require('electron')

function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

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

// and load the index.html of the app.
win.loadFile('index.html')
}

app.on('ready', createWindow)
// Open the DevTools.
win.webContents.openDevTools()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

How are Electron Apps Packaged?

"build": {
"appId": "connect_4_with_electron",
"mac": {
"category": "public.app-category.entertainment"
}
}

Electron and Angular Builds

.
├── assets
│ └── favicon.ico
├── favicon.ico
├── index.html
├── main-es2015.js
├── main-es2015.js.map
├── main-es5.js
├── main-es5.js.map
├── polyfills-es2015.js
├── polyfills-es2015.js.map
├── polyfills-es5.js
├── polyfills-es5.js.map
├── runtime-es2015.js
├── runtime-es2015.js.map
├── runtime-es5.js
├── runtime-es5.js.map
├── styles-es2015.js
├── styles-es2015.js.map
├── styles-es5.js
├── styles-es5.js.map
├── vendor-es2015.js
├── vendor-es2015.js.map
├── vendor-es5.js
└── vendor-es5.js.map
.
├── LICENSE
├── README.md
├── dist
├── icon.icns
├── index.html
├── main.js
├── node_modules
├── package-lock.json
├── package.json
├── preload.js
├── renderer.js
├── sketch.js
└── style.css

Closing Thoughts

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store