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
Related
I have used TypeScript to create a jQuery plugin. Currently, I have a nodejs app as the host of my typescript files during development. I would edit my *.ts files in VS Code and use tsc --build to compile them and could debug inside VS Code (with additional *.html files referencing the generated .js files).
The folder structure was quite simple.
+-- client
| +-- ClientApp.ts
| +-- DynamicApp.ts
| +-- Interfaces.d.ts
| +-- ThirdParty.d.ts
| +-- tsconfig.json
+-- tsconfig.json
+-- tsconfig-base.json
ClientApp.js - This file was distributed to clients that wanted to use our plugin and had minimal code that was actually a 'shim' for our addin. This code is/was rarely touched because we didn't want to go through the hassle of having clients update their local .js file.
DynamicApp.js - This file is the actual implementation of our addin and changes frequently. We host this in a Content Management System (CMS) that serves the file to the client. This is possible via ClientApp.js calling $.ajax() to our CMS to get the file content, then it injects it into the DOM.
const script = document.createElement('script');
script.innerHTML = contentFromCMS;
body.appendChild(script);
This allowed us to make updates to the actual implementation of the plugin and test/deploy at our speed to the production CMS.
Below is what I had for 'tsconfig.json' settings, which I think I basically got when I followed a tutorial to create this site a long time ago. To be honest, I'm not up to complete speed on all the settings/power of tsconfig.json - especially now, 2-3 years later.
Contents of tsconfig-base.json (root)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./build",
"removeComments": false,
"strict": true,
"esModuleInterop": false,
"forceConsistentCasingInFileNames": true,
"listEmittedFiles": true
}
}
Contents of tsconfig.json (root)
{
"extends": "./tsconfig-base.json",
"references": [
{ "path": "./server" },
{ "path": "./client" }
],
"files": [
/* Empty files array specifies that no files should be compiled directly as part of this master package */
]
}
Contents of client/tsconfig.json
{
"extends": "./../tsconfig-base.json",
"compilerOptions": {
"composite": true,
"outDir": "./../public/KatApp/Global",
"tsBuildInfoFile": "./../build/cache/client/.tsbuildinfo",
"suppressImplicitAnyIndexErrors": true
}
}
My Refactor Problem
I have made a .NET Core site as the host (since neither the nodejs site nor .NET Core site are the actual host of the files during live execution, I was just more comfortable with .NET Core and Visual Studio Proper). I basically want to break apart ClientApp.ts and DynamicApp.ts into separate files for each class, but I have to keep the output of simply ClientApp.js and DynamicApp.js. Currently, the DynamicApp.ts is more than 7K lines and it is getting unwieldly to navigate, especially for developers who aren't in there frequently.
As I understand, to accomplish this I have to use the "outFile": "" setting in tsconfig.json. Additionally, it seems you can only have one outFile per tsconfig.json file and only one tsconfig.json per folder, so I restructured my application to look like this.
+-- Scripts
| +-- ClientApp
| | +-- ClientApp.ts
| | +-- ClientHelper.ts
| | +-- tsconfig.json
| +-- DynamicApp
| | +-- DynamicApp.ts
| | +-- DynamicHelper.ts
| | +-- tsconfig.json
| +-- Shared
| | +-- Interfaces.d.ts
| | +-- ThirdParty.d.ts
| +-- tsconfig.json
So the goal is to combine all files in the ClientApp folder into ClientApp.js and all the files in DynamicApp folder into DynamicApp.js.
Originally, since all the *.ts files were in same folder, everything just worked. I didn't have any /// <reference path="" /> declarations or anything. Now, with this setup and things in separate folders, I'm encountering some frustrating issues along with issues that prevent it from building.
Code Duplication - Remember that ClientApp will dynamically inject the code from DynamicApp into the DOM, so I can't have duplicated classes, enums, etc. generated in both ClientApp and DynamicApp otherwise I would assume it would cause compile errors and run time.
Enums - ClientApp.ts has an enum declared that is used in ClientApp.ts, DynamicApp.ts, and Interfaces.d.ts. I tried using reference, "files" setting in tsconfig.json, changing to declare enum inside my Interfaces.d.ts file, but all were preventing the build from working for different reasons or causing runtime exceptions. So not only do I have a problem getting the enum shared across all files, but the I haven't been able to find any direction on how reference an enum from a *.d.ts file in general.
Dependencies - Currently, ClientApp has some static methods that are also called by DynamicApp. But in the new folder structure, if I add a reference inside DynamicApp to ClientApp, when DynamicApp compiles, it regenerates/injects all the code from ClientApp again which would cause js errors I assume. My game plan to get around this was to have all the shared code assigned on various $.fn.ClientApp.methodABC=function(){...} items in a shared *.ts file, and reference that from both ClientApp and DynamicApp. Then, even with code generated twice and ran, yes it was wasted overhead/re-assignment, but at least I don't think it would cause client side compile errors.
I feel like there is something easy I am missing (and unfortunately, I'm not up to speed on module loaders/resolvers on the client side and not sure if they'd even work in our scenario).
So I want to run ng test and include tests in a folder next to the projectfolder.
mainproject/
|-- src/
| |-- app/
| | |-- home/
| | | |-- home.component.spec.ts
| | |-- app-main.component.spec.ts
| |-- test.ts
| |-- tsconfig.spec.json
|-- node_modules/
|-- angular.json
|-- package.json
|-- tsconfig.json
components/
|-- common/
|-- control-bar/
|-- control-bar.component.ts
|-- control-bar.component.spec.ts
When I run ng test without including the other tests in the components folder it works as intended, but when I try to include the other components ng test fails with the following error.
ERROR in ../components/common/control-bar/control-bar.component.ts
Module not found: Error: Can't resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
Parsed request is a module
No description file found
resolve as module
absolutepath\repos\components\common\control-bar\node_modules doesn't exist or is not a directory
absolutepath\repos\components\common\node_modules doesn't exist or is not a directory
absolutepath\repos\components\node_modules doesn't exist or is not a directory
absolutepath\repos\node_modules doesn't exist or is not a directory
absolutepath\node_modules doesn't exist or is not a directory
C:\Users\user\Desktop\node_modules doesn't exist or is not a directory
C:\Users\user\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules
using description file: absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules)
using description file: C:\Users\user\Desktop\folder absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules/raw-loader)
no extension
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
.js
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js doesn't exist
.json
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json doesn't exist
as directory
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\package.json]
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\node_modules]
[C:\Users\user\Desktop\folder\repos\components\common\node_modules]
[C:\Users\user\Desktop\folder\repos\components\node_modules]
[C:\Users\user\Desktop\folder\repos\node_modules]
[C:\Users\user\Desktop\folder\node_modules]
[C:\Users\user\Desktop\node_modules]
[C:\Users\user\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json]
# ../components/common/control-bar/control-bar.component.ts 13:34-85
# ../components/common/control-bar/control-bar.component.spec.ts
# ./src/test.ts
So raw-loader seems to be missing or it can't find it. To be clear there is only 1 node_modules in this setup and it's inside the mainproject folder.
I'm having the exact same issue and I've abandoned the search for a proper solution. For now I'm making it work by making sure the dependencies of the library are installed separately (so having a second node_modules folder in the library).
Since there is nothing to be found on the subject and the official angular documentation for creating libraries mentions that it is required for libraries to be built:
Build the library. You cannot use a library before it is built.
I'm assuming dynamically linking to unbuilt libraries without its own node_modules is simply unsupported (even though it works fine as long as there are no component classes imported in the library).
I've a folder structure for my project that looks roughly like this:
myproject
|-- some-folder
| `-- src
| `-- index.tsx
|-- src
| |-- components
| | `-- files.tsx
| `-- index.tsx
`-- webpack.config.js
When I run webpack, it tries to bundle the index.tsx file in both src and some-folder.
This would then throw an error because the index.tsx file in some-folder has certain dependencies webpack cannot resolve since is not meant to be bundled together.
This is how I've configured my webpack's entry point:
var config = {
context: __dirname + '/src',
entry: {
app: './index.tsx'
}
}
How can I configure webpack to only look for files within the src folder and not else where unless I define another different full path in the entry point?
Seeing that this is pretty old, it might be solved already, but was it something to do with adding an "exclude" statement to make sure the "/some-folder" was omitted?
I wrote a very simple local module to manage a few lines of localized text.
It uses node's require to load the language files, but I'm having trouble with paths, most likely.
I'm getting the Cannot find module error.
File structure
.
+-- local_modules
| +-- lang
| | +-- package.json
| | +-- index.js
+-- locale
| +-- en.js
| +-- de.coffee
+-- init.js
+-- index.coffee
+-- package.json
Relevant module code
Should require the file if it is not already loaded.
join = require('path').join;
_config.path = './locale';
lang = 'en';
_locales = {};
if(!_locales[lang]){
_locales[lang] = require(join(_config.path, lang));
}
Every file in the locale directory is a typical Node.js module, for example en.js:
module.exports = {
test: 'Hello World!'
};
The local module exports a function(req, res, next){}, which is used as Express middleware and is supposed
to attach the required object with localized strings onto res.locals, however, I'm seeing Cannot find module 'locale/en' error.
I've tried to manually add the .js extensions (but that shouldn't be neccessary as far as I know).
I have also tried different variations on the path, such as locale or /locale.
The module is called in index.coffee.
App is launched using init.js, which contains the following:
require('coffee-script/register');
require('./index');
Maybe it's just that the module is a .js (and the module itself doesn't have CoffeeScript as a dependency) so it can not load a .coffee file? Although CoffeeScript should be registered globally, or am I wrong? Either way, it doesn't work with the .js file either, so I guess it has something to do with paths.
path.join() also normalizes the created path, which (probably) means the ./ part was always removed, and what remained was a relative path.
Instead, when path.resolve() is used, it creates an absolute path, which is what is needed in this case.
I have some architecture:
NameOfModule
|- module1
| |- file1.js
| |- file2.js
| |- test.js
|
|- module2
|- file1.js
|- file2.js
|- test.js
etc.
I know how I can run the one test.js. I'm simple run in terminal:
:~$ mocha
But I want to run all test.js files from root directory NameOfModule. How can I do it from terminal? What is it command?
I have Lubuntu 14.10.
You can give mocha the list of files you want it to load so, with sh or bash as your shell:
$ mocha `find . -name test.js`
The find command finds all files named test.js. The backticks make it so that the output of find is passed as arguments to mocha.