Electron + Typescript File Structure - javascript

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.

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
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.

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.

Related

Babel CLI have outdir be relative to transpile dir

First of all thanks for trying to help me. I'll get straight into it.
I'm trying to transpile Typescript files to JS files. These typescript files are scattered throughout a directory (all modules follow the same file structure)
The package.json command is:
"build:js": "babel app/code/VendorName/**/view/adminhtml/web/ts --out-dir js --extensions \".ts,.tsx\" --source-maps inline"
All of the typescript files reside in different folders within VendorName (notice the **). Within it through the typescript files are in view/adminhtml/web/ts, always.
I would like to transpile all of these files and put them in their respective modules' js folders which are in:
app/code/VendorName/**/view/adminhtml/web/js. Meaning literally next to the ts folder. How can I make it, so that the --out-dir is relative to the directory that I'm transpiling? Is that even possible? Otherwise I'll have to setup a config for each and every single module I'm developing, which would be a bit of a nuisance.
The correct answer is adding the --relative flag. Position is very important "babel --verbose app/code/VenderName/**/view/adminhtml/web/ts --ignore \"**/*.d.ts\" --relative --out-dir ../js --extensions \".ts\" --source-maps inline"

Load pure javascript library from node_modules with ng build --configuration=<env>

I have an Angular 7 app that use pure javascript files from the node_modules folder. All files are referenced correctly but when I run the next command:
ng serve -o
#or
ng build #without any advanced configuration
But when I run the build command:
ng build --configuration=pre
The output deployed app doesn't show any error but the library is not loaded and executed correctly.
Is there any available configuration to load that library from node_modules in order to use within our Angular 7 projects?
For sake of reference the library used is: mapbox-gl-draw-rectangle-mode
I think you need to add the references to this libraries in angular.json file in the section "scripts" inside "build -> options" key as follow:
"build": {
...
"options": {
...
"scripts":[
"{path to js file in node_modules or where is storage}"
]
}
}

package.json - pathname pattern for .ts .tsx .js .jsx

I am trying to write a npm script that goes trought all of my src files and tests (lints) files that end in either .ts .tsx .js or .jsx. So the linter should test all of these (and only these).
What I have so far:
"lint": "eslint --max-warnings 0 --ext .js \"src/**/*.ts*\""
Does this test both .ts and .tsx files?
How do I write a pattern for multiple file types?
You could do it like this:
"lint": "eslint --max-warnings 0 --ext .js \"src/**/*.{ts,tsx}\""
As can be seen Here
As far as I know, that is the only way to handle multiple file extensions. When using a asteriks, i get the feedback "The system cannot find the path specified."

Electron - How to add external files?

I have an Electron app. I try to make the app open an .exe file. I created a directory in the root folder named lib and placed the .exe file there. In development, I have no problem opening the file by using __dirname + '/lib/file.exe, but when I package the app (using yarn dist), it does not open the exe file and there is no lib folder anymore on the dist folder.
I tried writing to console the default location using console.log(__dirname) and it outputs \dist\win-unpacked\resources\app.asa (which is a file).
How can I add an external file that can be accessed when the app is packaged?
Managed to solve it by using extraResources. Should be declared under build in your package.json file.
For example:
Create a new folder named extraResources adjacent to pacakge.json
Add the following code to your package.json file:
"build": {
"extraResources": ["./extraResources/**"]
}
Then, you can access the files inside this folder by using __dirname + '/../extraResources/' from your main app.
Add the following code to package.json:
"build": {
"extraResources": [
{
"from": "./src/extraResources/",
"to": "extraResources",
"filter": [
"**/*"
]
}
]
}
Then, you can access the files using
const configFile = path.join(path.dirname(__dirname), 'extraResources','config.json');
I use the following folders structure which allows me to run the app any way.
from project folder:
node_modules\.bin\electron.cmd src\main\index.js
from unpacked source
dist\win-unpacked\app.exe check-for-update
from installed folder
C:\Users\user\AppData\Local\Programs\app\app.exe
+-- dist
| +-- win-unpacked
| +-- resources
| +-- extraResources
| config.json
+-- node_modules
+-- src
| +-- extraResources
| config.json
| someFile.js
| +-- main
| index.js
| +-- render
| index.js
there I found a new solution,
using electron-packager on Windows do not add the files into the resources folder at the end of the process.
So I added this command into the package.json
"build-win": "electron-packager . --platform=win32 --asar --prune --arch=ia32 --extra-resource=./extraResources/documents/QuickStartGuideWN-H1.pdf --extra-resource=./extraResources/MAC_drivers/MacOS10.14/ --icon=assets/alfa_a.ico --out ./dist --overwrite",
And now the files are insied the resource fodlder just add
--extra-resource=./extraResources/file

Exclude file in npm scripts

I've been hunting around on stackoverflow but I can't find a method to exclude a file from being included in the linter script I have. I am trying to exclude the karma.conf.js file:
"lint": "node_modules/eslint/bin/eslint.js --ext=.js client/ lib/ models/ routes/ test/backend/ *.js !karma.conf.js"
I've tried using: -I, --exclude='karma.conf.js', --ignore=karma.conf.js and a few others, but no luck. Any advice?

Categories

Resources