Electron + Typescript 文件结构

Question

I have a problem to structure my electron project using typescript . Basically, I want my file structure to look like this:

+dist
    compiled .js files from .ts files 
 +src
   .ts files
 +gui
   html pages 
 +package.json
 +tsconfig.json

My tsconfig.json files is as follows:

"compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true
    },

and my package.json files is as follows:

"name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "tsc && electron ./dist/main.js",
    "pack": "electron-packager . sample --out=dist --arch=x64 --platform=win32 --electron-version=3.0.3 --overwrite --prune --ignore=dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.3",
    "electron-packager": "^12.2.0",
    "typescript": "^3.1.1"
  }
}

The problem with these files is when typescript files are compiled, they are converted to javascript inside the dist file. Here I need to use main.js for my electron app to call within html pages. However when Html pages are not inside the dist file, if I run the app, html pages are not called. Somehow main.js and html pages should be inside the same directory.

Answer 1

1. You probably want to move all source files to src directory. This is not required but this is how usually people structure projects.
   • src
     • controllers (or w/e you call it)
       • ts files
     • gui
       • html files

2. I would recommend to use webpack instead of raw tsc. You want to use CopyWebpackPLugin

    const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new CopyWebpackPlugin([ {from: './src/gui', to: ''}, ]),

If you still want to use tsc, you can copy files manually my using cp in package.json.

package.json :

"scripts": {
    "copyHtml": "cp ./src/gui ./dist",
    "build": "tsc && npm run copyHtml",
    "prestart": "npm run build",
    "start": "tsc && npm run copyHtml && electron ./dist/main.js",
    "pack": "electron-packager . sample --out=dist --arch=x64 --platform=win32 --electron-version=3.0.3 --overwrite --prune --ignore=dist"
  },

You can also use cpx if you worry about crossOs support.

Anyway the point is that dist directory should contain all output files. And it's self-contained, meaning you can send this directory to anyway and he/she should be able to run your project w/o any other dependencies.

Answer 2

I know I'm a year late to the party, but I hope I can still help others with my answer. Here's an alternative solution to the complex file structure of electron apps that I came up with myself. It's not as conventional, but to me it makes a lot more sense.

My project's directory structure is roughly as follows:

app/
|- index.html
|- index.js    (electron main script)
|- bundle.js   (generated via webpack)

build/
|- compiled ts -> js files

dist/
|- packaged executables

src/
|- all source files (in typescript)

Basically, I just put the electron main script into app/ alongside index.html . This makes sense to me since dist/ should be reserved for the distributed application delivered to the end user, and in the case of an electron app, we don't give the user access to index.html directly anyways. The build process then runs as follows:

• call tsc on src/ , output into build/

  • done by setting "outdir": "build" in tsconfig.json , then running npx tsc

• call webpack on build/ , bundle everything into a single app/bundle.js

  • done by setting output: { filename: 'bundle.js', path: path.resolve(__dirname, 'app')} , then running webpack build/src/[entry point]

• index.html loads bundle.js via a script element

  • done by adding <script src="bundle.js"></script>

• main.js renders index.html via electron

  • done by setting "main": "app/main.js" in package.json , then running npx electron .

• electron-builder packages app/ into a single executable

  • done by npx electron-builder , with a corresponding config specified in package.json

Given how the build process runs, the directory structure makes a lot of sense to me. src/ stores the typescript source files, build/ stores the built javascript files, app/ stores all the files for the electron renderer process, and dist/ stores the packaged distributables.