I have a project that I've built with nx and I'm deploying it to Google App Engine.
It needs app.yaml in the same folder.
Is there a way to tell nx builder to copy that extra file to the build directory next to everything else?
I guess you figured it out by now, but if anyone is still looking for a solution;
In project.json you can specify assets for targets so if you need app.yaml you can do something like this:
...
"targets": {
"build": {
"executor": "#nrwl/js:tsc",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/example",
"main": "apps/example/src/index.ts",
"tsConfig": "apps/example/tsconfig.app.json",
"assets": [
"apps/example/*.md",
"apps/example/src/app.yaml" <-- specify your path here
]
}
}
...
Related
I am developing fullstack NPM packages with multiple entrypoints (namely client, server and sometimes tests), using the exports property of package.json.
I also use a small hack to make TS work with exports until it's officially supported (see this Stack Overflow post, this hackish solution and this ticket).
The package.json ends up looking like this:
{
"name": "#vulcanjs/graphql",
"version": "0.4.7",
"main": "./dist/index.js",
"files": [
"dist/"
],
"exports": {
".": "./dist/index.js",
"./server": "./dist/server/index.js",
"./testing": "./dist/testing.js"
},
"types": "./dist/index.d.ts",
"typesVersions": {
"*": {
"server": [
"./dist/server/index.d.ts"
],
"testing": [
"./dist/testing.d.ts"
]
}
},
"description": "Vulcan graphQL schema generator",
...
You can then import using either #vulcanjs/graphql for shared code, and #vulcanjs/graphql/server for Node.js-only code.
It works perfect in my Next.js app. However, it seems to break Jest moduleNameMapper.
First, I had this:
moduleNameMapper: {
"#vulcanjs/(.*)": [
"<rootDir>/node_modules/#vulcanjs/$1",
],
},
The error is:
Configuration error:
Could not locate module #vulcanjs/graphql/server mapped as:
[
"/code/vulcan-next/node_modules/#vulcanjs/graphql/server",
].
The problem is that it tries to find a package named #vulcanjs/graphql/server: yet "server" is not a different package, it's an entrypoint of #vulcanjs/graphql.
I've also tried this:
moduleNameMapper: {
"#vulcanjs/(.*)/(.*)": [
"<rootDir>/node_modules/#vulcanjs/$1",
],
},
With this config, #vulcanjs/graphql/server is mapped to #vulcanjs/graphql. The problem is that now, server code is not found. I've checked and the problem is that this solution totally removes the /server: so #vulcanjs/graphql/server points to the main entrypoints instead of the server entrypoint.
Finally I did try to remove the moduleNameMapper, but then #vulcanjs/graphql/server package is not found by Jest. Note that I need the mapper for a use case I did not demonstrate here, so getting rid of it is possible but not the best solution.
The bug can be reproduced by installing the framework: https://github.com/VulcanJS/vulcan-next. You can clone, yarn install, unskip the test in src/models/tests/sampleModel.server.test.ts and run yarn run test:unit sampleModel. It will show the error.
Any idea how I could fix this?
Is it possible to use Visual Studio Code Debugger to debug an Angular Library that has been linked using npm link? Very specifically I am wondering if I can link the debugger to my library's TypeScript Code (not the built js code).
My debugger works fine for the application I am running through the VS Code, however my linked library breakpoints are never hit.
From the research I have done I believe I understand why this is happening (the app using the library does not have the source, it only has the compiled code within node_modules) however I cannot figure out or find any details on how to debug.
Here is an overview of what I have done:
Angular 7 library built into dist folder.
I ran npm link within the dist folder
I ran npm link #my/test-lib in my application, the library shows up in node_modules and the application is able to use it just fine
in angular.json: sourceMap is true, preserveSystemlinks is true, aot is false, vendorSourceMap is true
tsconfig.json sourceMap is true, enableResourceInlining is true
vscode launch.json has runtimeArgs set to --preserve-symlinks and --preserve-symlinks-main
I'm posting just to provide a clearer example to #SyncingDisks solution:
You actually don't need the full path, ${workspaceFolder} would do the job also:
"webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"
which would fit in launch.json as follows:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"
},
}
Don't forget to add --vendorSourceMap to ng serve which would become:
ng serve --vendorSourceMap
Update:
for Angular 7 and higher update the "angular.json" file instead of adding "--vendorSourceMap" to "ng serve":
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": true
},
...
}
}
Fine tune your launch.json based on the sourceMapPathOverrides. Excerpt from mine:
"sourceMapPathOverrides": {
"webpack:///ng://<<your-awesome-lib>>/lib/*": "C:/<<full path to your library wrapper app>>/projects/<<your-awesome-lib>>/src/lib/*"
},
I used to develop web sites with C# or Javascript with Visual Studio and IIS.
I've decided to upgrade to newer tools and try to create a simple web site with VSCode, NodeJS and TypeScript that I'll deploy to Azure later but each time I try a new sample, I get lost as I have the feeling it doesn't do what I want.
I created a TSConfig.json file with this minimum, I understood it creates a "project" in TypeScript:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
A simple main.ts file:
class Startup {
public static main(): number {
console.log('Hello World');
return 0;
}
}
Startup.main();
A simpliest index.html file that references the generated main.js file
I wanted to
- compile my web site using "$tsc-watch" to benefit from that automatic recompile
- launch the web site in NodeJS
- Open the web page in Chrome and being able to debug
But I am wondering, is it the right approach ? Should it be a tasks.json file that each time runs "$tsc-watch", launch the web site in Node and opens Chrome ?
I started with this tasks.json file :
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc-watch"
],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": ["./index.htm"],
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Then, VSCode created a launch.json file but I'm not sure why and where it fits in the picture:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Would you be able to help me understand what I am doing wrong here and what I need to simply debug my application in VSCode as I would pressing F5 in VSStudio.
Thank you for any help,
Claude
It looks like you're trying to create the entire build-chain and configuration yourself. I recommend starting with a tool that handles the initial bootstrapping for you. For exampe, use the vue-cli tool to bootstrap a vue.js project with TypeScript. While it may include a little bit of spin-up in understanding vue.js, the vue-cli tool lets you select options (e.g. TypeScript) and auto-generates a project for you. Then, just open the newly created folder in Visual Studio Code and start playing around.
Once you get a feel for how it all ties together, you can add VSCode specific tasks, start modifying configurations, etc.
There are a number of good tutorials on vue.js and, in practice, you'll probably want to leverage a front-end framework when building any real application anyway.
See the following links for tutorials and more information:
vue-cli
vue.js
I'm using Electron v2.0.8, Node v8.9.3, npm 6.4.1. I've created a simple "Hello world" program using html, css, js alongwith npm.
The program works really fine when I cd to the program directory and npm start. But when it is build(packaged) using, electron-packager <sourcedir> <appname> --platform="win32", the "sweetalert" is not showing its message, which did show when using npm start. But the buttons function as supposed. ("Clears the text field")
I suspect this has something to do with the file paths or something, but being new to this whole framework, I have no clue.
I don't know whether my whole "creating an .exe approach" is 100% correct or not. I've tried with electron-forge but it gave so many errors so I gave up on it and switched to electron-packager instead. None of the online helps work for me(I believe due to different versions) Someone please help.
For anyone else facing a similiar issue. Actually my program was built correctly and there was no error in the code.
What had happened was that the file paths were not correctly configured. When I manually copied the necessary files for the "sweetalert" to run, it showed up the message. Thus no errors specific to sweetalert.
I'll have to find a way to solve the 'path' issue anyways.
UPDATE:
Adding the code
"extraFiles": [
"folder_to_be_included_in_build"
],
into the package.json file now copies the needed folder during "building" the app. Now no need to copy the folder manually to the build.
package.json etc...
"repository": {
"url": "https://github.com/your/repo.git",
"type": "git"
},
"author": {
"name": "Author name"
},
"main": "./afolder/main.js",
"build": {
"productName": "The product name",
"compression": "maximum",
"files": [
"./afolder",
"./node_modules",
"./package.json"
],
"appId": "any.id.app",
"asar": true,
"win": {
"icon": "./your/icon/path/icon.ico",
"target": "nsis"
},
"nsis": {
"oneClick": false,
"installerIcon": "./afolder/your/icon/path/icon.ico",
"uninstallerIcon": "./afolder/your/icon/path/icon.ico",
"perMachine": false,
"deleteAppDataOnUninstall": true,
"artifactName": "${productName} ${os} ${arch} v${version} setup.exe",
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "ShortcutName"
},
"asarUnpack": [
//remove this comment ...
//packages you want to include after install.
//for e.g.
"./node_modules/electron-window-state",
"./node_modules/fs-extra",
"./node_modules/7zip-bin"
],
"npmRebuild": false,
"nodeGypRebuild": false,
"directories": {
"output": "../installer/${productName} v${version} setup"
}
},
"scripts": {
"start": "electron .",
"installer": "yarn build --x64"
},
package.json etc...
You will need "npm install electron-builder yarn --save-dev"
Amend your package.json file with the above content (change productName etc... to your custom needs)
npm run installer
you should see a folder called installer generated on the parent directory
With a node.js project, I've added eslint-plugin-security and it is giving a lot of warnings for code in my test/spec files (using mochajs). Since the test code won't be running in production, these don't seem as useful as they do in the project's actual code. (A lot of Generic Object Injection Sink warnings )
Is there a way to have the security plugin ignore certain files other than putting /* eslint-disable */ at the top of every spec file?
The best way I found to deal with this case is based on this answer.
You can override parts of your eslint file in a subfolder. In my case I'm disabling problematic rules from a jest plugin inside my e2e tests folder. Example .eslintrc.js in /e2e-tests/ :
module.exports = {
overrides: [
{
files: ["*.spec.js"],
rules: {
"jest/valid-expect": 0
}
}
]
};
There is three way to ignore files or folders:
1. Creating a .eslintignore on your project root folder with the thing you want to ignore:
**/*.js
2. Using eslint cli & the --ignore-path to specify another file where your ignore rules will be located
eslint --ignore-path .jshintignore file.js
3. Using your package.json
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
},
"eslintIgnore": ["*.spec.ts", "world.js"]
}
Official Documentation
On my side, I had issue with Intellij IDEA where eslint was checking files in a folder only dedicated to Typescript (+tslint) which was a pain, so I've picked solution 3.