VSCode: Can't start node javascript project in debugger on mac OSX - angularjs

While trying to start the angular-phonecat tutorial project from VSCode debug the following error appears
program '/Users/xxxx/src/node/angular-phonecat/8000' does not exist
The project was cloned as follows
git clone --depth=14 https://github.com/angular/angular-phonecat.git
Here is the generated configuration
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch 8000",
// Type of configuration.
"type": "node",
// Workspace relative or absolute path to the program.
"program": "8000",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
The package.json is as follows
{
"version": "0.0.0",
"private": true,
"name": "angular-phonecat",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.1.0",
"protractor": "^2.1.0",
"http-server": "^0.6.1",
"tmp": "0.0.23",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}

you need to run "npm start" from console, before using "Launch Localhost with sourcemaps" Debug options.
configurations will be something like
{
"name": "Launch localhost with sourcemaps",
"types": "chrome",
"request": "launch",
"url": "http://localhost:8000/app",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
BTW, I am using version 0.2.0 launch.json.

Related

unable to debug Next.js app using visual code

I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure.
can you please help me how to debug in Next.js app in visual studio code using google chrome.
Below is my launch.json file code :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Example",
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
"port": 9229,
"cwd": "${workspaceFolder}/frontend",
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/frontend/*"
}
}
]
}
code for my .next.config.js
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map'
return config
},
}
my package.json for frontend
{
"name": "frontend",
"version": "1.0.0",
"description": "Social networking app",
"proxy": "http://127.0.0.1:8080",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "Vivek padelkar",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"next": "^12.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-toastify": "^8.1.0"
},
"devDependencies": {
"cross-env": "^7.0.3"
}
}
My folder structure is as follows:
outer pacakge.json code (i.e. path : SOCIAL NETWORK/pacakge.json"
{
"name": "socialnetwoek",
"version": "1.0.0",
"description": "social network backend",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"all": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Vivek Padelkar",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"express-async-handler": "^1.2.0",
"joi": "^17.4.2",
"mongoose": "^6.0.12",
"morgan": "^1.10.0"
},
"devDependencies": {
"concurrently": "^6.4.0",
"nodemon": "^2.0.15"
}
}
Steps that I am following:
while in root folder (i.e.. SOCIAL NETWORK) I am executing command
npm run all.
then I press F5 to run debugger.
Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)
but nothing is working.
Next.js Docs has its dedicated documentation over Debugging.
Your .vscode/launch.json should be:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
And no changes should be made with next.config.js.
npm run dev can be replaced with yarn dev if you're using Yarn. If you're changing the port number your application starts on, replace the 3000 in http://localhost:3000 with the port you're using instead.
You can select the type of debugging option you need from the dropdown.
Finally found solution , I have edited my launch.json in following way and everything is working as expected , thank you for your valuable time guys.
launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}/frontend"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"url": "http://localhost:3000" // Provide your project's url to finish configuring
}
]
}
Not a proper solution but I've manage without fixing it to run the "fullstack" debugger with this configuration (the one from the documentation).
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
The Next.js documentation over Debugging only works for the frontend or client files, but no to /api/files*, follow theres steps and you can debug your /api/files:
https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/

Monorepo with Lerna & Next.JS not working : Module not found

Not sure what I am doing wrong. I am trying to setup a monorepo with lerna & nextjs and have been following a tutorial but get stuck at this point.
My file structure looks exactly as specified in the tutorial:
lerna.json
package.json
packages
--- components (React Components)
--- package.json
--- ...
--- frontend (NEXTJS APP)
--- package.json
--- ...
It worked fine so far, but now when I try to import components in my frontend nextjs application, it gives me a Module not found Error:
./pages/index.js:4:0
Module not found: Can't resolve 'components'
My package.json in the / (root) folder:
{
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^4.0.0"
}
}
package.json in packages/frontend (NextJS App) :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"components": "0.0.0",
"next": "11.1.2",
"next-transpile-modules": "^8.0.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
package.json in the /packages/components folder:
{
"name": "components",
"version": "0.0.0",
"description": "> TODO: description",
"author": "Anton",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1",
"dev": "microbundle watch --jsx React.createElement"
},
"source": "lib/index.js",
"devDependencies": {
"microbundle": "^0.13.3"
}
}
I have been following the linked tutorial pretty much to the dot, I'm really not sure what's going on here, but then again, I am a beginner/low intermediate and would appreciate some help!
Had the same issue following the tutorial here.
The gotcha was that you have to run lerna bootstrap again from the root of the monorepo. For me this fixed it.

Trouble running npm start on new react app [duplicate]

I was running an Electron project, and everything worked just fine. But now when I run any of the scripts in my package.json (including npm start), it just escapes a line and doesn't do anything.
My package.json:
{
"name": "interclip-desktop",
"version": "0.0.7",
"description": "Interclip for desktop",
"repository": "https://github.com/aperta-principium/Interclip-desktop",
"main": "main.js",
"scripts": {
"start": "electron .",
"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . Interclip --overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Interclip\"",
"package-linux": "electron-packager . Interclip --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds",
"win-install": "node installers/windows/createinstaller.js",
"postinstall": "electron-builder install-app-deps",
"build": "electron-builder --linux",
"release": "electron-builder --linux --publish always"
},
"keywords": [
"Desktop",
"Interclip"
],
"author": "Filip Troníček",
"license": "MIT",
"devDependencies": {
"electron": "^7.1.2",
"electron-builder": "^22.1.0",
"electron-installer-dmg": "^3.0.0",
"electron-packager": "^14.1.1",
"electron-reload": "^1.5.0",
"electron-winstaller": "^4.0.0"
},
"dependencies": {
"axios": "^0.19.0",
"mousetrap": "^1.6.3"
},
"build": {
"appId": "com.aperta-principium.interclip",
"productName": "Interclip",
"mac": {
"category": "public.app-category.utilities"
},
"dmg": {
"icon": false
},
"linux": {
"target": [
"AppImage"
],
"category": "Utility"
}
}
}
I tried updating NPM, didn't work. When I tried in different projects, also doesn't work.
Thanks in advance
npm has a ignore-scripts configuration key. It's expected value is a Boolean and it's set to false by default.
Perhaps it has inadvertently been set to true.
To get/set the ignore-scripts configuration you can utilize the npm-config command:
Check its current setting by running:
npm config get ignore-scripts
If the aforementioned command returns true then reset it to false by running:
npm config set ignore-scripts false
If you are using an integrated terminal (such as the VsCode integrated terminal) try running your npm "run dev' command from your PowerShell (or cmd) terminal. This error arises as a result of your integrated terminal not recognizing your command (especially if you created your app with a git bash terminal).
Try this, and I hope it helps someone cause it always works for me. Cheers!!!

Unable to deploy REST based Node.js APP on heroku

I build a Node.js REST implementation using this tutorial .And now i am having problems deploying it on heoroku , local works fine .
Heroku logs :
I believe the problem is with my directory structure. The "main" key
of package.json and and the rest endpoints in index.js are not right
Next I was successfully able to deploy my app on Heroku but I am getting the error.My implementation is as follows :
EDIT : I removed the Procfile , compared to shown in following pics ,as I added the "start" key in package.json
Local :
Directory Structure - /webapp is the root directory :
I have package.json file at root directory and /server with different
version (about which i am not sure how they should be actually for my
ngClient and heroku confiurations )
Files contents of root , /webapp :
package.json
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"/myRESTApp/server/server.js"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
package.json in /myRESTApp/server:
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
Node version : 6.9.2 NPM Version : 3.10.9
Change start script to node ./myRESTApp/server/server.js.

AngularJs 1.x upgrade, unexpected token : for a safe type

I'm working on angularjs from 1 to 2 upgrade tutorial (Angular 1 upgrade) and phonecat codebase example. After installing typescript and all mentioned dependencies adding a type :boolean for a function parameter input makes chrome fails the execution with "Uncaught SyntaxError: Unexpected token :" checkmarkFilterProvider consecutively is not created and fails the Provider injection into a component.
(function() {
///<reference path='../../../typings/index.d.ts' />
'use strict';
angular.
module('core').
filter('checkmark', function() {
return function(input:boolean) {
return input ? '\u2713' : '\u2718';
};
});
})();
npm run tsc -w command compiles .ts files and creates maps, however, browser execution fails.
package.json
{
"name": "angular-phonecat",
"private": true,
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"bower": "^1.7.7",
"concurrently": "^2.1.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"protractor": "^3.2.2",
"shelljs": "^0.6.0",
"tsc": "^1.20150623.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"http": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
]
}
In the end *.ts source files are compiled in a project explorer but browser doesn't have them as #tadwork pointed out. What is my configuration missing out?
Update
To run the angular app I execute npm start script from package.json that theoretically should compile *.ts files and run http-server with the ./app as a server source (see package.json scripts -> start).
./app folder after script execution has compiled *.js and *.map.js files.
looks like the Typescript type annotations are getting injected into the browser without getting compiled so the types are still on the input parameter
return function(input: boolean )

Resources