First of all I do not know if the problem I am having is because of webpack or electron-builder or a combination.
To the problem.
When I build for development I am able to use installed node-modules in the main.js file specified in my package.json file{"main" : "app/main.js"}.
However when I have used electron builder to create an installer. When I have installed the app using the installer I get the following error message when starting the app:
My guess is that I get this message because the the needed node-modules can not be found by main.js. So how do I make them available?
I hope there is someone smarter than me our just better at googling :)
Package.js:
{
"main": "app/main.js",
"scripts": {
"hot-server": "node hot-server.js",
"build-bundle": "rimraf app/dist.release && better-npm-run build-bundle",
"start": "better-npm-run start",
"start-hot": "better-npm-run start-hot",
"backend": "node backend-dummy.js",
"dist-win": "npm run build-bundle && rimraf dist && build --win --ia32",
"dist-mac": "npm run build-bundle && rimraf dist && build --mac"
},
"betterScripts": {
"start": {
"command": "electron ./",
"env": {
"NODE_ENV": "production"
}
},
"start-hot": {
"command": "electron ./",
"env": {
"HOT": 1,
"NODE_ENV": "development"
}
},
"build-bundle": {
"command": "webpack --config webpack.config.production.js --progress --profile --colors",
"env": {
"NODE_ENV": "production"
}
}
},
"bin": {
"electron": "./node_modules/.bin/electron"
},
"build": {
"appId": "app",
"files": [
"dist.release/*",
"dist.resources/*",
"main.js",
"thirdparty/*",
"app.html"
],
"extraFiles": [
"lang/*",
{
"from": "build/extra",
"to": "./",
"filter": "**/*"
}
],
"asar": true
}
So I found a solution to my problem. What I did was I looked at this project:
https://github.com/chentsulin/electron-react-boilerplate
Where they have a special webpack.config.electron.js file that bundles all the node_modules for the main.development.js file into a main.js file that contains everything we need. And then when the electron program starts it uses this main.js bundle to run. To make this happen you need to add a build script in your package.json file that executes webpack.config.electron.js.
I think it is easier to understand how to solve it by looking the linked project than for me to explain.
Related
I'm trying the get the Visual Studio Code debugger working in my angular/typescript application but it's not working.
Here's what I have:
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug node",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"localRoot": "${workspaceFolder}\\.dist",
"remoteRoot": "/usr/src/api/.dist",
"type": "node"
}
]
}
scripts/local-entry-point.sh
#!/usr/bin/env sh
set -e
echo "STARTING local-entry-point.sh"
FOLDER=/tmp/.dist
if [ ! -d "$FOLDER" ]; then
mkdir /tmp/.dist
fi
false | cp -ir ${FOLDER} /usr/src/api/ 2>/dev/null
rm -rf ${FOLDER}
cd scripts
npm run watch
scripts/package.json
{
"private": true,
"devDependencies": {
"#effect-ts/core": "^0.11.1"
},
"scripts": {
"watch": "nodemon --watch '/usr/src/api/.dist/**/*' -e ts,json,js -x npm run debug",
"debug": "node --inspect=0.0.0.0:9229 /usr/src/api/.dist/start.js"
}
}
docker-compose.yml
...
ports:
- 4002:8800
- 9229:9229
...
I put breakpoints in both my Typescript and the compiled Javascript in the .dist folder (on the corresponding line):
I start my application (npm run docker), start the debugger in vscode, go through the steps to run the code, but the breakpoints don't get hit.
Seems like you are using Typescript. AFAIK VSCode debugger needs a sourcemap to put breakpoints on ts projects. I think this doc might help https://code.visualstudio.com/docs/typescript/typescript-debugging
I'm using webpack to bundle my javascript library and I'm currently copying the package.json to the dist folder using CopyWebpackPlugin.
(...)
plugins: [
new CopyPlugin({
patterns: [{
from: "package.json",
to: "dist"
}],
})
],
(...)
I was wondering if I could copy the package.json without the script tag:
{
"name": "monaco-javascript-compiler",
"version": (...),
"description": "(...)",
"main": (...),
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "npx webpack --config webpack.config.js --mode=development",
"build": "npx webpack --config webpack.config.js --mode=production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RicardoGomesRocha/monaco-javascript-compiler.git"
},
"author": "Ricardo Rocha",
"dependencies": {(...)},
"devDependencies": {(...)}
}
I know a solution that involves using gulp to read the package.json, remove the script tag from the JSON and output a new file with that JSON, but I'm trying to avoid that.
There is an option called transform in CopyWebpackPlugin,which allows you to amend the content of the file before copying it to the dist folder.
Checkout the documentation here:
CopyWebpackPlugin
The SSR part is working, and it is reachable by localhost:4000, including our stylesheets etc. The package.json's relevant part is:
"dev:ssr": "ng run project:serve-ssr",
"serve:ssr": "node dist/project/server/main.js",
"build:ssr": "ng build --prod && ng run project:server:production",
"prerender": "ng run project:prerender"
But the problem is, the served website doesn't contain our javascript file in the body (eg. main.1234567.js) angular.json's relevant part is below:
{
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/project/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
}
}
When I check the dist/project/browser, I can see the index.html with the javascript files, also the javascript files themselves are in the directory.
But when I run "npm run serve:ssr", then the served website is missing all these javascript files.
What am I missing here, should I add a configuration to angular.json to include these files?
I'm having problems setting up eslint with Next.js. It actually properly lints all my files when I run next build, but when I run the application in dev mode (next), eslint only actually lints pages/_app.js, and totally ignores all my other files (eg. pages/index.js).
My next.config.js looks like this:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
if (dev) {
config.module.rules.push({
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
})
}
return config
},
}
and .eslintrc.js looks like this:
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
}
};
Is there a sample project somewhere that demonstrates setting up eslint with Next.js? Eslint is pretty much the standard for any modern JS web application, so I'm surprised to find no mention of eslint in the docs or any of the demo projects.
Ok I figured out the problem, next.js in dev mode doesn't actually lint any pages until you try to load them in your browser. So if you have linting errors on pages/index.js, you won't actually see them until you load your homepage in the browser. https://github.com/zeit/next.js/issues/9904
I was actually able to achieve the lint on dev mode using the npm concurrenly package with eslint-watch.
Doing this, my commands looks like (in package.json) :
"scripts": {
"dev": "concurrently \"npm run lint-js:watch\" \"npm run lint-md:watch\" \"next dev\"",
"build": "next build",
"start": "next start",
"lint-md": "remark .",
"lint-md:watch": "remark --watch .",
"lint-js": "eslint -c ./.eslintrc --ignore-path ./.eslintignore ./src",
"lint-js:watch": "esw -w -c ./.eslintrc --ignore-path ./.eslintignore"
}
Hope that will help!
I am creating my first angular electron project and here is my error log I am trying to add new fonts and styles in my angular 4 project
I have removed bootstrap from my project because style.css contains all the boostrap code and my personal css
ERROR in multi ./node_modules/MicroFinanceAssets/css/style.css Module
not found: Error: Can't resolve
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css'
in
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/models/webpack-configs'
resolve
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css'
in
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/models/webpack-configs'
using description file:
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/package.json
(relative path: ./models/webpack-configs)
Field 'browser' doesn't contain a valid alias configuration after using description file:
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/package.json
(relative path: ./models/webpack-configs)
using description file: /home/deck/Documents/project/MicroFinance/UI/angular-electron-master/package.json
(relative path: ./node_modules/MicroFinanceAssets/css/style.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css
doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.ts
doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.js
doesn't exist
as directory
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css
doesn't exist
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.ts]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.js]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css]
# multi ./node_modules/MicroFinanceAssets/css/style.css npm ERR! code
ELIFECYCLE npm ERR! errno 1 npm ERR! angular-electron#0.0.0 build: ng
build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
angular-electron#0.0.0 build script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/home/deck/.npm/_logs/2018-05-16T07_04_57_890Z-debug.log
here is my angular-cli file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "angular-electron"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/MicroFinanceAssets/css/style.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
if you need any extra code details comment me I will provide you and thank you in advance for your time and consideration
MicroFinanceAssets <Directory>
- node_modules <Directory>
- angular-cli.json
you need to run command npm start from(under) directory MicroFinanceAssets
either for testing
run npm i font-awesome --save
and add following line in angular-cli instead your css file
"../node_modules/font-awesome/css/font-awesome.css"
If it gets compiled then your path to css file is wrong
this cli may be help you..
first install bootstrap in your program using
npm install bootstrap --save
and change your cli with this code
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "angular-electron"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/admin-ample/template/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/admin-ample/plugins/bower_components/jquery/dist/jquery.min.js",
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
this may help you?
Actually angular 4 has in-built functionality that it can pre-validate.In Angular older version like AJ 1.6 there are no pre-check inside it. So you have to make sure that your CSS has any syntax error and any extra character-word then remove it,and build it. hope fully it will be work