How to generate a source map in the monorepo? - vue.js

I am new to monorepo.
The thing is they want me to upload a sourcemap to the rollbar.
But I don't know how to generate one.
When I ask for help they told me to read documents. I read the documents / watch Youtube videos for long time but i am still not clear about generating the source map.
In our monorepo we got lots of project
apps
- ProjectA
- ProjectB
- ProjectC
- ProjectD
The thing is i want to generate source map for the ProjectC.
To generate the source map I think i need to build the project ( tell me if i am wrong )
so I look into the project.json. But I don't see the build command.
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/ProjectC",
"projectType": "application",
"targets": {
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/ProjectC/src/**/*.ts"]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["coverage/apps/ProjectC"],
"options": {
"jestConfig": "apps/ProjectC/jest.config.ts",
"passWithNoTests": true
}
}
},
"tags": []
}
How can i configure so that it will produce a sourcemap file? ProjectC is a vue app.
The thing is in the tsconfig.app.json. I see the configuration like this. But I don't find the source map. Is this file related to generating source map?
{
"extends": "./tsconfig.json",
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"types": ["webpack-env", "jest"],
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"],
"exclude": ["node_modules"]
}

Related

Debugging Vue in VScode and Chrome, unbound breakpoint

I'm trying to debug a Vue website I'm writing in VSCode and Chrome.
When I put a breakpoint in the data() { return {...} } function it stops on it, but if I try to put it in a method in a Vue file or a JS service, once I launch Chrome through the debug config the breakpoints become unbound. Does anyone have any ideas about how to keep the breakpoints bound?
This is my config file:
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "node",
"request": "launch",
"name": "Debug server",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/server/bin/www",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"skipFiles": [
"<node_internals>/**"
]
}
]
}
I'm including the debug config for the server because in works.
Here is an example of a method I'm trying to debug (from the Vue file), I put a break point at this.error = null . The method runs normally so I expect it to stop at the breakpoint :
methods: {
async login() {
try {
this.error = null;
const response = await AuthenticationService.login({
email: this.email,
password: this.password
})
this.$store.dispatch('setToken', response.data.token)
this.$store.dispatch('setUser', response.data.user)
}
catch (err) {
console.log(`An error has occured: ${JSON.stringify(err.response)}`)
this.error = err.response.data.error
}
}
}
I'm also trying to debug my service:
login(credentials) {
return Api().post('/login', credentials)
}
The Api object just creates the Axios request
Thanks,
Ben
https://www.codegrepper.com/code-examples/javascript/vuejs+vscode+unbound+breakpoint
After a whole day of searching this solved my problem
{
"version": "0.2.0",
"configurations": [
{
"name": "WSL Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
When I had Unbound Breakpoints in VSCode I ended up needing to start the process with the --inspect or --debug-brk=5858 flag. Beyond that, launch.json gave me lots of trouble, and these resources helped
https://code.visualstudio.com/docs/nodejs/nodejs-debugging
https://code.visualstudio.com/docs/nodejs/debugging-recipes
https://github.com/microsoft/vscode-recipes/tree/master/nodemon
https://code.visualstudio.com/docs/typescript/typescript-debugging
launch.json examples:
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector",
},
{
"name": "Launch tests via NPM",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "testDebug"
],
"port": 5858
}
package.json
"scripts": {
"start": "NODE_PATH=./src DEBUG=express:* NODE_ENV=dev nodemon -w src --ext ts --exec node --inspect -r tsconfig-paths/register -r ts-node/register src/index.ts",
"testDebug": "NODE_ENV=test ts-mocha --debug-brk=5858 --paths -p tsconfig.json",
}
},
Well, it's not really an answer but I've restarted my Node server a couple of (more) times and now it stops at the breakpiont. I hope that the problem doesn't return. Now he doesn't show the value of the variables for some reason but I guess that's another problem.
Thanks for the help :)
Ben
I had the same issue in my vueJS project. Something to try before making any changes to files etc which solved it for me:
In the ClientApp/App folder: 1.Delete the node_modules folder 2.Delete the package-lock.json file 3.Open a cmd prompt for your ClientApp/App folder 4.Use the cmd "npm i"
This final step will reinstall all your node-modules. The issue I had must've been a conflicting node-module.
As of May 2022...
A note if you're using vscodium and firefox you need to install firefox-devtools directly from the marketplace: https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug
Beyond that the launch.json config is standard:
{
"name": "Vue:Client",
"type": "firefox",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [
{
"url": "file://",
"path": ""
}
]
},
The extension suggested I insert those pathMappings.
See https://github.com/firefox-devtools/vscode-firefox-debug/issues/267

