Setting up Electron with React Typescript CRA

Question

_____ Project description _____

I started my Typescript & React project as a web app and I am currently in the process of converting that fully to an Electron app. I am having some trouble with this though.

_____ Where I am currently at _____

I followed this tutorial to get Electron to work. It works fine, other than that the electron.js file (in the tutorial called main.js , I placed it in my src folder, not the public folder) is a javascript file. This does not hinder my application from running, but I'd prefer having it in Typescript format. That is what I am stuck on. I converted it to a Typescript file, but I can't point to that from my package.json config.

_____ Problem Description _____

From my understanding, the main property in package.json needs to point to this electron.ts file. But of course, the file does not get processed correctly because it is not a javascript file.

_____ Question _____

How can I somehow point to the electron.ts file? Where does the transpiled code, generated on runtime, reside? Perhaps I could point the main property to there?

_____ package.json _____

  ...,
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build -- em.main=build/electron.js",
    "preelectron-pack": "npm run build"
  },
  "main": "src/electron.ts",
  "homepage": "./",
  "build": {
    "appId": "com.example.electron-cra",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  ...

Answer 1

I made a boiler plate starter pack which contains many applied bug fixes that I had to face when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.

https://github.com/nateshmbhat/electron-react-ts-starter/

It works fine with Create react app and no need of ejecting it .

Answer 2

The fastest route that I found to getting typescript up and running was with electron-webpack .

With the add-ons , it's got your requirements covered. I've used this to great success for an electron-react-redux application.