entry.js

- added link to the BrowserWindow documentation
- added default icon
- added commented lines for production BrowserWindow state

Overall:
- added typescript and sass support
- updated default page. Now the "Hello World" sign placed in the center

README.md

@@ -32,17 +32,21 @@ In the `package.json` you should change these parameters:
 
 ## Development
 
-All your development processes will be inside the `src` directory. The default page is `src/html/index.html`
+Directory `src` stores your [TypeScript](https://typescriptlang.org) and [SASS](https://sass-lang.com) code. When you run `npm run dev` command in console - they will compile to the js and css files inside `public` directory
 
-To run your application - use `npm start` command
+In the `public` stored information about your application - images it uses, html pages and something you want to use
 
-To build it for any systems - `npm run build:all`
+Default application page is `public/html/index.html`
+
+To run your application - use `npm start` command. It will automatically run `npm run dev`
+
+To build application for any systems - `npm run build:all`
 
 * For Windows only: `npm run build:win`
 * For Linux only: `npm run build:linux`
 * For MacOS only: `npm run build:darwin`
 
-All the binaries will appear in the `dist` directory in a folder with name `[app name]-[platform]-[arch]`, for example `electron-blank-app-linux-x64`
+All binaries will appear in the `dist` directory in a folder with name `[app name]-[platform]-[arch]`, for example `electron-blank-app-linux-x64`
 
 To pack linux binary to the flatpak binary you can run `npm run pack:flatpak`. This operation requires pre-installed `flatpak` and `flatpak-build` packages
 

entry.js

@@ -3,6 +3,7 @@ const path = require('path')
 
 function createWindow ()
 {
+    // https://www.electronjs.org/docs/latest/api/browser-window/#class-browserwindow
     const mainWindow = new BrowserWindow ({
         width: 800,
         height: 600,
@@ -11,12 +12,15 @@ function createWindow ()
             // Use it to have access to the node modules inside html files
             nodeIntegration: true,
             contextIsolation: false
-        }
+        },
+        icon: path.join(__dirname, 'public', 'images', 'icon.png'),
+        // autoHideMenuBar: true,
+        // resizable: false
     });
 
-    mainWindow.loadFile(path.join(__dirname, 'src', 'html', 'index.html'));
+    mainWindow.loadFile(path.join(__dirname, 'public', 'html', 'index.html'));
 
-    // mainWindow.webContents.openDevTools()
+    // mainWindow.webContents.openDevTools();
 }
 
 // This method will be called when Electron has finished

package.json

@@ -7,16 +7,19 @@
     "license": "GPL-3.0",
     "main": "entry.js",
     "scripts": {
-        "start": "electron .",
-        "build:all": "electron-packager . --out=dist --asar --overwrite --all --ignore=dist",
-        "build:darwin": "electron-packager . --out=dist --asar --overwrite --platform=darwin --arch=x64 --ignore=dist",
-        "build:linux": "electron-packager . --out=dist --asar --overwrite --platform=linux --arch=x64 --ignore=dist",
-        "build:win": "electron-packager . --out=dist --asar --overwrite --platform=win32 --arch=x64 --ignore=dist",
-        "pack:flatpak": "electron-installer-flatpak --src=dist/*-linux-x64 --dest=dist/installers --arch=x64"
+        "dev": "tsc && sass src/sass:public/css -s compressed --no-source-map",
+        "start": "npm run dev && electron .",
+        "build:all": "npm run dev && electron-packager . --out=dist --asar --overwrite --all --ignore=(dist|src)",
+        "build:darwin": "npm run dev && electron-packager . --out=dist --asar --overwrite --platform=darwin --arch=x64 --ignore=(dist|src)",
+        "build:linux": "npm run dev && electron-packager . --out=dist --asar --overwrite --platform=linux --arch=x64 --ignore=(dist|src)",
+        "build:win": "npm run dev && electron-packager . --out=dist --asar --overwrite --platform=win32 --arch=x64 --ignore=(dist|src)",
+        "pack:flatpak": "electron-installer-flatpak --src=dist/electron-blank-app-linux-x64 --dest=dist/installers --arch=x64"
     },
     "devDependencies": {
         "electron": "^14.0.0",
         "electron-installer-flatpak": "^0.8.0",
-        "electron-packager": "^15.4.0"
+        "electron-packager": "^15.4.0",
+        "sass": "^1.41.0",
+        "typescript": "^4.4.3"
     }
 }

public/html/index.html

@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="../css/index.css">
 
         <!-- JS scripts -->
-        <script src="../js/index.js"></script>
+        <script src="../js/test.js"></script>
 
         <title>Hello World</title>
     </head>

src/css/index.css

@@ -1,4 +0,0 @@
-.greeting
-{
-    text-align: center;
-}

src/sass/index.sass

@@ -0,0 +1,11 @@
+@mixin center ($width)
+    position: absolute
+
+    width: $width
+    left: calc(50% - $width / 2)
+    top: calc(50% - $width / 2)
+
+.greeting
+    @include center(200px)
+
+    text-align: center

src/ts/test.ts

@@ -1,5 +1,6 @@
 // When page is fully loaded
 window.addEventListener('DOMContentLoaded', () => {
     // Change the text inside tags with greeting class
+    // @ts-ignore
     document.querySelector('.greeting').innerText = 'Hello World';
 }, false);

tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "removeComments": true,
+        "outDir": "public/js"
+    },
+    "include": ["src/ts/*"],
+    "exclude": ["node_modules", "**/*.spec.ts"]
+}