electron, typescript, react

gistfile1.txt

const createWindow = () => {
  window = new BrowserWindow({
    title: app.name,
    width: 1024,
    height: 640,
    transparent: true,
    frame: false,
    webPreferences: {
      worldSafeExecuteJavaScript: false,
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.resolve(`${__dirname}/preload.js`),
    },
  });
  if( app.isPackaged){
    window.loadFile(`dist/index.html`);
  }else{
    window.loadURL("http://localhost:8080/")
    window.openDevTools();
  }
};

package.json

{
  "scripts": {
    "dev:renderer": "webpack-cli serve --mode development",
    "dev:main": "electron-forge start",
    "dev": "concurrently yarn:dev:*",
    "typecheck": "tsc -p . --noEmit"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  }
}

webpack.config.js

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");

module.exports = {
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".json"],
  },
  plugins: [
    new HTMLPlugin({
      template: path.join(__dirname, "src/index.html"),
    })
  ],
};