Minifying issue in ASP.NET Core application

In asp.net core application I have bundleconfig.json file like below
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
}
},
{
"outputFileName": "wwwroot/js/home.min.js",
"inputFiles": [
"wwwroot/js/home.js"
],
"minify": {
"enabled": true,
"renameLocals": true
}
},
{
"outputFileName": "wwwroot/js/util.min.js",
"inputFiles": [
"wwwroot/js/util.js"
],
"minify": {
"enabled": true,
"renameLocals": true
}
},
{
"outputFileName": "wwwroot/js/profile.min.js",
"inputFiles": [
"wwwroot/js/profile.js"
],
"minify": {
"enabled": true,
"renameLocals": true
}
},
{
"outputFileName": "wwwroot/js/documentdetailmodule.min.js",
"inputFiles": [
"wwwroot/js/documentdetailmodule.js"
],
"minify": {
"enabled": true,
"renameLocals": true
}
},
{
"outputFileName": "wwwroot/css/navbar.min.css",
"inputFiles": [
"wwwroot/css/navbar.css"
]
}
]
when I publish the application all the files get minified except documentdetailmodule.js. The path and name are correct. After publishing i checked ...\Release\PublishOutput\wwwroot\js folder and i noticed documentdetailmodule.js file is there however documentdetailmodule.min.js is not there.
How do check if there are any errors during minification ( i don't see it in output window)
I am using VS 2017
Update 1
Note that documentdetailmodule.js file is newly added to the solution. and then updated bundleconfig.js accordingly
Update 2
So after further review, it turned out visual studio actually not minifying any file ( .js or .css). The reason I see a minified version of other files because those files already have their minified version under wwwroot/js folder and publishing action just copies those files.
Typically VS 2017 creates a minified version as soon as you save the file. I am not sure what has changed in Visual Studio that causing not to minify file.

Webdriver io autocomplete in VS Code

I'm using Webdriver IO as the e2e testing framework. But this autocomplete issue is really slowing me down. VS Code doesn't auto complete the global variable browser and it's methods.
.eslintrc
{
"extends": ["eslint:recommended", "standard"],
"parser": "babel-eslint",
"plugins": [
"mocha",
"webdriverio"
],
"env": {
"webdriverio/wdio": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4]
}
}
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"polyfill": false
}]
]
}
I think you can use TypeScript typings.
Add 2 dependencies to package.json:
"#types/node": "^8.5.2",
"#types/webdriverio": "^4.8.7",
Install them, reload project. If autocomplete does not yet works, create
tsconfig.json in root of your project:
{
"compilerOptions": {
"allowJs": true,
"outDir": "./.built/"
}
}
You don't need to use typescript compiler, it will just provide autocomplete. Continue writing your js code as usual.
But if you wish to use typescript, here is small beginner guide:
http://webdriver.io/guide/getstarted/configuration.html#Setup-TypeScript

Ngx\clipboard Not working with Aot and Rollup

