Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/howbizarre/electron-typescript-parcel

Startup project for Electron with TypeScript and Parcel for front-end.
https://github.com/howbizarre/electron-typescript-parcel

boilerplate electron parcel startup typescript

Last synced: 19 days ago
JSON representation

Startup project for Electron with TypeScript and Parcel for front-end.

Awesome Lists containing this project

README 

        
# Electron, TypeScript & Parcel



## TL;DR



Download the project and need do execute `npm install` in the `root` project folder, then in `electron` and `browser` folders.



After that, execute `npm start` in the `root` project folder.



## Step by Step the Project



### Introduction



Documentation for **Electron** is entirely in **JavaScript**, but that doesn't stop you from using **TypeScript** to generate that JavaScript. A few simple rules must be followed, mainly in the file loading paths. I have also prepared a small addition for the front-end part. Instead of the standard Electron HTML page, I will make a small compilation with **Parcel**.



### The Project



First, we will organize our project. It will have 2 subfolders - one for the Electron part, the other for the Browser part. We create a folder `electron-typescript-parcel` and open it in [**VSCode**](https://code.visualstudio.com/) - or whichever editor you use. Open the built-in terminal in VSCode (or another if you don't use VSCode) and execute:



```bash

npm init -y

```



This will create a `package.json` file in the `electron-typescript-parcel` folder. Open the file and edit the `author` field. As a start, it is enough. Next, we need to add the Electron module to the project.



```bash

npm install --save-dev electron

```



If you are going to use **GIT**, now is a good time to execute:



```bash

git init

```



and add a `.gitignore` file. Add `node_modules` as a start.



Then add 2 folders - `electron` and `browser` in the project folder. As the names suggest - Electron will live in the first, and the front-end part for the browser will live in the second.



### Electron



Through the terminal, enter the `electron` folder and execute:



```bash

npm init -y

```



and immediately after that add the TypeScript module:



```bash

npm install --save-dev typescript

```



Load `package.json`. In the **script** part, add `"build": "tsc"` and remove the `"main"` attribute.



```json

// electron/package.json

{

  "name": "electron",

  "version": "1.0.0",

  "scripts": {

    "build": "tsc"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "devDependencies": {

    "typescript": "^5.5.4"

  }

}

```



In the console execute:



```bash

npx tsc --init

```



This will create a `tsconfig.json` file. In it, you will need to find `"outDir"`, uncomment the line, and set `"outDir": "../dist"`.



From here, we follow the standard steps for creating a basic Electron application, skipping the part about creating the `index.html` file and `renderer.js` file, which we will add through Parcel.



Add a `main.ts` file to the `electron` folder and write the following code:



```typescript

// electron/main.ts

import { app, BrowserWindow, ipcMain, nativeTheme } from "electron";

import path from "node:path";



/**

 * Creates a new window and loads an HTML file.

 */

const createWindow = (): void => {

  const mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, "./preload.js"),

    },

  });



  mainWindow.loadFile("./dist/index.html");



  ipcMain.handle("dark-mode:toggle", () => {

    if (nativeTheme.shouldUseDarkColors) {

      nativeTheme.themeSource = "light";

    } else {

      nativeTheme.themeSource = "dark";

    }



    return nativeTheme.shouldUseDarkColors;

  });

};



app.whenReady().then(() => {

  createWindow();



  app.on("activate", () => {

    if (BrowserWindow.getAllWindows().length === 0) createWindow();

  });

});



app.on("window-all-closed", () => {

  if (process.platform !== "darwin") app.quit();

});

```



This is an [example from the Electron documentation](https://www.electronjs.org/docs/latest/tutorial/dark-mode) that changes the dark or light theme of the application.



Next, we add a `preload.ts` file to the `electron` folder and write the following code:



```typescript

// electron/preload.ts

import { contextBridge, ipcRenderer } from "electron/renderer";



contextBridge.exposeInMainWorld("electronAPI", {

  toggle: () => ipcRenderer.invoke("dark-mode:toggle"),

});

```



### Browser



Through the terminal, we navigate to the `browser` folder and execute:



```bash

npm init -y

```



After that, we install ***Parcel***:



```bash

npm install --save-dev parcel

```



Loading `package.json`. In the **script** section, we add `"build": "parcel build index.html --dist-dir ../dist --no-source-maps --public-url ./ --no-optimize"` and remove the `"main"` attribute.



Create an `index.html` file in the `browser` folder and write the following code:



```html



  

  Hello World!

  

  



  
Hello World!


  
Current theme source: System


  
Toggle Theme Color



  



```



Creating a `styles.css` file in the `browser` folder and writing the following code in it:



```css

/* browser/styles.css */

@media (prefers-color-scheme: dark) {

  body { background: #333; color: white; }

}



@media (prefers-color-scheme: light) {

  body { background: #ddd; color: black; }

}

```



Adding a `render.ts` file to the `browser` folder and writing the following code in it:



```typescript

const toggleDarkMode = document.getElementById("toggle-dark-mode");

const themeSource = document.getElementById("theme-source");



if (themeSource && toggleDarkMode) {

  toggleDarkMode.addEventListener("click", async () => {

    // @ts-expect-error

    const isDarkMode = await window.electronAPI.toggle();



    themeSource.innerHTML = isDarkMode ? "Dark" : "Light";

    toggleDarkMode.innerHTML = `Toggle ${!isDarkMode ? "Dark" : "Light"} Mode`;

  });

}

```



To 'compile' the TypeScript file with Parcel, we will add a `.parcelrc` file in the folder and write the following:



```json

// browser/.parcelrc

{

  "extends": "@parcel/config-default",

  "transformers": {

    "*.ts": ["@parcel/transformer-typescript-tsc"]

  }

}

```



### Start



We go back to the project folder and edit the **scripts** and **main** fields in the `package.json` file:



```json

// package.json

{

  "main": "./dist/main.js",

  "scripts": {

    "start": "npm run build --prefix ./electron && npm run build --prefix ./browser && electron ."

  }

}

```



In the `.gitignore` file, we add the `dist` and `.parcel-cache` folders, and in the command line, we execute:



```bash

npm start

```



After starting the application, a `dist` folder will appear in the project folder, containing all the code of the Electron application.



## License



Electron, TypeScript & Parcel © 2024 by How Bizarre is licensed under Creative Commons Attribution 4.0 International. To view a copy of this license, visit https://creativecommons.org/licenses/by/4.0/