I configured a Vue.js project with Electron using Electron Builder and I can1t debug it.
If I run my electron:serve script (which calls vue-cli-service electron:serve) in "Run and Debug" of VS it runs my app correctly, but sets the breakpoints of my main file (background.js), and any other, as unbound, as you can see in the image bellow:
I tried also to set launch.json with a "node.js electron main" config. But when I run debugger with this config it doesn't find the electron app at main.js, probably because main.js is a vue app.
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron Main",
"program": "${workspaceFolder}/main.js",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
And if I exchange the main.js in this config to background.js it also doesn't find.
I set breakpoint at background.js line 13. And in main.js also.
I tried this config of launch.json also. Note that in cwd I have the path to my src folder, where I have the electron file, background.js, and stills it says that it did not find. I tried without the / after src also:
Here's my repository.
Related
My 2 main folders are CMS and nextjs as shown below:
But when I go to run 1 folder it uses my localhost:3000 then the other also wants to use the same port but this is not possible as I get an error saying port 3000 already in use.
Basically I want to run my CMS folder and nextjs folder in 2 different ports.
I have attached my launch.json code just incase:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\nextjs\\.next\\server\\pages\\index.js"
}
]
}
Next.js
You have to edit the package.json.
In the script object you'll find a property named dev. You can edit it like this (ex: port 3005) :
"dev": "next dev -p 3005"
When you will launch npm run dev, you app will turn on port 3005
Strapi
Add a .env file at the root of your project and add a variable with the port you want:
PORT=3627
Read more in the Strapi documentation here
I am trying to get breakpoints to hit in Jest Debug for VS Code.
This launch config runs but does not hit breakpoints:
{
"type": "node",
"request": "launch",
"name": "Test",
"runtimeExecutable": "npm",
"runtimeArgs": ["test"],
"port": 9229
}
This launch config does not run, but it looks like it hits breakpoints.
It opens fs.js at a debugger breakpoint with this error:
Error: ENOENT: no such file or directory, access 'node_modules/jest-cli/bin/package.json'
Like it's looking for the workspace's package.json file inside the jest bin directory.
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
For me the solution was that inside VSCodes Debugging Panel inside the Breakpoints section, I had All Exceptions checked. Unchecking this allowed the debugger to work as I expected.
Also the issue did not happen when checking the Uncaught Exceptions Breakpoint handler. All Exceptions actually catches all not just inside your but also inside others code, regardless if they are handled or not.
I had a package.json file one directory up. I deleted it, but still got the same error. I fixed it by copying it to a new directory further up on my path, I believe so VS Code could detect it was a new workspace.
I'm trying to include aurelia-tabbed in my aurelia project (of which I think I have the latest version, but I can't find a version number anywhere). I have a problem however, because I'm using a bundle of my app and vendor js, and I don't know how to include the package.
I've tried adding this in my aurelia.json in build > bundles > (vendor) > dependencies:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": ["assets/tabs.css"]
},
However, while this compiles, I cannot run the webpage. It gives me errors in the console (even before I add any of the tabbed tags):
DEBUG [aurelia] Configured plugin aurelia-tabbed.
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-headers.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tabs-wrapper.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-content.js
vendor-bundle.js:1395 Unhandled rejection Error: Script error for "aurelia-tabbed/tab-headers"
http://requirejs.org/docs/errors.html#scripterror
at makeError (http://localhost:9001/scripts/vendor-bundle.js:3907:17)
at HTMLScriptElement.onScriptError (http://localhost:9001/scripts/vendor-bundle.js:5477:36)
The three calls all result in 404's (which is normal, because the node_modules path is located at the root).
However: why are the three calls even made? Aren't the files supposed to be bundled?
In your aurelia.json file, you need to list all resources of the plugin. Try the following:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": [
"tab-content.html",
"tab-headers.html",
"tabs-wrapper.html",
"assets/tabs.css"
]
},
I am new to Aurelia and falling at the first hurdle.
I have created a new project using the aurelia cli and have selected to use less.
This works fine until I try to use bootstrap. I have installed bootstrap with npm which appears in node_modules/bootstrap/
This has the directory structure
dist fonts grunt Gruntfile.js js less LICENSE package.json README.md
There are css files in the dist directory.
In my template I do
The error I get is
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
How do I tell Aurelia where the bootstrap css files are and how to use them ?
Thanks
I found out one simple thing. Every time you modify aurelia.json file, you need to terminate au run --watch task, a start it again, and it will just work.
I did not find this in documentation.
Hope this helps.
There is solution for bootstrap downloaded from npm:
app.html:
<require from="bootstrap/css/bootstrap.css"></require>
package.json you have to add:
"overrides": {
"npm:jquery#^3.0.0": {
"format": "amd"
}
}
aurelia.json (aurelia_project folder) you have to add at the end of "app-bundle.js" bundle:
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
It should look like this:
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
],
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
},
It works for me.
We are still working on the CLI's ability to import libraries into a project and configure them correctly for bundling. Remember, it is an alpha. We will have major improvements coming for this in the future. In the mean time, remember that you can always use traditional techniques for including libraries if you aren't sure what to do. So, I would just include the style tag in your html page and a script tag as well, just pointing at the location for the files in your packages folder.
This is a major use case for us, we just haven't worked out all the library import capabilities yet. We will address this soon.
Using Aurelia CLI
First, install the following in your project:
au install jquery#2
au install bootstrap
Second, in aurelia.json add this line in bundles:vendor-bundle.js
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"resources": [
"css/bootstrap.css"
],
"exports": "$"
}
Then Add the following fonts after dependecies
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
Third, After setting import/install. Now you can reference it inside your app.html
<require from="bootstrap/css/bootstrap.css"></require>
Or simply add it as a globalResources inside main.ts
aurelia.use
.standardConfiguration()
.feature('resources')
.globalResources('bootstrap/css/bootstrap.css');
For more information on au install/import check it here or adding library in bundles.
I found that I had to change the boostrap css path in app.html to the one expected for Bootstrap 4, per a comment on Aurelia Discourse:
from this:
<require from="bootstrap/css/bootstrap.css"></require>
to this:
<require from="bootstrap/dist/css/bootstrap.css"></require>
If you are here in July 2019, the answer by #davidjmcclelland is what worked for me. After installing bootstrap, simple include require from=bootstrap/dist/css/bootstrap.css> in your app.html. No configurations required.
I am working with Sencha Touch application with different packages with consequent scss files, these files are imported in the app.scss but when the sencha CMD is listening (with the command "sencha app watch") changes are not refreshed itself, I need to reset the command line to get the changes.
What am I doing wrong? or maybe is a bug?
Thanks!!
Have you added the package to your app.json file in the requires?
"resources": [
"resources/images",
"resources/icons",
"resources/splash",
"resources/fonts"
],
"ignore": [
".svn$"
],
"archivePath": "archive",
"requires": [
"package-name" <--- Here.
],