Jekyll2020-07-09T16:24:18-07:00/feed.xml@Nrwl/CommunityThis site is to have an achrive of what has been said on the @nrwl/community slack workspace #support channel!Would someone be interes…2020-07-08T00:00:00-07:002020-07-08T00:00:00-07:00/support/2020/07/08/Would%20some-x2SEowB98qeMxDmdV6uYaq<p>Would someone be interested in a schematic generating run and test configurations for Jetbrains IDEs (Webstorm, PHPStorm, IDEA Ultimate…)?</p>
<h3 id="responses">Responses:</h3>
<p>I actually have a PR opened that changes the jest configs to include the necessary properties so that jest can be ran in IDEs</p>
<p><a href="https://github.com/nrwl/nx/pull/3224">https://github.com/nrwl/nx/pull/3224</a> if you’re interested</p>
<p>What do you have in mind for the run configurations?</p>
<p>placing them in the .idea folder?</p>
<p>Actually, I already created that schematic and use it, particularly for testing a whole lib or app. It’s currently a part of my workspace, but if someone’s interested, I’ll think to publish it.
And yes it generates configuration files under the <code class="language-plaintext highlighter-rouge">.idea</code> folder.</p>
<p>neat</p>
<p>do you have to modify any of the jest configs? Or do you use the cli arguments</p>Would someone be interested in a schematic generating run and test configurations for Jetbrains IDEs (Webstorm, PHPStorm, IDEA Ultimate…)?Just catching up with th…2020-07-08T00:00:00-07:002020-07-08T00:00:00-07:00/support/2020/07/08/Just%20catch-uDPc68EnUj46h8J2B2NWnd<p>Just catching up with the video from yesterday, thank you</p>Just catching up with the video from yesterday, thank youHas anyone managed to ge…2020-07-08T00:00:00-07:002020-07-08T00:00:00-07:00/support/2020/07/08/Has%20anyone-tZ4UBir5coxhHK42kiLxGX<p>Has anyone managed to get debugging of Jest tests working via Visual Studio Code?</p>
<h3 id="responses">Responses:</h3>
<p>Try this: <a href="https://www.youtube.com/watch?v=9_lgM2nokLg">https://www.youtube.com/watch?v=9_lgM2nokLg</a></p>
<p>config to debug current file
<code class="language-plaintext highlighter-rouge">{</code>
”type”: ”node”,
”request”: ”launch”,
”name”: ”Jest Current File”,
”program”: ”${workspaceFolder}\node_modules\@angular\cli\bin\ng”,
”cwd”: ”${workspaceFolder}”,
”args”: [
”test”,
”–testPathPattern=${fileBasenameNoExtension}”,
”–runInBand”
],
”console”: ”internalConsole”,
”internalConsoleOptions”: ”neverOpen”,
”disableOptimisticBPs”: true
}</p>Has anyone managed to get debugging of Jest tests working via Visual Studio Code?How long do builds usual…2020-07-08T00:00:00-07:002020-07-08T00:00:00-07:00/random/2020/07/08/How%20long%20d-jVc22kg6qePtydf1obus1f<p>How long do builds usually take? I just started working on an NX project with an Express and React/Redux app and my builds on Netlify (for the React app) are taking as long as 7 minutes. I’m also seeing this message: “WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.87 MB.” What should I be doing to resolve that?</p>
<h3 id="responses">Responses:</h3>
<p>You probably should be introducing some code splitting. As well as breaking your app up more into libraries</p>
<p><a href="https://webpack.js.org/guides/code-splitting/">https://webpack.js.org/guides/code-splitting/</a></p>
<p>Since the nx react project just uses webpack under the hood</p>How long do builds usually take? I just started working on an NX project with an Express and React/Redux app and my builds on Netlify (for the React app) are taking as long as 7 minutes. I’m also seeing this message: “WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.87 MB.” What should I be doing to resolve that?Nx Office Hours later to…2020-07-07T00:00:00-07:002020-07-07T00:00:00-07:00/support/2020/07/07/Nx%20Office%20-grtpDTbqavYeX3omRrEMa6<p>Nx Office Hours later today!</p>
<table>
<tbody>
<tr>
<td><https://twitter.com/NxDevTools/status/1280489067520589827?s=19</td>
<td>https://twitter.com/NxDevTools/status/1280489067520589827?s=19></td>
<td> </td>
</tr>
<tr>
<td><https://twitter.com/NxDevTools</td>
<td>@NxDevTools>: Join #Nx core team member <https://twitter.com/brandontroberts</td>
<td>@brandontroberts> & a special guest for Nx Office Hours today!</td>
</tr>
</tbody>
</table>
<p>Ask your questions & get answers live. Not sure how to configure something for your Nx project? Our experts can help!</p>
<p>:point_right: Tuesday, July 7, 1-2 PM ET
<a href="https://hubs.ly/H0sc4sb0">https://hubs.ly/H0sc4sb0</a>
#NxQA</p>Nx Office Hours later today!NGRX question How do yo…2020-07-07T00:00:00-07:002020-07-07T00:00:00-07:00/support/2020/07/07/NGRX%20quest-fXNuXtL3f7TVNpQs2UqqQ8<p>NGRX question. How do you generate ngrx stuff? I’ve added root and feature state using nrwl ngrx schematics and it inserted all the stuff in +state folder. But if I use plain NGRX schematics to generate action, for instance, it doesn’t add it there, so I’d have to move it manually. Also, architectural question. I have auth module, where I have auth service, guards, interceptors, etc + Login page component. I’ve added NGRX feature state, which was called auth. Should I generate another set of actions/reducer/effects for a login page, or should I put all this stuff in action/reducer/effects file, which was generated for the feature?</p>NGRX question. How do you generate ngrx stuff? I’ve added root and feature state using nrwl ngrx schematics and it inserted all the stuff in +state folder. But if I use plain NGRX schematics to generate action, for instance, it doesn’t add it there, so I’d have to move it manually. Also, architectural question. I have auth module, where I have auth service, guards, interceptors, etc + Login page component. I’ve added NGRX feature state, which was called auth. Should I generate another set of actions/reducer/effects for a login page, or should I put all this stuff in action/reducer/effects file, which was generated for the feature?Does anyone know of a wa…2020-07-07T00:00:00-07:002020-07-07T00:00:00-07:00/support/2020/07/07/Does%20anyon-da4HGUi5VHEE5sSUg5r883<p>Does anyone know of a way to run <code class="language-plaintext highlighter-rouge">nx print-affected</code> without installing all of the workspace dependencies?</p>
<p>We have all of our <code class="language-plaintext highlighter-rouge">node_modules</code> cached into a docker image that we use when testing/building/linting in <code class="language-plaintext highlighter-rouge">parallel,</code> but pulling that image just to run the <code class="language-plaintext highlighter-rouge">print-affected</code> command is pretty heavy weight (read as slower than we’d like). It’d be nice if there were a minimal set of dependencies (or just <code class="language-plaintext highlighter-rouge">nx/cli</code> ) that we could use to get the affected apps in order to kick off our tets/builds/etc.</p>
<h3 id="responses">Responses:</h3>
<p>also curious about this.</p>
<p>I got it down to <code class="language-plaintext highlighter-rouge">@nrwl/workspace</code>, <code class="language-plaintext highlighter-rouge">tslib</code> and <code class="language-plaintext highlighter-rouge">typescript</code>. With those It seems like affected works as expected</p>
<p>nice. wrapped up in a little docker image out of interest?</p>
<p>Right now it’s a hacky little script while I test things out:
```#!/usr/bin/env sh</p>
<p>set -xeuo pipefail</p>
<p>cp -f tools/ci-affected/package.json .
cp -f tools/ci-affected/yarn.lock .</p>
<p>yarn</p>
<p>git checkout package.json yarn.lock<code class="language-plaintext highlighter-rouge">
where `package.json` in that folder looks like:
</code>{
“name”: “ci-affected”,
“version”: “1.0.0”,
“description”: “Packages for running affected in CI”,
“main”: “index.js”,
“license”: “UNLICENSED”,
“dependencies”: {
“@nrwl/workspace”: “9.5.0”,
“tslib”: “^2.0.0”,
“typescript”: “^3.9.6”
}
}```</p>Does anyone know of a way to run nx print-affected without installing all of the workspace dependencies?n00b question When I bu…2020-07-07T00:00:00-07:002020-07-07T00:00:00-07:00/support/2020/07/07/nb%20quest-rX8EnnZ24Q5wJWzBBvXeis<p>n00b question: When I build a node app in Nx, how do I get node to understand the @project/my-lib paths in my require statements? My only real exposure to node has been building Azure Functions, and I’ve always used relative paths in my requires. I assumed Nx would have taken care of turning @project/my-lib into relative paths for me on build. Am I missing something? (Clearly.) I’m trying to turn an Nx-generated node app into an Azure Functions app, so, for all I know, maybe Nx is supposed to do this for me and I’ve broken the build command/system.</p>
<h3 id="responses">Responses:</h3>
<p>nx uses the tsconfig.json to map the paths of the libraries</p>
<p>what node builder are you trying to use?</p>
<p>How are you running your app?</p>
<p>um… I was using the @nrwl/node:build, then I started trying to make my own because Azure Functions has some very different assumptions about how an application is structured. Is that what you’re asking?</p>
<p>I’ll be uploading it to Azure Functions. When I deployed it using the VS Code extension for Azure Functions, Functions couldn’t find the libs in the require statements. When I build the app using nx build my-app, I still see @project/my-lib in the require statements, so I haven’t even gotten as far as uploading that to Azure Functions.</p>
<p>Sorry guys, my only real experience with this stuff is authoring an Azure Functions app in VS Code and deploying it using the built in tooling there. I’m way out of my depth here.</p>
<p>Azure Functions wants each function in the app to be an index.js file in its own directory, off the root of the project, with no main.js or anything like that in the root. So the node builder in Nx isn’t exactly what I need, which is why I started building my own builder, based on the official node one.</p>
<p>I can see all the path mapping in the tsconfig.json in the workspace root, but I don’t know how that turns into require statements that a node-based runtime can resolve.</p>
<p>Ultimately, what I’d really like is to have all the libs brought into the app, inside a lib folder off the root, and all the functions sitting in their own folders, also off the root.</p>
<p>Convincing tsc to not mirror apps/app-name/function-folder in the root of the built project is my next issue, so if I have to throw additional tooling at the require statements, I’d like it to be tooling I can also use to re-work the folder structure of the built application.</p>
<p>FunctionApp
| - host.json
| - MyFirstFunction
| | - function.json
| | - index.js
| - MySecondFunction
| | - function.json
| | - index.js
| - libs</p>
<p>So, when I build the app, import { createEvent } from “@cosmos/azure-functions-shared” will need to become import { createEvent } from “../libs/azure-functions-shared”</p>
<p>what happens if you set <code class="language-plaintext highlighter-rouge">buildLibsFromSource</code> to true and <code class="language-plaintext highlighter-rouge">externalDependencies</code> to <code class="language-plaintext highlighter-rouge">"none"</code>?</p>
<p>in your builder options</p>
<p>Hrm. I don’t see any change in behaviour. Everything still compiles fine, I get an apps folder with the app, a libs folder with the libs. But, the compiled .js files still have statements like:</p>
<p>import { createEvent } from “@cosmos/azure-functions-shared”;</p>
<p>Should I be seeing paths that have been changed to relative paths? Am I wrong to expect to see:
import { createEvent } from “../../../libs/azure-functions-shared”;</p>
<p>hmm interesting… when i look at the compiled <code class="language-plaintext highlighter-rouge">main.js</code> for my node app, i see that libs are imported relative with like <code class="language-plaintext highlighter-rouge">libs/node-lib/src/index.ts</code> etc</p>
<p>but only as webpack comments</p>
<p>i haven’t added webpack to any of my tooling. should i have?</p>
<p>This is probably my bad. Because I don’t know what I’m doing,</p>
<p>I based my custom builder on the node “package” builder from nx/packages/node/src/builders/, rather than basing it on “build”. (Package seemed closer to what I wanted.)</p>
<p>When I look at those two builders, I see webpack related stuff in <em>build</em> which isn’t in <em>package</em>.</p>
<p>Is webpack responsible for rewriting those paths when the app is built?</p>
<p>yea</p>
<p>ok, so i’m missing an entire part of the build process</p>
<p>i thought you were using <code class="language-plaintext highlighter-rouge">@nrwl/node:build</code> :open_mouth:</p>
<p>switch to that</p>
<p>i think i said i was. i thought i was. yesterday was a long day. :unamused:</p>
<p>package should be used for like deploying to npm where it’s just a straight up compile from typescript to javascript</p>
<p>gotcha. i’m gonna rip out my custom builder, replace it with @nrwl/node:build, and minimally modify that to remove/replace the node assumptions with azure functions assumptions (no “main” file, for example).</p>
<p>thanks for your help. sorry for wasting your time.</p>
<p>hey no worries :smile:</p>
<p>I’ve got a build working using @nrwl/node:build and a custom webpack config. Thanks for pointing me in the right direction, and the tip about buildLibsFromSource and externalDependencies.</p>n00b question: When I build a node app in Nx, how do I get node to understand the @project/my-lib paths in my require statements? My only real exposure to node has been building Azure Functions, and I’ve always used relative paths in my requires. I assumed Nx would have taken care of turning @project/my-lib into relative paths for me on build. Am I missing something? (Clearly.) I’m trying to turn an Nx-generated node app into an Azure Functions app, so, for all I know, maybe Nx is supposed to do this for me and I’ve broken the build command/system.guy wtf something stra…2020-07-07T00:00:00-07:002020-07-07T00:00:00-07:00/support/2020/07/07/guy%20wtf%20-ieCZQxR3yRSi3KByPT8yAr<p>guy, wtf… something strange… havent created a new library for a while, now when I run <code class="language-plaintext highlighter-rouge">nx g lib mylib</code> I get <code class="language-plaintext highlighter-rouge">Path "/libs/mylib/tsconfig.lib.prod.json" does not exist.</code></p>
<h3 id="responses">Responses:</h3>
<p>I had that happen to me when i had a mismatched version between….</p>
<p>ummm, a nrwl package and an angular version?</p>
<p>that might be it… how the hell did that happen?</p>
<p>deleted node_modules and package-lock… now it works</p>
<p>Weird. I would have kept your lock file though and just upgraded the one package</p>
<p>why is the lock file important again?</p>guy, wtf… something strange… havent created a new library for a while, now when I run nx g lib mylib I get Path "/libs/mylib/tsconfig.lib.prod.json" does not exist.NVM Found this in histo…2020-07-06T00:00:00-07:002020-07-06T00:00:00-07:00/support/2020/07/06/NVM%20Found-uTaSNahPpJCTPbh61Z8wzD<p>NVM, Found this in history.
[June 18th, 2020 9:25 AM] f.baba: Hi All, does anyone know how to fix this issue?
```> Executing task: ng generate @nrwl/angular:library –name=test –no-interactive –dry-run <</p>
<p>ast_utils_1.libsDir is not a function
The terminal process terminated with exit code: 1```
This is happening for pretty much all nx schematics for angular.</p>NVM, Found this in history. [June 18th, 2020 9:25 AM] f.baba: Hi All, does anyone know how to fix this issue? ```> Executing task: ng generate @nrwl/angular:library –name=test –no-interactive –dry-run <