I have tried to implement aot in my app but While building my app with aot and rollup gets this error.I have used ngx-clipboard.
'ngx-clipboard/src/index' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/window.service' is
imported by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be
resolved ΓÇô treating it as an external dependency
'ngx-clipboard/src/clipboard.directive' is imported by
wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it as
an external dependency
'ngx-clipboard/src/clipboard.service' is
imported by wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it a
s an external dependency
'ngx-clipboard/src/document.service' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/clipboard.service' is imported
by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved
ΓÇô treating it as an external dependency
No name was provided for external module 'ngx-clipboard/src/index' in
options.globals ΓÇô guessing 'import10'
No name was provided for external module 'ngx-clipboard/src/window.service'
in options.globals ΓÇô guessing 'import13'
No name was provided for external module 'ngx-
clipboard/src/clipboard.directive' in options.globals ΓÇô guessing
'import5'
No name was provided for external module 'ngx-
clipboard/src/clipboard.service' in options.globals ΓÇô guessing 'import28'
No name was provided for external module 'ngx-
clipboard/src/document.service' in options.globals ΓÇô guessing 'import27'
Here is my package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"aot": "node_modules/.bin/ngc -p wwwroot/tsconfig-aot.json",
"rollup": "node_modules/.bin/rollup -c wwwroot/rollup-config.js",
"cleanup": "rimraf wwwroot/app/aot && rimraf wwwroot/build.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"angular/animations": "4.1.3",
"angular/common": "4.1.3",
"angular/compiler": "4.1.3",
"angular/compiler-cli": "4.1.3",
"angular/core": "4.1.3",
"angular/forms": "4.1.3",
"angular/http": "4.1.3",
"angular/material": "2.0.0-beta.6",
"angular/platform-browser": "4.1.3",
"angular/platform-browser-dynamic": "4.1.3",
"angular/platform-server": "4.1.3",
"angular/router": "4.1.3",
"angular/upgrade": "4.1.3",
"core-js": "2.4.1",
"ngx-clipboard": "8.0.3",
"rxjs": "5.4.0",
"systemjs": "0.20.13",
"zone.js": "0.8.11"
},
"devDependencies": {
"ngx-window-token": "0.0.2"
"rollup": "0.43.0",
"rollup-plugin-commonjs": "8.0.2",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-uglify": "2.0.1",
"typescript": "2.2.2",
"rimraf": "2.6.1"
}
}
Here is my tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"app/app.module.ts",
"app/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "app/aot",
"skipMetadataEmit": true
}
}
Here is my rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'wwwroot/app/main-aot.js',
dest: 'wwwroot/build.js', // output a single application bundle
sourceMap: false,
format: 'iife',
onwarn: function (warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
// console.warn everything else
console.warn(warning.message);
},
plugins: [
nodeResolve({ jsnext: true, module: true }),
commonjs({
include: 'node_modules/**',
}),
uglify()
]
}
Thanks in advance
Try this:
In rollup-config.js import alias
import alias from 'rollup-plugin-alias';
Under plugins add
'ngx-clipboard': __dirname + '/node_modules/ngx-clipboard/dist/',
'ngx-window-token': __dirname + '/node_modules/ngx-window-token/dist/'

Express static mount path in krakenjs

I am trying to find the equivalent config.json file entry in krakenjs for the below code.
app.use("/app/static", express.static(path.join(__dirname, 'public'), {maxage: '2h'}));
I tried something like the below. But, it didn't pick the mounted path
"static": {
"enabled": true,
"priority": 40,
"name": "server-static",
"module": {
"arguments": [
"path:./public",
{"maxAge" : "3h"},
"mountpath:/app/static"
]
}
}
I am unable to access it with the following URL : https://app.com/app/static/style.css. But, it is accessible via https://app.com/app/style.css
Note: /app is my requestURI.
I figured out. Here is how it is configured.
"static": {
"enabled": true,
"priority": 40,
"name": "server-static",
"module": {
"arguments": [
"path:./public",
{"maxAge" : "3h"}
]
},
"route": "/static"
},