diff --git a/docs/blog/2021-06-15-distributing-ci-binning-and-distributed-task-execution.md b/docs/blog/2021-06-15-distributing-ci-binning-and-distributed-task-execution.md
index ac08665d532ac..69aea5c420afd 100644
--- a/docs/blog/2021-06-15-distributing-ci-binning-and-distributed-task-execution.md
+++ b/docs/blog/2021-06-15-distributing-ci-binning-and-distributed-task-execution.md
@@ -4,10 +4,10 @@ slug: 'distributing-ci-binning-and-distributed-task-execution'
authors: ['Victor Savkin']
cover_image: '/blog/images/2021-06-15/jFVfKEglfQIM9QsP.png'
tags: [nx]
-description: "In this post we looked at two ways to distribute your CI: binning and using Nx Cloud's distributed task execution."
+description: "Learn how to scale your CI pipeline using two distribution strategies: binning for workload distribution and Nx Cloud's distributed task execution for optimal performance."
---
-As your Nx workspaces grow, running CI on a single agent becomes unworkable. Nx’s code change analysis and computation caching allows you to do the minimum amount of computation needed to verify that the PR is good to merge, but it only helps with the average case CI time. No matter how smart Nx is, in the worst case you need to rebuild/retest everything. **That’s why any sizable workspace has to distribute CI across multiple agents.**
+As your Nx workspaces grow, running CI on a single agent becomes unworkable. Nx's code change analysis and computation caching allows you to do the minimum amount of computation needed to verify that the PR is good to merge, but it only helps with the average case CI time. No matter how smart Nx is, in the worst case you need to rebuild/retest everything. **That's why any sizable workspace has to distribute CI across multiple agents.**
In this post we look at two ways to do that.
@@ -19,7 +19,7 @@ Binning is an approach to distribution where the planning job divides the work i
Nx has always provided affordances to do that, and many workspaces took advantage of it. Most of the setups look similar. This is an [example of implementing binning using Azure Pipelines](/ci/recipes/set-up/monorepo-ci-azure).
-The planning job invokes _print-affected_. This command executes the same logic as _“affected:\*”_ but instead of running the tasks, it returns the tasks’ descriptions. The job invokes this command for each target such as build/test/lint/e2e. After that, each worker agent runs the tasks assigned to it.
+The planning job invokes _print-affected_. This command executes the same logic as _"affected:\*"_ but instead of running the tasks, it returns the tasks' descriptions. The job invokes this command for each target such as build/test/lint/e2e. After that, each worker agent runs the tasks assigned to it.
Binning is very common. For instance, [the CircleCI support for running tests in parallel](https://circleci.com/docs/2.0/parallelism-faster-jobs/) uses binning.
@@ -27,7 +27,7 @@ We at Nrwl helped many large companies distribute CI using different variations
## Issues with Binning
-### Binning doesn’t partition the work in the optimal way.
+### Binning doesn't partition the work in the optimal way.
First, you cannot partition tasks into bins without knowing how long every task takes. Most binning solutions collect timings (including the one in the Azure example above) which works imperfectly.
@@ -41,7 +41,7 @@ If you partition your tests into five bins, you have five agents with separate l
More importantly, you often need all the file outputs for a given target on the same machine to do post-processing. For instance, **you can run the tests on 5 agents, but you need all the coverage reports in the same place to combine them and send them to SonarQube.** Doing this is challenging.
-### Binning doesn’t work for builds.
+### Binning doesn't work for builds.
Any time you run a command in a monorepo, Nx creates a task graph, which it then executes.
@@ -51,17 +51,17 @@ This is common when you have libraries that depend on other libraries.
-In this example, the Child 1 and Child 2 libraries have to be built first. Parent 1 can start only when Child 1 has been built because it needs the Child 1’s dist folder. Parent 2 has to wait for both Child 1 and Child 2. And they can all be built on different agents, so their dist folders will have to be moved from agent to agent. You cannot implement it using binning. This problem also occurs for tests that require the libraries or applications to be built first.
+In this example, the Child 1 and Child 2 libraries have to be built first. Parent 1 can start only when Child 1 has been built because it needs the Child 1's dist folder. Parent 2 has to wait for both Child 1 and Child 2. And they can all be built on different agents, so their dist folders will have to be moved from agent to agent. You cannot implement it using binning. This problem also occurs for tests that require the libraries or applications to be built first.
-That’s why you often see tool authors talking about distributing tests and not builds. **Distributing tests is relatively straightforward. Distributing builds is hard.**
+That's why you often see tool authors talking about distributing tests and not builds. **Distributing tests is relatively straightforward. Distributing builds is hard.**
### Binning complicates CI/CD Setup.
-Maintaining a CI setup that uses binning is often an ongoing effort. Because you don’t have a proper coordinator, your CI has to be the coordinator, which complicates things.
+Maintaining a CI setup that uses binning is often an ongoing effort. Because you don't have a proper coordinator, your CI has to be the coordinator, which complicates things.
## Approach 2: Nx Cloud 2.0 Distributed Task Execution (DTE)
-We at Nrwl are in the business of helping companies use monorepos, so we have been dealing with these issues for many years. Nx Cloud 2.0’s support for Distributed Task Execution is our solution for this problem. It solves all the problems listed above and more.
+We at Nrwl are in the business of helping companies use monorepos, so we have been dealing with these issues for many years. Nx Cloud 2.0's support for Distributed Task Execution is our solution for this problem. It solves all the problems listed above and more.
## How Does Distributed Task Execution Work?
@@ -121,23 +121,23 @@ As you can see there is not much that changed. We added the agent job, registere
-It won’t run the build locally. Instead, it sends the Task Graph to Nx Cloud. Nx Cloud Agents pick up the tasks they can run and execute them.
+It won't run the build locally. Instead, it sends the Task Graph to Nx Cloud. Nx Cloud Agents pick up the tasks they can run and execute them.
> The Nx Cloud agents here are CI jobs that run `npx nx-cloud start-agent` so they can can be defined in any CI env.
-This happens transparently. If an agent builds `app1`, it fetches the outputs for lib if it doesn’t have it already.
+This happens transparently. If an agent builds `app1`, it fetches the outputs for lib if it doesn't have it already.
As agents complete tasks, the main job where you invoked `nx affected --build` l starts receiving created files and terminal outputs.
After `nx affected --build` completes, the main job has the built artifacts and all the terminal outputs as if it ran it locally.
-Let’s reexamine the issues above to see how we addressed them.
+Let's reexamine the issues above to see how we addressed them.
### Nx Cloud partitions the work in the optimal way.
-In theory every agent could pull one task at a time to partition things evenly, but it doesn’t work well in practice. The network overhead can add up for very small tasks, and it’s often faster to run several tasks in parallel because of the batching capabilities Nx has.
+In theory every agent could pull one task at a time to partition things evenly, but it doesn't work well in practice. The network overhead can add up for very small tasks, and it's often faster to run several tasks in parallel because of the batching capabilities Nx has.
-As you run commands in your repo, Nx Cloud collects the timings and uses those to partition the work into well-sized batches, such that if one agent is slow, the CI isn’t blocked. Agents also run tasks of different types (tests/lints), so the pool of agents is shared evenly.
+As you run commands in your repo, Nx Cloud collects the timings and uses those to partition the work into well-sized batches, such that if one agent is slow, the CI isn't blocked. Agents also run tasks of different types (tests/lints), so the pool of agents is shared evenly.
### Nx Cloud does not split commands.
@@ -151,7 +151,7 @@ To stress one more time the main job contains all the terminal outputs and all t
**Nx Cloud is a proper coordinator and it can process any task graph**. An Nx Cloud agent asks for tasks to execute. The Nx Cloud service looks at the commands currently running and will see if there are any tasks that have no unfulfilled dependencies. If there are some, the Nx Cloud service will use the collected timings to create a well-size batch of tasks that it will send to the agent.
-The agent sees if it has all the files required to run those tasks (`dist` folders from previous tasks). And if it doesn’t, it downloads them. When it’s done running the task, it lets the Nx Cloud service know to “unblock” other tasks in the graph. At the same time, the Nx Cloud service sends the created files and terminal outputs to the main job.
+The agent sees if it has all the files required to run those tasks (`dist` folders from previous tasks). And if it doesn't, it downloads them. When it's done running the task, it lets the Nx Cloud service know to "unblock" other tasks in the graph. At the same time, the Nx Cloud service sends the created files and terminal outputs to the main job.
### Nx Cloud does not require you to rewrite the CI setup.
@@ -165,7 +165,7 @@ When using distributed task execution all the communication is done from your ag
## Summary
-In this post we looked at two ways to distribute your CI: binning and using Nx Cloud’s distributed task execution.
+In this post we looked at two ways to distribute your CI: binning and using Nx Cloud's distributed task execution.
Binning has been supported from Day 1 and works well for a variety of workspaces. It has drawbacks: the resource allocation, the developer ergonomics, the inability to distribute builds, and a much more complex Ci setup.
diff --git a/docs/blog/2021-10-14-step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx.md b/docs/blog/2021-10-14-step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx.md
index 6903308593471..afbf7c28bece7 100644
--- a/docs/blog/2021-10-14-step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx.md
+++ b/docs/blog/2021-10-14-step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx.md
@@ -4,6 +4,7 @@ slug: 'step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2021-10-14/92uzyqB8oJ8tZJB9wAdoWQ.png'
tags: [nx, tutorial]
+description: Learn how to set up a monorepo with Nx to manage React Native mobile and React web apps with shared libraries, demonstrated through a daily horoscope app example.
---
Do you want to have both mobile and web apps in the same repo? Do you wish that you could share code between mobile and web apps? This blog post shows you how to create a React Native mobile app and a React web app in the same repo with shared libraries using Nx.
@@ -66,7 +67,7 @@ npm install --save @rneui/base @rneui/themed react-native-vector-icons react-nat
_**yarn add @rneui/base @rneui/themed react-native-vector-icons react-native-safe-area-context
```
-In the app’s package.json at `apps/daily-horoscope-app/package.json`, under dependencies, add the above packages:
+In the app's package.json at `apps/daily-horoscope-app/package.json`, under dependencies, add the above packages:
```json5
{
@@ -166,7 +167,7 @@ export enum AdhZodiacSign {
}
```
-**Note**: the enum has a prefix “Adh” to indicate it is a model under domain “aztro-daily-horoscope”. Add this prefix to distinguish model names from component names.
+**Note**: the enum has a prefix "Adh" to indicate it is a model under domain "aztro-daily-horoscope". Add this prefix to distinguish model names from component names.
This example uses icons from [Material Community Icons](https://materialdesignicons.com/). You need to create a list that contains the zodiac sign name and its matching icon.
@@ -542,7 +543,7 @@ npm install --save-dev redux-logger @types/redux-logger
yarn add redux-logger @types/redux-logger --dev
```
-Then you need to add the redux-logger to the root store’s middleware, so the rootStore becomes:
+Then you need to add the redux-logger to the root store's middleware, so the rootStore becomes:
```typescript
import logger from 'redux-logger';
@@ -559,7 +560,7 @@ const rootStore = configureStore({
Since the code is running in simulators, how to use the Redux Devtools extension and view the Redux Logger?
-Open the debug menu in the simulator by entering `d` in the terminal that runs the start command. Then in the debug menu, choose “Debug with Chrome” for iOS and “Debug” for Android.
+Open the debug menu in the simulator by entering `d` in the terminal that runs the start command. Then in the debug menu, choose "Debug with Chrome" for iOS and "Debug" for Android.
_Debug Menu in iOS and Android_
@@ -587,7 +588,7 @@ npm install --save @react-navigation/native @react-navigation/stack react-native
yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens @react-native-community/masked-view
```
-In the app’s package.json at `apps/daily-horoscope-app/package.json`, under dependencies, add the above packages:
+In the app's package.json at `apps/daily-horoscope-app/package.json`, under dependencies, add the above packages:
```json5
{
@@ -694,45 +695,7 @@ export default HoroscopeCard;
Now you need to add this screen to your app. In file `apps/daily-horoscope-app/src/app/App.tsx`, you need to update it to add a stack screen for the `horoscope-card` component:
-```tsx
-import { store } from '@aztro-daily-horoscope/store';
-import {
- ZodiacSignListContainer,
- HoroscopeCard,
-} from '@aztro-daily-horoscope/ui';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import * as React from 'react';
-import { Provider } from 'react-redux';
-
-const Stack = createStackNavigator();
-
-const App = () => {
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export default App;
-```
-
-In the `libs/ui/src/lib/zodiac-sign-list/zodiac-sign-list.tsx`, you need to trigger navigation when the list item got pressed.
-
-Below code uses [`useNavigation`](https://reactnavigation.org/docs/use-navigation/) hook from [React Navigation](https://reactnavigation.org/) library. When the list item got pressed, it is going to call `navigation.navigate(‘Horoscope Card’)` to navigate the `horoscope-card` component you created above.
-
-[https://gist.github.com/xiongemi/c78c719e70aa4948b98e68033d7fe4a3](https://gist.github.com/xiongemi/c78c719e70aa4948b98e68033d7fe4a3)
-
-```tsx {% fileName="App.tsx" %}
+```tsx {% fileName="zodiac-sign-list.tsx" %}
import {
AdhZodiacSignItem,
AdhZodiacSignList,
@@ -800,7 +763,7 @@ nx generate lib services
In the services folder, add the below files:
- `aztro-horoscope-response.interface.ts` defines what the response object looks like. It has a transform function to transform response data to the app domain model.
-- `aztro.service.ts` calls the API to get the user’s horoscope based on the zodiac sign and day.
+- `aztro.service.ts` calls the API to get the user's horoscope based on the zodiac sign and day.
```typescript {% fileName="aztro-horoscope-response.interface.ts" %}
import { AdhHoroscope, AdhZodiacSign } from '@aztro-daily-horoscope/models';
@@ -899,7 +862,7 @@ export interface HoroscopeState {
- `loadingStatus` is the API request status from `aztro.service`.
- `error` is the API request error from `aztro.service`.
-- `zodiacSignItem` is the user’s selected zodiac sign.
+- `zodiacSignItem` is the user's selected zodiac sign.
- `day` is the parameter passed to `aztro.service`.
- `horoscope` is the transformed response from `aztro.service.`
@@ -1255,7 +1218,7 @@ AppRegistry.runApplication('main', {
});
```
-Copy your code from `daily-horoscope-app`’s app file to `daily-horoscope-web`’s app file and add styles for the icon font files:
+Copy your code from `daily-horoscope-app`'s app file to `daily-horoscope-web`'s app file and add styles for the icon font files:
```tsx {% fileName="app.tsx" %}
import { rootStore } from '@aztro-daily-horoscope/store';
diff --git a/docs/blog/2021-12-17-mastering-the-project-boundaries-in-nx.md b/docs/blog/2021-12-17-mastering-the-project-boundaries-in-nx.md
index 68ceeff7b823e..693ba417ad8cf 100644
--- a/docs/blog/2021-12-17-mastering-the-project-boundaries-in-nx.md
+++ b/docs/blog/2021-12-17-mastering-the-project-boundaries-in-nx.md
@@ -4,11 +4,12 @@ slug: 'mastering-the-project-boundaries-in-nx'
authors: ['Miroslav Jonaš']
cover_image: '/blog/images/2021-12-17/PIUl1QGk7mOpSFdEwFQ8OA.png'
tags: [nx]
+description: Learn how to organize growing Nx repositories using module boundaries and ESLint rules to enforce clean architecture and prevent unwanted dependencies between domains.
---
-As your repository grows, it becomes more challenging to organize and name the applications and libraries. This organization, when done right, feels intuitive and allows team members to easily find projects and understand how they work together. When done poorly, it results in a mess we eventually end up calling “the legacy software”. This article will show you different ways how you can prevent your repo from descending into chaos.
+As your repository grows, it becomes more challenging to organize and name the applications and libraries. This organization, when done right, feels intuitive and allows team members to easily find projects and understand how they work together. When done poorly, it results in a mess we eventually end up calling "the legacy software". This article will show you different ways how you can prevent your repo from descending into chaos.
-Our book [Enterprise Angular Monorepo Patterns](https://go.nx.dev/angular-enterprise-monorepo-patterns-new-book) presents an in-depth guide to assist you with naming and organization. If you still haven’t read this book, we warmly recommend you do. Don’t let the name fool you, though — the architecture guidelines explained in this book apply to any framework.
+Our book [Enterprise Angular Monorepo Patterns](https://go.nx.dev/angular-enterprise-monorepo-patterns-new-book) presents an in-depth guide to assist you with naming and organization. If you still haven't read this book, we warmly recommend you do. Don't let the name fool you, though — the architecture guidelines explained in this book apply to any framework.
On large projects, you will most likely find multiple teams working on different parts of the solution. Those projects are usually split into logical domains, where each team focuses on a single domain. Each domain block can have a clear public API which other domains can use to consume the information.
@@ -47,13 +48,13 @@ When you generate the first project in your workspace using one of our generator
}
```
-Let’s dissect what each of these properties does.
+Let's dissect what each of these properties does.
The `allow` array acts as a whitelist listing the import definitions that should be omitted from further checks. You can read more about it in the **Overriding the overrides** section below.
The `depConstraints` section is the one you will be spending most time fine-tuning. It represents an array of constraints, each consisting of `sourceTag` and `onlyDependOnLibsWithTags` properties. The default configuration has a wildcard `*` set as a value for both of them, meaning that any project can import (depend on) any other project.
-> Note, the wildcard only applies to libraries. Applications and E2E applications cannot be imported. It wouldn’t make any sense. If you want to combine applications, you should use the [micro-frontends](/recipes/angular/dynamic-module-federation-with-angular) approach with the module federation.
+> Note, the wildcard only applies to libraries. Applications and E2E applications cannot be imported. It wouldn't make any sense. If you want to combine applications, you should use the [micro-frontends](/recipes/angular/dynamic-module-federation-with-angular) approach with the module federation.
The circular dependency chains such as `lib A -> lib B -> lib C -> lib A` are also not allowed. The self circular dependency (when lib imports from a named alias of itself), while not recommended, can be overridden by setting the flag `allowCircularSelfDependency` to true.
@@ -91,7 +92,7 @@ First, we will use the project configuration to annotate our projects with `tags
- Tags used to live in `nx.json` but were in the recent version moved closer to the project, so you can locate them now in your `project.json` or `workspace.json`
-Let’s define the types of projects. We will use the following tags:
+Let's define the types of projects. We will use the following tags:
- `type:app` for application
- `type:feature` for feature library
@@ -147,12 +148,12 @@ Now, that we have marked all of our projects, we can continue to define the rule
## Adding a second dimension
-We said that a feature library can depend on any other feature library, but there is a small catch. Our two apps could be built with a different framework so mixing feature libraries would not be possible. To avoid any future impediments, we don’t want to allow a feature library used in `Store` to depend on the feature library from `Admin` and vice versa. Additionally, only our apps should be able to load the `Core` library.
+We said that a feature library can depend on any other feature library, but there is a small catch. Our two apps could be built with a different framework so mixing feature libraries would not be possible. To avoid any future impediments, we don't want to allow a feature library used in `Store` to depend on the feature library from `Admin` and vice versa. Additionally, only our apps should be able to load the `Core` library.
_Project graph with type tags and technology badges_
-Let’s add another dimension to allow such restrictions. We will define the necessary scope tags:
+Let's add another dimension to allow such restrictions. We will define the necessary scope tags:
- `scope:store` for store app-related projects
- `scope:admin` for admin app related projects
@@ -266,9 +267,9 @@ Using the wildcard `*` to match multiple projects e.g. `react*` we can save ours
## Restricting transitive dependencies
-Our solution doesn’t contain only internal projects but also depends on various external NPM packages. These external dependencies are explicitly declared in our `package.json`. Unfortunately, a package is rarely an island. They often consist of a tree of transitive dependencies branching out leading to thousands of packages being installed in your `node_modules` folder. Although we have control over what version or which direct dependency we install, we have no control over what versions of what packages this dependency depends on. The transitive dependencies are often the source of our app's vulnerabilities. We can also never guarantee those dependencies will be there. Just by simply running `npm install` parent may get updated to a patch or minor version that would wipe out one of the transitive dependencies or replace it with one with breaking changes.
+Our solution doesn't contain only internal projects but also depends on various external NPM packages. These external dependencies are explicitly declared in our `package.json`. Unfortunately, a package is rarely an island. They often consist of a tree of transitive dependencies branching out leading to thousands of packages being installed in your `node_modules` folder. Although we have control over what version or which direct dependency we install, we have no control over what versions of what packages this dependency depends on. The transitive dependencies are often the source of our app's vulnerabilities. We can also never guarantee those dependencies will be there. Just by simply running `npm install` parent may get updated to a patch or minor version that would wipe out one of the transitive dependencies or replace it with one with breaking changes.
-Therefore it’s wise not to allow developers to import transitive dependencies in their projects. Our ESLint plugin provides a simple flag to turn this restriction on.
+Therefore it's wise not to allow developers to import transitive dependencies in their projects. Our ESLint plugin provides a simple flag to turn this restriction on.
```json5 {% fileName=".eslintrc.json" %}
{
diff --git a/docs/blog/2021-12-23-single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13.md b/docs/blog/2021-12-23-single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13.md
index 92bc25f6575a1..aea81c928e4f7 100644
--- a/docs/blog/2021-12-23-single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13.md
+++ b/docs/blog/2021-12-23-single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13.md
@@ -4,6 +4,7 @@ slug: 'single-file-monorepo-config-custom-workspace-presets-improved-tailwind-su
authors: ['Brandon Roberts']
cover_image: '/blog/images/2021-12-23/4u3Fw49H5U-sqgyBoGsqw.png'
tags: [nx, release]
+description: Nx 13.4 brings single file monorepo configuration, custom workspace presets, enhanced Tailwind support for Angular, and dedicated TypeScript/JavaScript support with @nrwl/js.
---
Nx is a smart, extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.
@@ -25,13 +26,13 @@ With the latest release of Nx and add-nx-to-monorepo 2.0, there is only the **nx
npx add-nx-to-monorepo
```
-> Victor Savkin demoed the flexibility of Nx by migrating Meta’s (Facebook) React repository: [video link](https://youtu.be/XLP2RAOwfLQ)
+> Victor Savkin demoed the flexibility of Nx by migrating Meta's (Facebook) React repository: [video link](https://youtu.be/XLP2RAOwfLQ)
Learn more in our guide of [adding Nx to an existing workspace](/recipes/adopting-nx/adding-to-monorepo) and the config inside the [**nx.json**](/reference/project-configuration)**.**
## Custom Workspace Presets 🎨
-Nx provides many presets by default to support many different ecosystems. Nx for monorepos is like VSCode, where plugins allow you to extend the functionality of your monorepo to fit your ecosystem or platform of choice. To make it easier for scaffolding a pre-defined setup, we’ve introduced the ability to use custom presets when creating Nx workspaces with a provided npm package.
+Nx provides many presets by default to support many different ecosystems. Nx for monorepos is like VSCode, where plugins allow you to extend the functionality of your monorepo to fit your ecosystem or platform of choice. To make it easier for scaffolding a pre-defined setup, we've introduced the ability to use custom presets when creating Nx workspaces with a provided npm package.
```shell
npx create-nx-workspace --preset=your-npm-package-name
@@ -47,7 +48,7 @@ This allows you to enhance the initial experience for new workspaces directly fo
Nx has always shipped with great TypeScript support. In version 13.4 we improve it even further by releasing a brand new package: `@nrwl/js` .
-This is particularly useful if you have framework-agnostic TS/JS packages within an existing Nx workspace but also for those scenarios where you want to build and publish a TS/JS-based library to some package registry. The setup is very lightweight, but still provides all benefits you’d expect from an Nx-based setup such as Jest, ESLint, Prettier etc.
+This is particularly useful if you have framework-agnostic TS/JS packages within an existing Nx workspace but also for those scenarios where you want to build and publish a TS/JS-based library to some package registry. The setup is very lightweight, but still provides all benefits you'd expect from an Nx-based setup such as Jest, ESLint, Prettier etc.
Read all the details on [our new TypeScript guide](/getting-started/intro) or check out the video walkthrough below.
@@ -58,7 +59,7 @@ Read all the details on [our new TypeScript guide](/getting-started/intro) or ch
_Tailwind Logo_
-Tailwind is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. If you’ve used Tailwind with Angular applications previously, it's supported out of the box with Nx. We’re continually looking to improve the developer experience of using Tailwind in Angular applications and libraries. We already added support to the Angular plugin for Nx, and have added a new generator to configure Tailwind in **existing** apps and buildable/publishable libs, allowing you to set up and configure Tailwind without manual steps. The ability to configure new apps and libs is also supported, with support for Tailwind V2 and the latest V3 release.
+Tailwind is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. If you've used Tailwind with Angular applications previously, it's supported out of the box with Nx. We're continually looking to improve the developer experience of using Tailwind in Angular applications and libraries. We already added support to the Angular plugin for Nx, and have added a new generator to configure Tailwind in **existing** apps and buildable/publishable libs, allowing you to set up and configure Tailwind without manual steps. The ability to configure new apps and libs is also supported, with support for Tailwind V2 and the latest V3 release.
```shell
nx g @nrwl/angular:app my-app --addTailwind
diff --git a/docs/blog/2022-01-25-new-terminal-output-performance-improvements-in-nx-13-5.md b/docs/blog/2022-01-25-new-terminal-output-performance-improvements-in-nx-13-5.md
index 1a09084123a66..54f34bf668d48 100644
--- a/docs/blog/2022-01-25-new-terminal-output-performance-improvements-in-nx-13-5.md
+++ b/docs/blog/2022-01-25-new-terminal-output-performance-improvements-in-nx-13-5.md
@@ -4,13 +4,14 @@ slug: 'new-terminal-output-performance-improvements-in-nx-13-5'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-01-25/PIUl1QGk7mOpSFdEwFQ8OA.png'
tags: [nx]
+description: Nx 13.5 brings a new dynamic terminal output, 2.3x faster operations, Chrome DevTools profiling support, and improved project graph visualization.
---
Nx is a smart, extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.
### New Terminal Output 💅
-Folks that have been following along in our journey for quite some time know already that at Nx we strive for the best possible DX. The current terminal output was always something we haven’t been super happy with, especially if you run some of the commands that trigger the execution of multiple tasks (e.g. affected commands, run-many etc). This is why we’re even more excited about this feature: the new dynamic Nx terminal output is now the default for everyone.
+Folks that have been following along in our journey for quite some time know already that at Nx we strive for the best possible DX. The current terminal output was always something we haven't been super happy with, especially if you run some of the commands that trigger the execution of multiple tasks (e.g. affected commands, run-many etc). This is why we're even more excited about this feature: the new dynamic Nx terminal output is now the default for everyone.
_New dynamic terminal output in Nx 13.5_
@@ -19,14 +20,14 @@ It clearly separates the terminal output into an upper part where all the comple
There are a few things to note here (and which kinda emphasize our love with details & dev ergonomics 😉)
-- **Off in CI —** On CI you’ll still see the full output.
+- **Off in CI —** On CI you'll still see the full output.
- **The full terminal output is still cached —** this is purely UI cosmetic. We still cache the entire terminal output. Hence, if you run the build of a single project that has previously been cached as part of a run-many command, you will see still the full output.
Thanks to [James Henry](https://twitter.com/mrjameshenry) for working on this feature!
### Nx keeps getting faster and faster 🚀
-Performance is a feature, and we take it seriously with Nx. We landed a number of different performance improvements over the last couple of minor versions, ranging from optimizing how we store & restore our cache to improving the Nx workspace analysis and boot time. With v13.5 we’ve seen some Nx operations being
+Performance is a feature, and we take it seriously with Nx. We landed a number of different performance improvements over the last couple of minor versions, ranging from optimizing how we store & restore our cache to improving the Nx workspace analysis and boot time. With v13.5 we've seen some Nx operations being
- 1.8x — 2.3x faster in the [Interstellar repo](https://github.com/vsavkin/interstellar)
- about 2x faster on some large client repositories
@@ -37,7 +38,7 @@ And we will not rest 😉.
When running an Nx command there might potentially be many tasks running at different times, in parallel, and using different processes. Optimizing those runs or better understanding where things go wrong might be a hard and cumbersome process. Being able to visualize things usually helps.
-That’s why we introduced the ability to profile and visualize Nx commands in the Chrome Devtools.
+That's why we introduced the ability to profile and visualize Nx commands in the Chrome Devtools.
@@ -47,7 +48,7 @@ Use the `NX_PROFILE=` environment variable attached to your Nx CLI com
NX_PROFILE=profile.json nx build cart
```
-It’ll produce a JSON file which you can then open with Chrome’s devtools. [Read more about it on the Nx Docs](/troubleshooting/performance-profiling).
+It'll produce a JSON file which you can then open with Chrome's devtools. [Read more about it on the Nx Docs](/troubleshooting/performance-profiling).
Thanks [Jason](https://twitter.com/FrozenPandaz) for working on this feature!
@@ -67,11 +68,11 @@ In v13.5 we now also store the current filter status in the URL. That makes it e
_Nx dep graph now stores filters in the URL_
-Here’s our deployed live example of the above screenshot: [https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page](https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page)
+Here's our deployed live example of the above screenshot: [https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page](https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page)
Thanks [Philip Fulcher](https://twitter.com/PhilipJFulcher) for adding this feature!
-There’s one more thing: As developers, we like to be as efficient as possible. We wanted to help by saving you some keystrokes. The project graph visualization can now be launched with
+There's one more thing: As developers, we like to be as efficient as possible. We wanted to help by saving you some keystrokes. The project graph visualization can now be launched with
```shell
nx graph
@@ -85,7 +86,7 @@ There have been a number of improvements to our Angular plugin ( `@nrwl/angular`
- Option to skip the Angular Module creation when generating new libraries by passing `--skipModule`
- Support for multiple state slices when using the Nx Angular Data Persistence utilities. Thanks [David](https://medium.com/u/6e7f9350fcdf?source=post_page-----c407bb1c963a--------------------------------) for this community contribution !([#8216](https://github.com/nrwl/nx/pull/8216))
-- New Angular Nx workspaces now use v2 of the workspace configuration (Nx’s format of the `angular.json` )
+- New Angular Nx workspaces now use v2 of the workspace configuration (Nx's format of the `angular.json` )
- Lots of improvements to the Angular SCAM generator
## How to Update Nx
diff --git a/docs/blog/2022-01-28-set-up-tailwind-css-with-angular-in-an-nx-workspace.md b/docs/blog/2022-01-28-set-up-tailwind-css-with-angular-in-an-nx-workspace.md
index d8ac2bcfd069c..c9ef7d6eb9d26 100644
--- a/docs/blog/2022-01-28-set-up-tailwind-css-with-angular-in-an-nx-workspace.md
+++ b/docs/blog/2022-01-28-set-up-tailwind-css-with-angular-in-an-nx-workspace.md
@@ -4,13 +4,14 @@ slug: 'set-up-tailwind-css-with-angular-in-an-nx-workspace'
authors: ['Leosvel Pérez Espinosa']
cover_image: '/blog/images/2022-01-28/igoocYqr8gj8n9t8qr5cuA.png'
tags: [nx]
+description: Learn how to integrate Tailwind CSS with Angular in an Nx monorepo, including setup, configuration, and best practices for applications and libraries.
---
-[**Tailwind CSS**](https://tailwindcss.com/) is a utility-first CSS framework packed with a lot of good functionality out of the box while providing a high level of customization. It has gained a lot of attention since it came out and it’s a good option when it comes to styling our applications.
+[**Tailwind CSS**](https://tailwindcss.com/) is a utility-first CSS framework packed with a lot of good functionality out of the box while providing a high level of customization. It has gained a lot of attention since it came out and it's a good option when it comes to styling our applications.
In this blog post, we are going to see how we can use **Tailwind CSS** with [**Angular**](https://angular.io/) in an **Nx** monorepo. We are going to be looking at different scenarios and how to approach them.
-Let’s get started!
+Let's get started!
> Please note that this blog post is not meant to be a **Tailwind CSS** or **Angular** tutorial. The purpose is to show how to use them together and how **Nx** can help to improve the developer experience and expand the native **Angular** capabilities when working with **Tailwind CSS**.
@@ -23,16 +24,16 @@ We are going to create 2 simple applications with the following layout:
_Applications mockup_
-We’ll start by creating one application with the required markup and **Tailwind CSS** utility classes to achieve the above layout. Then, we’re going to leverage **Nx**’s library support and extract some common UI components into 2 different shared libraries:
+We'll start by creating one application with the required markup and **Tailwind CSS** utility classes to achieve the above layout. Then, we're going to leverage **Nx**'s library support and extract some common UI components into 2 different shared libraries:
- a regular non-buildable library containing the header,
- a buildable library containing the card elements.
-At that point, we’ll create the second application using the components exposed by those shared libraries. Finally, we’ll extract the button elements to a publishable library and adjust both applications to use them.
+At that point, we'll create the second application using the components exposed by those shared libraries. Finally, we'll extract the button elements to a publishable library and adjust both applications to use them.
The idea is to show how different applications can still use the same components and have them styled differently using **Tailwind CSS**. Both applications in this blog post will share the same layout, but the approach explained here would apply to applications with different layouts sharing the same UI components.
-> Discussing the different types of libraries and the motivation to use them goes beyond the scope of this blog post. We’ll use the three different types just to showcase how to use **Tailwind CSS** with each of them. To know more about them, please check [/concepts/decisions/project-size](/concepts/decisions/project-size) and [/concepts/buildable-and-publishable-libraries](/concepts/buildable-and-publishable-libraries).
+> Discussing the different types of libraries and the motivation to use them goes beyond the scope of this blog post. We'll use the three different types just to showcase how to use **Tailwind CSS** with each of them. To know more about them, please check [/concepts/decisions/project-size](/concepts/decisions/project-size) and [/concepts/buildable-and-publishable-libraries](/concepts/buildable-and-publishable-libraries).
## Setting up the Nx workspace
@@ -50,9 +51,9 @@ npx create-nx-workspace@latest angular-tailwind-nx --pm=yarn
The above command creates a workspace called `angular-tailwind-nx` and asks us a few questions to help us set up the workspace. We chose the `angular` preset, provided `app1` for the initial **Angular** application name, chose `css` as the stylesheet to use, and this time chose not to use [**Nx Cloud**](/nx-cloud) but feel free to opt-in to use the **Nx Cloud** free tier to benefit from distributing the computation caching of your projects.
-> Any of the stylesheet options can be used. Also, using **Nx Cloud** or not doesn’t affect setting up **Tailwind CSS**.
+> Any of the stylesheet options can be used. Also, using **Nx Cloud** or not doesn't affect setting up **Tailwind CSS**.
-Now that we have a workspace with an **Angular** application ready to be used, let’s start adding some **Tailwind CSS** magic!
+Now that we have a workspace with an **Angular** application ready to be used, let's start adding some **Tailwind CSS** magic!
## Adding Tailwind CSS
@@ -70,7 +71,7 @@ The above command will do a few things for us:
> The above generator supports **Tailwind CSS** v2 and v3.
-Let’s take a look at the generated `apps/app1/tailwind.config.js` file:
+Let's take a look at the generated `apps/app1/tailwind.config.js` file:
```javascript {% fileName="tailwind.config.js" %}
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
@@ -88,7 +89,7 @@ module.exports = {
};
```
-We can see the `content` property is configured to scan for all the HTML and TypeScript files within our application and besides that, there’s also a call to a function called `createGlobPatternsForDependencies`. This is a pretty handy function that will identify the dependencies of the application and return the glob patterns for them. This ensures that **Tailwind CSS** utility classes that are used in the application’s dependencies are also taken into account and included in the final CSS of the application.
+We can see the `content` property is configured to scan for all the HTML and TypeScript files within our application and besides that, there's also a call to a function called `createGlobPatternsForDependencies`. This is a pretty handy function that will identify the dependencies of the application and return the glob patterns for them. This ensures that **Tailwind CSS** utility classes that are used in the application's dependencies are also taken into account and included in the final CSS of the application.
> Instead of using the `createGlobPatternsForDependencies`, we could just add the `_libs/**/*_` glob pattern that captures all libraries, but that could lead to bundling more CSS than needed in monorepos with multiple applications. This would happen because all applications would be scanning all libraries, regardless of whether they are dependencies or not. Such a glob pattern could also lead to scaling issues in large monorepos due to the amount of libraries to scan.
@@ -100,17 +101,14 @@ We can also see that the generator updated the `apps/app1/src/styles.css` file w
@tailwind utilities;
```
-And that’s all we need. We can now go ahead and add our custom theme and layout to achieve the desired design.
+And that's all we need. We can now go ahead and add our custom theme and layout to achieve the desired design.
## Adding a custom theme and the application markup
First, we are going to update the `theme` section of the generated `apps/app1/tailwind.config.js`. We are going to overwrite the **Tailwind CSS** default theme and provide the custom palette of colors and spacing of our theme to be used throughout the application:
```javascript {% fileName="tailwind.config.js" %}
-...
-
module.exports = {
- ...
theme: {
colors: {
primary: {
@@ -133,7 +131,7 @@ module.exports = {
xl: '2rem',
},
},
- ...
+ plugins: [],
};
```
@@ -192,7 +190,7 @@ Next, we update the `apps/app1/src/app/app.component.html` file with the require
```
-With all set, let’s see it in action by running:
+With all set, let's see it in action by running:
```shell
npx nx run app1:serve
@@ -203,7 +201,7 @@ Visiting [https://localhost:4200](https://localhost:4200) in your browser should
_Application 1 screenshot_
-That’s it! We have successfully created our application to fulfill the requirements we had. Next, we are going to start extracting pieces of the UI into shared libraries to reuse them with the second application.
+That's it! We have successfully created our application to fulfill the requirements we had. Next, we are going to start extracting pieces of the UI into shared libraries to reuse them with the second application.
## Tailwind CSS and Angular libraries in an Nx workspace
@@ -215,13 +213,13 @@ From [**Tailwind CSS** docs](https://tailwindcss.com/docs/installation):
Any project can use the [**Tailwind CSS** CLI](https://tailwindcss.com/blog/standalone-cli) or [**PostCSS**](https://postcss.org/) with the `tailwindcss` plugin to scan the relevant files in the project and collect the usage of the **Tailwind CSS** utility classes, functions, and custom CSS directives (custom CSS [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)). With that information, the final CSS styles are generated.
-**Angular** uses **PostCSS** to support **Tailwind CSS**. As we saw in a previous section, with the help of an **Nx** generator, it’s pretty straightforward to configure a **Tailwind CSS** for applications. Libraries can also be easily configured, but there are some nuances regarding how they are processed and whether they need to be configured or not.
+**Angular** uses **PostCSS** to support **Tailwind CSS**. As we saw in a previous section, with the help of an **Nx** generator, it's pretty straightforward to configure a **Tailwind CSS** for applications. Libraries can also be easily configured, but there are some nuances regarding how they are processed and whether they need to be configured or not.
-In an **Nx** workspace, a regular library (non-buildable and non-publishable) is just a slice of an application that is only built as part of the build process of an application that consumes it. Because of that, as long as the application that consumes it has **Tailwind CSS** configured, the library code will be processed as expected even though the library itself doesn’t have a **Tailwind CSS** configuration. In fact, adding a `tailwind.config.js` file to the library won’t have any effect whatsoever (it’ll be ignored) because the library is never built on its own.
+In an **Nx** workspace, a regular library (non-buildable and non-publishable) is just a slice of an application that is only built as part of the build process of an application that consumes it. Because of that, as long as the application that consumes it has **Tailwind CSS** configured, the library code will be processed as expected even though the library itself doesn't have a **Tailwind CSS** configuration. In fact, adding a `tailwind.config.js` file to the library won't have any effect whatsoever (it'll be ignored) because the library is never built on its own.
On the other hand, buildable and publishable libraries are meant to be built on their own and their compiled output to be shared with the consumers. Therefore, they need to be able to process any **Tailwind CSS** directive or function (e.g. `@apply`, `theme()`) when they are built. If no **Tailwind CSS** directive or function is used, then the configuration is not needed.
-> Providing the configuration to a buildable or publishable library that doesn’t need it adds some unnecessary overhead to the build process. The executor will still load the configuration and the **PostCSS** plugin will process the stylesheets unnecessarily.
+> Providing the configuration to a buildable or publishable library that doesn't need it adds some unnecessary overhead to the build process. The executor will still load the configuration and the **PostCSS** plugin will process the stylesheets unnecessarily.
How does this work?
@@ -238,7 +236,7 @@ When the **PostCSS** plugin processes a file containing these, it processes them
But we do use **Tailwind CSS** utility classes in the libraries and CSS needs to be generated for them. So, how is the CSS generated for those classes if the libraries are not configured?
-If we recall from a previous section, in our application’s `tailwind.config.js` file, we have the following:
+If we recall from a previous section, in our application's `tailwind.config.js` file, we have the following:
```javascript {% fileName="tailwind.config.js" %}
...
@@ -252,11 +250,11 @@ module.exports = {
};
```
-The `content` property of the configuration tells **Tailwind CSS** where to look for usages of utility classes. When the **PostCSS** plugin finds a file using the `@tailwind` directive, it will collect all the utility classes for the layer specified by the directive in the files matching the glob patterns set in the `content` property of the configuration, and it will produce the CSS replacing the directive. It’s worth noting that the **PostCSS** plugin only scans the files collecting the utility classes that are used, it doesn’t process them. Only the file containing the `@tailwind` directive is updated with the resulting CSS.
+The `content` property of the configuration tells **Tailwind CSS** where to look for usages of utility classes. When the **PostCSS** plugin finds a file using the `@tailwind` directive, it will collect all the utility classes for the layer specified by the directive in the files matching the glob patterns set in the `content` property of the configuration, and it will produce the CSS replacing the directive. It's worth noting that the **PostCSS** plugin only scans the files collecting the utility classes that are used, it doesn't process them. Only the file containing the `@tailwind` directive is updated with the resulting CSS.
Since we have our application configured to scan the relevant files within itself and also within its dependencies, the utility classes used in the libraries that are dependencies of the application will be picked up correctly and the CSS will be generated for them.
-> It’s important to note that the support for **Tailwind CSS** for **Angular** libraries is only available using the `@nrwl/angular:ng-packagr-lite` executor for buildable libraries and the `@nrwl/angular:package` executor for publishable libraries.
+> It's important to note that the support for **Tailwind CSS** for **Angular** libraries is only available using the `@nrwl/angular:ng-packagr-lite` executor for buildable libraries and the `@nrwl/angular:package` executor for publishable libraries.
Below is a small decision tree to check whether a **Tailwind CSS** configuration is needed for your library in an **Nx** workspace:
@@ -265,11 +263,11 @@ _Decision tree for the need of Tailwind CSS configuration in Angular libraries_
## Extracting the header into a library
-Our application is looking good. At the same time, there’s a great opportunity to reuse some of its components in another application. Therefore, we are going to extract the shared components into several shared libraries.
+Our application is looking good. At the same time, there's a great opportunity to reuse some of its components in another application. Therefore, we are going to extract the shared components into several shared libraries.
-> The applications of this blog post are very simple and it’s probably not worthy to extract the components into multiple libraries. We are doing it for illustrative purposes to cover the different scenarios we might find in real-life applications.
+> The applications of this blog post are very simple and it's probably not worthy to extract the components into multiple libraries. We are doing it for illustrative purposes to cover the different scenarios we might find in real-life applications.
-We’ll start by extracting the header of the application into a reusable component and placing it into a library. To do so, we start by creating a new **Angular** library in our workspace by running:
+We'll start by extracting the header of the application into a reusable component and placing it into a library. To do so, we start by creating a new **Angular** library in our workspace by running:
```shell
npx nx generate @nrwl/angular:lib lib1
@@ -289,7 +287,7 @@ Add the markup for the header to the `libs/lib1/src/lib/header/header.component.
```
-Import `Lib1Module` into our application’s `AppModule`:
+Import `Lib1Module` into our application's `AppModule`:
```typescript {% fileName="app.module.ts" %}
...
@@ -335,7 +333,7 @@ npx nx generate @nrwl/angular:setup-tailwind lib2
As explained in a previous section when we did the same for the application, the above command will install any required dependencies if needed, create the `tailwind.config.js` file and in the specific case of libraries, it will also add the `tailwindConfig` property to the `build` target of the project configuration.
-> **Angular** applications, buildable and publishable libraries can be created with **Tailwind CSS** support with a single command. We’ll see that in the upcoming section. The `_@nrwl/angular:setup-tailwind_` generator is used to add **Tailwind CSS** support to existing projects.
+> **Angular** applications, buildable and publishable libraries can be created with **Tailwind CSS** support with a single command. We'll see that in the upcoming section. The `_@nrwl/angular:setup-tailwind_` generator is used to add **Tailwind CSS** support to existing projects.
Then, we create the card component:
@@ -383,7 +381,7 @@ export class CardComponent {
```
-Import `Lib2Module` into our application’s `AppModule`:
+Import `Lib2Module` into our application's `AppModule`:
```typescript {% fileName="app.module.ts" %}
...
@@ -420,7 +418,7 @@ And finally, replace the existing markup for the cards in the `apps/app1/src/app
```
-With that in place, we can serve the application and it should be working exactly as before, but our application is still not fully set up to consume the library build output. As it stands right now, when the application that’s consuming it is built, the library will be built together with it and its files will be processed as part of the application build pipeline.
+With that in place, we can serve the application and it should be working exactly as before, but our application is still not fully set up to consume the library build output. As it stands right now, when the application that's consuming it is built, the library will be built together with it and its files will be processed as part of the application build pipeline.
To finish the buildable library setup, we can follow the instructions in [/recipes/angular/setup-incremental-builds-angular](/recipes/angular/setup-incremental-builds-angular). We need to install the `@nrwl/web` package, change the application `build` target executor to `@nrwl/angular:webpack-browser`, and change the application `serve` target executor to `@nrwl/web:file-server`:
@@ -456,13 +454,13 @@ yarn add -D @nrwl/web@latest
You can now go ahead and serve the application to check everything is working as expected. You should see the buildable library being built on its own before the application is built and served.
-> The `@nrwl/web:file-server` executor uses the [http-server](https://www.npmjs.com/package/http-server) package to serve the built artifacts of our application. This is a lightweight HTTP server and it doesn’t do things like live-reload or HMR. Be sure to refresh your browser while making changes to see them reflected.
+> The `@nrwl/web:file-server` executor uses the [http-server](https://www.npmjs.com/package/http-server) package to serve the built artifacts of our application. This is a lightweight HTTP server and it doesn't do things like live-reload or HMR. Be sure to refresh your browser while making changes to see them reflected.
## Using Tailwind CSS directives and functions in buildable libraries
-Our application is consuming a buildable library and still working as intended, but if we think about it, we didn’t configure our theme in the library’s `tailwind.config.js` file. So, how is it still working?
+Our application is consuming a buildable library and still working as intended, but if we think about it, we didn't configure our theme in the library's `tailwind.config.js` file. So, how is it still working?
-If we go back to the decision tree shared in a previous section, we’ll see that a buildable library only needs a **Tailwind CSS** configuration if we use a **Tailwind CSS** directive or function. As of right now, our library is not using any. We are just using some utility classes and those are processed correctly as part of the application build. You could go ahead and delete the `tailwind.config.js` file from the library and check that everything still works the same (if you do, please make sure to restore it before we continue).
+If we go back to the decision tree shared in a previous section, we'll see that a buildable library only needs a **Tailwind CSS** configuration if we use a **Tailwind CSS** directive or function. As of right now, our library is not using any. We are just using some utility classes and those are processed correctly as part of the application build. You could go ahead and delete the `tailwind.config.js` file from the library and check that everything still works the same (if you do, please make sure to restore it before we continue).
Next, we are going to refactor our newly created card component to make use of some of these directives and functions and see the implications.
@@ -498,9 +496,9 @@ Update the card component files content as shown below:
We created some CSS classes where we are applying the same styles we had in the component template. We are applying those styles by using a combination of the `@apply` directive and the `theme` function.
-> Please note we are not recommending creating CSS classes for scenarios like the above. The card component is already a reusable component and there’s no need to extract CSS classes to style it. We are only extracting these classes to showcase how **Tailwind CSS** directives and functions can be correctly processed in buildable libraries. Make sure to check out the [**Tailwind CSS** recommendations for reusing styles](https://tailwindcss.com/docs/reusing-styles).
+> Please note we are not recommending creating CSS classes for scenarios like the above. The card component is already a reusable component and there's no need to extract CSS classes to style it. We are only extracting these classes to showcase how **Tailwind CSS** directives and functions can be correctly processed in buildable libraries. Make sure to check out the [**Tailwind CSS** recommendations for reusing styles](https://tailwindcss.com/docs/reusing-styles).
-If we now serve our application (or build the library), we’ll find ourselves with the following error:
+If we now serve our application (or build the library), we'll find ourselves with the following error:
```
------------------------------------------------------------------------------
@@ -509,9 +507,9 @@ Building entry point '@angular-tailwind-nx/lib2'
/angular-tailwind-nx/libs/lib2/src/lib/card/card.component.css:2:3: The `p-lg` class does not exist. If `p-lg` is a custom class, make sure it is defined within a `@layer` directive.
```
-This is to be expected. The library build is failing because now we are using some **Tailwind CSS** directives and functions, and therefore, those directives and functions are being processed within the library context. Since we haven’t touched the `tailwind.config.js` file, **Tailwind CSS** doesn’t know about our custom theme.
+This is to be expected. The library build is failing because now we are using some **Tailwind CSS** directives and functions, and therefore, those directives and functions are being processed within the library context. Since we haven't touched the `tailwind.config.js` file, **Tailwind CSS** doesn't know about our custom theme.
-To solve the issue, we need to configure the library to be aware of our custom theme so it can process the library’s files correctly. Let’s update the `theme` property of the `libs/lib2/tailwind.config.js` file to match our application theme:
+To solve the issue, we need to configure the library to be aware of our custom theme so it can process the library's files correctly. Let's update the `theme` property of the `libs/lib2/tailwind.config.js` file to match our application theme:
```javascript {% fileName="tailwind.config.js" %}
...
@@ -550,12 +548,12 @@ Well, no need to fret!
If we think about it, the same reasoning behind creating shared libraries applies to this. We just need to share the **Tailwind CSS** configuration. To do so, we have a couple of options:
-- Create a shared file containing and exporting the theme so it can be imported by every project’s `tailwind.config.js` file.
+- Create a shared file containing and exporting the theme so it can be imported by every project's `tailwind.config.js` file.
- Create a [**Tailwind CSS** preset](https://tailwindcss.com/docs/presets) to expose a base configuration for your projects.
The last option is the better one. We can take advantage of the **Tailwind CSS** built-in support for defining a base configuration to be reused across different projects. The first option is almost the same, with the difference that we have to manually handle merging the configurations.
-We’ll go ahead and create a **Tailwind CSS** preset and we’ll then use it in our projects. Start by creating a `tailwind.config.js` file in the root of the workspace with the following content:
+We'll go ahead and create a **Tailwind CSS** preset and we'll then use it in our projects. Start by creating a `tailwind.config.js` file in the root of the workspace with the following content:
```javascript {% fileName="tailwind.config.js" %}
module.exports = {
@@ -603,19 +601,19 @@ module.exports = {
};
```
-Notice how we added the preset and removed almost all the configuration because it’s already defined in the preset.
+Notice how we added the preset and removed almost all the configuration because it's already defined in the preset.
-That’s all it takes. You can go ahead and serve the application (or refresh the browser if you are already serving it) to check everything is running correctly.
+That's all it takes. You can go ahead and serve the application (or refresh the browser if you are already serving it) to check everything is running correctly.
## Sharing the Tailwind CSS preset in a library
-We now only have to maintain our theme in a single place as opposed to keeping in sync the configuration of all the different projects. But we can still improve the experience. As it stands, if you now make a change on the `tailwind.config.js` file located at the root of the workspace (our preset), the file server doesn’t pick up the change and therefore, it doesn’t rebuild the affected projects.
+We now only have to maintain our theme in a single place as opposed to keeping in sync the configuration of all the different projects. But we can still improve the experience. As it stands, if you now make a change on the `tailwind.config.js` file located at the root of the workspace (our preset), the file server doesn't pick up the change and therefore, it doesn't rebuild the affected projects.
-This happens because the file server is watching for changes under the `apps` and `libs` folders. The preset configuration is not under those directories, it’s in the root of the workspace.
+This happens because the file server is watching for changes under the `apps` and `libs` folders. The preset configuration is not under those directories, it's in the root of the workspace.
It would be better if we place the preset configuration in a small shared library. By doing that, we not only solve the issue regarding detecting changes on it, but we also make its library appear on the [**Nx** project graph](/concepts/mental-model), and with that, we benefit from all the goodies associated with the project graph (affected commands, enforcing module boundaries constraints, etc.).
-This library is only going to contain the `tailwind.config.js` file and no targets in the project configuration. There’s no generator among the **Nx** core plugins that generate such an empty library. We could use one of the library generators and remove some content, but let’s create it manually.
+This library is only going to contain the `tailwind.config.js` file and no targets in the project configuration. There's no generator among the **Nx** core plugins that generate such an empty library. We could use one of the library generators and remove some content, but let's create it manually.
Start by creating a new folder `libs/tailwind-preset` and moving the `tailwind.config.js` file we created in the previous section at the root of the workspace to that folder.
@@ -653,16 +651,16 @@ const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config
Once again, if we serve our application everything should still be working as expected, but now our file server will pick up the changes made to the **Tailwind CSS** preset configuration.
-Also, if we visualize the workspace projects we’ll see how `app1` and `lib2` now have a dependency on `tailwind-preset`:
+Also, if we visualize the workspace projects we'll see how `app1` and `lib2` now have a dependency on `tailwind-preset`:
_Project graph showing dependencies between the projects in the workspace_
## Creating the second application
-We are now at a stage where we can develop our second application without having to duplicate the common functionality. So, before going ahead and distributing our buttons in a publishable library, let’s first create the second application to see how we can reuse what we have been putting into libraries.
+We are now at a stage where we can develop our second application without having to duplicate the common functionality. So, before going ahead and distributing our buttons in a publishable library, let's first create the second application to see how we can reuse what we have been putting into libraries.
-There’s one important thing to note though, this new application will have a different theme.
+There's one important thing to note though, this new application will have a different theme.
Generate the application by running the following command:
@@ -674,7 +672,7 @@ The above command will generate the new application and it will configure **Tail
> The `--addTailwind` flag is available in both `@nrwl/angular:app` and `@nrwl/angular:lib` generators.
-Let’s now update the application to use the shared components and achieve the layout we are after. Start by updating the `apps/app2/src/app/app.module.ts` to import `Lib1Module` and `Lib2Module`:
+Let's now update the application to use the shared components and achieve the layout we are after. Start by updating the `apps/app2/src/app/app.module.ts` to import `Lib1Module` and `Lib2Module`:
```typescript {% fileName="app.module.ts" %}
...
@@ -689,7 +687,7 @@ import { Lib2Module } from '@angular-tailwind-nx/lib2';
export class AppModule {}
```
-Next, update the `apps/app2/src/app/app.component.html` file with the required markup and **Tailwind CSS** utility classes to achieve our application’s layout and using the component exported by the shared libraries we previously created:
+Next, update the `apps/app2/src/app/app.component.html` file with the required markup and **Tailwind CSS** utility classes to achieve our application's layout and using the component exported by the shared libraries we previously created:
```angular2html {% fileName="app.component.html" %}
@@ -740,7 +738,7 @@ Like we did with `app1`, we also need to update the `build` and `serve` targets
}
```
-Last but not least, we need to configure **Tailwind CSS** with our custom theme for `app2`. We’ll do that by updating the `apps/app2/tailwind.config.js` file with the following:
+Last but not least, we need to configure **Tailwind CSS** with our custom theme for `app2`. We'll do that by updating the `apps/app2/tailwind.config.js` file with the following:
```javascript {% fileName="tailwind.config.js" %}
...
@@ -772,31 +770,31 @@ module.exports = {
};
```
-Now that we have the second application configured, let’s run it:
+Now that we have the second application configured, let's run it:
```shell
npx nx run app2:serve
```
-> You can pass a `--port=4201` to the above command to run it in a different port if it’s in use or if you want to have both applications running side-by-side.
+> You can pass a `--port=4201` to the above command to run it in a different port if it's in use or if you want to have both applications running side-by-side.
Now, open your browser and navigate to it where you should see the application looking like the following screenshot:
_Application 2 screenshot_
-That does indeed look different, but something is off. The card background color is not right, it’s still the same used for `app1` even though we provided a different theme. Also, some of the spacing for the elements within the card doesn’t seem to have changed according to our configuration.
+That does indeed look different, but something is off. The card background color is not right, it's still the same used for `app1` even though we provided a different theme. Also, some of the spacing for the elements within the card doesn't seem to have changed according to our configuration.
What is going on here?
You might have realized a couple of things by now:
-- The card component comes from `lib2` which is a buildable library and as such, it’s built on its own using its own **Tailwind CSS** configuration
+- The card component comes from `lib2` which is a buildable library and as such, it's built on its own using its own **Tailwind CSS** configuration
- `app1` and `lib2` use a **Tailwind CSS** preset to share the common configuration, while `app2` is adding its own
-So, the first bullet point above would explain why the card component looks like the one rendered using the theme for `app1`. But that’s not exactly what we are seeing, the buttons inside the card look different than what we have in `app1`. This is explained by the fact that the buttons are styled without using any **Tailwind CSS** directive or function, they just use utility classes, so the CSS for them is generated in the `app2` build using the application configuration. The rest of the card does use directives and functions, so the CSS for that is generated in the `lib2` build using the library configuration.
+So, the first bullet point above would explain why the card component looks like the one rendered using the theme for `app1`. But that's not exactly what we are seeing, the buttons inside the card look different than what we have in `app1`. This is explained by the fact that the buttons are styled without using any **Tailwind CSS** directive or function, they just use utility classes, so the CSS for them is generated in the `app2` build using the application configuration. The rest of the card does use directives and functions, so the CSS for that is generated in the `lib2` build using the library configuration.
-Also, we previously created a **Tailwind CSS** preset so we could share the base configuration among different projects. The problem is that all those projects shared a common theme, but `app2` requires a different one, so we can’t just use the preset as it is right now.
+Also, we previously created a **Tailwind CSS** preset so we could share the base configuration among different projects. The problem is that all those projects shared a common theme, but `app2` requires a different one, so we can't just use the preset as it is right now.
So, how do we solve this?
@@ -804,7 +802,7 @@ Enter CSS variables!
We can configure the **Tailwind CSS** preset to use CSS variables. This will allow each application to provide its own values for the variables and therefore, it enables us to have multiple themes using the same **Tailwind CSS** configuration.
-Let’s update our preset in the `libs/tailwind-preset/tailwind.config.js` file to use CSS variables instead of literal values:
+Let's update our preset in the `libs/tailwind-preset/tailwind.config.js` file to use CSS variables instead of literal values:
```javascript {% fileName="tailwind.config.js" %}
module.exports = {
@@ -894,7 +892,7 @@ We need to do the same for `app1`. Edit the `apps/app1/src/styles.css` file with
}
```
-Let’s serve again `app2` and navigate to it to check the results of our changes:
+Let's serve again `app2` and navigate to it to check the results of our changes:
_Application 2 screenshot_
@@ -1000,11 +998,11 @@ Once more, we can check both applications and make sure everything is still work
## Distributing the publishable library styles
-The recently created publishable library is already being used successfully by both applications, but it’s still not ready for distribution. If we were to share it now, external consumers will need to provide their own CSS for it because the library itself is not bundling any CSS with the styling for the button. We only used some **Tailwind CSS** utility classes and as we have seen throughout this blog post, the CSS for them is generated in files containing `@tailwind` directives (normally in application style entry points).
+The recently created publishable library is already being used successfully by both applications, but it's still not ready for distribution. If we were to share it now, external consumers would need to provide their own CSS for it because the library itself is not bundling any CSS with the styling for the button. We only used some **Tailwind CSS** utility classes and as we have seen throughout this blog post, the CSS for them is generated in files containing `@tailwind` directives (normally in application style entry points).
> Within the workspace, it works as expected because the applications consuming it use the same shared **Tailwind CSS** preset and their dependencies are included in the `content` of their configuration.
-The library needs to contain everything that’s needed for it to work and to achieve this, we are going to do something we already did with our buildable library: create our own classes using the `@apply` directive.
+The library needs to contain everything that's needed for it to work and to achieve this, we are going to do something we already did with our buildable library: create our own classes using the `@apply` directive.
As we learned in a previous section, the `@apply` directive will be transformed into the CSS corresponding to the **Tailwind CSS** classes being applied. Thanks to this, our button component will contain the CSS needed to style it.
@@ -1024,7 +1022,7 @@ Go ahead and update the button component files with a new CSS class for the butt
I used the prefix `atn` (initials of **A**ngular, **T**ailwind CSS, and **N**x) for the CSS class name to prevent potential name collisions with the consumers' applications CSS.
-Also, let’s update the `libs/lib3/src/lib/button/button.component.ts` file to set the component’s `encapsulation` to `ViewEncapsulation.None` to allow consumers to overwrite its styles more easily:
+Also, let's update the `libs/lib3/src/lib/button/button.component.ts` file to set the component's `encapsulation` to `ViewEncapsulation.None` to allow consumers to overwrite its styles more easily:
```typescript {% fileName="button.component.ts" %}
@@ -1043,7 +1041,7 @@ If we build our library now, the styles for the button component will be correct
We need to provide an initial theme that sets those CSS variables so the library components can be consumed without any additional setup. Actually, we are going to generate a couple of theme options so we can see how multiple themes can be provided.
-Let’s start by creating a `libs/lib3/src/styles/teal.css` theme file where we are going to import the **Tailwind CSS** `components` and `utilities` layers and define the values for the CSS variables of our theme:
+Let's start by creating a `libs/lib3/src/styles/teal.css` theme file where we are going to import the **Tailwind CSS** `components` and `utilities` layers and define the values for the CSS variables of our theme:
```css {% fileName="teal.css" %}
@tailwind components;
@@ -1068,7 +1066,7 @@ Let’s start by creating a `libs/lib3/src/styles/teal.css` theme file where we
}
```
-Notice that we didn’t include the `base` layer like we have done so far in the applications style entry points. This is because this is a component library and the `base` layer generates a set of application-wide base styles and that’s not what we want to generate here.
+Notice that we didn't include the `base` layer like we have done so far in the applications style entry points. This is because this is a component library and the `base` layer generates a set of application-wide base styles and that's not what we want to generate here.
Next, we generate our second theme by creating the `libs/lib3/src/styles/indigo.css` theme file with different values for the CSS variables:
@@ -1095,11 +1093,11 @@ Next, we generate our second theme by creating the `libs/lib3/src/styles/indigo.
}
```
-With that in place, we now need to make sure those theme files are processed when we build the library. The `@nrwl/angular:package` executor is powered by the [**ng-packagr**](https://github.com/ng-packagr/ng-packagr) package to build the library. This is a tool recommended by **Angular** to ensure libraries are distributed using the [Angular Package Format](https://angular.io/guide/angular-package-format). Unfortunately, it doesn’t have native support for building standalone stylesheets that are not referenced by a component, so we need to configure it ourselves.
+With that in place, we now need to make sure those theme files are processed when we build the library. The `@nrwl/angular:package` executor is powered by the [**ng-packagr**](https://github.com/ng-packagr/ng-packagr) package to build the library. This is a tool recommended by **Angular** to ensure libraries are distributed using the [Angular Package Format](https://angular.io/guide/angular-package-format). Unfortunately, it doesn't have native support for building standalone stylesheets that are not referenced by a component, so we need to configure it ourselves.
-To do so, we are going to use the **Tailwind CSS** CLI to process our stylesheets when the library is built and we’ll do it in parallel since they don’t depend on each other. One aspect to consider is that the `@nrwl/angular:package` executor will delete the destination folder before building. When running both processes in parallel, the styles might be generated first and then the directory containing them is deleted by the `@nrwl/angular:package` executor. Therefore, we are going to disable that behavior and we are going to control when to delete the destination folder to avoid any issues.
+To do so, we are going to use the **Tailwind CSS** CLI to process our stylesheets when the library is built and we'll do it in parallel since they don't depend on each other. One aspect to consider is that the `@nrwl/angular:package` executor will delete the destination folder before building. When running both processes in parallel, the styles might be generated first and then the directory containing them is deleted by the `@nrwl/angular:package` executor. Therefore, we are going to disable that behavior and we are going to control when to delete the destination folder to avoid any issues.
-Another thing to consider is that the **Tailwind CSS** CLI only supports processing one file at a time, it doesn’t accept glob patterns or directories. We’ll need to run a command per theme in our library.
+Another thing to consider is that the **Tailwind CSS** CLI only supports processing one file at a time, it doesn't accept glob patterns or directories. We'll need to run a command per theme in our library.
To orchestrate this, we are going to make the following changes to the `lib3` project configuration:
@@ -1198,7 +1196,7 @@ We can now build the library by running:
npx nx run lib3:build
```
-If we check the output folder `dist/libs/lib3`, we’ll see there’s a `themes` folder in it with a couple of files `indigo.css` and `teal.css`:
+If we check the output folder `dist/libs/lib3`, we'll see there's a `themes` folder in it with a couple of files `indigo.css` and `teal.css`:
_Publishable library with the produced theme files highlighted_
diff --git a/docs/blog/2022-02-01-share-code-between-react-web-react-native-mobile-with-nx.md b/docs/blog/2022-02-01-share-code-between-react-web-react-native-mobile-with-nx.md
index c4eaa0548fe59..0decd097b39b6 100644
--- a/docs/blog/2022-02-01-share-code-between-react-web-react-native-mobile-with-nx.md
+++ b/docs/blog/2022-02-01-share-code-between-react-web-react-native-mobile-with-nx.md
@@ -4,11 +4,12 @@ slug: 'share-code-between-react-web-react-native-mobile-with-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2022-02-01/lL-fGNaIGYBC_eOBwSvdBw.png'
tags: [nx, tutorial]
+description: Learn how to create and manage React web and React Native mobile apps in an Nx monorepo, with guidance on sharing code and handling platform differences.
---
**A problem I try to solve:** I got this awesome idea, not only do I want to create a web app, but I also want to create a mobile app for it. Usually creating web and mobile apps require totally different tech stacks, and it is pretty hard to share code. This article shows how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between the two.
-I am mostly a web developer, so let’s start with the web app first: [https://xiongemi.github.io/studio-ghibli-search-engine](https://xiongemi.github.io/studio-ghibli-search-engine). It is a search engine for movies and characters under Studio Ghibli:
+I am mostly a web developer, so let's start with the web app first: [https://xiongemi.github.io/studio-ghibli-search-engine](https://xiongemi.github.io/studio-ghibli-search-engine). It is a search engine for movies and characters under Studio Ghibli:
_Screenshot of web app_
@@ -17,7 +18,7 @@ Example Repo: [xiongemi/studio-ghibli-search-engine](https://github.com/xiongemi
Github page: [https://xiongemi.github.io/studio-ghibli-search-engine](https://github.com/xiongemi/studio-ghibli-search-engine)
-Now let’s create the corresponding mobile version of this app.
+Now let's create the corresponding mobile version of this app.
## Tech Stack
@@ -25,7 +26,7 @@ Now let’s create the corresponding mobile version of this app.
- Web Frontend: [React](https://reactjs.org/)
- API: [https://ghibliapi.herokuapp.com/](https://ghibliapi.herokuapp.com/)
-Currently, there’s only a React web app within our Nx workspace. If I run `nx graph`, the dependency graph looks like the below:
+Currently, there's only a React web app within our Nx workspace. If I run `nx graph`, the dependency graph looks like the below:
_Dependency graph_
@@ -46,7 +47,7 @@ Next, we can generate a new React Native app by running:
npx nx generate @nrwl/react-native:app studio-ghibli-search-engine-mobile
```
-> Note, if you’re using VSCode you might want to try [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) for a more visual experience of running such commands.
+> Note, if you're using VSCode you might want to try [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) for a more visual experience of running such commands.
As a result of running the above command, you should now have two new folders under the `apps` directory: `studio-ghibli-search-engine-mobile` and `studio-ghibli-search-engine-mobile-e2e`
@@ -68,7 +69,7 @@ Even though our goal is to share as much as possible between our React web app a
We have to rewrite all the UI components for the mobile app. Unlike [Cordova](https://cordova.apache.org/) or [Ionic](https://ionicframework.com/), React Native is NOT a webview. The JavaScript we wrote got interpreted and converted to mobile native elements. Hence we cannot simply reuse UI HTML elements written for the React web app.
-Here’s a quick list of libraries we’ve used for the React web app and a corresponding React Native counterpart library we can use.
+Here's a quick list of libraries we've used for the React web app and a corresponding React Native counterpart library we can use.
**Routing**
@@ -246,7 +247,7 @@ Nx comes with a set of different options for [handling environment variables](/r
NX_REQUEST_BASE_URL=://ghibliapi.herokuapp.com
```
-This works nicely for our React web build, but it doesn’t for our React Native application. This is because React Native and React apps use different Javascript bundlers. React Native uses [Metro](https://facebook.github.io/metro/) and React uses [Webpack](https://webpack.js.org/). Therefore, when we try to access `process.env.NX_REQUEST_BASE_URL`, we get `undefined`.
+This works nicely for our React web build, but it doesn't for our React Native application. This is because React Native and React apps use different Javascript bundlers. React Native uses [Metro](https://facebook.github.io/metro/) and React uses [Webpack](https://webpack.js.org/). Therefore, when we try to access `process.env.NX_REQUEST_BASE_URL`, we get `undefined`.
To solve this, we can use the [react-native-config](https://github.com/luggit/react-native-config) library
@@ -256,7 +257,7 @@ npm install react-native-config --save-dev# yarn
yarn add react-native-config --dev
```
-Here’s an example of how to set up [react-native-config](https://github.com/luggit/react-native-config): [https://github.com/luggit/react-native-config#setup](https://github.com/luggit/react-native-config#setup).
+Here's an example of how to set up [react-native-config](https://github.com/luggit/react-native-config): [https://github.com/luggit/react-native-config#setup](https://github.com/luggit/react-native-config#setup).
After that, we can have a simple utility function to retrieve the environment variables in our app.
@@ -267,11 +268,11 @@ export function getEnv(envName: string) {
}
```
-To access the environment variable `NX_REQUEST_BASE_URL`, we can then simply use the above function:`getEnv(‘NX_REQUEST_BASE_URL’)`.
+To access the environment variable `NX_REQUEST_BASE_URL`, we can then simply use the above function:`getEnv('NX_REQUEST_BASE_URL')`.
### Fetch With HTTP
-On the web, you most probably lean on the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to make network requests. On iOS, however, you’ll get an error saying: `TypeError: Network request failed`.
+On the web, you most probably lean on the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to make network requests. On iOS, however, you'll get an error saying: `TypeError: Network request failed`.
It turns out that React Native does not allow HTTP requests by default: [https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed](https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed).
@@ -466,7 +467,7 @@ _Screenshots of Mobile App (left: iOS, right: Android)_
In this article, we ended up building both, a React-based web application and a corresponding React Native app in the same repository using Nx.
-Nx’s architecture promotes the separation of concerns, splitting things into `apps` (which are technology-specific) and `libs` which can be technology-specific or technology-independent. That allows us to easily have our common business logic in a technology-independent library which in turn (thanks to Nx’s setup) be easily linked to both, our React web and React Native mobile app.
+Nx's architecture promotes the separation of concerns, splitting things into `apps` (which are technology-specific) and `libs` which can be technology-specific or technology-independent. That allows us to easily have our common business logic in a technology-independent library which in turn (thanks to Nx's setup) be easily linked to both, our React web and React Native mobile app.
Although there are UI-specific differences we need to account for, that simply comes with one being a web tech stack and the other being a native app, we were still able to share big chunks of the technology-independent business logic of our application. That ultimately helps with maintenance and having feature parity across different platforms.
diff --git a/docs/blog/2022-03-23-introducing-expo-support-for-nx.md b/docs/blog/2022-03-23-introducing-expo-support-for-nx.md
index 612ff0bf83975..8c849f38cfbe0 100644
--- a/docs/blog/2022-03-23-introducing-expo-support-for-nx.md
+++ b/docs/blog/2022-03-23-introducing-expo-support-for-nx.md
@@ -4,6 +4,7 @@ slug: 'introducing-expo-support-for-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2022-03-23/yYc8g4ifk9RApSjAhQysag.png'
tags: [nx, release]
+description: Introducing @nrwl/expo for seamless Expo integration in Nx monorepos, with a tutorial on building a poetry app using Expo's development tools.
---
We are very excited to announce our support for Expo with our new package `@nrwl/expo`. In addition to the React Native support, with this release of `@nrwl/expo`, you will be able to easily develop mobile apps in the monorepo. If you use Expo in a monorepo then Nx is the tool for you.
@@ -17,7 +18,7 @@ Github Repo: [xiongemi/nx-expo-poetry](https://github.com/xiongemi/nx-expo-poetr
## Before We Start
-When I just started to try out Expo, the first questions came to my mind were “what is the difference between Expo and React Native” and “when to choose Expo and when to choose React Native”? In short, Expo is a set of tools built on top of React Native. You can read it more at [https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native](https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native).
+When I just started to try out Expo, the first questions came to my mind were "what is the difference between Expo and React Native" and "when to choose Expo and when to choose React Native"? In short, Expo is a set of tools built on top of React Native. You can read it more at [https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native](https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native).
Now I have created an app with Expo, to me, the most significant differences are developer experience and the build process.
@@ -32,7 +33,7 @@ Moreover, Expo provides [Expo Application Services(EAS)](https://docs.expo.dev/e
## Setup
-First, let’s create an Nx workspace:
+First, let's create an Nx workspace:
```shell
npx create-nx-workspace nx-expo-poetry --preset=empty
@@ -73,7 +74,7 @@ _Expo Development Server_
## Create First Page
-Now we got the app running, let’s create our first page. In this example, we are going to use the [React Native Paper](https://callstack.github.io/react-native-paper/) as the material design library. To install:
+Now we got the app running, let's create our first page. In this example, we are going to use the [React Native Paper](https://callstack.github.io/react-native-paper/) as the material design library. To install:
```shell
# npm
@@ -83,7 +84,7 @@ npm install react-native-paper --save
yarn add react-native-paper
```
-Then, let’s create our first component. This component simply displays a poem on the page.
+Then, let's create our first component. This component simply displays a poem on the page.
First, to add a component file under the app, run the below command:
@@ -291,11 +292,11 @@ With Nx, we can create as many libraries as we want to handle different concerns
I hope you found this useful, and we look forward to hearing your [feedback](https://github.com/nrwl/nx-labs/issues).
-If you’re new to Nx and want to learn more, visit [our docs](/getting-started/intro)**.**
+If you're new to Nx and want to learn more, visit [our docs](/getting-started/intro)**.**
_(Note, the repository with the code for this article is linked at the very top.)_
-This app is also available in the app store, just search “Poem of the Day”:
+This app is also available in the app store, just search "Poem of the Day":
Android:
diff --git a/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md b/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md
index 4b8256725d959..904777d10d1f5 100644
--- a/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md
+++ b/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md
@@ -1,16 +1,17 @@
---
-title: 'The React CLI you always wanted but didn’t know about'
+title: "The React CLI you always wanted but didn't know about"
slug: 'the-react-cli-you-always-wanted-but-didnt-know-about'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-03-29/YR6QUEZel3nlNcTo6Pdlwg.png'
tags: [nx]
+description: Discover Nx as a powerful CLI for React development with built-in project generation, build tools, and pre-configured integrations for modern tooling.
---
-_In this article, I’d like to specifically talk about developer tooling, why it is so massively important and how you might have missed out on Nx as your main React CLI for kickstarting new awesome projects._
+_In this article, I'd like to specifically talk about developer tooling, why it is so massively important and how you might have missed out on Nx as your main React CLI for kickstarting new awesome projects._
It is awesome to be a JavaScript developer nowadays. The JavaScript ecosystem has evolved a lot in recent years. For the better! Speed has become a major focus, both from the framework perspective of running the app in production, as well as the speed of developing, testing, and building JavaScript/TypeScript from a developer tooling point of view. Frameworks and libraries such as Next.js, Astro, Qwik and Remix (just to name a few) have brought some great innovations to push the web even further.
-While speed is of major importance, developer ergonomics shouldn’t be left behind. Both of them greatly contribute to the overall productivity and also developer happiness 🙂. Let’s see how Nx can help with that.
+While speed is of major importance, developer ergonomics shouldn't be left behind. Both of them greatly contribute to the overall productivity and also developer happiness 🙂. Let's see how Nx can help with that.
**Prefer the video version?**
@@ -18,32 +19,32 @@ While speed is of major importance, developer ergonomics shouldn’t be left beh
## Update (Aug 2023): Want a non-monorepo setup?
-This article walks you through how to setup a new Nx monorepo workspace with React. If you rather prefer starting with a single-project setup (also named “standalone”) then you might want to have a look at this tutorial (including video):
+This article walks you through how to setup a new Nx monorepo workspace with React. If you rather prefer starting with a single-project setup (also named "standalone") then you might want to have a look at this tutorial (including video):
[/getting-started/tutorials/react-standalone-tutorial](/getting-started/tutorials/react-standalone-tutorial)
## Why use a devtool CLI?
-Regardless of whether you’re a seasoned developer or someone new just getting started with React: the last thing you want to have to deal with is to manually set up all the tooling to actually get started and be productive. You want to be able to focus on the actual task, like learning React or kicking off that new shiny project.
+Regardless of whether you're a seasoned developer or someone new just getting started with React: the last thing you want to have to deal with is to manually set up all the tooling to actually get started and be productive. You want to be able to focus on the actual task, like learning React or kicking off that new shiny project.
-Still, we definitely want to **have good defaults set up for us**. Things like the latest build tooling, tooling for writing unit tests as well as e2e tests, code quality tools like linters, and we definitely also don’t want to argue about tabs vs spaces or spend time formatting our code: Prettier can help with that.
+Still, we definitely want to **have good defaults set up for us**. Things like the latest build tooling, tooling for writing unit tests as well as e2e tests, code quality tools like linters, and we definitely also don't want to argue about tabs vs spaces or spend time formatting our code: Prettier can help with that.
Taking the time to set up a starter kit or template would work. But it is time-consuming, requires a lot of knowledge, and especially needs maintenance to update the tools over time. That rarely works out well in the long run, unless this is your job.
-## Nx — from a bird’s eye view
+## Nx — from a bird's eye view
What you usually want is a CLI, a command-line interface that helps you develop and deal with the underlying build infrastructure, something that sets you up with modern up-to-date tooling and also keeps those updated!
Nx comes with such a CLI, it is widely adopted by the Angular, React and Node community currently being downloaded more than 1.3 million times a week. Nx is [fully open source](https://github.com/nrwl/nx) (MIT licensed), baked by [Nrwl](/company) and the [community](https://go.nx.dev/community).
-From a bird’s eye view, Nx comes with
+From a bird's eye view, Nx comes with
-- Code generators to generate new projects, configuration but also components, Redux setup, routes…
+- Code generators to generate new projects, configuration but also components, Redux setup, routes...
- Out of the box support for modern tools such as TypeScript, Webpack, Babel, SWC, Jest, Cypress, ESLint, Prettier, Storybook and more
- It keeps tooling up to date via dedicated migration commands
- Speed! Nx uses local computation caching that can be extended with Nx Cloud (which is basically free) to remote caching and DTE (Distributed Task Execution).
-But let’s have a deeper look at how Nx works exactly.
+But let's have a deeper look at how Nx works exactly.
## Using Nx
@@ -57,20 +58,20 @@ Open your favorite terminal window and type:
npx create-nx-workspace@latest myorg
```
-> _Note, I’m using_ `_npx_` _to not have to install the Nx CLI globally. If you want to, you totally can:_ `_npm i nx -g_`
+> _Note, I'm using_ `_npx_` _to not have to install the Nx CLI globally. If you want to, you totally can:_ `_npm i nx -g_`
-`myorg` is the scope of your Nx workspace. Think of it as your NPM scope in case you’d publish an npm package. In the case you create libraries in this new Nx workspace (more about that later), it would be used to import those, like
+`myorg` is the scope of your Nx workspace. Think of it as your NPM scope in case you'd publish an npm package. In the case you create libraries in this new Nx workspace (more about that later), it would be used to import those, like
```typescript
import { someFunc } from '@myorg/somelib';
```
-What you’ll get is a setup wizard that guides you through creating your application. We would most likely choose “React” in this case.
+What you'll get is a setup wizard that guides you through creating your application. We would most likely choose "React" in this case.
_Nx CLI guides through the setup process_
-As part of this process, you’ll be asked to pick an “Application name”. This is simply the application Nx is going to generate for us to get started: `happynrwl` would be a nice name 🙂.
+As part of this process, you'll be asked to pick an "Application name". This is simply the application Nx is going to generate for us to get started: `happynrwl` would be a nice name 🙂.
You should end up with a new Nx workspace and our `happynrwl` React app in the `apps/` folder.
@@ -85,7 +86,7 @@ To serve our React app, run
npx nx serve happynrwl
```
-> _Note I prefix the commands with_ `_npx_`_, which is just a way to use the local_ `_nx_` _binary from the_ `_node_modules_` _folder of our workspace. Also, this way we don’t have to install Nx globally. If you prefer doing that, run_ `_npm install -g nx_`_._
+> _Note I prefix the commands with_ `_npx_`_, which is just a way to use the local_ `_nx_` _binary from the_ `_node_modules_` _folder of our workspace. Also, this way we don't have to install Nx globally. If you prefer doing that, run_ `_npm install -g nx_`_._
Going to [http://localhost:4200](http://localhost:4200/) should show the running React app located in `apps/happynrwl`.
@@ -107,13 +108,13 @@ _Output folder assets when building the React app_
Nx has another nice feature that basically comes for free: [computation caching](/concepts/how-caching-works). For every command Nx runs, it computes a unique hash that contains information about the involved source code, environment variables and the command itself. Next time the same conditions are met, the command is not executed again, but rather pulled out of a cache. As you can imagine, this drammatically speeds up things.
-If you’re curious and want to learn more, check out the docs page on [computation caching](/concepts/how-caching-works) and how to leverage [Nx Cloud](/nx-cloud) to store the cache remotely for sharing it with your team members. Also, Nx Cloud pricing recently changed, which makes it basically free for everyone.
+If you're curious and want to learn more, check out the docs page on [computation caching](/concepts/how-caching-works) and how to leverage [Nx Cloud](/nx-cloud) to store the cache remotely for sharing it with your team members. Also, Nx Cloud pricing recently changed, which makes it basically free for everyone.
## Code Generators!
-One of the core parts of Nx is code generators. As the name already suggests, code generators generate source code and configuration. That can range from a single React component file to an entire project with all that is needed. You basically already saw them in action when you created the initial project setup. But there’s more to explore! Every Nx plugin (e.g. `@nrwl/react`, `@nrwl/next`,...) come with their own set of generators. All of them are invoked with the `npx nx generate` or short `npx nx g` command.
+One of the core parts of Nx is code generators. As the name already suggests, code generators generate source code and configuration. That can range from a single React component file to an entire project with all that is needed. You basically already saw them in action when you created the initial project setup. But there's more to explore! Every Nx plugin (e.g. `@nrwl/react`, `@nrwl/next`,...) come with their own set of generators. All of them are invoked with the `npx nx generate` or short `npx nx g` command.
-Let’s for instance generate a new component for our React application:
+Let's for instance generate a new component for our React application:
```shell
npx nx generate @nrwl/react:component HelloWorld
@@ -133,11 +134,11 @@ Many of these generators come with a rich set of flags. For example, passing `--
- **Nx documentation** — use the search function there or just navigate the docs. All the reference pages are structured like `nx.dev/packages/`. As an example for React that would look like: [/nx-api/react](/nx-api/react).
- `npx nx list` - lists a set of installed plugins as well as other available plugins that can be installed. To get a list of generators for a specific plugin - say for the `@nrwl/react` plugin - run `npx nx list @nrwl/react`. Similarly, you can then run `npx nx g @nrwl/react:lib --help` to get help for a particular generator
-However, the absolute easiest way to explore the potential and even use Nx if you are not the “terminal type of person” is [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)! I’ll go a bit deeper into that in a later section.
+However, the absolute easiest way to explore the potential and even use Nx if you are not the "terminal type of person" is [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)! I'll go a bit deeper into that in a later section.
## State of the Art Tooling Preconfigured
-When setting up a new React project (that also holds for Angular, Node, Next.js,…), you do not only get the React project, but also a set of tools preconfigured that help you stay productive and produce higher quality code. These are
+When setting up a new React project (that also holds for Angular, Node, Next.js,...), you do not only get the React project, but also a set of tools preconfigured that help you stay productive and produce higher quality code. These are
- TypeScript
- ESLint
@@ -147,7 +148,7 @@ When setting up a new React project (that also holds for Angular, Node, Next.js,
The Nx core team closely collaborates with these open source projects to not only make sure they integrate seamlessly with the React setup but also to keep them updated over time as those tools evolve. In fact, by using [automated code migrations](https://egghead.io/lessons/javascript-update-your-nx-workspace-with-nx-migrations) updating your Nx workspace will automatically also update those tools and the corresponding config files for you.
-Let’s have a closer look.
+Let's have a closer look.
## TypeScript as a first-class citizen!
@@ -174,7 +175,7 @@ npx nx lint happynrwl
Similar to the linting setup, every project in an Nx workspace has a test runner preconfigured already. By default, Nx comes with [Jest](https://jestjs.io/).
-At the root of every project, there’s a `jest.config.js` which already comes with proper transformers to support TypeScript and TSX/JSX. If you need to further customize how Jest should behave for this project, this is the place to do that.
+At the root of every project, there's a `jest.config.js` which already comes with proper transformers to support TypeScript and TSX/JSX. If you need to further customize how Jest should behave for this project, this is the place to do that.
_Jest configuration in an Nx workspace_
@@ -189,8 +190,8 @@ Obviously, you can pass parameters to customize the Jest run, like
- `--watch` for interactive mode
- `--t` to execute tests that match a given pattern
-- `--testFile="apps/happynrwl/src/app/hello-world/hello-world.spec.tsx”` to run a specific file
-- …
+- `--testFile="apps/happynrwl/src/app/hello-world/hello-world.spec.tsx" to run a specific file
+- ...
If you happen to use [VSCode](https://code.visualstudio.com/), the easiest way however is to install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) and leverage its code lens feature to run and debug Jest tests:
@@ -206,7 +207,7 @@ Whenever you generate a new project in an Nx workspace, you have the option to a
_Cypress e2e app generated by Nx along-side the main React app_
-The awesome part of this is that you don’t have to configure anything at all. No need to
+The awesome part of this is that you don't have to configure anything at all. No need to
- make sure TypeScript runs smoothly with Cypress
- set up linting for our e2e project (yes writing good quality test code is just as important)
@@ -220,7 +221,7 @@ npx e2e happynrwl-e2e
You can also pass `--watch` to run it interactively with the Cypress test runner such that the tests get re-executed whenever we change our source.
-## Don’t argue over code formatting — use Prettier!
+## Don't argue over code formatting — use Prettier!
Are you a `tabs` or `spaces` person? Use semicolons or not? What about trailing commas? We all know that we devs can have some strong opinions on this 😅. But honestly, there are probably more important things to focus on. Luckily [Prettier](https://prettier.io/) can help a ton with these issues. It is opinionated with just very few configuration options and just takes away the burden of formatting the code.
@@ -234,7 +235,7 @@ npx nx format
-Nx really is an advanced CLI based development tool. But regardless of whether you are a command line person or not, if you happen to use [VSCode](https://code.visualstudio.com/) make sure you install the [Nx Console extension](/getting-started/editor-setup) from the [marketplace](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console).
+Nx really is an advanced CLI based development tool. But regardless of whether you are a command line person or not, if you happen to use [VSCode](https://code.visualstudio.com/), make sure you install the [Nx Console extension](/getting-started/editor-setup) from the [marketplace](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console).
> _For_ [_Webstorm_](https://www.jetbrains.com/webstorm/) _there are two community extensions that can be used:_ [_nx-webstorm_](https://plugins.jetbrains.com/plugin/15000-nx-webstorm) _and_ [_Nx Console Idea_](https://plugins.jetbrains.com/plugin/15101-nx-console-idea)_._
@@ -245,11 +246,11 @@ _Nx Console VSCode extension_
A couple of things:
-- (2) is the panel where you see a fixed command “Generate” to invoke the Nx generator for creating new projects, libraries etc as we mentioned before. In addition you see a list of available commands to run.
+- (2) is the panel where you see a fixed command "Generate" to invoke the Nx generator for creating new projects, libraries etc as we mentioned before. In addition you see a list of available commands to run.
- (3) shows additional commands that are commonly used in an Nx workspace. Feel free to click and explore them.
- (4) shows a list of projects in your workspace. We really just have our React app and Cypress e2e application, but potentially you could add more. See [Nx applications and libraries](/concepts/decisions/project-size) for more.
-Let’s take the example of generating a new React component, just as we did before, but this time using Nx Console. This is how you’d do that:
+Let's take the example of generating a new React component, just as we did before, but this time using Nx Console. This is how you'd do that:
_Actions to generate a new React component with Nx Console_
@@ -259,7 +260,7 @@ Once you click the entry in the dropdown list, the Nx Console generate form open
_Detail form shown by Nx Console to generate a new React component_
-Whenever you change something in the form (1), you’ll automatically see a dry-run in the console that opens below (2). That shows what would happen if you run the command and is equivalent of adding the `--dry-run` flag whenever you’d run the command on the terminal. Once you’re ready, hit the “Run” button (3), or click the copy symbol (4) to copy the full command into your clipboard s.t. you can then paste it into your terminal.
+Whenever you change something in the form (1), you'll automatically see a dry-run in the console that opens below (2). That shows what would happen if you run the command and is equivalent of adding the `--dry-run` flag whenever you'd run the command on the terminal. Once you're ready, hit the "Run" button (3), or click the copy symbol (4) to copy the full command into your clipboard s.t. you can then paste it into your terminal.
As you can see this approach is also really powerful for exploring different commands and their corresponding options.
@@ -274,7 +275,7 @@ One of the advantages of using Nx over — say CRA or a custom starter template
Just to mention an example: when upgrading Nx to v13, all Nx users automatically got migrated to Webpack 5.
-This is possible with Nx’s [migrate command](/nx-api/nx/documents/migrate) that allows you to keep up to date with your framework in a mostly automated fashion. Whenever you upgrade Nx, you run
+This is possible with Nx's [migrate command](/nx-api/nx/documents/migrate) that allows you to keep up to date with your framework in a mostly automated fashion. Whenever you upgrade Nx, you run
```shell
npx nx migrate latest
@@ -307,7 +308,7 @@ Here are some common questions developers have. Have some more? Feel free to pin
Every Nx project comes with a `project.json` which contains the basic setup of targets (example: `build`, `serve`, `test`, `lint`,..) that can be run against the project.
-Here’s the `project.json` for our `happynrwl` React application. I clipped out the non-relevant parts here:
+Here's the `project.json` for our `happynrwl` React application. I clipped out the non-relevant parts here:
```json5
{
@@ -347,13 +348,13 @@ Here’s the `project.json` for our `happynrwl` React application. I clipped out
}
```
-As you can see, all these “targets” (`build`, `serve`,...) have a so-called `options` property that allows you to configure how the target behaves. The actual configuration is abstracted behind the “[Nx Executor](/concepts/executors-and-configurations)”, in our case `@nrwl/web:webpack`. You can find the details of how to configure that on the Nx docs in the CLI reference for the `@nrwl/web` package: [/nx-api/webpack/executors/webpack](/nx-api/webpack/executors/webpack).
+As you can see, all these "targets" (`build`, `serve`,...) have a so-called `options` property that allows you to configure how the target behaves. The actual configuration is abstracted behind the "[Nx Executor](/concepts/executors-and-configurations)", in our case `@nrwl/web:webpack`. You can find the details of how to configure that on the Nx docs in the CLI reference for the `@nrwl/web` package: [/nx-api/webpack/executors/webpack](/nx-api/webpack/executors/webpack).
To read more about how the `project.json`, its executors, and configuration options are structured, check out the official docs: [/reference/project-configuration](/reference/project-configuration).
-> _Note, Nx is also able to just pick up NPM scripts registered in the_ `_package.json_` _of your project root. This scenario is most useful if you’re adding Nx to an existing monorepo (see_ [_add-nx-to-monorepo_](https://www.npmjs.com/package/add-nx-to-monorepo)_). Read more here:_ [_/reference/project-configuration_](/reference/project-configuration)
+> _Note, Nx is also able to just pick up NPM scripts registered in the_ `_package.json_` _of your project root. This scenario is most useful if you're adding Nx to an existing monorepo (see_ [_add-nx-to-monorepo_](https://www.npmjs.com/package/add-nx-to-monorepo)_). Read more here:_ [_/reference/project-configuration_](/reference/project-configuration)
-Nx’s extensibility and customizability have really no limits, allowing it to really adapt to your needs. Here are some resources to learn more if you need some advanced features.
+Nx's extensibility and customizability have really no limits, allowing it to really adapt to your needs. Here are some resources to learn more if you need some advanced features.
- [Custom workspace executors](/extending-nx/recipes/local-executors)
- [Custom workspace generators](/extending-nx/recipes/local-generators)
@@ -362,7 +363,7 @@ Nx’s extensibility and customizability have really no limits, allowing it to r
## Q: Can I customize my Webpack config used to build my React app?
-As mentioned previously, the underlying build machinery is usually hidden by a so-called [Nx Executor](/concepts/executors-and-configurations). As we have seen you can customize its behavior via the corresponding `options` property. By abstracting the underlying build tool, Nx is able to fulfill its evergreen promise as mentioned previously and allows to seamlessly upgrade workspaces to the latest versions of the build tooling that is being used.
+As mentioned previously, the underlying build machinery is usually hidden by a so-called "[Nx Executor](/concepts/executors-and-configurations)". As we have seen you can customize its behavior via the corresponding `options` property. By abstracting the underlying build tool, Nx is able to fulfill its evergreen promise as mentioned previously and allows to seamlessly upgrade workspaces to the latest versions of the build tooling that is being used.
If the available `options` are not enough, you can further customize the Webpack configuration using the `webpackConfig` property:
@@ -399,11 +400,11 @@ module.exports = getWebpackConfig;
Notice how the default Nrwl provided Webpack configuration is invoked first to not lose the default behavior, followed by your own customizations.
-## Q: Why is there an “apps” folder? Can I change it?
+## Q: Why is there an "apps" folder? Can I change it?
Sure! Nx allows to host multiple applications and libraries in a single workspace: a monorepo scenario basically. In fact, even in our simple setup we have two applications: `happynrwl` and the corresponding e2e application, `happynrwl-e2e`.
-In a default setup Nx generates an `apps` folder for hosting applications, and `libs` folder for hosting libraries. Read more about [“Apps and Libs” on the Nx docs](/concepts/decisions/project-size).
+In a default setup Nx generates an `apps` folder for hosting applications, and `libs` folder for hosting libraries. Read more about "Apps and Libs" on the Nx docs: [/concepts/decisions/project-size](/concepts/decisions/project-size).
You can change this setup in `nx.json` by adjustijng the `workspaceLayout` property which has an `appsDir` and `libsDir` configuration.
@@ -428,15 +429,15 @@ Agreed. Luckily Nx is plugin based, so you can start with the bare minimum (see
From my own experience, what usually happens is that teams start light and then over time end up with a similar stack, but hand-woven and therefore loosing out on a lot of the benefits Nx comes with.
-## Q: Isn’t Nx just for monorepos?
+## Q: Isn't Nx just for monorepos?
-Nx has been designed to support monorepo scenarios, and it really shines at scale. However, a lot of the features I’ve been mentioning in this article, such as generators, out of the box setup of best practices development tools, automated migrations and more make it an excellent choice, even if your intention is not to create a monorepo.
+Nx has been designed to support monorepo scenarios, and it really shines at scale. However, a lot of the features I've been mentioning in this article, such as generators, out of the box setup of best practices development tools, automated migrations and more make it an excellent choice, even if your intention is not to create a monorepo.
-From my experience, I’ve often seen teams start with a single application, which then over time gets company by other apps, in the form of React applications, also Node based backends or even a React Native application. Mainly because adding new applications is easy and the possibility to [share functionality (even across platforms)](/blog/share-code-between-react-web-react-native-mobile-with-nx) is appealing.
+From my experience, I've often seen teams start with a single application, which then over time gets company by other apps, in the form of React applications, also Node based backends or even a React Native application. Mainly because adding new applications is easy and the possibility to [share functionality (even across platforms)](/blog/share-code-between-react-web-react-native-mobile-with-nx) is appealing.
-> _If you’re interested in monorepos or want to learn more about it, check out_ [_https://monorepo.tools_](https://monorepo.tools/)_._
+> _If you're interested in monorepos or want to learn more about it, check out_ [_https://monorepo.tools_](https://monorepo.tools/)_._
-## Q: Isn’t Nx just for Angular projects?
+## Q: Isn't Nx just for Angular projects?
This is a common but understandable misconception. Although Nx was heavily inspired by the Angular CLI initially, it is now a completely independent build system and CLI with first-class support for Angular, React, Node, Next.js, TypeScript and more. And with tons of [community plugins](/community) that extend Nx beyond that.
diff --git a/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md b/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md
index 3f9389ff5f2a9..530d9d0e512af 100644
--- a/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md
+++ b/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md
@@ -4,25 +4,26 @@ slug: 'what-is-new-in-nx-13-10'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-04-08/PJ3SRAadq0DxGiC9mCIWsA.png'
tags: [nx, release]
+description: Nx 13.10 brings core package consolidation, Nx Daemon by default, local plugin development, enhanced visualization, new lint rules, and React 18 support.
---
It has been a while since our last release blog post [which was on Nx 13.5](/blog/new-terminal-output-performance-improvements-in-nx-13-5). A lot has happened since then. So here we go!
-## Housekeeping and “core” cleanup
+## Housekeeping and "core" cleanup
We keep optimizing the Nx core. This round we started doing some housekeeping and cleanup that will allow us to move more quickly in the future and add new features more easily. In particular we now have a single package `nx` that contains all the core and CLI related functionality that have previously been in `@nrwl/cli` and `@nrwl/tao`. This also results in a reduce number of packages you need to install in any Nx workspace. In fact, if you run `add-nx-to-monorepo` - our easy migration command for [adding Nx to Yarn/NPM workspaces](/recipes/adopting-nx/adding-to-monorepo) - you should now see a single `nx` package and not have any `@nrwl/*` packages at all.
## Nx Daemon on by default
-One of the core features of Nx is the calculation of the project graph. It is the basis for most other features in Nx like the [affected commands](/ci/features/affected), computation caching and calculation and topological sorting of parallelizing tasks [during DTE](/ci/features/distribute-task-execution). This is a I/O heavy operation. Whenever you change a file, the project graph needs to be re-calculated which involves reading the source files, analyze imports from other packages’ source files and external libraries.
+One of the core features of Nx is the calculation of the project graph. It is the basis for most other features in Nx like the [affected commands](/ci/features/affected), computation caching and calculation and topological sorting of parallelizing tasks [during DTE](/ci/features/distribute-task-execution). This is a I/O heavy operation. Whenever you change a file, the project graph needs to be re-calculated which involves reading the source files, analyze imports from other packages' source files and external libraries.
-Such a crucial and central feature like the project graph need to be as fast as possible. That’s the reason why we introduced the Nx Daemon, which is started automatically and runs in the background, watching for file changes and asynchronously recomputes and caches the project graph. As a result, whenever Nx runs an operation that requires the project graph, it is already there and ready to be used, without adding any additional delay to the operation that needs to be executed.
+Such a crucial and central feature like the project graph need to be as fast as possible. That's the reason why we introduced the Nx Daemon, which is started automatically and runs in the background, watching for file changes and asynchronously recomputes and caches the project graph. As a result, whenever Nx runs an operation that requires the project graph, it is already there and ready to be used, without adding any additional delay to the operation that needs to be executed.
Read more on the docs: [/guides/nx-daemon](/concepts/nx-daemon)
-## Nx Cloud opt-in now points to “Yes” by default
+## Nx Cloud opt-in now points to "Yes" by default
-When you set up a new Nx workspace with `create-nx-workspace` the question about opting into Nx Cloud will be pointed on “Yes” by default now.
+When you set up a new Nx workspace with `create-nx-workspace` the question about opting into Nx Cloud will be pointed on "Yes" by default now.
_Nx Cloud opt-in when setting up a new Nx workspace_
@@ -41,7 +42,7 @@ This illustration should give you a rough idea. obviously some of the plugins ma
You can just use the [Nx core without any plugins](/getting-started/intro) to get started and later decide to add more plugins such as `@nrwl/react` or `@nrwl/js` etc depending on your specific use case.
-As you can see, plugins are at the very core and for quite some time now we’ve had a [fully featured Devkit and Nx Plugin package](/extending-nx/intro/getting-started) to create your own. And the community followed: have a look at [all the community Nx plugins that are available out there](/community).
+As you can see, plugins are at the very core and for quite some time now we've had a [fully featured Devkit and Nx Plugin package](/extending-nx/intro/getting-started) to create your own. And the community followed: have a look at [all the community Nx plugins that are available out there](/community).
And we keep improving. Starting with Nx 13.10 you can now use Nx plugins to automate your local workspace. Install `@nrwl/nx-plugin` into your Nx workspace and generate a new plugin:
@@ -70,13 +71,13 @@ This creates a new library with a pre-configured setup to develop a Nx plugin. S
Note the `executor` definition of the `mybuild` target. It was never easier to create custom workspace executors.
-And it doesn’t stop at the executors level. The local plugin setup comes with a generator setup too, which can be invoked just like
+And it doesn't stop at the executors level. The local plugin setup comes with a generator setup too, which can be invoked just like
```shell
npx nx g @myorg/workspace-extensions:
```
-where `@myorg` is your Nx workspace name you defined and `workspace-extensions` the plugin library name we’ve chosen. You are free to choose whatever suits you best. This new setup opens up a wide range of new possibilities including defining default workspace generators.
+where `@myorg` is your Nx workspace name you defined and `workspace-extensions` the plugin library name we've chosen. You are free to choose whatever suits you best. This new setup opens up a wide range of new possibilities including defining default workspace generators.
[Subscribe to our Youtube Channel](https://youtube.com/nrwl_io) for some upcoming tutorials and walkthroughs around this topic.
@@ -87,9 +88,9 @@ We keep improving our project graph and make it more and more useful for visuall
_Improved Project Graph visualization showing information about the edges that connect nodes_
-And this is just a sneak peak of what’s coming in Nx v14, so stay tuned!
+And this is just a sneak peak of what's coming in Nx v14, so stay tuned!
-## New “notDependOnLibsWithTags” Linter option
+## New "notDependOnLibsWithTags" Linter option
Having a decent monorepo setup is not always just about speed but also to have features in place that help you keep your code-base healthy and maintainable in the long run. The Nx module boundary lint rules are an example for that.
@@ -144,13 +145,13 @@ So far you have only been able to specify which tags a library is allowed to dep
}
```
-More on Miroslav’s tweet:
+More on Miroslav's tweet:
{% tweet url="https://x.com/meeroslav/status/1505844090713292808" /%}
## Automatic Lint rule fixes for self circular dependencies and wrong imports across library boundaries
-Whether by accident or by letting your IDE auto-add the import. It often happens that the path that is being used is via the library’s TS path mapping through the `index.ts` entry point. This leads to a circular dependency when also `tslib-c-another.ts` is exported via the `index.ts`. Nx’s module boundary lint rule correctly highlights this as can be seen in this screenshot.
+Whether by accident or by letting your IDE auto-add the import. It often happens that the path that is being used is via the library's TS path mapping through the `index.ts` entry point. This leads to a circular dependency when also `tslib-c-another.ts` is exported via the `index.ts`. Nx's module boundary lint rule correctly highlights this as can be seen in this screenshot.
_Self circular dependency issue within a Nx based library_
@@ -166,7 +167,7 @@ This will analyze your imports, find the correct file and adjust them accordingl
_Automatic adjustment of circular self references when running the lint rule fix_
-Similarly if you have relative or absolute imports across library boundaries rather than using the NPM scope, you’ll get a linting error.
+Similarly if you have relative or absolute imports across library boundaries rather than using the NPM scope, you'll get a linting error.
_Lint error about relative import across library boundaries_
@@ -178,11 +179,11 @@ _Automatic fixes for cross-library imports_
## React 18 support
-Nx 13.10 introduces support for the latest React v18 release such that users can benefit from the latest features React has to offer. Check out our latest blog post on [“The React CLI you always wanted but didn’t know about”](/blog/the-react-cli-you-always-wanted-but-didnt-know-about) to learn more how to use Nx for React development.
+Nx 13.10 introduces support for the latest React v18 release such that users can benefit from the latest features React has to offer. Check out our latest blog post on ["The React CLI you always wanted but didn't know about"](/blog/the-react-cli-you-always-wanted-but-didnt-know-about) to learn more how to use Nx for React development.
## React Native gets Storybook support
-We’ve drastically improved our support for React Native within Nx workspaces. Check out our latest blog posts on
+We've drastically improved our support for React Native within Nx workspaces. Check out our latest blog posts on
- [Share code between React Web & React Native Mobile with Nx](/blog/share-code-between-react-web-react-native-mobile-with-nx)
- [Introducing Expo Support for Nx](/blog/introducing-expo-support-for-nx)
@@ -199,7 +200,7 @@ or use Nx Console to get some more help in generating the Storybook setup.
By default when you create a new Nx workspace with `create-nx-workspace` you will see a couple of questions that help you find the correct setup for your needs. However, we just show a couple of the possible options, to not overwhelm you.
-If however you’re curious, you can now append `--allPrompts` to get all possible questions asked 🙂
+If however you're curious, you can now append `--allPrompts` to get all possible questions asked 🙂
```shell
npx create-nx-workspace@next myorg --allPrompts
@@ -219,14 +220,14 @@ Here are some of the highlights in the latest Nx Console release.
## Nx Targets of VSCode Command Menu
-You can now open the VSCode Command menu (Cmd + Shift + P or Win + Shift + P) and enter “Nx: Run Target” to invoke the Run Target menu which allows to choose the target to run as well as the project to execute the target on.
+You can now open the VSCode Command menu (Cmd + Shift + P or Win + Shift + P) and enter "Nx: Run Target" to invoke the Run Target menu which allows to choose the target to run as well as the project to execute the target on.
_Commands can be invoked from the VSCode Command menu_
## Run Target View now in sync with workspace commands
-While initially the “Generate and Run Target” panel was a static list of the usual Nx targets, it is now a dynamically generated list based on your actual workspace commands. Hence, also your custom defined targets will automatically show up.
+While initially the "Generate and Run Target" panel was a static list of the usual Nx targets, it is now a dynamically generated list based on your actual workspace commands. Hence, also your custom defined targets will automatically show up.
_Nx Console dynamically reads Nx targets from your Nx workspace now_
@@ -241,9 +242,9 @@ Learn more in this short video walkthrough:
## Our docs keep getting more and more awesome
-Besides delivering awesome features, we keep improving our docs. They are essential to help discover new features and better understand existing ones. In the last weeks we’ve improved the navigation support, allowing you to navigate to a specific package with `/packages/` such as [/nx-api/react](/nx-api/react) listing executors and generators that come with that Nx package, also improving the API docs of the individual executor options including a live embedded editor playground to experiment with different configuration setup.
+Besides delivering awesome features, we keep improving our docs. They are essential to help discover new features and better understand existing ones. In the last weeks we've improved the navigation support, allowing you to navigate to a specific package with `/packages/` such as [/nx-api/react](/nx-api/react) listing executors and generators that come with that Nx package, also improving the API docs of the individual executor options including a live embedded editor playground to experiment with different configuration setup.
-Check out Benjamin Cabanes’ tweet with some short videos:
+Check out Benjamin Cabanes' tweet with some short videos:
{% tweet url="https://x.com/bencabanes/status/1509641445086535687" /%}
diff --git a/docs/blog/2022-04-25-use-storybook-with-nx-react-native.md b/docs/blog/2022-04-25-use-storybook-with-nx-react-native.md
index 00f95ba67c8f2..0ed30b8cb9761 100644
--- a/docs/blog/2022-04-25-use-storybook-with-nx-react-native.md
+++ b/docs/blog/2022-04-25-use-storybook-with-nx-react-native.md
@@ -4,11 +4,12 @@ slug: 'use-storybook-with-nx-react-native'
authors: ['Emily Xiong']
cover_image: '/blog/images/2022-04-25/64nWVfUBihlYTLGWOvnc1g.png'
tags: [nx, release]
+description: Learn how to integrate and configure Storybook with Nx React Native apps, including solutions for common navigation and Redux store integration issues.
---
In my previous [blogs](/blog/share-code-between-react-web-react-native-mobile-with-nx) _(see links at the end)_, I wrote about how to develop Nx React Native applications. However, as developers, we are constantly searching for ways to make the developer experience better.
-This blog will show how to add Storybook to Nx React Native applications. With Nx, you don’t need to go through [this long guideline](https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/) to set up the Storybook, you can quickly get it running.
+This blog will show how to add Storybook to Nx React Native applications. With Nx, you don't need to go through [this long guideline](https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/) to set up the Storybook, you can quickly get it running.
Example Repo: [xiongemi/studio-ghibli-search-engine](https://github.com/xiongemi/studio-ghibli-search-engine)
@@ -104,7 +105,7 @@ module.exports = {
};
```
-Also, notice that in your app’s main file, the import of the App changed to `storybook/toggle-storybook`:
+Also, notice that in your app's main file, the import of the App changed to `storybook/toggle-storybook`:
```typescript
import App from './storybook/toggle-storybook';
@@ -148,12 +149,12 @@ Then just run the command to start your app, you should see the storybook for yo
## Troubleshooting
-### Error: Couldn’t find a navigation object
+### Error: Couldn't find a navigation object
If you are using the library `@react-navigation/native` and you are using hooks like `useNavigtion` and `useRoute` inside your component, you are likely to get the below error:
-_Render Error for Couldn’t find a navigation object_
+_Render Error for Couldn't find a navigation object_
The easiest way is just to mock this library and create a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) for it:
@@ -220,12 +221,12 @@ const NavigationDecorator = (story) => {
};
```
-### Error: Could not find “store”
+### Error: Could not find "store"
If you are using Redux store and your component is stateful and connected to the store, you are likely to get the below error:
-_Render Error for Could not find “store”_
+_Render Error for Could not find "store"_
The simple solution is to mock the store. First, you need to install the library [redux-mock-store](https://github.com/reduxjs/redux-mock-store) and its typing:
diff --git a/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md b/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md
index 563e1da9b5351..320afbb21d339 100644
--- a/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md
+++ b/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md
@@ -4,9 +4,10 @@ slug: 'nx-v14-is-out-here-is-all-you-need-to-know'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-05-02/UAN1p_RMt38_IvB3CRpYTA.png'
tags: [nx, release]
+description: Nx v14 delivers enhanced performance, simplified core structure, improved terminal output, local plugins, automated CI, module federation, and React 18 support.
---
-A lot happened since we released Nx version 13 back in October 2021. Nx has roughly a 6-month major release cycle and so that time has come again: I’m happy to announce the **release of Nx v14**.
+A lot happened since we released Nx version 13 back in October 2021. Nx has roughly a 6-month major release cycle and so that time has come again: I'm happy to announce the **release of Nx v14**.
Those last 6 months have been incredible and Nx probably got the biggest boost ever in terms of simplicity, features, and speed. We even made Nx more beautiful. Join me to explore some of the biggest highlights and what makes v14 so incredible.
@@ -16,7 +17,7 @@ Those last 6 months have been incredible and Nx probably got the biggest boost e
## Over 1.6 Million Downloads per week 🎉
-We hit a major milestone with Nx v13 when we reached 1 million weekly downloads back in December 2021. Only 3 months later, we’re already over 1.6 million per week and growing fast!
+We hit a major milestone with Nx v13 when we reached 1 million weekly downloads back in December 2021. Only 3 months later, we're already over 1.6 million per week and growing fast!
{% tweet url="https://x.com/victorsavkin/status/1504465520640278533" /%}
@@ -30,7 +31,7 @@ We saw that coming and made it easy for people to migrate to Nx.
npx add-nx-to-monorepo
```
-There’s a detailed guide helping with some of the doubts and misconceptions which commonly come up with Lerna users: [https://lerna.js.org/](https://lerna.js.org/)
+There's a detailed guide helping with some of the doubts and misconceptions which commonly come up with Lerna users: [https://lerna.js.org/](https://lerna.js.org/)
The future for monorepo tools looks bright as the awareness of monorepos, especially in the JS ecosystem, has grown a lot in recent months. Nx is doing great compared to those tools. But this movement excites us and we are more than ever committed to keep pushing forward and making Nx even better.
@@ -38,13 +39,13 @@ The future for monorepo tools looks bright as the awareness of monorepos, especi
## Nx Console reaches 1 million installs
-While we’re talking numbers. We just hit another milestone 🎉
+While we're talking numbers. We just hit another milestone 🎉
{% tweet url="https://x.com/NxDevTools/status/1518620884570820608" /%}
## Nx Core
-We made a lot of improvements in Nx core since v13 that can roughly be categorized into: making Nx faster, simpler and improved dev ergonomics. Let’s explore some of the highlights there
+We made a lot of improvements in Nx core since v13 that can roughly be categorized into: making Nx faster, simpler and improved dev ergonomics. Let's explore some of the highlights there
## Making Nx even faster!
@@ -61,11 +62,11 @@ How can Nx be so fast? One thing we did introduce after v13 and [recently enable
> **_Running into a performance issue?_** _Try to debug it by using_ `_NX_PERF_LOGGING=true_` _in combination with your Nx command:_ `_NX_PERF_LOGGING=true nx build crew_`_. Alternatively, you can also have Nx generate a_ `_profile.json_` _and import it into Chrome Devtools._ [_Read more about that here_](/troubleshooting/performance-profiling)_._
-While a lot of the above improvements help with local development, one of the biggest pain points of having a large monorepo can be CI times. This is where **distributed task execution (DTE)** makes all the difference\*_._\* Nx Cloud’s DTE understands which commands your CI is running, how many agents are typically being used, and how long a given task typically takes. It leverages that information along with task dependencies to create an execution plan that prioritizes builds of shared libraries first to unblock upstream builds. This results in a more even utilization of CI agents, optimizing the overall running time of your CI.
+While a lot of the above improvements help with local development, one of the biggest pain points of having a large monorepo can be CI times. This is where **distributed task execution (DTE)** makes all the difference\*_._\* Nx Cloud's DTE understands which commands your CI is running, how many agents are typically being used, and how long a given task typically takes. It leverages that information along with task dependencies to create an execution plan that prioritizes builds of shared libraries first to unblock upstream builds. This results in a more even utilization of CI agents, optimizing the overall running time of your CI.
-Over time, Nx Cloud’s DTE learns about your workspace, keeping metrics about running times to allow the best possible distribution of a given task with the given amount of agents. This comes with Nx Cloud.
+Over time, Nx Cloud's DTE learns about your workspace, keeping metrics about running times to allow the best possible distribution of a given task with the given amount of agents. This comes with Nx Cloud.
> _Note, if you are a large enterprise, you might want to look into the_ [_Nx Private Cloud_](/enterprise) _offering which allows to self-host Nx Cloud within your own infrastructure._
@@ -83,7 +84,7 @@ Nx is also able now to directly pick up your `package.json` scripts which are co
## Terminal Output
-Developer experience is highly important to us. And that doesn’t stop at the terminal output which is something we developers constantly interact with throughout our entire workday. We, therefore, put a lot of love for the details into how we present our terminal output, improving it in a way to show all completed tasks towards the top, while information about the current progress is shown below
+Developer experience is highly important to us. And that doesn't stop at the terminal output which is something we developers constantly interact with throughout our entire workday. We, therefore, put a lot of love for the details into how we present our terminal output, improving it in a way to show all completed tasks towards the top, while information about the current progress is shown below
_(here executed by skipping the cache to show some progress running_ 🙂*)*
@@ -95,7 +96,7 @@ We now even filter out the build of dependent projects. Say you build the `react
Obviously, all errors would be reported properly, and on CI this behavior is disabled by default. If you want to disable it, you can always set `NX_TASKS_RUNNER_DYNAMIC_OUTPUT` to false.
-## “Local Plugins” for your Nx Workspace
+## "Local Plugins" for your Nx Workspace
[Check out our previous release post](/blog/what-is-new-in-nx-13-10) where we went into some of the details on how local plugins work. But in a nutshell, you can now generate a plugin into an existing Nx workspace:
@@ -136,13 +137,13 @@ Or just use [Nx Console](/getting-started/editor-setup), as always.
-This sets you up with an automated CI workflow that properly uses the Nx affected command together with the power of [Nx Cloud’s distributed task execution](/ci/features/distribute-task-execution).
+This sets you up with an automated CI workflow that properly uses the Nx affected command together with the power of [Nx Cloud's distributed task execution](/ci/features/distribute-task-execution).
You can also use the `--all` flag when generating a new workspace, for seeing all the available options, including to setup CI.
## nx-cloud record
-The [Nx Cloud GitHub app](https://github.com/apps/nx-cloud) is so useful for not having to go to your CircleCI logs and try to find the entry you’re searching for. Instead all the executed targets nicely show up as a comment in your PR.
+The [Nx Cloud GitHub app](https://github.com/apps/nx-cloud) is so useful for not having to go to your CircleCI logs and try to find the entry you're searching for. Instead all the executed targets nicely show up as a comment in your PR.
@@ -156,13 +157,13 @@ Until now, you had to have a task that is being executed through Nx Cloud. But w
npx nx-cloud record -- npx nx format:check
```
-and they will automatically show up in the Nx Cloud viewer. 🤫 you don’t even have to have Nx Cloud installed in the workspace.
+and they will automatically show up in the Nx Cloud viewer. 🤫 you don't even have to have Nx Cloud installed in the workspace.
## Module Federation for Faster Builds
For many workspaces it is enough to leverage [Nx affected commands](/ci/features/affected), [computation caching](/concepts/how-caching-works) and [distributed task execution](/ci/features/distribute-task-execution).
-However, if you have a huge monorepo, this might not be enough. You can add incremental builds and benefit from caching, but still, you might run into the issue of the final linking process taking a long time, which can hardly be optimized further. Unless you can split up your app into smaller pieces. No, we’re not talking about micro frontends necessarily (more on that in the next section). Rather we can leverage Webpack’s Module Federation support.
+However, if you have a huge monorepo, this might not be enough. You can add incremental builds and benefit from caching, but still, you might run into the issue of the final linking process taking a long time, which can hardly be optimized further. Unless you can split up your app into smaller pieces. No, we're not talking about micro frontends necessarily (more on that in the next section). Rather we can leverage Webpack's Module Federation support.
We added dedicated generators to create a new module federation setup for Angular and React:
@@ -186,13 +187,13 @@ npx nx serve shell
and all the other remotes are statically served from the cache. Your entire infrastructure is working, without you having to worry about building and serving all of the separate remotes. As you can imagine this speeds up local serve times by an order of magnitude.
-If you want to work on one of the remotes, simply explicitly pass their name using `--devRemotes` flag and it will be served just normally with the Webpack dev server, with all the features you’re used to.
+If you want to work on one of the remotes, simply explicitly pass their name using `--devRemotes` flag and it will be served just normally with the Webpack dev server, with all the features you're used to.
```shell
npx nx serve shell --devRemotes=cart,shop
```
-This can be a game-changer when building huge apps. Stay tuned for more content around this as we’re really just getting started.
+This can be a game-changer when building huge apps. Stay tuned for more content around this as we're really just getting started.
We recommend this approach if you want to speed up local serve and build times, but you still deploy the application as a whole.
@@ -211,15 +212,15 @@ You asked for it, the community responded. [Luís Carvalho](https://github.com/L
-Also, have you ever wondered whether in your gigantic graph there’s a connection between two nodes?
+Also, have you ever wondered whether in your gigantic graph there's a connection between two nodes?
-Now you can easily find out! Just click on a node and hit the “Start” button.
+Now you can easily find out! Just click on a node and hit the "Start" button.
-Then click the target node you’re interested in and hit “End”.
+Then click the target node you're interested in and hit "End".
@@ -231,7 +232,7 @@ And by clicking on the edges you can even get a more detailed output of why the
-Oh wait, you didn’t want the shortest path? There’s a button for showing all possible paths too 😉
+Oh wait, you didn't want the shortest path? There's a button for showing all possible paths too 😉
@@ -239,7 +240,7 @@ Oh wait, you didn’t want the shortest path? There’s a button for showing all
In version 13.4 we released a brand new dedicated package for developing pure JavaScript/TypeScript packages: `@nrwl/js`
-We kept improving it, adding SWC support (including an easy migration between TSC → SWC using an Nx generator) and we’re currently looking into automated publishing support.
+We kept improving it, adding SWC support (including an easy migration between TSC → SWC using an Nx generator) and we're currently looking into automated publishing support.
Read all the details on our docs: [/getting-started/intro](/getting-started/intro)
@@ -249,7 +250,7 @@ Nx v14 ships with React 18 support for React DOM and React Native. The latter ha
In addition to that, Expo and Expo Application Service support has been added which has lead already to some drastic speed improvements with some of our clients.
-Finally, it is the first version which ships the built-in module federation support for React as we’ve mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/nx-api/react](/nx-api/react)
+Finally, it is the first version which ships the built-in module federation support for React as we've mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/nx-api/react](/nx-api/react)
## Angular
@@ -268,13 +269,13 @@ Docs are hard! But we keep investing and a lot of work has gone into making docs
{% tweet url="https://twitter.com/bencabanes/status/1509641445086535687" /%}
-## There’s more
+## There's more
Check out our previous release blog posts for all the details:
- [Single File Monorepo Config, Custom Workspace Presets, Improved Tailwind Support, and more in Nx 13.4!](/blog/single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13)
- [New Terminal Output & Performance Improvements in v13.5](/blog/new-terminal-output-performance-improvements-in-nx-13-5)
-- [What’s new in Nx v13.10?](/blog/what-is-new-in-nx-13-10)
+- [What's new in Nx v13.10?](/blog/what-is-new-in-nx-13-10)
## How to Update Nx
@@ -294,13 +295,13 @@ npx nx migrate --run-migrations
We already started working on v15. You can [find the roadmap on our GitHub repository](https://github.com/nrwl/nx/discussions/9716). There are some exciting things coming up, like
-- “Negative” Configuration
+- "Negative" Configuration
- React Server Side Rendering and Server Components support
- React Native + Detox
- Cypress v10 migration and Cypess Component Testing
- ...
-Make sure you don’t miss anything by
+Make sure you don't miss anything by
- Following us [on Twitter](https://twitter.com/NxDevTools), and
- Subscribe to the [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1) for more information on [Angular](https://angular.io/), [React](https://reactjs.org/), Nx, and more!
diff --git a/docs/blog/2022-05-11-lerna-is-dead-long-live-lerna.md b/docs/blog/2022-05-11-lerna-is-dead-long-live-lerna.md
index af1d83d279576..e1fa5cdef4838 100644
--- a/docs/blog/2022-05-11-lerna-is-dead-long-live-lerna.md
+++ b/docs/blog/2022-05-11-lerna-is-dead-long-live-lerna.md
@@ -4,11 +4,12 @@ slug: 'lerna-is-dead-long-live-lerna'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-05-11/gtsrJ-tMDZf9bvDLVSjQ.png'
tags: [nx]
+description: Nrwl takes over Lerna.js stewardship, promising continued maintenance, critical updates, and future Nx integration while supporting the existing community.
---
-If you’re in a hurry, here’s the **TL;DR:**
+If you're in a hurry, here's the **TL;DR:**
-> _We,_ [_Nrwl_](/company)_, the company behind Nx, are taking over the stewardship of Lerna.js, the popular JS monorepo tool._ [_Here’s the official announcement on the Lerna repo_](https://github.com/lerna/lerna/issues/3121)_. We are thrilled and committed to helping the Lerna community move forward!_
+> _We,_ [_Nrwl_](/company)_, the company behind Nx, are taking over the stewardship of Lerna.js, the popular JS monorepo tool._ [_Here's the official announcement on the Lerna repo_](https://github.com/lerna/lerna/issues/3121)_. We are thrilled and committed to helping the Lerna community move forward!_
## Who is Nrwl?
@@ -19,35 +20,35 @@ We (Nrwl) are the company behind Nx ([GitHub](https://github.com/nrwl/nx)) and w
This is when Nx started.
-We think we are the best fit for helping the Lerna community continue and thrive because we have a good combination of real-world experience with open source community work. As part of Nrwl, we work with some of the world’s biggest companies, helping them improve productivity and ship great quality software through monorepos. In addition, Jeff and Victor have a lot of knowledge of managing a big open source project such as Angular when they were at Google and obviously at Nrwl from managing Nx as an open-source project with its quickly growing community.
+We think we are the best fit for helping the Lerna community continue and thrive because we have a good combination of real-world experience with open source community work. As part of Nrwl, we work with some of the world's biggest companies, helping them improve productivity and ship great quality software through monorepos. In addition, Jeff and Victor have a lot of knowledge of managing a big open source project such as Angular when they were at Google and obviously at Nrwl from managing Nx as an open-source project with its quickly growing community.
Long story short, Nrwl ❤️ open source and community work, and we are thrilled to work with the Lerna community!
-## What’s the story about Lerna being dead?
+## What's the story about Lerna being dead?
-_(Spoiler: It is not dead, we took over stewardship_ 😀*. But apart from that, here’s the whole story)*
+_(Spoiler: It is not dead, we took over stewardship_ 😀*. But apart from that, here's the whole story)*
- August 2020 — Issue is being opened [mentioning that Lerna is largely unmaintained](https://github.com/lerna/lerna/issues/2703)
-- April 2022 — A [PR gets merged](https://github.com/lerna/lerna/pull/3092) that properly highlights the fact of Lerna being unmaintained at the very top of the repository README. This made the “Lerna is dead” discussions flare up again.
+- April 2022 — A [PR gets merged](https://github.com/lerna/lerna/pull/3092) that properly highlights the fact of Lerna being unmaintained at the very top of the repository README. This made the "Lerna is dead" discussions flare up again.
- May 2022 — Lerna got resurrected: Nrwl takes over
-While that last PR didn’t really change the fact that Lerna has been in that state for the past years already, it just made it more apparent and also how many still rely on Lerna today.
+While that last PR didn't really change the fact that Lerna has been in that state for the past years already, it just made it more apparent and also how many still rely on Lerna today.
-And this is not to blame its contributors at all. They did an amazing job. However, Open Source can be a tough place, especially if it is not backed by a large community and/or company that helps make the work sustainable in the long run. Taking the weight of maintaining such a widely used tool, and then mostly for free, is a huge one. Burnout is real folks, so take care. And we’ve had lots of such open-source examples in the past years.
+And this is not to blame its contributors at all. They did an amazing job. However, Open Source can be a tough place, especially if it is not backed by a large community and/or company that helps make the work sustainable in the long run. Taking the weight of maintaining such a widely used tool, and then mostly for free, is a huge one. Burnout is real folks, so take care. And we've had lots of such open-source examples in the past years.
## Nrwl is taking over: now what?
Lerna has definitely pioneered the JS monorepo space, however, the tooling space has progressed a lot in recent years. Some of its features are now baked into NPM, YARN, PNPM, and Lerna [lacks many other important monorepo features](https://monorepo.tools/#tools-review) such as computation caching to mention one example.
-Nx can fill in many of these gaps. When the first discussions about Lerna being unmaintained came up in 2020, we implemented a set of features, allowing for easy migration from [Lerna/NPM/Yarn/PNPM workspaces to Nx](/recipes/adopting-nx/adding-to-monorepo). In addition, some recent [improvements in Nx](/blog/nx-v14-is-out-here-is-all-you-need-to-know) make this even easier, allowing it to basically co-exist in any of these workspaces. This can be done for instance by leveraging [Nx’s powerful task scheduling capabilities](/getting-started/intro) while still continuing on relying on Lerna’s publishing process. Maintaining now both projects, Lerna & Nx, puts us in the unique position of allowing us to work on some seamless integration between the two.
+Nx can fill in many of these gaps. When the first discussions about Lerna being unmaintained came up in 2020, we implemented a set of features, allowing for easy migration from [Lerna/NPM/Yarn/PNPM workspaces to Nx](/recipes/adopting-nx/adding-to-monorepo). In addition, some recent [improvements in Nx](/blog/nx-v14-is-out-here-is-all-you-need-to-know) make this even easier, allowing it to basically co-exist in any of these workspaces. This can be done for instance by leveraging [Nx's powerful task scheduling capabilities](/getting-started/intro) while still continuing on relying on Lerna's publishing process. Maintaining now both projects, Lerna & Nx, puts us in the unique position of allowing us to work on some seamless integration between the two.
-With Nx, we are known to have a clear roadmap shared with the community of what our next 6 months’ focus will be (here’s an [example of our roadmap for v15](https://github.com/nrwl/nx/discussions/9716)). As we get our hands dirty on Lerna’s codebase in the coming weeks, we are going to define a set of action items, prioritize them and elaborate a proper roadmap as well, which we will share with the community as soon as we have a more concrete plan. Since we know many organizations still depend on Lerna or may not be able to migrate away soon, some of our immediate to mid-term actions will be to **provide critical bug fixes and security updates to the project** and regularly release those to NPM.
+With Nx, we are known to have a clear roadmap shared with the community of what our next 6 months' focus will be (here's an [example of our roadmap for v15](https://github.com/nrwl/nx/discussions/9716)). As we get our hands dirty on Lerna's codebase in the coming weeks, we are going to define a set of action items, prioritize them and elaborate a proper roadmap as well, which we will share with the community as soon as we have a more concrete plan. Since we know many organizations still depend on Lerna or may not be able to migrate away soon, some of our immediate to mid-term actions will be to **provide critical bug fixes and security updates to the project** and regularly release those to NPM.
## Stay tuned for more!
-We think Lerna’s and Nx’s future is bright and we are excited to help move the monorepo space forward, more than ever before!
+We think Lerna's and Nx's future is bright and we are excited to help move the monorepo space forward, more than ever before!
-Make sure you don’t miss anything by
+Make sure you don't miss anything by
- Following us [on Twitter](https://twitter.com/NxDevTools)
- Subscribing to our [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1)
diff --git a/docs/blog/2022-05-25-lerna-used-to-walk-now-it-can-fly.md b/docs/blog/2022-05-25-lerna-used-to-walk-now-it-can-fly.md
index ff4ba7a5d9e70..0be5de375b02a 100644
--- a/docs/blog/2022-05-25-lerna-used-to-walk-now-it-can-fly.md
+++ b/docs/blog/2022-05-25-lerna-used-to-walk-now-it-can-fly.md
@@ -4,6 +4,7 @@ slug: 'lerna-used-to-walk-now-it-can-fly'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-05-25/WPGHapKqT3IguWjeN5UgWg.png'
tags: [nx]
+description: Lerna v5.1 introduces the useNx flag for dramatic performance gains, making it 5.3x faster than Turborepo with added caching and task execution features.
---
**_TL;DR:_** _We released a new beta version of Lerna and it happens that it is now 5.3 times faster than Turbo 👀…by turning on a flag. Keep reading to learn more._
@@ -11,7 +12,7 @@ tags: [nx]
> _ICYMI: A couple of weeks ago we (Nrwl) announced that we take over stewardship of Lerna. Read all about it in our_ [_recent blog post_](/blog/lerna-is-dead-long-live-lerna)_.
> We also just released Lerna v5 as a first maintenance release:_ [_Read more here_](https://github.com/lerna/lerna/releases/tag/v5.0.0)_._
-For folks that want to migrate to Nx, we always had a dedicated [Nx and Lerna](/recipes/adopting-nx) docs page that shows you how you can easily integrate the two. However, we felt we could do better and allow you to get all the speed benefits that come from Nx’s task scheduling abilities, without needing to change nearly anything in your Lerna workspace.
+For folks that want to migrate to Nx, we always had a dedicated [Nx and Lerna](/recipes/adopting-nx) docs page that shows you how you can easily integrate the two. However, we felt we could do better and allow you to get all the speed benefits that come from Nx's task scheduling abilities, without needing to change nearly anything in your Lerna workspace.
And it got fast, like really fast!!
@@ -25,11 +26,11 @@ Here you go
We just published Lerna v5.1 which introduces a `useNx` flag. Adding that makes Lerna to be on par with Nx in terms of speed, and is significantly faster than other tools.
-Comparing Lerna with and without the flag isn’t really an apples-to-apples comparison because one comes with caching abilities, while before, Lerna didn’t have that at all. But just to give you an idea: enabling Nx on your existing Lerna workspace can **speed it up in the range of 2–10 times**, depending on the repo setup.
+Comparing Lerna with and without the flag isn't really an apples-to-apples comparison because one comes with caching abilities, while before, Lerna didn't have that at all. But just to give you an idea: enabling Nx on your existing Lerna workspace can **speed it up in the range of 2–10 times**, depending on the repo setup.
-But let’s do some more real “apples-to-apples” comparison of Lerna’s speed with `useNx` enabled. For benchmarking Nx we have set up a repo in the past which we regularly use to measure the speed of new Nx releases with other similar tools on the market such as [Lage](https://microsoft.github.io/lage/) and [Turborepo](https://turborepo.org/): [https://github.com/vsavkin/large-monorepo](https://github.com/vsavkin/large-monorepo). We now added Lerna+Nx (Lerna with `useNx` enabled) to that repo to measure the impact.
+But let's do some more real "apples-to-apples" comparison of Lerna's speed with `useNx` enabled. For benchmarking Nx we have set up a repo in the past which we regularly use to measure the speed of new Nx releases with other similar tools on the market such as [Lage](https://microsoft.github.io/lage/) and [Turborepo](https://turborepo.org/): [https://github.com/vsavkin/large-monorepo](https://github.com/vsavkin/large-monorepo). We now added Lerna+Nx (Lerna with `useNx` enabled) to that repo to measure the impact.
-Here’s a gif of running the benchmark of Lerna+Nx and Turborepo:
+Here's a gif of running the benchmark of Lerna+Nx and Turborepo:
@@ -50,7 +51,7 @@ Finally, add the following to your `lerna.json`.
}
```
-That’s mostly it. You can continue using the usual Lerna commands, but at this point Lerna would delegate its operations to Nx underneath.
+That's mostly it. You can continue using the usual Lerna commands, but at this point Lerna would delegate its operations to Nx underneath.
To get more out of it, you might want to create a small `nx.json` file (or run `npx nx init` to generate one) for going into some more details on configuring the cacheable operations:
@@ -76,11 +77,11 @@ So how does this work on a technical level. So far Lerna (`lerna run` to be more
With the change we made in Lerna 5.1 we are adding Nx (MIT licensed) as a third option in addition to the already existing `p-map` and `p-queue`. By having `nx` installed and configured (as mentioned in the previous section), Lerna can now delegate its `lerna run` command to Nx directly. All of this is done in a backwards-compatible way: every `lerna run` command will work but will be significantly faster and can optionally even be distributed across multiple machines without any config (more about that in the next section).
-## What’s more?
+## What's more?
-By having Nx integrated, you not just get faster builds but also some other Nx’s features for free!
+By having Nx integrated, you not just get faster builds but also some other Nx's features for free!
-[**Nx Project graph**](/features/explore-graph) — By running `npx nx graph` you get the visualization of the graph. You can interactively explore what your workspace looks like and the relationships between the packages. We actually used this same graph on the Lerna repo itself, which helped us to get a better understanding of how the repo is structured when we took over the maintenance. Here’s an example of filtering the lerna packages to understand what `@lerna/exec` is about and how it relates to other packages in the repo.
+[**Nx Project graph**](/features/explore-graph) — By running `npx nx graph` you get the visualization of the graph. You can interactively explore what your workspace looks like and the relationships between the packages. We actually used this same graph on the Lerna repo itself, which helped us to get a better understanding of how the repo is structured when we took over the maintenance. Here's an example of filtering the lerna packages to understand what `@lerna/exec` is about and how it relates to other packages in the repo.
@@ -96,6 +97,6 @@ npx nx connect-to-nx-cloud
## Conclusion
-This is the first beta which we are trying out on some projects already. We aren’t worried about task orchestration, caching or distribution — all of those are done by Nx, which has been around for 5 years and is solid. We are trying to see if there is something in the integration that is confusing. We hope to release s stable version by mid-June.
+This is the first beta which we are trying out on some projects already. We aren't worried about task orchestration, caching or distribution — all of those are done by Nx, which has been around for 5 years and is solid. We are trying to see if there is something in the integration that is confusing. We hope to release s stable version by mid-June.
Please have a look, upgrade your repo and [open an issue](https://github.com/lerna/lerna/issues) if you run into some weird behavior with the new `useNx` enabled. But not only that, feel free to ping us on the [@NxDevTools](https://twitter.com/nxdevtools) account with your success stories too. We'd love to hear 😃.
diff --git a/docs/blog/2022-06-09-nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more.md b/docs/blog/2022-06-09-nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more.md
index 24224b37339ac..87a64aa5a6b7b 100644
--- a/docs/blog/2022-06-09-nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more.md
+++ b/docs/blog/2022-06-09-nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more.md
@@ -4,16 +4,16 @@ slug: 'nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-06-09/uScdSDGP4NgCKFrPdznbhw.png'
tags: [nx, release]
-description: 'Another release packed with cool features and improvements just got released: Nx 14.2. Read all about the Angular v14 upgrade that comes with it, TypeScript and other 3rd party package upgrades, improved Angular CLI to Nx migrations, optional `nx.json` and speed improvements.'
+description: Nx 14.2 brings Angular v14 support, Storybook 6.5, improved Angular CLI migrations, optional nx.json configuration, and significant performance gains.
---
Another release packed with cool features and improvements just got released: [Nx 14.2](https://github.com/nrwl/nx/releases/tag/14.2.2). Read all about the Angular v14 upgrade that comes with it, TypeScript and other 3rd party package upgrades, improved Angular CLI to Nx migrations, optional `nx.json` and speed improvements.
## Angular v14
-Angular v14 just got released last week. Read all about [the news here](https://blog.angular.io/angular-v14-is-now-available-391a6db736af). Huge kudos and congrats to the Angular team for again shipping on time based on their 6 months major release cycle. We’ve been collaborating with the team closely over the last couple of weeks to test early RCs, give feedback about upcoming features and foremost, make sure the new version not only works great in Nx, but also in the broader ecosystem that Nx supports such as Jest, ESLint, Storybook, Cypress and more.
+Angular v14 just got released last week. Read all about [the news here](https://blog.angular.io/angular-v14-is-now-available-391a6db736af). Huge kudos and congrats to the Angular team for again shipping on time based on their 6 months major release cycle. We've been collaborating with the team closely over the last couple of weeks to test early RCs, give feedback about upcoming features and foremost, make sure the new version not only works great in Nx, but also in the broader ecosystem that Nx supports such as Jest, ESLint, Storybook, Cypress and more.
-We’re excited about the new features that landed in Angular v14 which bring some fresh air and long-awaited innovations to the framework (\* cough \* Standalone Components, \* cough \* typed Angular forms).
+We're excited about the new features that landed in Angular v14 which bring some fresh air and long-awaited innovations to the framework (\* cough \* Standalone Components, \* cough \* typed Angular forms).
As such, if you upgrade to Nx 14.2 (`npx nx migrate latest`), Nx will make sure to also trigger all the Angular v14 related migration scripts to update your workspace to the latest Angular version.
@@ -28,7 +28,7 @@ With this release we also automatically update:
Nx 14.2 upgrades Storybook to the latest 6.5 version automatically for you.
-Storybook support has been in Nx for a long time and we had our custom executor (builder) to preconfigure Storybook in a way that it works best within an Angular monorepo setup. We’re glad that the Storybook support for Angular improved a lot over the last couple of releases s.t. we can **now directly use the Storybook native builders for Angular** (`@storybook/angular:start-storybook`, `@storybook/angular:build-storybook`). In your `project.json` (or `workspace.json` / `angular.json`) you should see the executor now being set to:
+Storybook support has been in Nx for a long time and we had our custom executor (builder) to preconfigure Storybook in a way that it works best within an Angular monorepo setup. We're glad that the Storybook support for Angular improved a lot over the last couple of releases s.t. we can **now directly use the Storybook native builders for Angular** (`@storybook/angular:start-storybook`, `@storybook/angular:build-storybook`). In your `project.json` (or `workspace.json` / `angular.json`) you should see the executor now being set to:
```json
"storybook": {
@@ -48,13 +48,13 @@ For all the other cool Storybook features, please refer to their release [announ
Nx is not only for large monorepos, but works really well for single-project Angular workspaces too! Why switch to Nx? We need an entire blog post for that (spoiler: coming soon 😉), but in a nutshell:
- everything from the Angular CLI still works
-- you get faster builds, test runs, linting etc powered by Nx’s task scheduling and caching
+- you get faster builds, test runs, linting etc powered by Nx's task scheduling and caching
- more schematics (we call them generators in Nx) with specific support for SCAM, NgRX setup, module federation and micro frontend setup and much more to come (looking at you Standalone Components)
- better, out of the box integration with community tools such as Jest for unit testing, ESLint, Cypress, Storybook,…
- improved developer experience powered by the [Nx Console VSCode extension](/getting-started/editor-setup)
- …
-In the last couple of weeks we’ve been working hard on making an automated migration from the Angular CLI to Nx as seamless as it can possibly get. And this can be tricky, believe us. We always had automated migrations, but we improved our existing ones and in addition also added support for multi-project Angular CLI workspaces.
+In the last couple of weeks we've been working hard on making an automated migration from the Angular CLI to Nx as seamless as it can possibly get. And this can be tricky, believe us. We always had automated migrations, but we improved our existing ones and in addition also added support for multi-project Angular CLI workspaces.
All you need to do is to run the following command on your existing Angular CLI setup.
@@ -62,15 +62,15 @@ All you need to do is to run the following command on your existing Angular CLI
ng add @nrwl/angular
```
-We try to infer your current setup and configuration and automatically migrate it, in addition to providing useful warnings and logs for the things we couldn’t migrate along the way, such that you have the possibility to manually adjust things.
+We try to infer your current setup and configuration and automatically migrate it, in addition to providing useful warnings and logs for the things we couldn't migrate along the way, such that you have the possibility to manually adjust things.
## More lightweight Nx
When you setup a new Nx workspace you can choose from a variety of presets (templates) that preconfigure your workspace in the best possible way, already setting up tool like Prettier, Jest, ESLint and Cypress. For some folks however, this might seem too much.
-For that, Nx always already had the — what we call — “Nx Core” setup. You can read more about [that on our guide](/getting-started/intro), but it basically allows Nx to be used without its plugins, just for the fast, powerful task scheduling and caching capabilities.
+For that, Nx always already had the — what we call — "Nx Core" setup. You can read more about [that on our guide](/getting-started/intro), but it basically allows Nx to be used without its plugins, just for the fast, powerful task scheduling and caching capabilities.
-In v14 we already simplified Nx (we have a whole section in [our release blog post](/blog/nx-v14-is-out-here-is-all-you-need-to-know)) and in v14.2 we even go a step further: **we made `nx.json` optional**, providing some reasonable defaults. Now, if you want to add Nx’s powerful task scheduler to an existing repository, all you need to do is to add the `nx` package as a dependency and you’re all set up.
+In v14 we already simplified Nx (we have a whole section in [our release blog post](/blog/nx-v14-is-out-here-is-all-you-need-to-know)) and in v14.2 we even go a step further: **we made `nx.json` optional**, providing some reasonable defaults. Now, if you want to add Nx's powerful task scheduler to an existing repository, all you need to do is to add the `nx` package as a dependency and you're all set up.
Whenever you need to fine-tune the default settings you can run the following command to get a `nx.json` generated or you can obviously create it by hand:
@@ -86,17 +86,17 @@ Speaking about lightweight Nx. With Nx v14.2.3 you can now just run
npx nx graph
```
-to download the Nx package, have it analyze your monorepo’s project graph and visualize it in its powerful project graph UI. Give it a try. Here’s Victor demoing it on the Next.js and Babel.js repository!
+to download the Nx package, have it analyze your monorepo's project graph and visualize it in its powerful project graph UI. Give it a try. Here's Victor demoing it on the Next.js and Babel.js repository!
{% tweet url="https://twitter.com/victorsavkin/status/1534909897976041474" /%}
## Nx just got faster, again!
-Part of our team has been heads-down on Lerna in the past month since we [took over stewardship of Lerna](/blog/lerna-is-dead-long-live-lerna). And apart from releasing Lerna 5 with important package upgrades, we wanted to solve Lerna’s biggest pain point: being slow. [We published an article](/blog/lerna-used-to-walk-now-it-can-fly) on how we envision that strategy 2 weeks ago and as part of that we’ve been digging deep into the Nx core and have been doing some proper profiling.
+Part of our team has been heads-down on Lerna in the past month since we [took over stewardship of Lerna](/blog/lerna-is-dead-long-live-lerna). And apart from releasing Lerna 5 with important package upgrades, we wanted to solve Lerna's biggest pain point: being slow. [We published an article](/blog/lerna-used-to-walk-now-it-can-fly) on how we envision that strategy 2 weeks ago and as part of that we've been digging deep into the Nx core and have been doing some proper profiling.
The result: Nx itself got faster as well 😃.
-Here’s the result of running our benchmark using the latest version of Nx 14.2:
+Here's the result of running our benchmark using the latest version of Nx 14.2:
```plaintext
* average lage time is: 10203.6
@@ -154,9 +154,9 @@ npx nx migrate --run-migrations
## Exciting?
-We’re already deep into following our v15 [roadmap](https://github.com/nrwl/nx/discussions/9716) with a lot of cool stuff coming up on the horizon.
+We're already deep into following our v15 [roadmap](https://github.com/nrwl/nx/discussions/9716) with a lot of cool stuff coming up on the horizon.
-Makes sure you don’t miss anything by
+Makes sure you don't miss anything by
- Following us [on Twitter](https://twitter.com/NxDevTools), and
- Subscribe to the [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1) for more information on [Angular](https://angular.io/), [React](https://reactjs.org/), Nx, and more!
diff --git a/docs/blog/2022-07-05-nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more.md b/docs/blog/2022-07-05-nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more.md
index 2649eb1f586a9..8892c28a06c3e 100644
--- a/docs/blog/2022-07-05-nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more.md
+++ b/docs/blog/2022-07-05-nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more.md
@@ -4,10 +4,10 @@ slug: 'nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-07-05/lpmHhIiE9v5yJI6nLi2dlw.png'
tags: [nx, release]
-description: 'Our last release blog post has been published not even a month ago and we already released 2 more minors. You missed the releases? No worries, we’ve got you covered. Here’s all you need to know.'
+description: 'Nx 14.4 enhances build caching with configurable inputs, simplifies workspace setup with optional npm scope, and optimizes CI performance with project graph improvements.'
---
-Our [last release blog post](/blog/nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more) has been published not even a month ago and we already released 2 more minors. You missed the releases? No worries, we’ve got you covered. Here’s all you need to know.
+Our [last release blog post](/blog/nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more) has been published not even a month ago and we already released 2 more minors. You missed the releases? No worries, we've got you covered. Here's all you need to know.
## targetDependencies -> targetDefaults
@@ -15,9 +15,9 @@ To get things started, `targetDependencies` got renamed to `targetDefaults`. We
You could always do more though. However, with our current mission to reduce configuration duplication, the now-called `targetDefaults` will get more powerful by allowing you to define sensible defaults for your project configs in a central place.
-> _Don’t worry, if you’re using `nx migrate` it'll handle the rewriting for you._
+> _Don't worry, if you're using `nx migrate` it'll handle the rewriting for you._
-## Syntactic sugar for “dependsOn”
+## Syntactic sugar for "dependsOn"
One of the key features of the Nx task scheduling system is that it is able to automatically build/test/lint/{name your operation} dependencies of your project. If you have `proj-a` which has a dependency on `proj-b` and we run `nx build proj-a` then Nx automatically builds `proj-b` before building `proj-a`. Why? Because `proj-a` depends on the output of `proj-b`.
@@ -59,7 +59,7 @@ With this release we introduce another, much more concise and elegant way of exp
}
```
-Similarly, if you don’t specify the `^` it would be the same as writing the following:
+Similarly, if you don't specify the `^` it would be the same as writing the following:
```json {% fileName="nx.json" %}
{
@@ -146,7 +146,7 @@ Check out the following video which goes into some of the details on the example
## Optional npmScope
-When you create a new Nx workspace it sets up a “npm scope” which you can find in the `nx.json`.
+When you create a new Nx workspace it sets up a "npm scope" which you can find in the `nx.json`.
```json {% fileName="nx.json" %}
{
@@ -191,9 +191,9 @@ npx nx migrate --run-migrations
## Exciting?
-We’re already deep into following our v15 [roadmap](https://github.com/nrwl/nx/discussions/9716) with a lot of cool stuff coming up on the horizon.
+We're already deep into following our v15 [roadmap](https://github.com/nrwl/nx/discussions/9716) with a lot of cool stuff coming up on the horizon.
-Makes sure you don’t miss anything by
+Makes sure you don't miss anything by
- Following us [on Twitter](https://twitter.com/NxDevTools), and
- Subscribe to the [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1) for more information on [Angular](https://angular.io/), [React](https://reactjs.org/), Nx, and more!
diff --git a/docs/blog/2022-07-14-setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx.md b/docs/blog/2022-07-14-setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx.md
index 78d7111ed69e3..13b61983859ad 100644
--- a/docs/blog/2022-07-14-setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx.md
+++ b/docs/blog/2022-07-14-setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx.md
@@ -4,9 +4,10 @@ slug: 'setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-07-14/ABrBjQPg4SrYzFQQXFxY-Q.png'
tags: [nx, tutorial]
+description: Learn to set up a monorepo with PNPM workspaces for Remix and React projects, then enhance it with Nx's task scheduling and caching features.
---
-In this article we’re going to have a deep dive into setting up a new monorepo using [PNPM workspaces](https://pnpm.io/workspaces) that hosts a Remix application as well as a React-based library. We will learn how to run commands with PNPM, how to run them in parallel and finally we’re going to add Nx for a more sophisticated task scheduling, including command caching and more.
+In this article we're going to have a deep dive into setting up a new monorepo using [PNPM workspaces](https://pnpm.io/workspaces) that hosts a Remix application as well as a React-based library. We will learn how to run commands with PNPM, how to run them in parallel and finally we're going to add Nx for a more sophisticated task scheduling, including command caching and more.
**Important:** If you are already familiar with the setup and configuration of a new PNPM workspace, feel free to skip to the part where we add Nx later in the article.
@@ -37,9 +38,9 @@ In this article we’re going to have a deep dive into setting up a new monorepo
## Initialize a new PNPM workspace
-To get started, let’s make sure you have PNPM installed. The [official docs have an installation page](https://pnpm.io/installation) with detailed instructions. I also recommend using something like [Volta](https://volta.sh/) in particular if you have to deal with multiple different versions of NPM/PNPM and node versions.
+To get started, let's make sure you have PNPM installed. The [official docs have an installation page](https://pnpm.io/installation) with detailed instructions. I also recommend using something like [Volta](https://volta.sh/) in particular if you have to deal with multiple different versions of NPM/PNPM and node versions.
-Let’s create a new folder named `pnpm-mono`, cd into it and then run `pnpm init` to generate a top-level `package.json`. This will be the root `package.json` for our PNPM monorepo.
+Let's create a new folder named `pnpm-mono`, cd into it and then run `pnpm init` to generate a top-level `package.json`. This will be the root `package.json` for our PNPM monorepo.
```shell
❯ mkdir pnpm-mono
@@ -53,7 +54,7 @@ It is probably also handy to initialize a new Git repository such that we can co
git init
```
-At this point let’s also create a `.gitignore` file to immediately exclude things like `node_modules` and common build output folders.
+At this point let's also create a `.gitignore` file to immediately exclude things like `node_modules` and common build output folders.
```.gitignore {% fileName=".gitignore" %}
node_modules
@@ -68,7 +69,7 @@ The structure of a monorepo might vary depending on what you plan to use it for.
- **package centric** repositories which are used for developing and publishing a cohesive set of reusable packages. This is a common setup in the open source world and can be seen in repositories such as [Angular](https://github.com/angular/angular), [React](https://github.com/facebook/react), [Vue](https://github.com/vuejs/vue) and many others. Those repos are characterized by most commonly having a `packages` folder and which are then commonly published to some public registry such as [NPM](https://npmjs.com/).
- **app centric** repositories which are used mainly for developing applications and products. This is a common setup in companies. Such repos are characterized in having an `apps` and `packages` or `libs` folder, where the `apps` folder contains the buildable and deployable applications, while the `packages` or `libs` folder contains libraries that are specific to one or multiple applications that are being developed within the monorepo. You can still also publish some of these libs to a public registry.
-In this article we’re going to use the “app centric” approach, to demonstrate how we can have an application that consumes packages from within the monorepo.
+In this article we're going to use the "app centric" approach, to demonstrate how we can have an application that consumes packages from within the monorepo.
Create an `apps` and `packages` folder within `pnpm-mono`:
@@ -76,7 +77,7 @@ Create an `apps` and `packages` folder within `pnpm-mono`:
❯ mkdir apps packages
```
-Now let’s configure PNPM to properly recognize the monorepo workspace. Basically we have to create a `pnpm-workspace.yaml` file at the root of the repository, defining our monorepo structure:
+Now let's configure PNPM to properly recognize the monorepo workspace. Basically we have to create a `pnpm-workspace.yaml` file at the root of the repository, defining our monorepo structure:
```yaml {% fileName="pnpm-workspace.yaml" %}
packages:
@@ -88,7 +89,7 @@ packages:
## Adding a Remix application
-We should now be ready to add our first application. For this example I picked [Remix](https://remix.run/) but you can really host any type of application in here, it won’t really matter.
+We should now be ready to add our first application. For this example I picked [Remix](https://remix.run/) but you can really host any type of application in here, it won't really matter.
> _Info: We use the normal_ [_Remix installation & setup procedure_](https://remix.run/docs/en/v1) _here which you can find on their docs page._
@@ -99,7 +100,7 @@ cd apps
npx create-remix@latest
```
-You will be asked for an app name. Let’s just go with “my-remix-app” which we’ll be using for the rest of this article. Obviously feel free to use a different one. In addition, the Remix setup process is also going to ask you a couple of questions that customize the exact setup. The particular options are not really relevant for our article here, so feel free to choose whatever best suits your needs.
+You will be asked for an app name. Let's just go with "my-remix-app" which we'll be using for the rest of this article. Obviously feel free to use a different one. In addition, the Remix setup process is also going to ask you a couple of questions that customize the exact setup. The particular options are not really relevant for our article here, so feel free to choose whatever best suits your needs.
You should have now a Remix app, within the `apps/my-remix-app` folder or whatever name you chose. Remix has already a `package.json` with corresponding scripts configured:
@@ -122,7 +123,7 @@ Usually, in a monorepo you want to run commands from the root of the repository
pnpm --filter
```
-Now it happens (at the writing of this article) that Remix’s default `package.json` doesn't have a `name` property defined which PNPM wants to run the package. So let's define one in the `apps/my-remix-app/package.json`:
+Now it happens (at the writing of this article) that Remix's default `package.json` doesn't have a `name` property defined which PNPM wants to run the package. So let's define one in the `apps/my-remix-app/package.json`:
```json
{
@@ -143,7 +144,7 @@ pnpm --filter my-remix-app dev
## Create a Shared UI library
-Now that we have our app set up, let’s create a library package that can be consumed by our application.
+Now that we have our app set up, let's create a library package that can be consumed by our application.
```shell
@@ -152,7 +153,7 @@ mkdir shared-ui
```
-Next, let’s create a `package.json` with the following content (you can also use `pnpm init` and adjust it):
+Next, let's create a `package.json` with the following content (you can also use `pnpm init` and adjust it):
```json
{
@@ -170,7 +171,7 @@ Next, let’s create a `package.json` with the following content (you can also u
Note, we declare it as `private` because we don't want to publish it to NPM or somewhere else, but rather just reference and use it locally within our workspace. I also removed the `version` property since it is not used.
-As the technology stack I’ve chosen to go with [React](https://reactjs.org/) (so we can import it in Remix) and [TypeScript](https://www.typescriptlang.org/) (because it can almost be considered a standard nowadays). Let’s install these dependencies from the root of the workspace:
+As the technology stack I've chosen to go with [React](https://reactjs.org/) (so we can import it in Remix) and [TypeScript](https://www.typescriptlang.org/) (because it can almost be considered a standard nowadays). Let's install these dependencies from the root of the workspace:
```shell
pnpm add --filter shared-ui react
@@ -196,7 +197,7 @@ We also want to have a public API where we export components to be used outside
export * from './Button';
```
-For sake of simplicity we just use the TypeScript compiler to compile our package. We could have some more sophisticated setup for bundling multiple files together etc with something like [Rollup](https://rollupjs.org/guide/en/) or whatever you prefer using, but that’s outside the scope of this article.
+For sake of simplicity we just use the TypeScript compiler to compile our package. We could have some more sophisticated setup for bundling multiple files together etc with something like [Rollup](https://rollupjs.org/guide/en/) or whatever you prefer using, but that's outside the scope of this article.
To create the desired compilation output create a `packages/shared-ui/tsconfig.json` file with the following configuration.
@@ -376,13 +377,13 @@ This is exactly where Nx can help. It is optimized for monorepo scenarios and co
## Installing Nx
-Since Nx will be used for running operations across the entire monorepo workspace we’re going to install it at the root level `package.json`.
+Since Nx will be used for running operations across the entire monorepo workspace we're going to install it at the root level `package.json`.
```shell
pnpm add nx -D -w
```
-That’s it.
+That's it.
## Running tasks with Nx
@@ -394,7 +395,7 @@ npx nx
`target` is the NPM script in this specific case you want to execute.
-Let’s try to run the build for our `shared-ui` package using the following command:
+Let's try to run the build for our `shared-ui` package using the following command:
```shell
npx nx build shared-ui
@@ -431,15 +432,15 @@ npx nx run-many --target=build --projects=my-remix-app,shared-ui
NX Successfully ran target build for 2 projects (1s)
```
-> _Note I’m prefixing the commands with_ `_npx_` _which runs the Nx executable in the_ `_node_modules_` _folder. In this way I don't have to install_ `_nx_` _globally. If you prefer doing that, feel free to do so._
+> _Note I'm prefixing the commands with_ `_npx_` _which runs the Nx executable in the_ `_node_modules_` _folder. In this way I don't have to install_ `_nx_` _globally. If you prefer doing that, feel free to do so._
## Configure Caching
One of the main benefits of adding Nx to our PNPM workspace is **speed via caching**. [Computation caching](/concepts/how-caching-works) is a feature where different inputs (source files, env variables, command flags, etc.) are collected and a hash computed & stored in a local folder. Next time you run the command again, Nx looks for a matching hash, and if it finds one it just restores it. This includes restoring the terminal output as well as build artifacts (e.g. JS files in `dist` folders).
-Not all operations are cacheable, only side-effect free ones are. For example, if you run an operation with the same inputs, it reliably always has to produce the same output. If as part of that operation you call some API for instance, it wouldn’t be cacheable because the result of that API might vary given the same input parameters.
+Not all operations are cacheable, only side-effect free ones are. For example, if you run an operation with the same inputs, it reliably always has to produce the same output. If as part of that operation you call some API for instance, it wouldn't be cacheable because the result of that API might vary given the same input parameters.
-In order to enable caching, let’s configure our cacheable operations. To do that we create an `nx.json` at the root of our workspace with the following content
+In order to enable caching, let's configure our cacheable operations. To do that we create an `nx.json` at the root of our workspace with the following content
```json {% fileName="nx.json" %}
{
@@ -456,7 +457,7 @@ In order to enable caching, let’s configure our cacheable operations. To do th
Note the `cacheableOperations` array where we specify `build` and `test` . You can add more such as linting.
-Having enabled this, if we now run our Remix app build the first time it is executed just as normal and we’ll see it takes roughly 1s.
+Having enabled this, if we now run our Remix app build the first time it is executed just as normal and we'll see it takes roughly 1s.
```shell
npx nx build my-remix-app
@@ -480,7 +481,7 @@ NX Successfully ran target build for project my-remix-app (9ms)
Nx read the output from the cache instead of running the command for 1 out of 1 tasks.
```
-You can also see that from the terminal output mentioning “existing outputs match the cache, left as is” as well as at the end “Nx read the output from the cache instead of running the command for 1 out of 1 tasks.”
+You can also see that from the terminal output mentioning "existing outputs match the cache, left as is" as well as at the end "Nx read the output from the cache instead of running the command for 1 out of 1 tasks."
Having caching in place can drastically improve command execution times. It also gets even more useful if the cache is remotely distributed so that it can be shared with CI as well as other developer machines. In the case of Nx this can be done by enabling [Nx Cloud](/ci/features/remote-cache), which comes with 500 hours saved/month for free (no credit card required) and unlimited hours for open source projects.
@@ -600,7 +601,7 @@ Next, we also want to define a targetDefault for our Remix `dev` command, such t
}
```
-Here’s the entire `nx.json` file again as a reference point:
+Here's the entire `nx.json` file again as a reference point:
```json
{
@@ -635,7 +636,7 @@ _Nx highlights dependent projects being built, but it keeps the main attention t
## Running just what changed
-In addition to providing caching, Nx also allows to just run what changed in a given branch with respect to a base branch by using the so-called [“affected command”](/ci/features/affected).
+In addition to providing caching, Nx also allows to just run what changed in a given branch with respect to a base branch by using the so-called ["affected command"](/ci/features/affected).
```shell
npx nx affected:
@@ -648,7 +649,7 @@ You can use any target you have defined in your workspace. For example
- `npx nx affected:lint`
- `npx nx affected:publish`
-**How does this work?** Nx builds a project graph based on the structure and dependencies among packages in your monorepo workspace. Let’s assume the following hypothetical graph:
+**How does this work?** Nx builds a project graph based on the structure and dependencies among packages in your monorepo workspace. Let's assume the following hypothetical graph:
@@ -668,7 +669,7 @@ If `lib2` gets changed in our feature branch, running tests against the workspac
-_Affected projects if “lib2” gets changed_
+_Affected projects if "lib2" gets changed_
Be aware however, if we run `affected:build` and we defined a dependency in our `nx.json` indicating that dependent projects need to be built first as well (see section "Defining task dependencies"), then `affected:build` would build
@@ -680,7 +681,7 @@ It would not build `lib1` or `appA` though.
## Additional features
-Besides speed and task scheduling improvements, we also get some additional features by adding Nx to our PNPM workspace. Let’s explore some:
+Besides speed and task scheduling improvements, we also get some additional features by adding Nx to our PNPM workspace. Let's explore some:
## Want to automate the creation of packages?
@@ -718,12 +719,12 @@ _Terminal output of Nx dynamically showing the parallel tasks being computed as
npx nx graph
```
-This launches an interactive visualization of the workspace’s project graph with some advanced capabilities of filtering, debugging your workspace structure and more.
+This launches an interactive visualization of the workspace's project graph with some advanced capabilities of filtering, debugging your workspace structure and more.
_Nx project graph visualization of our PNPM workspace_
-> _As a side-note: you can run the project graph on any PNPM workspace, even if you don’t have Nx installed. Running_ `_npx nx graph_` _should work._
+> _As a side-note: you can run the project graph on any PNPM workspace, even if you don't have Nx installed. Running_ `_npx nx graph_` _should work._
## Conclusion
diff --git a/docs/blog/2022-08-02-nx-14-5-cypess-v10-output-globs-linter-perf-react-tailwind-support.md b/docs/blog/2022-08-02-nx-14-5-cypess-v10-output-globs-linter-perf-react-tailwind-support.md
index efcd82ea774f4..cbf018526edf7 100644
--- a/docs/blog/2022-08-02-nx-14-5-cypess-v10-output-globs-linter-perf-react-tailwind-support.md
+++ b/docs/blog/2022-08-02-nx-14-5-cypess-v10-output-globs-linter-perf-react-tailwind-support.md
@@ -1,13 +1,13 @@
---
-title: 'Nx 14.5 — Cypess v10, Output globs, Linter perf, React Tailwind support'
+title: 'Nx 14.5 — Cypress v10, output globs, linter perf, React Tailwind support'
slug: 'nx-14-5-cypress-v10-output-globs-linter-perf-react-tailwind-support'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-08-02/ZUzLD-4JgrEBIZb3dXOvag.png'
tags: [nx, release]
-description: 'Here we go! After not even a month of releasing v14.4, Nx v14.5 is out!! Here’s all you need to know.'
+description: 'Nx 14.5 adds Cypress v10 with component testing, glob-based outputs for better caching, and improved React Tailwind integration.'
---
-Here we go! After not even a month of [releasing v14.4](/blog/nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more), Nx v14.5 is out!! Here’s all you need to know.
+Here we go! After not even a month of [releasing v14.4](/blog/nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more), Nx v14.5 is out!! Here's all you need to know.
**TL;DR:** [https://github.com/nrwl/nx/releases/tag/14.5.0](https://github.com/nrwl/nx/releases/tag/14.5.0)
@@ -87,7 +87,7 @@ Globs are particularly useful when multiple targets write to the same directory.
}
```
-Sometimes that’s not feasible though. In that case, globs come in handy:
+Sometimes that's not feasible though. In that case, globs come in handy:
```json {% fileName="nx.json" %}
{
@@ -104,7 +104,7 @@ Sometimes that’s not feasible though. In that case, globs come in handy:
## Parameter Forwarding when building dependent projects
-Besides the speed aspect, one key feature of Nx is the ability to build dependent projects automatically. Let’s say you have `project-a` which depends on `project-b`, then whenever you run the build for `project-a`, thanks to its project graph, Nx will automatically run the build for `project-b` first. You can define such dependencies either directly in your [project.json](/reference/project-configuration) or [package.json](/reference/project-configuration) file, or globally for an entire workspace in `nx.json`:
+Besides the speed aspect, one key feature of Nx is the ability to build dependent projects automatically. Let's say you have `project-a` which depends on `project-b`, then whenever you run the build for `project-a`, thanks to its project graph, Nx will automatically run the build for `project-b` first. You can define such dependencies either directly in your [project.json](/reference/project-configuration) or [package.json](/reference/project-configuration) file, or globally for an entire workspace in `nx.json`:
```json {% fileName="nx.json" %}
{
@@ -130,9 +130,9 @@ The `^` is a short-hand notation for
...and defines that the `build` task should be run for all its dependencies first.
-> _You have a PNPM,NPM or Yarn workspace? Adding Nx doesn’t only benefit you in terms of speed improvements, but also to define such build dependencies. Have a look at this video to learn more:_ [_Setup a monorepo with PNPM workspaces and add Nx for speed: Defining task dependencies aka build pipelines_](https://youtu.be/ngdoUQBvAjo?t=1485)
+> _You have a PNPM,NPM or Yarn workspace? Adding Nx doesn't only benefit you in terms of speed improvements, but also to define such build dependencies. Have a look at this video to learn more:_ [_Setup a monorepo with PNPM workspaces and add Nx for speed: Defining task dependencies aka build pipelines_](https://youtu.be/ngdoUQBvAjo?t=1485)
-What happens to parameters when invoking the target on a project’s dependencies? By default, they are not forwarded but starting with 14.5 you can. Here are some configuration options:
+What happens to parameters when invoking the target on a project's dependencies? By default, they are not forwarded but starting with 14.5 you can. Here are some configuration options:
```json
"build": {
@@ -169,7 +169,7 @@ Replacing `Sets`, `foreach`, `reduce` with plain `for` loops can often have quit
The [Nx Module Boundary lint rule](/features/enforce-module-boundaries) is a powerful concept especially when it comes to the maintainability aspect of projects and monorepos. Learn more in our blog article on [Taming Code Organization with Module Boundaries in Nx](/blog/mastering-the-project-boundaries-in-nx).
-The Module Boundary rule allows for much more though. It also allows to ban external imports. Say you have a frontend project where you want to make sure none of the “backend-type” dependencies accidentally get imported. Or vice-versa, a backend project where you wouldn’t necessarily want to depend on any “frontend-type” package references. You can use the `bannedExternalImports` for that. For example:
+The Module Boundary rule allows for much more though. It also allows to ban external imports. Say you have a frontend project where you want to make sure none of the "backend-type" dependencies accidentally get imported. Or vice-versa, a backend project where you wouldn't necessarily want to depend on any "frontend-type" package references. You can use the `bannedExternalImports` for that. For example:
```json {% fileName=".eslintrc.json" %}
{
@@ -242,7 +242,7 @@ import { libSayHi } from '@myorg/tslib-a';
## Nx Migrate improvements and Nx Repair
-We improved our log output from the Nx automated code migration run to make it more clear what a code migration actually changes. Also, those migrations that don’t do anything because they don’t apply to your workspace are not shown in the output at all.
+We improved our log output from the Nx automated code migration run to make it more clear what a code migration actually changes. Also, those migrations that don't do anything because they don't apply to your workspace are not shown in the output at all.
@@ -264,7 +264,7 @@ We also improved our React Native support by adding the possibility to generate
## Deprecating Angular Protractor e2e tests
-[Protractor](https://github.com/angular/protractor/issues/5502) has been deprecated for a while on the Angular CLI side and given Nx has had [Cypress](https://cypress.io/) support for a while it has never been a popular choice. Starting with this release we’re deprecating the generator for setting up Protractor and we’re planning on removing support entirely in Nx v15.
+[Protractor](https://github.com/angular/protractor/issues/5502) has been deprecated for a while on the Angular CLI side and given Nx has had [Cypress](https://cypress.io/) support for a while it has never been a popular choice. Starting with this release we're deprecating the generator for setting up Protractor and we're planning on removing support entirely in Nx v15.
## Other Package updates
diff --git a/docs/blog/2022-08-18-helping-the-environment-by-saving-two-centuries-of-compute-time.md b/docs/blog/2022-08-18-helping-the-environment-by-saving-two-centuries-of-compute-time.md
index b128939299161..1c4af1686e465 100644
--- a/docs/blog/2022-08-18-helping-the-environment-by-saving-two-centuries-of-compute-time.md
+++ b/docs/blog/2022-08-18-helping-the-environment-by-saving-two-centuries-of-compute-time.md
@@ -4,6 +4,7 @@ slug: 'helping-the-environment-by-saving-two-centuries-of-compute-time'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-08-18/FBQVoC9YXF7wlq3dhxfQMQ.png'
tags: [nx]
+description: "Discover how Nx's caching and computation-saving features have saved over 200 years of compute time, reducing CO2 emissions through efficient task execution."
---
Among the core features of Nx is the ability to save computation time by applying different strategies. Scroll to the end of the article for some more info, but first, **how much time is actually being saved?**
@@ -44,7 +45,7 @@ Calculating the CO2 emissions can be tricky. It really depends on what machines
## Help me out! A Primer on how Nx saves computation
-Nx has various strategies to help you reduce computation time, locally and on CI. Here’s a very short overview of the strategies Nx applies with some links for further reading.
+Nx has various strategies to help you reduce computation time, locally and on CI. Here's a very short overview of the strategies Nx applies with some links for further reading.
### Affected Commands
diff --git a/docs/blog/2022-10-12-lerna-reborn-whats-new-in-v6.md b/docs/blog/2022-10-12-lerna-reborn-whats-new-in-v6.md
index 34c3bc9e230c8..59b3f90f8a320 100644
--- a/docs/blog/2022-10-12-lerna-reborn-whats-new-in-v6.md
+++ b/docs/blog/2022-10-12-lerna-reborn-whats-new-in-v6.md
@@ -1,12 +1,13 @@
---
-title: 'Lerna reborn — What’s new in v6?'
+title: "Lerna reborn — What's new in v6?"
slug: 'lerna-reborn-whats-new-in-v6'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-10-12/RGQCNNO-SSQ8PHnIZ4BVTQ.png'
tags: [nx, release]
+description: Lerna v6 brings default Nx integration, remote caching, PNPM support, dynamic terminal output, and improved task management to speed up your monorepo builds.
---
-Lerna v6 is out!! Here’s everything you need to know about the **new Lerna experience!**
+Lerna v6 is out!! Here's everything you need to know about the **new Lerna experience!**
**Table of Contents**
@@ -26,7 +27,7 @@ Lerna v6 is out!! Here’s everything you need to know about the **new Lerna exp
## Lerna continues to evolve
-If you already know this, feel free to skip ahead. But surprisingly many still haven’t heard that **Lerna is back**, far from obsolete or deprecated and is getting brand new features. We from [Nrwl](/company) are the creators of Nx and given our long history in the monorepo space, we offered to [take over stewardship of Lerna](/blog/lerna-is-dead-long-live-lerna) when it was declared “dead” in April 2022.
+If you already know this, feel free to skip ahead. But surprisingly many still haven't heard that **Lerna is back**, far from obsolete or deprecated and is getting brand new features. We from [Nrwl](/company) are the creators of Nx and given our long history in the monorepo space, we offered to [take over stewardship of Lerna](/blog/lerna-is-dead-long-live-lerna) when it was declared "dead" in April 2022.
Since we took over, in May 2022, it has been an absolute rollercoaster. We launched [a brand new website](https://lerna.js.org/), updated the content of the docs, and [made Lerna 10x faster](/blog/lerna-used-to-walk-now-it-can-fly). And now, **Lerna v6 is out!**
@@ -34,7 +35,7 @@ Since we took over, in May 2022, it has been an absolute rollercoaster. We launc
Up until Lerna v4, either the `p-map` or `p-queue` npm packages have been used to delegate the task scheduling. With [v5.1](/blog/lerna-used-to-walk-now-it-can-fly) we introduced `nx` as an additional mechanism to schedule tasks. The advantage? Nx has caching built-in, which **also gives Lerna caching support**, making it lightning fast. A recent benchmark test resulted in **Lerna being 2.5x faster than Lage** and around **4x faster than Turbo** (as of Oct 2022; [test it out by yourself](https://github.com/vsavkin/large-monorepo)).
-So far you had to enable “Nx support” by setting the `useNx` flag in `lerna.json`:
+So far you had to enable "Nx support" by setting the `useNx` flag in `lerna.json`:
```
// lerna.json
@@ -44,7 +45,7 @@ So far you had to enable “Nx support” by setting the `useNx` flag in `lerna.
}
```
-We’ve been testing this opt-in for the last couple of months and got tons of amazing feedback from companies and open source projects. As a result, **with v6 all Lerna workspaces have the useNx set to** `**true**` **by default** even if you don't have it in your Lerna config file. If you don't want to use it, you can disable it by setting the flag to false.
+We've been testing this opt-in for the last couple of months and got tons of amazing feedback from companies and open source projects. As a result, **with v6 all Lerna workspaces have the useNx set to** `**true**` **by default** even if you don't have it in your Lerna config file. If you don't want to use it, you can disable it by setting the flag to false.
To experience fast caching, ensure you have a `nx.json` file at the root of your Lerna workspace where you define the cacheable operations. Check out [the docs for more details](https://lerna.js.org/docs/features/cache-tasks). Here's an example configuration file:
@@ -63,144 +64,6 @@ To experience fast caching, ensure you have a `nx.json` file at the root of your
Note that you can also run..
-```shell
-npx lerna add-caching
```
-..to automatically generate a `nx.json` configuration file based on your existing Lerna workspace.
-
-## Remote caching with Lerna
-
-By using Nx as the task scheduler for Lerna it inherits all the capabilities Nx comes with. That not only just includes local caching, but also the possibility of having **remote caching** and **distributed task execution**.
-
-Remote caching allows you to distribute your local cache with your co-workers and your CI system. This is done via [Nx Cloud](/nx-cloud). But distributed caching is just one aspect. Nx Cloud also comes with a “run view” that visualizes your CI run with easy grouping and filtering capabilities, but in particular, it comes with the ability to distribute your tasks dynamically across multiple machines. All by optimizing for the best parallelization and machine utilization.
-
-
-
-All you need to set this up is to run..
-
-```shell
-npx nx connect-to-nx-cloud
-```
-
-..in your Lerna workspace, which will guide you through a couple of questions and set you up with an [Nx Cloud](/nx-cloud).
-
-Read more [on the docs](https://lerna.js.org/docs/features/cache-tasks#distributed-computation-caching).
-
-## Defining a task pipeline
-
-When running tasks in a monorepo environment, you want to maximize the parallelization, but **still account for potential dependencies among tasks**. For example, assume you have a Remix application that depends on some `shared-ui` library. You want to ensure that `shared-ui` is built before either building or serving the Remix application.
-
-With Lerna v6 you can do so in the `nx.json` file by defining the `targetDefaults`:
-
-```
-// nx.json
-{
- ...
- "targetDefaults": {
- "build": {
- "dependsOn": ["^build"]
- },
- "dev": {
- "dependsOn": ["^build"]
- }
- }
-}
-```
-
-In this case, whenever you run either `build` or `dev`, Lerna would first run the `build` task on all the dependent packages.
-
-[Read more on our docs](https://lerna.js.org/docs/concepts/task-pipeline-configuration).
-
-## Lerna add-caching command
-
-If you don’t have caching or your task pipeline set up just yet, no worries. We wanted to make it as easy as possible by providing a dedicated command:
-
-```shell
-npx lerna add-caching
-```
-
-This will scan your workspace, find all your `package.json` scripts and then guide you through the **configuration of both, your cacheable operations as well as your task pipeline**.
-
-Here’s a quick walkthrough video:
-
-{% youtube src="https://www.youtube.com/watch?v=jaH2BqWo-Pc" /%}
-
-You are obviously always free to create the `nx.json`by hand.
-
-## PNPM support for Lerna
-
-In the past, Lerna didn’t properly support PNPM. We fixed this in v6. Now whenever you use Lerna in combination with PNPM, we make sure to detect packages based on the `pnpm-workspace.yaml`, to enforce `useWorkspaces: true` , we update the `pnpm-lock.yaml`
-accordingly when using `lerna version` and we also added proper support for the `workspace:` protocol that PNPM uses.
-
-You can now finally use one of the fastest package managers in combination with a new fast Lerna experience. Also, make sure to check [out our docs for all the details](https://lerna.js.org/docs/recipes/using-pnpm-with-lerna).
-
-## Dynamic terminal output
-
-When running tasks in parallel across a large number of projects, it can become quite difficult to follow along in the terminal with what got built and where tasks failed. That’s why the new Lerna version comes with a dynamic terminal output that only shows what is most relevant at a given moment.
-
-
-
-Note that you would still see all of the output as usual on CI.
-
-## VSCode extension for Lerna workspaces
-
-Lerna now has a [dedicated VSCode extension](https://lerna.js.org/docs/features/editor-integrations) to help you navigate your monorepo. This allows you to run commands directly from the context menu (by right-clicking on a project):
-
-
-
-Or visualize a project and its relationships with other projects in the workspace.
-
-
-
-You will also get intelligent autocompletion in configuration files. Here’s an example of Nx console providing context-based information when editing the `nx.json` task dependencies.
-
-
-
-## Lerna Repair
-
-Lerna v6 comes with a built-in `lerna repair` command. Running this command will automatically fix your Lerna configuration. For instance, in Lerna v6, there's no need to have `useNx: true` in your `lerna.json` since that will be the new default going forward. Running `lerna repair` fixes this.
-
-
-
-This allows you always to have the most up-to-date Lerna setup and it will become even more powerful as we keep adding migrations in the future.
-
-## Lerna and Prettier
-
-Prettier is part of the standard toolchain of every developer nowadays. In Lerna v6 we added a feature to detect whether Prettier is set up in the workspace. If so, we automatically apply it to all files that get updated by running the `lerna version` command. No more follow-up commits just to fix the file formatting!
-
-## Migrating to Lerna v6
-
-Migrating from Lerna v5 to v6 is non-breaking. We increased the major because we changed some defaults and wanted to be cautious about that and communicate it properly.
-
-{% youtube src="https://www.youtube.com/embed/kOD7880DNEE" /%}
-
-Similarly, if you’re still on v4 and want to migrate to v6 it should be pretty straightforward and not be breaking in most cases.
-
-Just update the Lerna package version to the latest and then run..
-
-```shell
-npx lerna add-caching
```
-
-..to enable and configure caching for your workspace.
-
-## Lerna is using Nx now. Can I keep using my Lerna commands?
-
-Absolutely! One of the key advantages of the new integration of Lerna with Nx is that you can keep using your existing Lerna commands without migrating them to a new syntax. They will now just be a lot faster.
-
-You can read more about that [on our docs](https://lerna.js.org/docs/lerna-and-nx).
-
-## Are you maintaining an OSS repository using Lerna?
-
-If you are an OSS maintainer and you use a Lerna workspace, let us know!
-Ping the Lerna team [on Twitter](https://twitter.com/lernajs) or ping [me directly](https://twitter.com/juristr). We’d love to have a look and help with the migration, look at the repository and make sure it is configured in the best optimal way in terms of monorepo setup and features like caching.
-
-That said, as an open-source maintainer you also get unlimited free computation caching with Nx Cloud. So we’d love to set you up with that.
-
-## Learn more
-
-- 🧠 [Lerna Docs](https://lerna.js.org/)
-- 👩💻 [Lerna GitHub](https://github.com/lerna/lerna)
-- 💬 [Nx Official Discord Server](https://go.nx.dev/community)(join the `#lerna` channel)
-- 📹 [Nrwl Youtube Channel](https://www.youtube.com/nrwl_io)
diff --git a/docs/blog/2022-10-14-whats-new-in-nx-15.md b/docs/blog/2022-10-14-whats-new-in-nx-15.md
index 199d328e06b9a..1d6dfb7464758 100644
--- a/docs/blog/2022-10-14-whats-new-in-nx-15.md
+++ b/docs/blog/2022-10-14-whats-new-in-nx-15.md
@@ -1,13 +1,13 @@
---
-title: 'What’s new in Nx 15?'
+title: What's new in Nx 15?
slug: 'whats-new-in-nx-15'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-10-14/ReZPz_brTiYN84yvR7Hi2w.png'
tags: [nx, release]
-description: 'Nx v15 is finally here! Let’s go through all the great features that went into this major release.'
+description: 'Explore the major features and improvements introduced in Nx version 15, including enhanced performance and developer experience.'
---
-Nx v15 is finally here! Let’s go through all the great features that went into this major release.
+Nx v15 is finally here! Let's go through all the great features that went into this major release.
{% toc /%}
@@ -21,9 +21,9 @@ Expect it to see growing much faster even in the coming months.
## Performance — Core, Nx Daemon
-Performance optimizations are a recurring theme for us. We’re continuously optimizing Nx to make it even faster than it is now.
+Performance optimizations are a recurring theme for us. We're continuously optimizing Nx to make it even faster than it is now.
-For example, when a cache hit needs to restore artifacts to some “dist” folder, we don’t touch the file system if it is not needed (because FS operations are costly). As a result, this would also not mess with any “watch” process on your dist folder, which you might use. And obviously, we detect whenever a file is missing. If you delete a single file from your “dist” folder, Nx will know and restore it properly.
+For example, when a cache hit needs to restore artifacts to some "dist" folder, we don't touch the file system if it is not needed (because FS operations are costly). As a result, this would also not mess with any "watch" process on your dist folder, which you might use. And obviously, we detect whenever a file is missing. If you delete a single file from your "dist" folder, Nx will know and restore it properly.
This is possible because we offload some of the computation to a daemon process. This runs in the background to compute heavy operations like ensuring the project graph is always in sync, watching cache output locations and more.
@@ -31,10 +31,10 @@ You can read more about it here: [/concepts/nx-daemon](/concepts/nx-daemon)
## Package-based and Integrated Style Monorepos
-In our 5 years of working with small and huge monorepos we’ve seen various setups. We’ve narrowed them down to two approaches:
+In our 5 years of working with small and huge monorepos we've seen various setups. We've narrowed them down to two approaches:
- **package-based monorepos** — a collection of packages where each package within the monorepo is treated as a fully independent package. Meaning they have their own `package.json` with dependencies declared. To share and link packages locally within the monorepo, the "workspaces" feature from NPM/Yarn/PNPM can be used. Tools for this style are Nx, Lerna, Lage and Turbo.
-- **integrated monorepos** — is usually a pre-configured and managed setup. You don’t have to rely on NPM/Yarn/PNPM workspaces for local linking and tooling helps with the low-level tooling setup and integrating various tools. Tools for this style are Nx and Bazel.
+- **integrated monorepos** — is usually a pre-configured and managed setup. You don't have to rely on NPM/Yarn/PNPM workspaces for local linking and tooling helps with the low-level tooling setup and integrating various tools. Tools for this style are Nx and Bazel.
We improved and optimized Nx to be the best solution for both approaches. As part of this optimization, starting with Nx v15, when you run
@@ -57,11 +57,11 @@ You can also read more about the concept here: [/deprecated/integrated-vs-packag
## New Compact Syntax for Task Pipelines
-Monorepos typically do not just have dependencies among projects but also among tasks. Let’s say you have a Remix app that depends on some `shared-ui` React-based library. Whenever you build or serve your app, `shared-ui` gets built before. This is required - especially in a package-based monorepo - because connected packages depend on the build artifacts, that is the compiled JS files.
+Monorepos typically do not just have dependencies among projects but also among tasks. Let's say you have a Remix app that depends on some `shared-ui` React-based library. Whenever you build or serve your app, `shared-ui` gets built before. This is required - especially in a package-based monorepo - because connected packages depend on the build artifacts, that is the compiled JS files.
You can define such a relationship easily in the `nx.json` by specifying the `targetDefaults` property. Nx had this for a while, but as part of some v14 minor version, we made it more concise.
-Here’s an example:
+Here's an example:
```json {% fileName="nx.json" %}
{
@@ -85,7 +85,7 @@ You can read more here: [/concepts/task-pipeline-configuration](/concepts/task-p
## Fine-tune Caching with Inputs
-Nx’s caching is already powerful, but you can get even more out of it by fine-tuning it to your workspace’s needs. This is done by defining `inputs` in `nx.json` for the various targets.
+Nx's caching is already powerful, but you can get even more out of it by fine-tuning it to your workspace's needs. This is done by defining `inputs` in `nx.json` for the various targets.
Here, for instance, we define that the `build` target should include all the files of a given project but not include test-related files. As a result, changing a Jest spec won't invalidate your `build` target cache.
@@ -106,7 +106,7 @@ Here, for instance, we define that the `build` target should include all the fil
Since these inputs are often re-used across different targets, they can be defined in a dedicated `namedInputs` property (think like a variable declaration) and re-used in the `targetDefaults`.
-Here’s an example of the defaults that a new Nx workspace comes with:
+Here's an example of the defaults that a new Nx workspace comes with:
```json {% fileName="nx.json" %}
{
@@ -145,7 +145,7 @@ You can read more here: [/recipes/running-tasks/configure-inputs](/recipes/runni
## Nx Console
-Nx Console has evolved to be a key part of Nx’s mission to improve the life of developers when working with Nx (and now also Lerna) monorepos. There have been tremendous improvements over the last couple of months. Here are some highlights!
+Nx Console has evolved to be a key part of Nx's mission to improve the life of developers when working with Nx (and now also Lerna) monorepos. There have been tremendous improvements over the last couple of months. Here are some highlights!
The famous, so much loved [Nx Graph](/features/explore-graph) can now also be visualized within VSCode directly:
@@ -155,17 +155,17 @@ Get a more in-depth walkthrough here:
{% youtube src="https://youtu.be/ZST_rmhzRXI" /%}
-There’s also a language server that comes with Nx Console now, which gives you intelligent autocompletion support in your configuration files:
+There's also a language server that comes with Nx Console now, which gives you intelligent autocompletion support in your configuration files:
{% tweet url="https://twitter.com/NxDevTools/status/1573323012476051456" /%}
## Website Redesign & Docs Updates
-Every now and then, it’s time to revamp our website. Because it doesn’t feel as fresh as it did when you originally created it. So here we go! We created a new, condensed entry page with the most relevant information,
+Every now and then, it's time to revamp our website. Because it doesn't feel as fresh as it did when you originally created it. So here we go! We created a new, condensed entry page with the most relevant information,
-…followed by “tab-like” navigation
+...followed by "tab-like" navigation
@@ -173,11 +173,11 @@ We keep improving our docs, and we invest a lot of time to make things easier fo
{% tweet url="https://twitter.com/victorsavkin/status/1580283233916186624" /%}
-It is an ongoing process, and we have a lot of content to cover! We follow the [Diataxis](https://diataxis.fr/) framework for structuring our technical content where we want to clearly assign responsibilities to each page content, so it’s easy for you to get out of it what you most need. It is mostly structured around whether
+It is an ongoing process, and we have a lot of content to cover! We follow the [Diataxis](https://diataxis.fr/) framework for structuring our technical content where we want to clearly assign responsibilities to each page content, so it's easy for you to get out of it what you most need. It is mostly structured around whether
-- you want to get a deeper understanding of core concepts (“Concepts” section)
-- you want to learn something new (“Tutorial” section) or
-- you want a solution to a specific problem (“Recipes” section).
+- you want to get a deeper understanding of core concepts ("Concepts" section)
+- you want to learn something new ("Tutorial" section) or
+- you want a solution to a specific problem ("Recipes" section).
Besides the two new [package-based](/getting-started/tutorials/typescript-packages-tutorial) and [integrated style tutorials](/getting-started/tutorials/react-monorepo-tutorial) we also have two brand new reworked tutorials
@@ -202,7 +202,7 @@ And for those wondering. Yeah, [Vite](https://vitejs.dev/) is coming.
## Cypress v10 and Component Testing
-Cypress has been an integral part of an Nx workspace for a long time. A couple of months ago, they shipped one of their biggest updates: Cypress v10. We’ve been working closely with the team to coordinate the integration into Nx and ensure it is as smooth as possible.
+Cypress has been an integral part of an Nx workspace for a long time. A couple of months ago, they shipped one of their biggest updates: Cypress v10. We've been working closely with the team to coordinate the integration into Nx and ensure it is as smooth as possible.
You can run the following command to migrate your existing Cypress to the latest version.
@@ -220,7 +220,7 @@ Read more here: [/recipes/cypress/cypress-component-testing](/recipes/cypress/cy
## Angular: Improved Angular CLI Migrations and Standalone Components
-We landed generators to support Angular developers in leveraging the new standalone components API in their Nx-based projects. Here’s a preview:
+We landed generators to support Angular developers in leveraging the new standalone components API in their Nx-based projects. Here's a preview:
{% tweet url="https://twitter.com/NxDevTools/status/1567513106380894215" /%}
diff --git a/docs/blog/2022-11-17-from-bootstrapped-to-venture-backed-nx-raises-8-6m.md b/docs/blog/2022-11-17-from-bootstrapped-to-venture-backed-nx-raises-8-6m.md
index 78e6971a4cdb7..28e5f3e5e8b93 100644
--- a/docs/blog/2022-11-17-from-bootstrapped-to-venture-backed-nx-raises-8-6m.md
+++ b/docs/blog/2022-11-17-from-bootstrapped-to-venture-backed-nx-raises-8-6m.md
@@ -4,40 +4,41 @@ slug: 'from-bootstrapped-to-venture-backed'
authors: ['Jeff Cross']
cover_image: '/blog/images/2022-11-17/a3eT-mjLsXTiHU5m.png'
tags: [nx]
+description: Nx raises $8.6M seed round led by Nexus Venture Partners and A16z to scale open source Nx, Nx Cloud, and Nx Enterprise, powering 75% of JavaScript monorepo tooling.
---
-I’m excited to let the Nx Community know about our first round of outside financing, led by [Nexus Venture Partners](https://nexusvp.com/) and [A16z](https://a16z.com/), with several amazing angel investors. We’ve raised a seed round of $8.6M to scale the growth of open source Nx, [Nx Cloud](/nx-cloud), and [Nx Enterprise](/enterprise). With this new capital, we’re able to allocate significantly more resources to rapidly evolving our open source and commercial products to help development teams **ship faster at any scale**.
+I'm excited to let the Nx Community know about our first round of outside financing, led by [Nexus Venture Partners](https://nexusvp.com/) and [A16z](https://a16z.com/), with several amazing angel investors. We've raised a seed round of $8.6M to scale the growth of open source Nx, [Nx Cloud](/nx-cloud), and [Nx Enterprise](/enterprise). With this new capital, we're able to allocate significantly more resources to rapidly evolving our open source and commercial products to help development teams **ship faster at any scale**.
_Just a few of the companies powered by Nx_
-When Victor Savkin and I left Google to start this company in December 2016, we saw a big gap between how enterprises were building software and how companies like Google were building software. So in 2017, we released the first version of our developer toolkit, Nx, which focused on enabling monorepo-style development for large software teams. Nx has continued to evolve and grow in adoption since then, at more than 5x year-over-year in npm downloads to now 12M+ monthly downloads! We’re proud that the world’s top brands depend on Nx to help their development teams iterate faster on critical products.
+When Victor Savkin and I left Google to start this company in December 2016, we saw a big gap between how enterprises were building software and how companies like Google were building software. So in 2017, we released the first version of our developer toolkit, Nx, which focused on enabling monorepo-style development for large software teams. Nx has continued to evolve and grow in adoption since then, at more than 5x year-over-year in npm downloads to now 12M+ monthly downloads! We're proud that the world's top brands depend on Nx to help their development teams iterate faster on critical products.
-[Nx Cloud](/nx-cloud) has also seen a significant uptake in adoption, thanks in large part due to the addition of [Distributed Task Execution](/ci/concepts/parallelization-distribution) last year. With the combination of Distributed Task Execution and Distributed Caching, Nx Cloud is having a massive impact on the time it takes to validate and merge pull requests, drastically reducing product time-to-market. There are now more than 100k connected Nx Workspaces on nx.app. With Nx Cloud, Nx and Lerna workspaces can drastically reduce build times by letting Nx Cloud manage task cache distribution, and optimal distribution of tasks across many machines using Nx’s deep understanding of project relationships and task timings. We’ve determined that Nx and Nx Cloud have [saved over 250 years of compute time](/blog/helping-the-environment-by-saving-two-centuries-of-compute-time) since we started measuring.
+[Nx Cloud](/nx-cloud) has also seen a significant uptake in adoption, thanks in large part due to the addition of [Distributed Task Execution](/ci/concepts/parallelization-distribution) last year. With the combination of Distributed Task Execution and Distributed Caching, Nx Cloud is having a massive impact on the time it takes to validate and merge pull requests, drastically reducing product time-to-market. There are now more than 100k connected Nx Workspaces on nx.app. With Nx Cloud, Nx and Lerna workspaces can drastically reduce build times by letting Nx Cloud manage task cache distribution, and optimal distribution of tasks across many machines using Nx's deep understanding of project relationships and task timings. We've determined that Nx and Nx Cloud have [saved over 250 years of compute time](/blog/helping-the-environment-by-saving-two-centuries-of-compute-time) since we started measuring.
-Our most significant commercial innovation in the past year has been [Nx Enterprise](/enterprise), which allows companies to deploy Nx Cloud on their own infrastructure. Some of the world’s leading brands are relying on Nx Enterprise to help their developers get products and features to market significantly faster. One repository powered by Nx Enterprise is saving over 40,000 hours per month of compute time thanks to Distributed Caching and Distributed Task Execution, drastically reducing the time it takes to validate and merge pull requests.
+Our most significant commercial innovation in the past year has been [Nx Enterprise](/enterprise), which allows companies to deploy Nx Cloud on their own infrastructure. Some of the world's leading brands are relying on Nx Enterprise to help their developers get products and features to market significantly faster. One repository powered by Nx Enterprise is saving over 40,000 hours per month of compute time thanks to Distributed Caching and Distributed Task Execution, drastically reducing the time it takes to validate and merge pull requests.
_Monorepo.tools, by Nx in collaboration with other monorepo projects_
-With Nx and Lerna under our stewardship, we now maintain [more than 75% of leading JavaScript monorepo tooling](https://npmtrends.com/@bazel/typescript-vs-@microsoft/rush-vs-@nrwl/tao-vs-lerna-vs-turbo). We’re sharing this space with some other great teams, who are all pushing the state of the art forward. We developed the site [monorepo.tools](https://monorepo.tools/) in collaboration with these teams to spread the monorepo love and help developers decide which tool is right for them.
+With Nx and Lerna under our stewardship, we now maintain [more than 75% of leading JavaScript monorepo tooling](https://npmtrends.com/@bazel/typescript-vs-@microsoft/rush-vs-@nrwl/tao-vs-lerna-vs-turbo). We're sharing this space with some other great teams, who are all pushing the state of the art forward. We developed the site [monorepo.tools](https://monorepo.tools/) in collaboration with these teams to spread the monorepo love and help developers decide which tool is right for them.
## Why Outside Funding?
-Victor Savkin and I originally decided not to raise funding when starting the company, to give ourselves space to experiment with different business models and find product-market fit. We’ve revisited the idea of funding from time to time, but our consulting business has provided more than enough income to sustain the company’s growth. It wasn’t until Nx Cloud and Nx Enterprise started growing at a much more rapid pace that we decided we could provide a lot more value, more quickly to our community and customers by taking on some partners and capital to help us with our next phase of growth.
+Victor Savkin and I originally decided not to raise funding when starting the company, to give ourselves space to experiment with different business models and find product-market fit. We've revisited the idea of funding from time to time, but our consulting business has provided more than enough income to sustain the company's growth. It wasn't until Nx Cloud and Nx Enterprise started growing at a much more rapid pace that we decided we could provide a lot more value, more quickly to our community and customers by taking on some partners and capital to help us with our next phase of growth.
-We couldn’t be more excited to partner with our co-lead investors, [Nexus Venture Partners](https://nexusvp.com/) and [Andreesen Horowitz (a16z)](https://a16z.com/). Both firms have deep expertise in developer tooling and strongly believe in our vision of helping development teams scale. We’re excited to have them bring their own unique talents, experience, and resources to help us execute on that vision. Abhishek Sharma from Nexus has tremendous commercial open source experience, and has been excited about Nx for years. A16z is a powerhouse with an extremely talented enterprise infrastructure team led by Martin Casado and Jennifer Li, alongside amazing partners including, Satish Talluri, and Yoko Li. We’re also excited to be joined by many angels, including Tom Preston-Werner, Matt Biilmann, and several other notable CEOs, founders and technologists.
+We couldn't be more excited to partner with our co-lead investors, [Nexus Venture Partners](https://nexusvp.com/) and [Andreesen Horowitz (a16z)](https://a16z.com/). Both firms have deep expertise in developer tooling and strongly believe in our vision of helping development teams scale. We're excited to have them bring their own unique talents, experience, and resources to help us execute on that vision. Abhishek Sharma from Nexus has tremendous commercial open source experience, and has been excited about Nx for years. A16z is a powerhouse with an extremely talented enterprise infrastructure team led by Martin Casado and Jennifer Li, alongside amazing partners including, Satish Talluri, and Yoko Li. We're also excited to be joined by many angels, including Tom Preston-Werner, Matt Biilmann, and several other notable CEOs, founders and technologists.
_Most of the Nx team at Nx Conf in Tempe, AZ, October 2022_
-We are only scratching the surface of how we can help teams scale their development, and we’re drastically increasing our R&D time to move even faster on new innovations in build performance and team scaling. Fortunately, we already have a world-class team of top engineers who’ve helped us build Nx and Nx Cloud, while also helping our customers succeed with Nx. With this new capital, our engineers are able spend significantly more R&D time building industry-changing products and features, while continuing to work with and learn from our Nx Cloud and Nx Enterprise customers.
+We are only scratching the surface of how we can help teams scale their development, and we're drastically increasing our R&D time to move even faster on new innovations in build performance and team scaling. Fortunately, we already have a world-class team of top engineers who've helped us build Nx and Nx Cloud, while also helping our customers succeed with Nx. With this new capital, our engineers are able spend significantly more R&D time building industry-changing products and features, while continuing to work with and learn from our Nx Cloud and Nx Enterprise customers.
-We’ll be sharing more exciting announcements soon, so make sure to follow our journey on [@NxDevTools](https://twitter.com/nxdevtools)!
+We'll be sharing more exciting announcements soon, so make sure to follow our journey on [@NxDevTools](https://twitter.com/nxdevtools)!
Jeff Cross
CEO, Nx
diff --git a/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md b/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md
index c8619c4efa4b3..45f326c79587f 100644
--- a/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md
+++ b/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md
@@ -4,6 +4,7 @@ slug: 'nx-15-3-standalone-projects-vite-task-graph-and-more'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2022-12-06/VXYjjWhOUpNuHFGCoF63OQ.png'
tags: [nx, release]
+description: Nx 15.3 introduces standalone projects, Vite and Vitest tooling, enhanced task graph visualization, and simplified project adoption, now reaching 3M weekly downloads.
---
What a massive release! Here are all the news 👇
@@ -28,14 +29,14 @@ Prefer **a video version?**
## Funding — Nx raises $8.6M
-In case you missed it, we raised $8.6 million a couple of weeks ago. Here’s the official blog post from our CEO Jeff: [/blog/from-bootstrapped-to-venture-backed](/blog/from-bootstrapped-to-venture-backed)
+In case you missed it, we raised $8.6 million a couple of weeks ago. Here's the official blog post from our CEO Jeff: [/blog/from-bootstrapped-to-venture-backed](/blog/from-bootstrapped-to-venture-backed)
It is exciting for us as we can now have more employees focused on pushing Nx and Nx Cloud forward, which will significantly boost development speed!
-For most of our workforce, working on Nx and Nx Cloud was only part of their “20% project”. Yet we released terrific features over the last years and have seen tremendous growth with Nx (which brings us to the next section)
+For most of our workforce, working on Nx and Nx Cloud was only part of their "20% project". Yet we released terrific features over the last years and have seen tremendous growth with Nx (which brings us to the next section)
## 3 million downloads per week
-2022 has been a particularly crazy but successful year for us. And Nx’s growth confirms that we’re on the right track:
+2022 has been a particularly crazy but successful year for us. And Nx's growth confirms that we're on the right track:
- January: Nx crosses 1 million downloads per week
- June: Nx crosses 2 million downloads per week
@@ -51,7 +52,7 @@ On to 4 million!
One of our most loved features also just got more powerful: the Nx graph!
-Nx already visualizes your project graph, mapping the dependencies different projects have on one another through imports and exports in your code. But your tasks also have a graph. Your task can either depend on another target on the same project, let’s say you have a `prebuild`
+Nx already visualizes your project graph, mapping the dependencies different projects have on one another through imports and exports in your code. But your tasks also have a graph. Your task can either depend on another target on the same project, let's say you have a `prebuild`
and a `build` target. Whenever you run `build`, you want to run `prebuild` first. Similarly, if your project depends on other projects, you might want to make sure to build them first as well. This is called a [task pipeline](/concepts/task-pipeline-configuration) and can be defined in `nx.json` as follows:
```json5 {% fileName="nx.json" %}
@@ -89,7 +90,7 @@ In 15.3 we are therefore making **standalone projects** a first-class feature. S
-In a standalone project setup, you don’t have the typical `apps` and `libs` structure you might be accustomed to if you have been using Nx in the past. Instead, the app lives directly at the root of your workspace. The structure looks similar to the following:
+In a standalone project setup, you don't have the typical `apps` and `libs` structure you might be accustomed to if you have been using Nx in the past. Instead, the app lives directly at the root of your workspace. The structure looks similar to the following:
```text
e2e/
@@ -136,15 +137,15 @@ package.json
It is really up to you how you want to structure them.
-Think of it as a supercharged development tool, providing powerful generators, features like [module boundary rules](/blog/mastering-the-project-boundaries-in-nx) and obviously the ability to run tests, linting, building on individual libraries. Not to forget about Nx’s powerful caching ability. And if you’re ready for a “real” monorepo because you want to add multiple applications, there will be paths for you to “upgrade” to that structure.
+Think of it as a supercharged development tool, providing powerful generators, features like [module boundary rules](/blog/mastering-the-project-boundaries-in-nx) and obviously the ability to run tests, linting, building on individual libraries. Not to forget about Nx's powerful caching ability. And if you're ready for a "real" monorepo because you want to add multiple applications, there will be paths for you to "upgrade" to that structure.
## Integrated Vite and Vitest support is here!
-Finally! We talked about it; now it is here! Official Vite and Vitest support for Nx-based integrated monorepos and standalone app projects! That adds the Vite community into the Nx family, and we’ve been chatting with core members there recently, and we love it!
+Finally! We talked about it; now it is here! Official Vite and Vitest support for Nx-based integrated monorepos and standalone app projects! That adds the Vite community into the Nx family, and we've been chatting with core members there recently, and we love it!
So before we dive into this: if you are using a package-based monorepo with Nx, you could already use Vite or whatever other technology you want. Nx does just the task scheduling there, running your `package.json` scripts efficiently. Whatever those scripts do "internally" is up to you.
-But if you power an integrated setup, you’d want more support via a dedicated Nx plugin. And there has already been a [Nx community plugin](/community) created by the folks from [https://nxext.dev/](https://nxext.dev/). Given the high demand for Vite support, we (the Nx core team) started to look into creating and maintaining our own. We reached out to the out [Dominik Piper](https://mobile.twitter.com/dominik_pieper) and [Jordan Hall](https://mobile.twitter.com/JordanHall_dev) from the NxExt team and they were on board from the beginning! We got lots of helpful input, while designing the new Vite plugin. Huge shoutout to them!!
+But if you power an integrated setup, you'd want more support via a dedicated Nx plugin. And there has already been a [Nx community plugin](/community) created by the folks from [https://nxext.dev/](https://nxext.dev/). Given the high demand for Vite support, we (the Nx core team) started to look into creating and maintaining our own. We reached out to the out [Dominik Piper](https://mobile.twitter.com/dominik_pieper) and [Jordan Hall](https://mobile.twitter.com/JordanHall_dev) from the NxExt team and they were on board from the beginning! We got lots of helpful input, while designing the new Vite plugin. Huge shoutout to them!!
`@nrwl/vite` (just like `@nrwl/webpack`) is a package that can be integrated as part of other packages. Right now, we're prioritizing our React setup. If you generate a new Nx workspace and choose the new "Standalone React app" version, you will get a React application powered by Vite and Vitest.
@@ -160,7 +161,7 @@ This new setup gives you an easy jumpstart as it does all the configuration for
- Tests with Vitest
- Making sure it nicely works with TypeScript (both in src and spec files)
-Open the application’s `project.json` to inspect the setup:
+Open the application's `project.json` to inspect the setup:
```json
{
@@ -189,7 +190,7 @@ Open the application’s `project.json` to inspect the setup:
}
```
-Furthermore, there’s a `vite.config.ts` at the project root level, which you can further customize to your needs. It is already pre-configured to seamlessly work in a monorepo scenario and has the Vitest setup. Just run `npx nx serve` or `npx nx build` or `npx nx test` to serve, build or test your standalone React app.
+Furthermore, there's a `vite.config.ts` at the project root level, which you can further customize to your needs. It is already pre-configured to seamlessly work in a monorepo scenario and has the Vitest setup. Just run `npx nx serve` or `npx nx build` or `npx nx test` to serve, build or test your standalone React app.
If you are currently using the NxExt based Vite plugin, or even a Webpack based Nx React setup, you can easily transition to the new Vite plugin by just running the following generator:
@@ -203,7 +204,7 @@ You can also find all the details about the new Vite package on our docs: [/nx-a
## Adopting Nx has never been easier
-Many developers don’t necessarily start with a greenfield project, but rather have an existing reality where they want to use Nx. We’ve been improving this process of adopting Nx over this year to the point where it has never been easier than now!
+Many developers don't necessarily start with a greenfield project, but rather have an existing reality where they want to use Nx. We've been improving this process of adopting Nx over this year to the point where it has never been easier than now!
Regardless of whether you have
@@ -228,7 +229,7 @@ Check out our docs for all the details on
- [migrating your CRA project to Nx](/recipes/adopting-nx/adding-to-existing-project)
- [migrating your Angular CLI app to Nx](/recipes/angular/migration/angular)
-Oh..you’re wondering why you would want to add Nx to an existing non-monorepo project? Then keep reading 👇
+Oh..you're wondering why you would want to add Nx to an existing non-monorepo project? Then keep reading 👇
## Adding Nx to an Existing Standalone Project
@@ -243,7 +244,7 @@ npx nx lint
npx nx e2e
```
-If your change just modified a couple of “spec files”, then there’s no point on running `build` or `e2e` again, but just `test` and potentially `lint`. Nx can restore the results of the other operations from the cache.
+If your change just modified a couple of "spec files", then there's no point on running `build` or `e2e` again, but just `test` and potentially `lint`. Nx can restore the results of the other operations from the cache.
To add Nx to an existing standalone project, all you need to run is
@@ -251,7 +252,7 @@ To add Nx to an existing standalone project, all you need to run is
npx nx@latest init
```
-This process will ask you a few questions about which operations are cacheable. We optimized it so that you don’t necessarily have to use `nx` to run your build, linting or serving your app. You can keep using `npm run build` or `npm start`. This is because Nx wraps your scripts in the `package.json`. Notice how `build` and `lint` are wrapped because they are cacheable operations.
+This process will ask you a few questions about which operations are cacheable. We optimized it so that you don't necessarily have to use `nx` to run your build, linting or serving your app. You can keep using `npm run build` or `npm start`. This is because Nx wraps your scripts in the `package.json`. Notice how `build` and `lint` are wrapped because they are cacheable operations.
```json
{
@@ -276,7 +277,7 @@ Read more on our docs: [/recipes/adopting-nx/adding-to-existing-project](/recipe
{% youtube src="https://www.youtube.com/watch?v=PRURABLaS8s" /%}
-Most of the tasks in a workspace run against a specific project, like building or testing it. That’s why they live in the corresponding `package.json` or `project.json`. But sometimes you have workspace-wide commands which you want to run through the "Nx pipeline" to get the benefits of caching.
+Most of the tasks in a workspace run against a specific project, like building or testing it. That's why they live in the corresponding `package.json` or `project.json`. But sometimes you have workspace-wide commands which you want to run through the "Nx pipeline" to get the benefits of caching.
Assume you already have a script called `docs` in your root-level `package.json`.
@@ -344,7 +345,7 @@ Nx can automatically detect your scripts in `package.json`. But if you have an i
The task itself is handled by an [Nx executor](/extending-nx/recipes/local-executors) that comes with the plugin, in this case `@nrwl/vite:build` to build a Vite project.
-To add a custom command, like invoking a node script, Nx has the so-called [“run-commands”](/recipes/running-tasks/run-commands-executor). So far you had to wrap those commands as follows:
+To add a custom command, like invoking a node script, Nx has the so-called ["run-commands"](/recipes/running-tasks/run-commands-executor). So far you had to wrap those commands as follows:
```json5 {% fileName="project.json" %}
{
@@ -383,13 +384,13 @@ For simple commands this was a huge overhead, so we simplified it to just this:
}
```
-Simple, isn’t it! Obviously the expanded form is still there and also useful for when you need more options, run multiple commands or features such as argument forwarding.
+Simple, isn't it! Obviously the expanded form is still there and also useful for when you need more options, run multiple commands or features such as argument forwarding.
You can read all about it on our docs: [/recipes/running-tasks/run-commands-executor](/recipes/running-tasks/run-commands-executor)
## Coming up
-Wow, what a launch! But more features are on the way in the coming weeks that didn’t make it for this release. Super excited about these, which most prominently include
+Wow, what a launch! But more features are on the way in the coming weeks that didn't make it for this release. Super excited about these, which most prominently include
- Workspace watching
- Lock-file pruning
diff --git a/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md b/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md
index a4fc60e6c593f..0489181577eb4 100644
--- a/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md
+++ b/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md
@@ -4,11 +4,12 @@ slug: 'nx-15-4-vite-4-support-a-new-nx-watch-command-and-more'
authors: ['Zack DeRose']
cover_image: '/blog/images/2022-12-22/N4_XxtYFr-V2cF6fPoBO3g.png'
tags: [nx, release]
+description: Nx 15.4 adds Vite 4.0 support, new Watch command for file watching, webpack-less Cypress support, SSR for Module Federation, and parallel target execution improvements.
---
Nx just had a massive release 2 weeks ago with Nx 15.3 — if you missed it be sure to check out [our article](/blog/nx-15-3-standalone-projects-vite-task-graph-and-more) featuring some huge improvements including Vite support, Standalone Angular and React presets, and a Task Graph visualization!
-But over the past couple of weeks, we’ve been able to land quite a few awesome features, so we’re going back at it again releasing Nx 15.4 today, including:
+But over the past couple of weeks, we've been able to land quite a few awesome features, so we're going back at it again releasing Nx 15.4 today, including:
- [Vite 4.0 Support](#vite-40-support)
- [Nx Watch](#nx-watch)
@@ -27,11 +28,11 @@ Nx 15.4 brings in the latest Vite major version following the Vite 4 release ear
-As the [Vite launch article](https://vitejs.dev/blog/announcing-vite4.html) mentions, we are investing in the Vite ecosystem, and now officially support a first-party Vite plugin. Nx 15.4 continues this investment with timely support for Vite 4, and we’re excited to be a part of the Vite ecosystem and a part of bringing more value to our devs through Vite support!
+As the [Vite launch article](https://vitejs.dev/blog/announcing-vite4.html) mentions, we are investing in the Vite ecosystem, and now officially support a first-party Vite plugin. Nx 15.4 continues this investment with timely support for Vite 4, and we're excited to be a part of the Vite ecosystem and a part of bringing more value to our devs through Vite support!
Projects already using our [@nrwl/vite plugin](/nx-api/vite) will be automatically upgraded to Vite 4 when they upgrade to the latest Nx version with the `nx migrate` command, and we've also simplified the configuration required to support Vite.
-We’ve also spent some effort into making the conversion of existing projects to use Vite simpler, including:
+We've also spent some effort into making the conversion of existing projects to use Vite simpler, including:
- the ability to choose which targets you want to convert
- enhanced `vite.config.ts` file configuration
@@ -45,7 +46,7 @@ You can check out more details about our Vite plugin including how to add Vite a
{% youtube src="https://youtu.be/0eVplUl1zBE" /%}
-Nx 15.4 includes a new feature to support file-watching with Nx! Here’s how it works:
+Nx 15.4 includes a new feature to support file-watching with Nx! Here's how it works:
Syntax:
@@ -64,9 +65,9 @@ For the projects modifier option:
- you can use `--all` for all projects in the workspace
- or you can filter down to specific projects with the `--projects=[comma separated list of project names]` option that can be used in conjunction with a `--includeDependentProjects` option as well
-The `nx watch` command will support the variables `$NX_PROJECT_NAME` and `$NX_CHANGED_FILES`. This feature opens the door for nice developer workflows where we can provide an out-of-the-box mechanism for Nx to run relevant tasks on save, and we’re excited to see our users get their hands on this feature.
+The `nx watch` command will support the variables `$NX_PROJECT_NAME` and `$NX_CHANGED_FILES`. This feature opens the door for nice developer workflows where we can provide an out-of-the-box mechanism for Nx to run relevant tasks on save, and we're excited to see our users get their hands on this feature.
-Personally, I’m excited to use the following command:
+Personally, I'm excited to use the following command:
```shell
npx -c 'nx watch –all – npx nx affected --target=test --files=$NX_FILE_CHANGES'
@@ -81,7 +82,7 @@ Check out [our docs](/recipes/running-tasks/workspace-watching) for more details
_Running e2e with React Standalone Projects_
-We added a React Standalone preset in 15.3 to support single react application workspaces with Nx, and in 15.4, we’ve added back in Cypress for this preset.
+We added a React Standalone preset in 15.3 to support single react application workspaces with Nx, and in 15.4, we've added back in Cypress for this preset.
With Nx 15.4, a standalone React application will be created with an e2e directory preconfigured and optimized for running Cypress with the command `npx nx e2e e2e` as soon as your initial workspace is generated.
@@ -93,7 +94,7 @@ Now you can get the benefits of both Server Side Rendering and Module Federation
Our existing `host` and `remote` Module Federation generators have an added `--ssr` flag that will enable Server-Side Rendering by generating the correct server files.
-We’ve also added a new executor to allow you to serve the host server locally, along with all remote servers from a single command.
+We've also added a new executor to allow you to serve the host server locally, along with all remote servers from a single command.
Learn more about this new feature [in our docs](/recipes/react/module-federation-with-ssr)!
@@ -117,13 +118,13 @@ npx nx run-many --target test build lint --projects "domain-products-*"
## Interactive Prompts for Custom Preset
-Last but not least, we’ve added support for interactive prompts for Custom Presets!
+Last but not least, we've added support for interactive prompts for Custom Presets!
In Nx, [presets](/extending-nx/recipes/create-preset#create-a-custom-plugin-preset) are special code generation scripts that can be used to create a brand new Nx Workspace, using our `create-nx-workspace` command.
-For instance, I happen to know [Shai Reznik](https://twitter.com/shai_reznik) at [builder.io](https://builder.io/) has been working on a qwik plugin for Nx, and since the [qwik-nx](https://www.npmjs.com/package/qwik-nx) plugin that he’s published includes an [Nx generator called “preset”](https://github.com/qwikifiers/qwik-nx/blob/main/packages/qwik-nx/generators.json#L33), I can run the command:
+For instance, I happen to know [Shai Reznik](https://twitter.com/shai_reznik) at [builder.io](https://builder.io/) has been working on a qwik plugin for Nx, and since the [qwik-nx](https://www.npmjs.com/package/qwik-nx) plugin that he's published includes an [Nx generator called "preset"](https://github.com/qwikifiers/qwik-nx/blob/main/packages/qwik-nx/generators.json#L33), I can run the command:
```shell
npx nx create-nx-workspace –preset=qwik-nx
@@ -131,11 +132,11 @@ npx nx create-nx-workspace –preset=qwik-nx
As we can see, the preset option matches the name of the published npm package.
-This custom preset feature has been around for a while, but as of 15.4 we’ve added support for these custom presets to interactively prompt the user following the initial installation step!
+This custom preset feature has been around for a while, but as of 15.4 we've added support for these custom presets to interactively prompt the user following the initial installation step!
-This should open up some powerful functionality for plugin and package authors to parameterize their code generation scripts with Nx, and we’re excited to see folks like [Shai](https://twitter.com/shai_reznik), [builder.io](https://builder.io/), and [qwik](https://qwik.builder.io/) leverage this new feature!
+This should open up some powerful functionality for plugin and package authors to parameterize their code generation scripts with Nx, and we're excited to see folks like [Shai](https://twitter.com/shai_reznik), [builder.io](https://builder.io/), and [qwik](https://qwik.builder.io/) leverage this new feature!
-## That’s it for this release.
+## That's it for this release.
Follow us on our socials and on [Youtube](https://www.youtube.com/channel/UCF8luR7ORJTCwSNA9yZksCw) to make sure to see more news and releases as we announce them!
diff --git a/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md b/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md
index c03b6fe6808e6..647b2d7c20247 100644
--- a/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md
+++ b/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md
@@ -4,6 +4,7 @@ slug: 'setting-up-module-federation-with-server-side-rendering-for-angular'
authors: ['Colum Ferry']
cover_image: '/blog/images/2023-01-10/kyMChnJ-X6jK9sbuaOdOiw.png'
tags: [nx, tutorial]
+description: Learn how to implement Webpack Module Federation with Server-Side Rendering in Angular applications using Nx for improved performance and micro-frontend architecture.
---
[Module Federation](https://webpack.js.org/plugins/module-federation-plugin/) is a technology provided by [Webpack](https://webpack.js.org/) that enables modules to be federated across different origins at runtime. This means that Webpack will simply ignore these modules at build time, expecting them to be available to be fetched across the network at runtime.
@@ -29,7 +30,7 @@ A traditional SSR application is rendered on the server. It receives the request
-With Module Federation and SSR, it takes that concept and the concept of MF to allow portions of the app to be run on their own server. The host server will receive the route and if it’s a route pointing to a remote, it will ask the remote to process the route, then send the rendered HTML to the browser.
+With Module Federation and SSR, it takes that concept and the concept of MF to allow portions of the app to be run on their own server. The host server will receive the route and if it's a route pointing to a remote, it will ask the remote to process the route, then send the rendered HTML to the browser.
@@ -37,13 +38,13 @@ This gives us full power of SSR but also still allowing us to break our build in
## Example
-Let’s walk through how to set this up with Nx for Angular. We will generate a host application (dashboard) and a remote application (login).
+Let's walk through how to set this up with Nx for Angular. We will generate a host application (dashboard) and a remote application (login).
```shell
npx create-nx-workspace@latest myorg
```
-You’ll be prompted for the type of workspace you want to create, and the preset to use.
+You'll be prompted for the type of workspace you want to create, and the preset to use.
Answer with the following:
@@ -51,7 +52,7 @@ Answer with the following:
✔ What to create in the new workspace · apps
✔ Enable distributed caching to make your CI faster · No
-> _You will also be prompted whether to add Nx Cloud to your workspace. We won’t address this in this article, but it is highly recommended to use this along with Module Federation to allow for the cache of your remote applications to be shared amongst teammates and CI, further improving your build times. You can learn more about Nx Cloud here:_ [_https://nx.app_](https://nx.app/)_._
+> _You will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this article, but it is highly recommended to use this along with Module Federation to allow for the cache of your remote applications to be shared amongst teammates and CI, further improving your build times. You can learn more about Nx Cloud here:_ [_https://nx.app_](https://nx.app/)_._
When your workspace is created, run `cd myorg`.
@@ -91,11 +92,11 @@ Compiled successfully.
\*\* Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 \*\*
```
-Let’s open a new tab in our browser, and open Network tab in the DevTools. After this, navigate to [http://localhost:4200](http://localhost:4200/). You should see the following:
+Let's open a new tab in our browser, and open Network tab in the DevTools. After this, navigate to [http://localhost:4200](http://localhost:4200/). You should see the following:
-The most interesting piece here is the first entry in the network log. Let’s look at it more closely:
+The most interesting piece here is the first entry in the network log. Let's look at it more closely:
@@ -103,15 +104,15 @@ We can see that the server returned the fully rendered HTML for the page!
Angular Universal will switch to CSR after the initial page load, which means if we were to click on the `login` link, it would use CSR to render that page. The Angular Module that is resolved and rendered still lives on the remote server, but Module Federation will still resolve this correctly! 🔥
-But to see where the real magic happens, let’s manually navigate the browser to [http://localhost:4200/login](http://localhost:4200/login). You should see that in the Network tab, the fully rendered HTML for the login page has been returned!
+But to see where the real magic happens, let's manually navigate the browser to [http://localhost:4200/login](http://localhost:4200/login). You should see that in the Network tab, the fully rendered HTML for the login page has been returned!
Despite the code for that page living on a different, remote, server, the host server composed it correctly and was still able to return the correct HTML for that route, thanks to Module Federation!
-And that’s it! It’s super simple to get Module Federation and SSR up and running with Nx!
+And that's it! It's super simple to get Module Federation and SSR up and running with Nx!
## Serving the login application and watching for changes
-If you’re working on the login application, and are iteratively checking the results of your changes, you’ll want the server to rebuild when you make your change. You can easily enable that by using the `devRemotes` flag::
+If you're working on the login application, and are iteratively checking the results of your changes, you'll want the server to rebuild when you make your change. You can easily enable that by using the `devRemotes` flag::
```shell
npx nx serve-ssr dashboard --devRemotes=login
diff --git a/docs/blog/2023-01-12-react-vite-and-typescript-get-started-in-under-2-minutes.md b/docs/blog/2023-01-12-react-vite-and-typescript-get-started-in-under-2-minutes.md
index 7f8c94f5f68ee..c60a0a3c61c6e 100644
--- a/docs/blog/2023-01-12-react-vite-and-typescript-get-started-in-under-2-minutes.md
+++ b/docs/blog/2023-01-12-react-vite-and-typescript-get-started-in-under-2-minutes.md
@@ -4,9 +4,10 @@ slug: 'react-vite-and-typescript-get-started-in-under-2-minutes'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-01-12/ucL7YQ2v8aaOy426soLPZA.png'
tags: [nx]
+description: Learn how to quickly set up a modern React application with Vite and TypeScript using Nx, featuring built-in testing, linting, and development tools.
---
-Let’s be honest. Dealing with tooling is not something enjoyable if you have to deliver code. It should just work and not be in the way. So let’s explore how to kickstart your next React project using Vite, in under 2 minutes, without worrying about the setup.
+Let's be honest. Dealing with tooling is not something enjoyable if you have to deliver code. It should just work and not be in the way. So let's explore how to kickstart your next React project using Vite, in under 2 minutes, without worrying about the setup.
## Table of Contents
@@ -29,7 +30,7 @@ Let’s be honest. Dealing with tooling is not something enjoyable if you have t
{% youtube src="https://youtu.be/fkTz6KJxhhE" /%}
-Traditionally, you might lean towards [Create-React-App (CRA)](https://create-react-app.dev/) started to do precisely that. But what if I told you there’s a better alternative, providing
+Traditionally, you might lean towards [Create-React-App (CRA)](https://create-react-app.dev/) started to do precisely that. But what if I told you there's a better alternative, providing
- not just scaffolding for the initial setup but helping you along the way to generate components, routing, etc
- automatically sets you up with best practices tools for e2e testing, unit testing, code formatting, and linting
@@ -38,14 +39,14 @@ Traditionally, you might lean towards [Create-React-App (CRA)](https://create-re
- helps you modularize your application
- comes with automated upgrade features to keep your tooling evergreen
-I’m talking about Nx. Nx comes with a set of plugins that come with code generation abilities and help abstract some of the lower-level tooling setups. And this can be really interesting for the use case we wanna tackle today.
+I'm talking about Nx. Nx comes with a set of plugins that come with code generation abilities and help abstract some of the lower-level tooling setups. And this can be really interesting for the use case we wanna tackle today.
-> **_Reader:_** _“Wait a minute, I heard about Nx. Isn’t that for monorepos?”_**_Me:_** _“Yeah you’re right. But in 15.3 they introduced something called ‘standalone apps’”
-> Reader: “Standalone?”
-> _**_Me:_** _“Yeah, a fancy term for a setting up a single app and allows for some cool modularization. There’s a video introducing that feature here:_ [_https://youtu.be/qEaVzh-oBBc_](https://youtu.be/qEaVzh-oBBc)_"
-> _**_Reader:_** _“ha, interesting 🤔”_
+> **_Reader:_** _"Wait a minute, I heard about Nx. Isn't that for monorepos?"_**_Me:_** _"Yeah you're right. But in 15.3 they introduced something called 'standalone apps'"
+> Reader: "Standalone?"
+> _**_Me:_** _"Yeah, a fancy term for a setting up a single app and allows for some cool modularization. There's a video introducing that feature here:_ [_https://youtu.be/qEaVzh-oBBc_](https://youtu.be/qEaVzh-oBBc)_"
+> _**_Reader:_** _"ha, interesting 🤔"_
-So let’s go and set up our **React + Vite + TypeScript project**.
+So let's go and set up our **React + Vite + TypeScript project**.
## How do I create a new project setup?
@@ -65,13 +66,13 @@ And then choose the option you prefer in the terminal prompt:
-In the end, what you’ll get is the following structure:
+In the end, what you'll get is the following structure:
## Running, building and testing the app
-First off, let’s run our new, shiny application. Just invoke
+First off, let's run our new, shiny application. Just invoke
```
npm start
@@ -158,7 +159,7 @@ npx nx test
You might have noticed the `e2e` folder. That's a fully-functioning setup of [Cypress](https://cypress.io/) for doing integration-level or even full end-to-end tests.
-This is excellent because you don’t have to configure anything at all. No need to
+This is excellent because you don't have to configure anything at all. No need to
- Cypress configured to use Vite (instead of Webpack)
- set up linting for the e2e project (yes writing good quality test code is just as important)
@@ -199,7 +200,7 @@ This might look weird initially, but basically, we run the `e2e` target (see `e2
By default, these tests run in headless mode, but you can pass `--watch` to run it interactively with the Cypress test runner such that the tests get re-executed whenever we change our source.
-> _Want Cypress Component testing? There’s an Nx generator that can help set that up. Check out the docs:_ [_/nx-api/react/generators/cypress-component-configuration_](/nx-api/react/generators/cypress-component-configuration)
+> _Want Cypress Component testing? There's an Nx generator that can help set that up. Check out the docs:_ [_/nx-api/react/generators/cypress-component-configuration_](/nx-api/react/generators/cypress-component-configuration)
## Linting
@@ -209,7 +210,7 @@ And similarly, linting can be triggered by running the following command:
npx nx lint
```
-There’s a `.eslintrc.json` file already at the workspace's root that contains some best practices rules.
+There's a `.eslintrc.json` file already at the workspace's root that contains some best practices rules.
## Customize Vite and Vitest
@@ -250,7 +251,7 @@ Nx is known for its caching that helps optimize the speed in monorepos. Caching
-On every run, Nx compares that hash against a local cache folder. If the hash exists, Nx restores the command line output and potential artifacts (JS, CSS,… files) produced by a previous run. This helps speed up computation because you don’t run it if you don’t need to.
+On every run, Nx compares that hash against a local cache folder. If the hash exists, Nx restores the command line output and potential artifacts (JS, CSS,… files) produced by a previous run. This helps speed up computation because you don't run it if you don't need to.
> _See Nx the docs for more info:_ [_/concepts/how-caching-works_](/concepts/how-caching-works)
@@ -269,7 +270,7 @@ Imagine a storefront application. You will probably have domain areas like
- User Profile — which manages everything user related. Think of it when you access Amazon and go to your account. Things like managing your addresses
- …
-We’re just scratching the surface here. This can become big quickly. The only way to manage such a structure with the current tooling (including CRA) is to organize these domains in folders. So you’d have something like this in a CRA setup:
+We're just scratching the surface here. This can become big quickly. The only way to manage such a structure with the current tooling (including CRA) is to organize these domains in folders. So you'd have something like this in a CRA setup:
```
cra-app
@@ -301,13 +302,13 @@ cra-app
Most devtools (including CRA) force you into a monolithic structure, where you divide your features into folders. Folders are limited in terms of isolation, though; as your application grows, this might quickly go out of hand.
-We can impose a different, stronger structure with Nx by extracting these areas into dedicated libraries or modules. These live side-by-side with your application. Let’s say we have a folder named “domains” which contains these domain areas. Then you can easily generate a new library with the following command:
+We can impose a different, stronger structure with Nx by extracting these areas into dedicated libraries or modules. These live side-by-side with your application. Let's say we have a folder named "domains" which contains these domain areas. Then you can easily generate a new library with the following command:
```shell
npx nx g @nrwl/react:lib checkout --directory=domains/orders/checkout --bundler=none
```
-The above command creates a new “ checkout “ library in the `domains/orders/` folder. Here's what it looks like:
+The above command creates a new " checkout " library in the `domains/orders/` folder. Here's what it looks like:
```
awesomereactapp
@@ -360,7 +361,7 @@ When generating the library, a TypeScript path mapping is automatically created
}
```
-In this way, anything that’s being exported from the `checkout` library can be consumed like
+In this way, anything that's being exported from the `checkout` library can be consumed like
```typescript
import { SomeComponent } from '@awesomereactapp/domains/orders/checkout';
@@ -386,7 +387,7 @@ npx nx graph
-It becomes even more interesting if you select the “Group by folder” checkbox as the domains become visible at that point:
+It becomes even more interesting if you select the "Group by folder" checkbox as the domains become visible at that point:
@@ -394,9 +395,9 @@ It becomes even more interesting if you select the “Group by folder” checkbo
## Hidden gem: Guard your boundaries
-Scaling a software product is more than just the initial structuring and modularization. It consists of a constant ongoing process of ensuring modules stay in shape and don’t contain any undesired cross-references or circular dependencies. You could leverage the Nx graph to verify that visually, but that doesn’t scale.
+Scaling a software product is more than just the initial structuring and modularization. It consists of a constant ongoing process of ensuring modules stay in shape and don't contain any undesired cross-references or circular dependencies. You could leverage the Nx graph to verify that visually, but that doesn't scale.
-To help with that, Nx has a built-in [module boundary lint rule](/features/enforce-module-boundaries). Projects can be assigned “tags”, like `type:domain`, `type:utils`, `type:shared` and `domain:products`, `domain:orders`, `domain:auth`. These tags can be assigned in the `project.json`, like
+To help with that, Nx has a built-in [module boundary lint rule](/features/enforce-module-boundaries). Projects can be assigned "tags", like `type:domain`, `type:utils`, `type:shared` and `domain:products`, `domain:orders`, `domain:auth`. These tags can be assigned in the `project.json`, like
```json
{
@@ -441,13 +442,13 @@ In the `.eslintrc.base.json` you can then define the rules. Here for instance we
If some of these lint rules need to be followed, your editor will show it right in your code, and you can also run lint checks for each PR on CI.
-If you’re curious, you can read more [here](/blog/mastering-the-project-boundaries-in-nx).
+If you're curious, you can read more [here](/blog/mastering-the-project-boundaries-in-nx).
## Hidden gem: Just run what changed
-In such a modular structure (as shown above) where your code is organized in smaller modules/libraries, it is very common that a given team member just works within a single domain area. Hence, very often PRs just touch a subset of the entire set of libraries. Nx comes with a backed-in command that allows you to take advantage of that on CI, using the so-called “[affected commands](/ci/features/affected)”.
+In such a modular structure (as shown above) where your code is organized in smaller modules/libraries, it is very common that a given team member just works within a single domain area. Hence, very often PRs just touch a subset of the entire set of libraries. Nx comes with a backed-in command that allows you to take advantage of that on CI, using the so-called "[affected commands](/ci/features/affected)".
-Let’s say we make a change in the `product-detail` library of our application. This would affect all other libraries that depend on it. You can also visualize it by running
+Let's say we make a change in the `product-detail` library of our application. This would affect all other libraries that depend on it. You can also visualize it by running
```shell
npx nx affected:graph
@@ -469,7 +470,7 @@ npx nx affected:test
## Hidden gem: A dedicated Editor extension
-If you are not the “command line interface type” developer and you’d rather prefer something integrated within your IDE, then there’s good news. The Nx core team also ships a dedicated VSCode extension: [Nx Console](/getting-started/editor-setup).
+If you are not the "command line interface type" developer and you'd rather prefer something integrated within your IDE, then there's good news. The Nx core team also ships a dedicated VSCode extension: [Nx Console](/getting-started/editor-setup).
It has a dedicated view within VSCode to trigger common commands, browse the workspace structure and even inline render the graph.
@@ -479,7 +480,7 @@ It also comes with contextual menus to quickly access most of the commonly used
-Here’s a walkthrough video showing some of the powerful capabilities of Nx Console:
+Here's a walkthrough video showing some of the powerful capabilities of Nx Console:
{% youtube src="https://youtu.be/ZST_rmhzRXI" /%}
@@ -503,7 +504,7 @@ Read more about how [Nx migrations work](/features/automate-updating-dependencie
## Using CRA? Automatically migrate to Vite + Nx
-If you’re currently on a [CRA](https://create-react-app.dev/) setup, you can easily migrate to an Nx + React + Vite-based setup by running the following command in your CRA project:
+If you're currently on a [CRA](https://create-react-app.dev/) setup, you can easily migrate to an Nx + React + Vite-based setup by running the following command in your CRA project:
{% youtube src="https://youtu.be/zvYb7XCLQzU" /%}
diff --git a/docs/blog/2023-01-18-nx-console-meets-nx-cloud.md b/docs/blog/2023-01-18-nx-console-meets-nx-cloud.md
index ff8d957bd8ff2..6b95588b7485b 100644
--- a/docs/blog/2023-01-18-nx-console-meets-nx-cloud.md
+++ b/docs/blog/2023-01-18-nx-console-meets-nx-cloud.md
@@ -4,17 +4,18 @@ slug: 'nx-console-meets-nx-cloud'
authors: ['Max Kless']
cover_image: '/blog/images/2023-01-18/Mkqkadhkk7DydWvPg5L0bA.png'
tags: [nx]
+description: Nx Console 17.28.0 integrates Nx Cloud features directly into VSCode, bringing remote caching, distributed task execution, and VCS integration with streamlined setup.
---
We just released Nx Console 17.28.0 and it comes with a huge new feature: Nx Cloud Integration, right in VSCode! 🎉
-In case you’re not sure what it does, Nx Cloud takes your Nx workspace to the next level with awesome features like:
+In case you're not sure what it does, Nx Cloud takes your Nx workspace to the next level with awesome features like:
- **Remote Caching** — share your Nx cache with your coworkers and CI agents. By using Nx Cloud, you can be sure that no computation is done twice — throughout your company.
- **Distributed Task Execution** — the most important feature for truly scaling up repositories. Nx already knows about your project graph and what tasks depend on each other. With Nx Cloud, you can leverage this knowledge to distribute tasks smartly across multiple agents while making sure that everything is run in the correct sequence. This can speed up your CI times by orders of magnitude!
- **VCS \[version control system\]** **Integration** — see the results of your CI runs right on your pull request! Nx Cloud can talk to GitHub and other version control systems in real-time, giving you an overview of successes and failures as they happen.
-And the best part? It’s free! You won’t pay anything for the first 500 hours of computation time saved per month. If you exceed 500 hours of computation saved, you can buy more; in the worst case, caching stops until the next month. For open-source projects, it’s free even beyond that. 😍
+And the best part? It's free! You won't pay anything for the first 500 hours of computation time saved per month. If you exceed 500 hours of computation saved, you can buy more; in the worst case, caching stops until the next month. For open-source projects, it's free even beyond that. 😍
Head over to [http://nx.dev/nx-cloud](/nx-cloud) to learn more.
@@ -24,7 +25,7 @@ Head over to [http://nx.dev/nx-cloud](/nx-cloud) to learn more.
## Show me the new features already!
-Now that we’re caught up, let’s look at how Nx Console will make connecting to and working with Nx Cloud even easier.
+Now that we're caught up, let's look at how Nx Console will make connecting to and working with Nx Cloud even easier.
To follow along, ensure you have installed the latest Nx Console version:
[Nx Console — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
@@ -33,7 +34,7 @@ In the Nx sidebar, you will see a new Nx Cloud section.
-If your workspace is not using Nx Cloud, click the “Set up Nx Cloud” button to set up the cloud runner automatically.
+If your workspace is not using Nx Cloud, click the "Set up Nx Cloud" button to set up the cloud runner automatically.
You will see that some changes happen in your `nx.json`:
@@ -53,15 +54,15 @@ You will see that some changes happen in your `nx.json`:
}
```
-**That’s it. You can now use Remote Caching and Distributed Task Execution (DTE). 🎉**
+**That's it. You can now use Remote Caching and Distributed Task Execution (DTE). 🎉**
## Running your first task
-Let’s try it out! Select a task to run and see the results in the run list. You can get an even more detailed breakdown in the Nx Cloud web app.
+Let's try it out! Select a task to run and see the results in the run list. You can get an even more detailed breakdown in the Nx Cloud web app.
-If you rerun the same task, you can see that the time it took to complete is under a second. This is because of Nx’s [advanced computation caching](/features/cache-task-results). Whenever a task is executed, Nx caches it. If the task has been run before, it just restores the result from the cache. By default, this cache is local to your own workstation. However, with Nx Cloud, you can distribute and share it between machines.
+If you rerun the same task, you can see that the time it took to complete is under a second. This is because of Nx's [advanced computation caching](/features/cache-task-results). Whenever a task is executed, Nx caches it. If the task has been run before, it just restores the result from the cache. By default, this cache is local to your own workstation. However, with Nx Cloud, you can distribute and share it between machines.
@@ -73,31 +74,31 @@ To learn more about Nx Cloud access tokens, head over to the docs: [Access Token
## Claiming your workspace
-If you’ve just started using Nx Cloud, you will probably see this message prompting you to claim your workspace:
+If you've just started using Nx Cloud, you will probably see this message prompting you to claim your workspace:
Out of the box, Nx Cloud works without the need to register. It is, however, highly recommended to create an account and associate it with your workspace. This process is called _claiming your workspace_ and has become much easier with Nx Console! After claiming, you can take full control of your cloud workspace, manage access restrictions and other settings.
-Just click on ‘Login and claim your workspace’ to be redirected to the browser where you can sign in to Nx Cloud or create an account. After successful authentication, you will come back to VSCode, where you can select one of your organizations and connect your workspace to it.
+Just click on 'Login and claim your workspace' to be redirected to the browser where you can sign in to Nx Cloud or create an account. After successful authentication, you will come back to VSCode, where you can select one of your organizations and connect your workspace to it.
From now on, Nx Console will be able to make authenticated requests to the cloud API, so even if you choose to make your workspace private, logged-in users that are authorized to access it can do so.
## Distributed Task Execution
-Distributed Task Execution (DTE) becomes very important as your workspace grows. With Nx, powerful features like [computation caching](http://√) and [affected analysis](/ci/features/affected) help you drastically cut down your CI times. Most of the time, large parts of your codebase will not need to be rebuilt and retested. However, we also have to consider the worst-case-scenarios. Let’s say you do change a core lib that everything in your monorepo depends on. This could mean hundreds or even thousands of projects needing to be rebuilt and retested, which would mean hours of CI time. This is obviously very impractical and you should consider solutions that allow you to parallelize all this work and keep worst-case CI times at a reasonable level. [There are different approaches to achieving this](/ci/concepts/parallelization-distribution) but it’s hard to get right and not something most teams want to spend engineering resources on.
+Distributed Task Execution (DTE) becomes very important as your workspace grows. With Nx, powerful features like [computation caching](http://√) and [affected analysis](/ci/features/affected) help you drastically cut down your CI times. Most of the time, large parts of your codebase will not need to be rebuilt and retested. However, we also have to consider the worst-case-scenarios. Let's say you do change a core lib that everything in your monorepo depends on. This could mean hundreds or even thousands of projects needing to be rebuilt and retested, which would mean hours of CI time. This is obviously very impractical and you should consider solutions that allow you to parallelize all this work and keep worst-case CI times at a reasonable level. [There are different approaches to achieving this](/ci/concepts/parallelization-distribution) but it's hard to get right and not something most teams want to spend engineering resources on.
-Distributed Task Execution with Nx Cloud solves this issue — it allows you to optimally parallelize tasks without thinking about their interdependencies or agent management. You don’t have to use it immediately, but it’s useful if you want to keep your CI times low even as your workspace grows. 🚀
+Distributed Task Execution with Nx Cloud solves this issue — it allows you to optimally parallelize tasks without thinking about their interdependencies or agent management. You don't have to use it immediately, but it's useful if you want to keep your CI times low even as your workspace grows. 🚀
-DTE is available for all Nx Cloud workspaces with minimal setup. If you see a yellow DTE status in Nx Console, that just means you haven’t used it yet. [Check out the docs](/ci/features/distribute-task-execution) to [learn more about the motivation for DTE](/ci/concepts/parallelization-distribution) and [how to test it out in your workspace](/ci/features/distribute-task-execution).
+DTE is available for all Nx Cloud workspaces with minimal setup. If you see a yellow DTE status in Nx Console, that just means you haven't used it yet. [Check out the docs](/ci/features/distribute-task-execution) to [learn more about the motivation for DTE](/ci/concepts/parallelization-distribution) and [how to test it out in your workspace](/ci/features/distribute-task-execution).
## VCS Integration
-Nx Cloud isn’t just great for its remote caching and DTE features, it also generates readable and searchable reports for any executed tasks — whether it be 10 or 10.000. In a monorepo, your CI pipelines will seldom run just a single task. It’s more common to have commands like `nx affected — -target=build` which amounts to “rebuild everything that changed”. This could potentially be dozens, hundreds or thousands of tasks. If something goes wrong, combing through thousands upon thousands of lines of logs quickly becomes tedious. So having a nicely structured, per-target view that you can filter and sort while still preserving all terminal styling is incredibly useful!
+Nx Cloud isn't just great for its remote caching and DTE features, it also generates readable and searchable reports for any executed tasks — whether it be 10 or 10.000. In a monorepo, your CI pipelines will seldom run just a single task. It's more common to have commands like `nx affected — -target=build` which amounts to "rebuild everything that changed". This could potentially be dozens, hundreds or thousands of tasks. If something goes wrong, combing through thousands upon thousands of lines of logs quickly becomes tedious. So having a nicely structured, per-target view that you can filter and sort while still preserving all terminal styling is incredibly useful!
diff --git a/docs/blog/2023-01-31-configuration-files-and-potholes-in-your-codebase.md b/docs/blog/2023-01-31-configuration-files-and-potholes-in-your-codebase.md
index 985c381da0d5a..94d245bc37d08 100644
--- a/docs/blog/2023-01-31-configuration-files-and-potholes-in-your-codebase.md
+++ b/docs/blog/2023-01-31-configuration-files-and-potholes-in-your-codebase.md
@@ -4,9 +4,10 @@ slug: 'configuration-files-and-potholes-in-your-codebase'
authors: ['Isaac Mann']
cover_image: '/blog/images/2023-01-31/T-xiDccBOxMQpDrG.png'
tags: [nx]
+description: A guide to managing configuration files effectively in modern development, exploring Nx's approach to infrastructure code maintenance through generators and migrations.
---
-Let’s talk about configuration. The detractors call it boilerplate while proponents call it scaffolding or infrastructure. No matter what your feelings are, configuration code is all the setup that needs to be done before you can work on the features that actually accomplish something for your business. Like road maintenance, infrastructure code is often unnoticed when it is done well, but as soon as problems crop up, everyone feels the pain. How can this crucial configuration code be effectively maintained without dragging down the productivity of your development team?
+Let's talk about configuration. The detractors call it boilerplate while proponents call it scaffolding or infrastructure. No matter what your feelings are, configuration code is all the setup that needs to be done before you can work on the features that actually accomplish something for your business. Like road maintenance, infrastructure code is often unnoticed when it is done well, but as soon as problems crop up, everyone feels the pain. How can this crucial configuration code be effectively maintained without dragging down the productivity of your development team?
## Less Configuration
@@ -22,9 +23,9 @@ Parcel advertises itself as a zero configuration bundler. This is mostly a react
-Apple also leveraged this sentiment with marketing slogan “It Just Works”. Compared to Windows or Linux ecosystems that require modifying settings to get software from different companies to work together, Apple provides its own suite of tools and hardware that have a major selling point of being intentionally designed to all work together. Theoretically, any hardware or software produced by Apple should fit seamlessly into the rest of the system.
+Apple also leveraged this sentiment with marketing slogan "It Just Works". Compared to Windows or Linux ecosystems that require modifying settings to get software from different companies to work together, Apple provides its own suite of tools and hardware that have a major selling point of being intentionally designed to all work together. Theoretically, any hardware or software produced by Apple should fit seamlessly into the rest of the system.
-All of these efforts to skip the configuration step reach their limits at some point. The idea of hiding default configuration works well, until you need to modify that default and have no starting point. The Zen of Python philosophy of “explicit is better than implicit” is a direct contradiction to Convention over Configuration. If you like most of what the zero config tool gives you, but you want to tweak it a little bit, it can be hard to find where to do the tweaking. Apple is great when It Just Works. But sometimes, It Just Doesn’t.
+All of these efforts to skip the configuration step reach their limits at some point. The idea of hiding default configuration works well, until you need to modify that default and have no starting point. The Zen of Python philosophy of "explicit is better than implicit" is a direct contradiction to Convention over Configuration. If you like most of what the zero config tool gives you, but you want to tweak it a little bit, it can be hard to find where to do the tweaking. Apple is great when It Just Works. But sometimes, It Just Doesn't.
@@ -32,13 +33,13 @@ All of these efforts to skip the configuration step reach their limits at some p
When your application is just getting started or when the configuration defaults work just fine for you, any time spent writing those defaults is wasted time and mental space. This applies to default configuration for initializing a project as well as default configuration for adding a new route or component in your application. When a developer is starting a new project or feature, we want their initial burst of energy to go as much as possible toward code that is valuable for the business, rather than code that is just infrastructure.
-On the other hand, when the infrastructure code needs to be modified to make your application faster or modify the way the app behaves in some way, that infrastructure code needs to be easily accessible and clearly organized so that developers don’t need to understand everything about the system before they can change a single part.
+On the other hand, when the infrastructure code needs to be modified to make your application faster or modify the way the app behaves in some way, that infrastructure code needs to be easily accessible and clearly organized so that developers don't need to understand everything about the system before they can change a single part.
## Skip the Scaffolding
A cursory glance at the repos on Github will reveal numerous starter repos that people use to bypass the initial time investment involved in setting up the initial configuration files. Yeoman was a tool used to help generate scaffolding code, both for starting a project and for creating new sections of an application.
-The problem with both of these tools is that any code they generate for you is instantly technical debt. By definition, no one in your company wrote the code that was created by those tools. But developers in your company will now have to maintain this code that they didn’t write. Even if the starter project or Yeoman generator was well maintained and always used the latest state of art practices, any application built using them will only be state of the art the instant its created. The infrastructure code grows stale without constant maintenance.
+The problem with both of these tools is that any code they generate for you is instantly technical debt. By definition, no one in your company wrote the code that was created by those tools. But developers in your company will now have to maintain this code that they didn't write. Even if the starter project or Yeoman generator was well maintained and always used the latest state of art practices, any application built using them will only be state of the art the instant its created. The infrastructure code grows stale without constant maintenance.
## Nx Generators and Migration Generators
@@ -50,7 +51,7 @@ Nx has an elegant solution to this dilemma. There are three key parts.
2. Modify those configuration files whenever your application needs some custom setting
3. Run [migration generators](/features/automate-updating-dependencies) to maintain state of the art defaults
-If you never think about a configuration file is it still technical debt? Some people are put off by the number of configuration files that Nx generates when creating a new application. Perhaps these developers have been burned by starter repos burdening them with instant technical debt that must be maintained. These config files are created only for the eventuality that some day you’ll need to modify them.
+If you never think about a configuration file is it still technical debt? Some people are put off by the number of configuration files that Nx generates when creating a new application. Perhaps these developers have been burned by starter repos burdening them with instant technical debt that must be maintained. These config files are created only for the eventuality that some day you'll need to modify them.
When you do need to modify a setting for Webpack, Vite or Jest (or any of the other tools for which we maintain plugins) the configuration file provides you an easy access point to make your own modifications without needing to understand all the default settings.
@@ -58,13 +59,13 @@ Every Nx plugin provides migration generators that will automatically update the
## One Size Never Fits All
-While the generators that Nx provides work for most people, there will always be infrastructure that is unique to your own organization. Nx makes it easy to extend generators so that your developers can use generators that create code that has been tailored to your own organization’s set up. Instead of having a manual check list to run through every time a developer makes a new feature, you can automate that check list with a generator.
+While the generators that Nx provides work for most people, there will always be infrastructure that is unique to your own organization. Nx makes it easy to extend generators so that your developers can use generators that create code that has been tailored to your own organization's set up. Instead of having a manual check list to run through every time a developer makes a new feature, you can automate that check list with a generator.
## Negative Configuration?
-Nx provides the ability to define default configuration settings at the global level and have individual projects inherit those settings from the global defaults. If a lot of your projects have the same settings, adding Nx to your repo will actually reduce the lines of code in your codebase — thus negative configuration. This isn’t convention over configuration or zero configuration, because the configuration settings are still explicitly defined. The configuration code is just better organized and defined in a predictable way.
+Nx provides the ability to define default configuration settings at the global level and have individual projects inherit those settings from the global defaults. If a lot of your projects have the same settings, adding Nx to your repo will actually reduce the lines of code in your codebase — thus negative configuration. This isn't convention over configuration or zero configuration, because the configuration settings are still explicitly defined. The configuration code is just better organized and defined in a predictable way.
-If you’re ready to have Nx help you manage your infrastructure so that your developers can speed down the highway without needing to avoid configuration potholes, check out [nx.dev](/getting-started/intro) to get started.
+If you're ready to have Nx help you manage your infrastructure so that your developers can speed down the highway without needing to avoid configuration potholes, check out [nx.dev](/getting-started/intro) to get started.
## Learn more
diff --git a/docs/blog/2023-02-09-setup-react-and-tailwind-the-easy-way.md b/docs/blog/2023-02-09-setup-react-and-tailwind-the-easy-way.md
index 202ec1a2fcdd7..0e417d2b22609 100644
--- a/docs/blog/2023-02-09-setup-react-and-tailwind-the-easy-way.md
+++ b/docs/blog/2023-02-09-setup-react-and-tailwind-the-easy-way.md
@@ -4,11 +4,12 @@ slug: 'setup-react-and-tailwind-the-easy-way'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-02-09/TK4Kdj-cc890gQkgUtKNyA.png'
tags: [nx, tutorial]
+description: Learn how to quickly set up React with Tailwind CSS using Nx's code generators, including migration from Create React App and automated configuration tools.
---
-Developers love to argue about whether Tailwind is good, almost like arguing about code formatting or tabs vs. spaces (I use spaces!!). But whether you love it or hate it, Tailwind has found massive adoption among the frontend developer community. In fact, I’m right now in the process of refreshing and rebuilding my personal site (it will be at [https://juri.dev](https://juri.dev/) soon, so keep an eye on that).
+Developers love to argue about whether Tailwind is good, almost like arguing about code formatting or tabs vs. spaces (I use spaces!!). But whether you love it or hate it, Tailwind has found massive adoption among the frontend developer community. In fact, I'm right now in the process of refreshing and rebuilding my personal site (it will be at [https://juri.dev](https://juri.dev/) soon, so keep an eye on that).
-## Prefer a video? I’ve got you covered!
+## Prefer a video? I've got you covered!
{% youtube src="https://www.youtube.com/watch?v=hHh0xhzSnx8" /%}
@@ -28,17 +29,17 @@ These steps mostly involve
-This came up a couple of weeks ago due to a [PR opened on the CRA repo](https://github.com/reactjs/reactjs.org/pull/5487) asking to kinda deprecate it as the main choice for new React projects. I couldn’t help but share my opinion on this as well:
+This came up a couple of weeks ago due to a [PR opened on the CRA repo](https://github.com/reactjs/reactjs.org/pull/5487) asking to kinda deprecate it as the main choice for new React projects. I couldn't help but share my opinion on this as well:
{% youtube src="https://youtu.be/fkTz6KJxhhE" /%}
-And so did also [Fireship](https://youtu.be/2OTq15A5s0Y) and ultimately [Dan Abramov](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741). Anyway, if you’re in the **“CRA situation”, read on**. There’s a way to get unblocked there.
+And so did also [Fireship](https://youtu.be/2OTq15A5s0Y) and ultimately [Dan Abramov](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741). Anyway, if you're in the **"CRA situation", read on**. There's a way to get unblocked there.
## There is an easier way — Code Generators
Code generators speed up such configuration tasks. They are valuable for scaffolding the initial project structure and adding new features to the app setup, such as Tailwind.
-Nx has such generators. To use them, you need an Nx-based React setup. If you’re starting new, you can create an [Nx Standalone React project](/getting-started/tutorials/react-standalone-tutorial) easily using the following command
+Nx has such generators. To use them, you need an Nx-based React setup. If you're starting new, you can create an [Nx Standalone React project](/getting-started/tutorials/react-standalone-tutorial) easily using the following command
```shell
$ npx create-nx-workspace reactapp --preset=react-standalone
@@ -66,7 +67,7 @@ $ npx nx g @nrwl/react:setup-tailwind
This launches a generator that will guide you through the setup. It works **not only for Nx React-based projects** but **also if you use Next.js** in an Nx workspace.
-You’ll get
+You'll get
- Tailwind, PostCSS, and Autoprefixer installed
- Tailwind configured together with PostCSS
@@ -74,7 +75,7 @@ You’ll get
-## That’s it!
+## That's it!
You should be all setup and ready now! Here are some related resources to explore:
diff --git a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md
index 16f3a152c2c67..08e405a226c60 100644
--- a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md
+++ b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md
@@ -4,9 +4,10 @@ slug: 'nx-15-7-node-support-angular-lts-lockfile-pruning'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-02-16/2AAo-mng7QyJP9yC80zNFQ.png'
tags: [nx, release]
+description: Nx 15.7 introduces first-class Node.js support, detached Angular version support, enhanced lockfile parsing, and Storybook 7.0 beta integration.
---
-Here’s all you need to know about our latest Nx release.
+Here's all you need to know about our latest Nx release.
### Table of Contents
@@ -21,23 +22,23 @@ Here’s all you need to know about our latest Nx release.
· [How to Update Nx](#how-to-update-nx)
· [Coming up](#coming-up)
-### Prefer a video? We’ve got you covered!
+### Prefer a video? We've got you covered!
{% youtube src="https://www.youtube.com/watch?v=IStJODzZSoc" /%}
## 10k Subscribers on Youtube
-It’s almost a tradition to have some stats at the beginning of our Nx release blog posts. This time, about our YT channel: incredibly, we crossed 10k subscribers [on our Youtube channel](https://www.youtube.com/@nxdevtools)!!
+It's almost a tradition to have some stats at the beginning of our Nx release blog posts. This time, about our YT channel: incredibly, we crossed 10k subscribers [on our Youtube channel](https://www.youtube.com/@nxdevtools)!!
-Apart from delivering high-quality engineering work, we’re very invested in producing educational content around developer tooling and monorepos. We’ve been almost consistently shipping new content every week, whether that is blog posts on the [Nx blog](/blog) or in the form of new videos and live streams on our channel. Seeing our audience grow on Youtube confirms we’re on the right track and gives us new fuel to keep pushing!!
+Apart from delivering high-quality engineering work, we're very invested in producing educational content around developer tooling and monorepos. We've been almost consistently shipping new content every week, whether that is blog posts on the [Nx blog](/blog) or in the form of new videos and live streams on our channel. Seeing our audience grow on Youtube confirms we're on the right track and gives us new fuel to keep pushing!!
-If you haven’t subscribed yet, please do 🙏: [https://www.youtube.com/@nxdevtools](https://www.youtube.com/@nxdevtools). We also announce most of our new videos and live streams [on Twitter](https://twitter.com/nxdevtools).
+If you haven't subscribed yet, please do 🙏: [https://www.youtube.com/@nxdevtools](https://www.youtube.com/@nxdevtools). We also announce most of our new videos and live streams [on Twitter](https://twitter.com/nxdevtools).
## Updates to our Nx Plugin Guides
-Nx has been designed to be extensible from the ground up. Which is precisely why Nx Plugins are so powerful. They don’t just come as part of an Nx integrated monorepo or standalone setup. Still, you can leverage them in the same way to automate your local workspace or even share them as proper Nx plugins with the community.
+Nx has been designed to be extensible from the ground up. Which is precisely why Nx Plugins are so powerful. They don't just come as part of an Nx integrated monorepo or standalone setup. Still, you can leverage them in the same way to automate your local workspace or even share them as proper Nx plugins with the community.
Please have a look at our updated guide: [/extending-nx/tutorials/organization-specific-plugin](/extending-nx/tutorials/organization-specific-plugin)
@@ -45,8 +46,8 @@ Please have a look at our updated guide: [/extending-nx/tutorials/organization-s
{% youtube src="https://youtu.be/K4f-fMuAoRY" /%}
-Due to a lack of time we never invested much more into streamlining the Node experience within Nx, though. This [changed now](/blog/from-bootstrapped-to-venture-backed), which is why we’re committed to making Nx the best developer tool for node based apps. Starting with v15.7 we improved support for [ExpressJS](https://expressjs.com/), [Fastify](https://fastify.io/) and [Koa](https://koajs.com/).
-When starting a new Nx workspace, you now have a new option: “Standalone Node Server app”.
+Due to a lack of time we never invested much more into streamlining the Node experience within Nx, though. This [changed now](/blog/from-bootstrapped-to-venture-backed), which is why we're committed to making Nx the best developer tool for node based apps. Starting with v15.7 we improved support for [ExpressJS](https://expressjs.com/), [Fastify](https://fastify.io/) and [Koa](https://koajs.com/).
+When starting a new Nx workspace, you now have a new option: "Standalone Node Server app".
@@ -61,7 +62,7 @@ All the features Nx is known for also apply to backend development. That include
- **Speed** via running building, linting, testing for only **(**[**affected**](/ci/features/affected)**) parts of your applications**, via [caching](/concepts/how-caching-works) and [optimized CI setups](/ci/features/distribute-task-execution)
- the ability to use and/or expand to a monorepo
-This is the first iteration with first-class Node support. But we’re already working on a whole set of improvements for the Nx + Node story. So stay tuned!
+This is the first iteration with first-class Node support. But we're already working on a whole set of improvements for the Nx + Node story. So stay tuned!
## Detaching Angular versions
@@ -77,7 +78,7 @@ New workspaces will always be created with the latest Angular version, but durin
$ nx migrate latest --interactive
```
-When collecting migrations in interactive mode, you’ll be prompted to apply any optional migrations, and any updates you choose to skip won’t be applied. The rest of the updates will be used as usual.
+When collecting migrations in interactive mode, you'll be prompted to apply any optional migrations, and any updates you choose to skip won't be applied. The rest of the updates will be used as usual.
If you need to apply an Angular update that you previously skipped, you can collect migrations from an older version of Nx by running:
@@ -85,7 +86,7 @@ If you need to apply an Angular update that you previously skipped, you can coll
$ nx migrate latest --from=nx@
```
-In particular, we’re working on making that part more intuitive in upcoming versions.
+In particular, we're working on making that part more intuitive in upcoming versions.
Also, have a look at our [updated docs](/recipes/tips-n-tricks/advanced-update) as well as our [Nx and Angular compatibility matrix](/nx-api/angular/documents/angular-nx-version-matrix) for more details.
@@ -93,7 +94,7 @@ Also, have a look at our [updated docs](/recipes/tips-n-tricks/advanced-update)
{% youtube src="https://youtu.be/Hi3aJ0Rlkls" /%}
-Angular’s new [standalone APIs](https://angular.io/guide/standalone-components) is exciting as it provides a new, more lightweight way of developing and composing Angular applications without the need for `NgModules`. Nx has had the ability to generate new Angular components using the Standalone API for a while. With v15.7, we now also allow you to quickly bootstrap a new single-project Nx workspace with a NgModule-less Angular application.
+Angular's new [standalone APIs](https://angular.io/guide/standalone-components) is exciting as it provides a new, more lightweight way of developing and composing Angular applications without the need for `NgModules`. Nx has had the ability to generate new Angular components using the Standalone API for a while. With v15.7, we now also allow you to quickly bootstrap a new single-project Nx workspace with a NgModule-less Angular application.
```shell
npx create-nx-workspace@latest ngapp
@@ -103,7 +104,7 @@ npx create-nx-workspace@latest ngapp
## Lockfile parsing and pruning
-Lockfiles can be highly complex, and different formats across the NPM, Yarn, and PNPM package managers don’t make it easier. Nx used to consider the lock-file a black box. Starting with 15.7, this changes! Nx can now properly process the lock-file of all three major package managers (and their different versions!).
+Lockfiles can be highly complex, and different formats across the NPM, Yarn, and PNPM package managers don't make it easier. Nx used to consider the lock-file a black box. Starting with 15.7, this changes! Nx can now properly process the lock-file of all three major package managers (and their different versions!).
Why is this useful? Glad you asked! Mostly for three reasons:
@@ -111,12 +112,12 @@ Why is this useful? Glad you asked! Mostly for three reasons:
- generate a `package.json` with **precise snapshot of the used versions** (especially useful in a monorepo with single-version policy)
- ability to **generate a pruned lock-file** that can be used along-side the `package.json` when packaging your app in a Docker container
-Some of our plugins’ `build` executors include:
+Some of our plugins' `build` executors include:
- `generatePackageJson` flag (`@nrwl/webpack:webpack` and `@nrwl/node:webpack`) that automatically generates `package.json` and lock file.
- `generateLockfile` flag (`@nrwl/js:swc`, `@nrwl/js:tsc` and `@nrwl/next:build`) that generates lock file
-If you’re an Nx plugin developer, you can generate `package.json` and lock file using the following functions from the `@nrwl/devkit` package:
+If you're an Nx plugin developer, you can generate `package.json` and lock file using the following functions from the `@nrwl/devkit` package:
```
import { createPackageJson, createLockFile } from '@nrwl/devkit';
diff --git a/docs/blog/2023-02-21-using-ngrx-standalone-apis-with-nx.md b/docs/blog/2023-02-21-using-ngrx-standalone-apis-with-nx.md
index 5aee7d4ac16ef..59e02a50372b1 100644
--- a/docs/blog/2023-02-21-using-ngrx-standalone-apis-with-nx.md
+++ b/docs/blog/2023-02-21-using-ngrx-standalone-apis-with-nx.md
@@ -4,15 +4,16 @@ slug: 'using-ngrx-standalone-apis-with-nx'
authors: ['Colum Ferry']
cover_image: '/blog/images/2023-02-21/pJHhA04d6jIjOb5vpCDjyw.png'
tags: [nx, tutorial]
+description: A practical guide to integrating NgRx Standalone APIs in Angular applications using Nx, with automated setup for state management.
---
Version 15 of [NgRx](https://ngrx.io/) introduced Standalone APIs to the package, enabling usage of the NgRx with Standalone Component-based [Angular](https://angular.io/) applications. This allows for a simpler integration of NgRx to your application.
Nx has added support for using these Standalone APIs from NgRx when generating NgRx stores with our `@nrwl/angular:ngrx` generator when you give it a path to a `Routes` definition file. _(Usually denoted by_ `_*.routes.ts_`_)_
-In this article, we’ll walk through using Nx to create a new Standalone Component-based Angular application and add NgRx to it, using _ONLY_ Nx Generators!
+In this article, we'll walk through using Nx to create a new Standalone Component-based Angular application and add NgRx to it, using _ONLY_ Nx Generators!
-**Prefer a video version? We’ve got you covered!**
+**Prefer a video version? We've got you covered!**
{% youtube src="https://www.youtube.com/watch?v=fp9E5G9C61Q" /%}
@@ -60,7 +61,7 @@ Nx will aid this also!
`nx g @nrwl/angular:ngrx --root --parent=src/main.ts`
-You’ll be asked for a name for the feature state, but you can ignore this and simply press enter in your terminal, it is not necessary at this stage.
+You'll be asked for a name for the feature state, but you can ignore this and simply press enter in your terminal, it is not necessary at this stage.
Say false to Facades also.
@@ -96,7 +97,7 @@ Notice the addition of `provideEffects()` and `provideStore()` to the `providers
NgRx works better when you split your store based on the features you have within your application. This is a pretty common use case. Nx allows you to do this very easily and in a very structured way.
-First, let’s generate a new feature library, called `feature-users`, in Nx that will house everything related to our feature including the NgRx State.
+First, let's generate a new feature library, called `feature-users`, in Nx that will house everything related to our feature including the NgRx State.
`nx g @nrwl/angular:lib feature-users --standalone --routing --lazy --parent=src/app/app.routes.ts`
@@ -105,7 +106,7 @@ This command does a few things:
- It creates a new library in our Nx Workspace
- It uses an Angular Standalone Component as the entrypoint
- It adds a routing configuration to the library and adds the component as the default route.
-- It will add a lazy-loaded route to the application’s `app.routes.ts` file, wiring up the application to the library!
+- It will add a lazy-loaded route to the application's `app.routes.ts` file, wiring up the application to the library!
Some files you may want to explore in your own time are:
@@ -114,11 +115,11 @@ Some files you may want to explore in your own time are:
## Add feature state to the feature library
-Now that we have a feature library for our users feature, let’s generate the feature state! It’s as simple as one command.
+Now that we have a feature library for our users feature, let's generate the feature state! It's as simple as one command.
`nx g @nrwl/angular:ngrx users --parent=feature-users/src/lib/lib.routes.ts --route=''`
-You’ll be asked if this is the root state of the application, enter `N`. Then say no to Facades (unless you really want them).
+You'll be asked if this is the root state of the application, enter `N`. Then say no to Facades (unless you really want them).
The `--route` option here is used to dictate what `route` within our routes definition file (`lib.routes.ts`) should have the state attached to it. This is to allow the NgRx Standalone APIs to be attached to that route.
@@ -153,7 +154,7 @@ The command will also have generated our
And with that, we now have NgRx installed and integrated into our application!
-If you’d like to confirm the integration, you can run the following commands and see successful outputs!
+If you'd like to confirm the integration, you can run the following commands and see successful outputs!
`nx build`
diff --git a/docs/blog/2023-02-22-whats-new-with-lerna-6-5.md b/docs/blog/2023-02-22-whats-new-with-lerna-6-5.md
index 0b00ce61305a0..3b0797926e7bd 100644
--- a/docs/blog/2023-02-22-whats-new-with-lerna-6-5.md
+++ b/docs/blog/2023-02-22-whats-new-with-lerna-6-5.md
@@ -1,12 +1,13 @@
---
-title: 'What’s New With Lerna 6.5?'
+title: "What's New With Lerna 6.5?"
slug: 'whats-new-with-lerna-6-5'
authors: ['Zack DeRose']
cover_image: '/blog/images/2023-02-22/izlWzEYnkZ9myXi58Rmv8A.png'
tags: [nx, release]
+description: Lerna 6.5 introduces idempotent publishing, multi-script execution, private package handling, and codebase improvements, with updates on Nx team maintenance.
---
-In case you missed it, Lerna version 6.5 recently launched. We’ll catch you up on the latest Lerna news and newest features.
+In case you missed it, Lerna version 6.5 recently launched. We'll catch you up on the latest Lerna news and newest features.
## Table of Contents
@@ -23,37 +24,37 @@ In case you missed it, Lerna version 6.5 recently launched. We’ll catch you up
In case you missed it, Lerna, the OG JavaScript monorepo tool, went largely unmaintained for a while, starting around 2020. Then, it officially declared itself to be unmaintained in April of 2022, only for Nx to step in to take over maintenance of the project in May of 2022!
-You can find a more detailed account of Lerna’s “Maintainance Odyssey” in [this article](/blog/lerna-is-dead-long-live-lerna).
+You can find a more detailed account of Lerna's "Maintainance Odyssey" in [this article](/blog/lerna-is-dead-long-live-lerna).
-Since Nx took over in Lerna 4, we’ve added a brand new site to refresh the Lerna Docs:
+Since Nx took over in Lerna 4, we've added a brand new site to refresh the Lerna Docs:
-The top of our priorities for Lerna 5 was to resolve all vulnerabilities and outdated dependencies facing Lerna. We went on to make Lerna faster by allowing users to [opt into Nx’s task caching inside of Lerna with the new `lerna add-caching` command](https://github.com/lerna/lerna/tree/main/packages/lerna/src/commands/add-caching#readme), and [add support for distributed caching to share task results amongst your organization in Lerna with Nx Cloud](https://lerna.js.org/docs/features/share-your-cache).
+The top of our priorities for Lerna 5 was to resolve all vulnerabilities and outdated dependencies facing Lerna. We went on to make Lerna faster by allowing users to [opt into Nx's task caching inside of Lerna with the new `lerna add-caching` command](https://github.com/lerna/lerna/tree/main/packages/lerna/src/commands/add-caching#readme), and [add support for distributed caching to share task results amongst your organization in Lerna with Nx Cloud](https://lerna.js.org/docs/features/share-your-cache).
-We were proud to go on to launch [Lerna 6](/blog/lerna-reborn-whats-new-in-v6) last October, where we began focusing on further improving Lerna’s feature set — focusing specifically on its unique strengths: versioning and publishing.
+We were proud to go on to launch [Lerna 6](/blog/lerna-reborn-whats-new-in-v6) last October, where we began focusing on further improving Lerna's feature set — focusing specifically on its unique strengths: versioning and publishing.
## Still on Lerna 4?
-[Here’s how to upgrade to the latest and greatest](https://lerna.js.org/upgrade).
+[Here's how to upgrade to the latest and greatest](https://lerna.js.org/upgrade).
-We’ve also started an initiative to assist Open Source projects in getting the most out of Lerna. Projects that use Lerna can now request free consulting to learn how to take advantage of Lerna’s newest features.
+We've also started an initiative to assist Open Source projects in getting the most out of Lerna. Projects that use Lerna can now request free consulting to learn how to take advantage of Lerna's newest features.
-We’ve just started this initiative and have already been able to help [Sentry](https://github.com/getsentry/sentry-javascript) get optimized with task caching and task pipeline optimizations for their workspace!
+We've just started this initiative and have already been able to help [Sentry](https://github.com/getsentry/sentry-javascript) get optimized with task caching and task pipeline optimizations for their workspace!
This initiative complements [our free tier of unlimited Nx Cloud](/pricing) for any Open Source project.
-If you’re interested in optimizing your Open Source project to take advantage of the latest Lerna features, [reach out to us on Twitter!](https://twitter.com/lernajs)
+If you're interested in optimizing your Open Source project to take advantage of the latest Lerna features, [reach out to us on Twitter!](https://twitter.com/lernajs)
-Now let’s jump into the newest Lerna 6.5 features!
+Now let's jump into the newest Lerna 6.5 features!
## Idempotency Added to the `lerna publish from-git` Command
{% youtube src="https://youtu.be/kh4TaiKbC8c" /%}
-“Idempotent” is a word used to describe an operation you can perform any number of times, and the resulting state is the same as if you had only run the operation once.
+"Idempotent" is a word used to describe an operation you can perform any number of times, and the resulting state is the same as if you had only run the operation once.
The [`lerna publish` command](https://github.com/lerna/lerna/tree/main/libs/commands/publish#readme) is a beneficial tool for quickly publishing multiple packages from your workspace:
@@ -63,13 +64,13 @@ The [`lerna publish` command](https://github.com/lerna/lerna/tree/main/libs/comm
As we can see, `lerna publish from-package` is already idempotent (since it only publishes packages whose version doesn't exist, any run past the first will not adjust the state of the registry).
-With 6.5, we’ve added the same idempotency to `lerna publish from-git`. This update is handy for recovering from a situation where some of your packages failed to publish initially (maybe due to a networking issue).
+With 6.5, we've added the same idempotency to `lerna publish from-git`. This update is handy for recovering from a situation where some of your packages failed to publish initially (maybe due to a networking issue).
[For more information, check out the PR](https://github.com/lerna/lerna/pull/3513)
## `lerna run` Can Run Multiple Scripts In a Single Command
-For 6.5, we’ve added the ability to run multiple scripts in a single `lerna run` command! Checkout this quick video demonstrating this below:
+For 6.5, we've added the ability to run multiple scripts in a single `lerna run` command! Checkout this quick video demonstrating this below:
{% youtube src="https://youtu.be/Ey73CEGcVKw" /%}
@@ -85,7 +86,7 @@ lerna publish from-git --include-private my-private-package
Running `lerna publish` with this new [`--include-private`](https://github.com/lerna/lerna/tree/main/libs/commands/publish#--include-private) option (as above) will strip this `"private": true` configuration from the `package.json` of the packages listed in the command.
-This new option is beneficial for the use case where you’d like to run e2e for a package that will eventually be public but is currently private to prevent getting published too soon.
+This new option is beneficial for the use case where you'd like to run e2e for a package that will eventually be public but is currently private to prevent getting published too soon.
{% youtube src=" https://youtu.be/7TgjCk7Diks" /%}
@@ -93,12 +94,12 @@ You can find more information on this change [here](https://github.com/lerna/ler
## Massive Refactor
-Unlike the other updates mentioned for 6.5, this update does not affect Lerna’s public API, but as you can see from the numbers, this was quite an undertaking:
+Unlike the other updates mentioned for 6.5, this update does not affect Lerna's public API, but as you can see from the numbers, this was quite an undertaking:
-The result is a significant improvement to the Typescript support for Lerna’s internals and a substantial simplification of the codebase. This investment will make Lerna significantly more approachable to other would-be contributors!
+The result is a significant improvement to the Typescript support for Lerna's internals and a substantial simplification of the codebase. This investment will make Lerna significantly more approachable to other would-be contributors!
Find more on this change [here](https://github.com/lerna/lerna/pull/3517).
diff --git a/docs/blog/2023-02-28-bundling-a-node-api-with-fastify-esbuild-and-nx.md b/docs/blog/2023-02-28-bundling-a-node-api-with-fastify-esbuild-and-nx.md
index 08c77d8e31a17..f66e842808c75 100644
--- a/docs/blog/2023-02-28-bundling-a-node-api-with-fastify-esbuild-and-nx.md
+++ b/docs/blog/2023-02-28-bundling-a-node-api-with-fastify-esbuild-and-nx.md
@@ -4,13 +4,14 @@ slug: 'bundling-a-node-api-with-fastify-esbuild-and-nx'
authors: ['Jack Hsu']
cover_image: '/blog/images/2023-02-28/PADY_RKrkXj39p4nj79ESw.png'
tags: [nx, tutorial]
+description: Build and deploy a Node.js API with Fastify, Nx, esbuild, Docker, and Fly.io.
---
There are many decisions to make when it comes to building a Node API. There are a variety of frameworks to choose from (Express, Fastify, Koa, etc.), and a million different ways to build and deploy the application.
-In this article, I’ll show you the easiest way to go from zero to production by using Nx to create a Node API project.
+In this article, I'll show you the easiest way to go from zero to production by using Nx to create a Node API project.
-We’ll be using [Fastify](https://www.fastify.io/) as the framework of choice. Fastify is a fast (as the name implies) and low-overhead server in Node. It has grown in popularity, recently crossing the 1 million weekly download mark on npm. I’m a fan of Fastify’s plugin architecture, and the ecosystem is quite impressive, boasting over [250 core and community plugins](https://www.fastify.io/ecosystem/).
+We'll be using [Fastify](https://www.fastify.io/) as the framework of choice. Fastify is a fast (as the name implies) and low-overhead server in Node. It has grown in popularity, recently crossing the 1 million weekly download mark on npm. I'm a fan of Fastify's plugin architecture, and the ecosystem is quite impressive, boasting over [250 core and community plugins](https://www.fastify.io/ecosystem/).
## **Table of Contents**
@@ -21,7 +22,7 @@ We’ll be using [Fastify](https://www.fastify.io/) as the framework of choice.
· [Deploying the server](#deploying-the-server)
· [Summary](#summary)
-**Prefer a video version? We’ve got you covered!**
+**Prefer a video version? We've got you covered!**
{% youtube src="https://www.youtube.com/watch?v=K4f-fMuAoRY" /%}
@@ -57,7 +58,7 @@ In additional to generating the source code, Nx will also create two test suites
1. Unit tests via `npx nx test` (aliased to `npm run test`).
2. E2E tests via `npx nx e2e e2e` (aliased to `npm run e2e`).
-Unit tests take advantage of Fastify’s plugin architecture, and allows you to test each plugin in isolation. It runs using [Jest](https://jestjs.io/), which is the most popular test runner in Node.
+Unit tests take advantage of Fastify's plugin architecture, and allows you to test each plugin in isolation. It runs using [Jest](https://jestjs.io/), which is the most popular test runner in Node.
```
// src/app/app.spec.ts
@@ -101,7 +102,7 @@ There are trade-offs between speed versus confidence when it comes to unit versu
## Building for production using esbuild
-Now that we have our production-ready app, let’s examine how Nx handles the build process using [`esbuild`](https://esbuild.github.io/).
+Now that we have our production-ready app, let's examine how Nx handles the build process using [`esbuild`](https://esbuild.github.io/).
`esbuild` is a bundler written in Go that is extremely fast — it is much faster than other bundlers like webpack and parcel, but that may change in the future as other tools make their own speed improvements.
@@ -118,7 +119,7 @@ NX Successfully ran target build for project api (2s)
```
-A cool feature of Nx, is that commands such as `build` and `test` are cached if the project (or its dependencies) have not changed. If we run the build a second time, you’ll see it completes in a few milliseconds.
+A cool feature of Nx, is that commands such as `build` and `test` are cached if the project (or its dependencies) have not changed. If we run the build a second time, you'll see it completes in a few milliseconds.
```shell
$ npx nx build
@@ -131,7 +132,7 @@ NX Successfully ran target build for project api (16ms) Nx read the output from
```
-We’ll touch more on the caching when we look at Docker support.
+We'll touch more on the caching when we look at Docker support.
And now that the server bundle is ready, we can run it.
@@ -188,9 +189,9 @@ $ docker run -p 3000:3000 -t api
There are numerous platforms that we can deploy our app to. I like [Fly.io](https://fly.io) since it very easy to deploy all over the world using the CLI, and it comes with good [Docker support](https://fly.io/docs/languages-and-frameworks/dockerfile/).
-If you haven’t used Fly before, please follow their [short getting started guide](https://fly.io/docs/speedrun/) (5–10 mins).
+If you haven't used Fly before, please follow their [short getting started guide](https://fly.io/docs/speedrun/) (5–10 mins).
-Once you are ready, let’s configure our project.
+Once you are ready, let's configure our project.
```
@@ -224,7 +225,7 @@ And you can open the deployed server using `fly open`.
-That’s it! Our server is now deployed for the world to use.
+That's it! Our server is now deployed for the world to use.
## Summary
diff --git a/docs/blog/2023-03-02-expanding-nx-console-to-jetbrains-ides.md b/docs/blog/2023-03-02-expanding-nx-console-to-jetbrains-ides.md
index fd9f00644682b..14f2d3c8f6011 100644
--- a/docs/blog/2023-03-02-expanding-nx-console-to-jetbrains-ides.md
+++ b/docs/blog/2023-03-02-expanding-nx-console-to-jetbrains-ides.md
@@ -4,6 +4,7 @@ slug: 'expanding-nx-console-to-jetbrains-ides'
authors: ['Max Kless']
cover_image: '/blog/images/2023-03-02/lEAhfd3d17hGichyT-oGbw.png'
tags: [nx]
+description: Explore the technical journey of bringing Nx Console to JetBrains IDEs, featuring Language Server integration and Generate UI implementation for IntelliJ.
---
**_Co-authored by_** [**_Jon Cammisuli_**](https://twitter.com/jcammisuli)
@@ -19,13 +20,13 @@ Go grab it on the official store.
-Before we go into details of Nx Console for IntelliJ, we’d really want to go and **thank our community**. [\* \*_Issam Guissouma_\*\*](https://twitter.com/iguissouma) and [**_Edward Tkachev_**](https://twitter.com/etkachev) from the
+Before we go into details of Nx Console for IntelliJ, we'd really want to go and **thank our community**. [\* \*_Issam Guissouma_\*\*](https://twitter.com/iguissouma) and [**_Edward Tkachev_**](https://twitter.com/etkachev) from the
Nx community had their own Nx Console plugins for IntelliJ out there already for a while. And they have been super
-popular. As such we’d like to take the occasion to give them a shout-out for the awesome work on the community plugins,
+popular. As such we'd like to take the occasion to give them a shout-out for the awesome work on the community plugins,
but also for closely collaborating with us over the last weeks to build our official IntelliJ support for Nx Console.
Especially Issam has been actively helping us port over all the features he built to the official Nx Console plugin. So
-be sure to look out for the upcoming release because it’s going to be another huge one!
+be sure to look out for the upcoming release because it's going to be another huge one!
### Table of Contents
@@ -38,7 +39,7 @@ be sure to look out for the upcoming release because it’s going to be another
· [Glueing it together](#glueing-it-together)
· [Looking ahead](#looking-ahead)
-**Prefer a video version? We’ve got you covered!**
+**Prefer a video version? We've got you covered!**
{% youtube src="https://www.youtube.com/watch?v=xUTm6GDqwJM" /%}
@@ -54,18 +55,18 @@ Language Server and the Generate UI.
the [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/). It serves as a single
source of truth for all information about your workspace and its projects. With it, you get features such a code
completion for `project.json` and `nx.json` files, clickable links for all kinds of files and more. Being a standalone
-process, it’s editor-agnostic per default, which is great! However, IntelliJ doesn’t natively support the language
+process, it's editor-agnostic per default, which is great! However, IntelliJ doesn't natively support the language
server protocol yet, so we had to write some code that bridges the gap between the two. More about that in the following
section!
-The great thing about having a central “brain” for both extensions is that it saves a lot of time writing the same
+The great thing about having a central "brain" for both extensions is that it saves a lot of time writing the same
functionality multiple times. We only have to deal with platform-specific code for rendering UI or defining actions
instead of parsing `nx.json` files and the like. This makes both VSCode and IntelliJ extensions thin, DRY wrappers
around the nxls.
Another major part of Nx Console is the **Generate UI**. Instead of combing through CLI commands to fit your specific
-use-case, you can use the form-based view it provides. It’s a separate web application (currently built with Angular)
-that runs inside VSCode as a webview. Again, being a standalone application means that we didn’t have to rewrite it
+use-case, you can use the form-based view it provides. It's a separate web application (currently built with Angular)
+that runs inside VSCode as a webview. Again, being a standalone application means that we didn't have to rewrite it
completely in order to integrate it into JetBrains-based editors!
## Nx Language Server
@@ -86,7 +87,7 @@ to get information about the workspace. Since this workspace information is alre
solution to just use that same workspace info in the IDEs without us having to rewrite this logic in multiple
languages (ie, TypeScript and Kotlin).
-We found out quickly that we can implement custom requests within the `nxls` to respond to other queries that aren’t
+We found out quickly that we can implement custom requests within the `nxls` to respond to other queries that aren't
actually part of the Language Server Protocol. These requests are what allows us to use the `nxls` in multiple IDEs and
allow us to quickly iterate.
@@ -112,7 +113,7 @@ that moved to the `nxls` .
**IntelliJ**
-For JetBrains editors (IntelliJ/Webstorm), calling a language server wasn’t so obvious.
+For JetBrains editors (IntelliJ/Webstorm), calling a language server wasn't so obvious.
Thankfully, there were already plugins that integrated language servers using
the [lsp4j](https://github.com/eclipse/lsp4j) library. This was a great starting out point for us and we quickly got
@@ -165,7 +166,7 @@ step, which is easily done with [`kotlinx.serialization`](https://github.com/Kot
## Adapting Styling
One aspect that makes designing webviews for VSCode a breeze is the massive stylesheets they ship by default. Every UI
-element’s colors are available in primary, secondary and disabled variants as well as fonts, background colors and more.
+element's colors are available in primary, secondary and disabled variants as well as fonts, background colors and more.
However, this ended up being a struggle as all styling was very tightly coupled to these VSCode stylesheets, which are
obviously not present within a different host IDE. We replaced all of the VSCode styles with custom css variables. In a
@@ -177,11 +178,11 @@ the same style variables using `UIUtil` and pass them to the app.
To integrate the web application into IntelliJ, Nx Console
uses [JCEF (Java Chromium Embedded Framework)](https://plugins.jetbrains.com/docs/intellij/jcef.html). JCEF enables Java
applications to render web pages using Chromium. It comes with great debugging support using Chrome Devtools and we
-haven’t run into any issues with it yet. The docs are sadly a bit lacking, but with some trial and error we managed to
+haven't run into any issues with it yet. The docs are sadly a bit lacking, but with some trial and error we managed to
wire everything up. I want to give a special shoutout to Rafal Mucha and his
article [Creating IntelliJ plugin with WebView](https://medium.com/virtuslab/creating-intellij-plugin-with-webview-3b27c3f87aea).
-It explains how to enable JCEF to load files from the `/resources` folder bundled in the plugin JAR. There’s not much
-info on this topic so this one blog post was a true lifesaver. It’s written in Scala but I learned a lot rewriting it to
+It explains how to enable JCEF to load files from the `/resources` folder bundled in the plugin JAR. There's not much
+info on this topic so this one blog post was a true lifesaver. It's written in Scala but I learned a lot rewriting it to
Kotlin. Now we have
a [Kotlin version](https://github.com/nrwl/nx-console/blob/master/apps/intellij/src/main/kotlin/dev/nx/console/generate_ui/CustomResourceHandler.kt)
out there too!
@@ -194,9 +195,9 @@ callbacks on the host side.
## Glueing it together
One of the unique aspects of the Nx Console for IntelliJ is that it combines different technologies in a polyglot
-monorepo. While Nx is often used for Typescript- or Javascript-based repos, it’s actually technology-agnostic and can
+monorepo. While Nx is often used for Typescript- or Javascript-based repos, it's actually technology-agnostic and can
host apps and libraries in any language. With the newly released [**_Encapsulated Nx_
-**](/recipes/installation/install-non-javascript) setting, this is even taken a step further! Now you don’t need a
+**](/recipes/installation/install-non-javascript) setting, this is even taken a step further! Now you don't need a
`package.json` or `node_modules` to run Nx.
The codebase contains both Typescript code for the VSCode extension and Kotlin code for the IntelliJ plugin. Currently,
@@ -209,7 +210,7 @@ from the other (and back again) could definitely be improved and we might look i
integration later.
For the generate UI, we were able to keep it as a single app. Using different configurations for the `build` target,
-we’re including the different stylesheets needed for each configuration and copying the files to where they need to be.
+we're including the different stylesheets needed for each configuration and copying the files to where they need to be.
## Looking ahead
diff --git a/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md b/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md
index 19d3c0b4859a5..8a2adc0a5db96 100644
--- a/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md
+++ b/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md
@@ -4,9 +4,10 @@ slug: 'nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-03-08/2gKrC6_Yx3hVkQaHxnw5xw.png'
tags: [nx, release]
+description: Nx 15.8 brings Rust-based hasher, IntelliJ IDE support, Deno integration, enhanced Node.js features, and Storybook CSF3 support for improved performance.
---
-Just weeks after the [release of Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning) (release video [here](https://www.youtube.com/watch?v=IStJODzZSoc)), the Nx team has now launched Nx 15.8, with exciting new features and enhancements aimed at improving developer experience, productivity, and efficiency. Let’s dive straight in.
+Just weeks after the [release of Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning) (release video [here](https://www.youtube.com/watch?v=IStJODzZSoc)), the Nx team has now launched Nx 15.8, with exciting new features and enhancements aimed at improving developer experience, productivity, and efficiency. Let's dive straight in.
**Table of Contents**
· [Rustifying the Nx Hasher](#rustifying-the-nx-hasher)
@@ -18,7 +19,7 @@ Just weeks after the [release of Nx 15.7](/blog/nx-15-7-node-support-angular-lts
· [How to Update Nx](#how-to-update-nx)
· [Learn more](#learn-more)
-## Prefer a video? We’ve got you covered!
+## Prefer a video? We've got you covered!
{% youtube src="https://www.youtube.com/watch?v=4XdHT5Y7zj4" /%}
@@ -33,16 +34,16 @@ Enable notifications here:
Starting with Nx 15.8, we now have a Rust-based Hasher enabled by default!
-Performance is at the core of what we do at Nx. Hence it isn’t surprising that Nx is the fastest JS-based monorepo solution out there. We’ve shown [that a couple of times](https://github.com/vsavkin/large-monorepo). But every millisecond counts! As such, we decided to experiment with Rust to see whether we could further optimize our project graph creation as well as the hasher function that is used for the [computation cache](/features/cache-task-results).
+Performance is at the core of what we do at Nx. Hence it isn't surprising that Nx is the fastest JS-based monorepo solution out there. We've shown [that a couple of times](https://github.com/vsavkin/large-monorepo). But every millisecond counts! As such, we decided to experiment with Rust to see whether we could further optimize our project graph creation as well as the hasher function that is used for the [computation cache](/features/cache-task-results).
Our original implementation used Git to calculate the hash. But it had some downsides as
-- it didn’t work if you don’t have or use Git (obviously)
-- it didn’t work if you used Git submodules
+- it didn't work if you don't have or use Git (obviously)
+- it didn't work if you used Git submodules
- it became super slow if you had a lot of file changes on your Git working tree, like when switching between branches
- it triggered a lot of `execSync` calls to get different git status which was a fragile implementation
-In some situations where we couldn’t rely on or use the Git hasher, we did a fallback to a node implementation which made things even slower.
+In some situations where we couldn't rely on or use the Git hasher, we did a fallback to a node implementation which made things even slower.
**All nice and good, but show me the numbers!**
@@ -61,13 +62,13 @@ When running these tests on Windows (not WSL), the Nx repo hashing timings turne
- Rust hasher: 72ms
- Git hasher: 330ms
-Right now, we only observed the Rust hasher to be slightly slower on large repositories when you don’t have any changes. Once you start making changes the Git hasher becomes slower again and is overtaken by the Rust version which remains stable in performance.
+Right now, we only observed the Rust hasher to be slightly slower on large repositories when you don't have any changes. Once you start making changes the Git hasher becomes slower again and is overtaken by the Rust version which remains stable in performance.
An interesting side-effect of using the Rust-based hasher is the size of the generated hashes, which are much smaller and thus allow for a quicker serialization between the [Nx Daemon](/concepts/nx-daemon) and Nx.
**Future work**
-While we started with the hasher optimization, the next implementation we’re exploring is using a binary format to communicate between the Nx Daemon and the Nx client. Currently, we serialize the JSON to a string and pass that through an IPC socket. Using a binary format will significantly speed up the communication here.
+While we started with the hasher optimization, the next implementation we're exploring is using a binary format to communicate between the Nx Daemon and the Nx client. Currently, we serialize the JSON to a string and pass that through an IPC socket. Using a binary format will significantly speed up the communication here.
**Opting out**
@@ -87,7 +88,7 @@ As such, it should work on most CI and local developer machines. If we missed so
{% youtube src="https://youtu.be/NpH8cFSp51E" /%}
-Nx Deno support [already landed in 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning), but didn’t make it into the blog post. So here we go: we have a brand new Nx Deno plugin published at `@nrwl/deno`. For now, it is experimental and lives in our [labs repository](https://github.com/nrwl/nx-labs).
+Nx Deno support [already landed in 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning), but didn't make it into the blog post. So here we go: we have a brand new Nx Deno plugin published at `@nrwl/deno`. For now, it is experimental and lives in our [labs repository](https://github.com/nrwl/nx-labs).
This plugin features the ability to generate Deno applications and libraries inside of an Nx workspace. Obviously, all the other much-loved Nx features such as caching, affected commands and the project graph visualization work out of the box as well.
@@ -109,9 +110,9 @@ Or generate a new library with:
npx nx g @nrwl/deno:lib mydenolib
```
-We’re excited to see folks welcome in Deno APIs to their Nx workspaces and be able to easily share their Typescript packages across Deno, Node, and web applications, all inside the same monorepo.
+We're excited to see folks welcome in Deno APIs to their Nx workspaces and be able to easily share their Typescript packages across Deno, Node, and web applications, all inside the same monorepo.
-Given this is still experimental, we’re more than happy to receive feedback and hear about ways you are using Deno right now and/or plan to use it in an Nx workspace.
+Given this is still experimental, we're more than happy to receive feedback and hear about ways you are using Deno right now and/or plan to use it in an Nx workspace.
To see some of this in action, be sure to check out our [recent livestream with Caleb and Chau](https://youtu.be/Um8xXR54upQ), two of our engineers that have been working on this plugin:
@@ -125,7 +126,7 @@ Developer tool CLIs are known for being, well, command-line interfaces. Nx comes
- [providing IntelliSense](https://twitter.com/NxDevTools/status/1573323012476051456) support for Nx configuration files
- [integrating Nx Cloud](https://youtu.be/WfWmK1x52HE)
-With the growing popularity, the ask for an equivalent extension for JetBrains’ IntelliJ & WebStorm editors got louder and louder. At Nx, we’re lucky to have an awesome community. [Issam Guissouma](https://twitter.com/iguissouma) and [Edward Tkachev](https://twitter.com/etkachev) from the Nx community jumped in and provided their implementation of Nx Console for IntelliJ.
+With the growing popularity, the ask for an equivalent extension for JetBrains' IntelliJ & WebStorm editors got louder and louder. At Nx, we're lucky to have an awesome community. [Issam Guissouma](https://twitter.com/iguissouma) and [Edward Tkachev](https://twitter.com/etkachev) from the Nx community jumped in and provided their implementation of Nx Console for IntelliJ.
Since our team [now works full-time on Nx](/blog/from-bootstrapped-to-venture-backed) and the surrounding tooling, we decided to have a dedicated Nx Console extensions for IntelliJ and WebStorm that is actively maintained and developed by the core team. We reached out to Issam and Edward and started collaborating on it. The result can now be installed from the JetBrains marketplace:
[https://plugins.jetbrains.com/plugin/21060-nx-console](https://plugins.jetbrains.com/plugin/21060-nx-console)
@@ -143,7 +144,7 @@ Nx Console has proven a highly valuable tool for exploring Nx generators. Especi
With a growing number of parameters that a generator can take, it started to get messy and overwhelming. Furthermore, in 80% of the cases, you would probably need the main parameters such as the name, bundler, and directory where to generate the output.
This is the main reason we introduced a `x-priority` flag to our generator metadata, to have a way to prioritize certain flags and show them more prominently to the end user. Available values are `important` and `internal`.
-The property can be defined for the desired parameters in the generator’s `schema.json`:
+The property can be defined for the desired parameters in the generator's `schema.json`:
```json
{
diff --git a/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md b/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md
index 8233820cbd29a..27ca02fd9f15b 100644
--- a/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md
+++ b/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md
@@ -4,6 +4,7 @@ slug: 'rspack-getting-up-to-speed-with-nx'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-03-10/fWQ53mw2itEs3SGAOJVonQ.png'
tags: [nx]
+description: Explore Nx's integration with Rspack, the Rust-based Webpack alternative that offers 5-10x faster compilation for React apps in your monorepo.
---
At Nx, we are excited to see the JavaScript tooling ecosystem evolve, particularly when it comes to improving speed! Performance is at the core of Nx. Faster tools with which we can integrate make our lives easier and allow us to provide a better experience for developers.
@@ -14,7 +15,7 @@ Almost a year ago [ByteDance](https://www.bytedance.com/) started developing a n
Rspack is a rewrite of Webpack with the primary goal of improving performance. Rust is the main language, allowing for a highly parallelized architecture that takes full advantage of modern multi-core CPUs. In addition, it also comes with essential bundling features already built-in to avoid further bottlenecks from 3rd-party packages. It also highly optimizes HMR (Hot Module Replacement) using a specialized incremental compilation strategy.
-ByteDance developed Rspack to solve performance issues they faced when developing and maintaining their internal monolithic applications, all of which rely heavily on complex Webpack configurations. Rspack being a rewrite allows to rely on Webpack’s mature architecture and is, at the same time, an easy drop-in replacement.
+ByteDance developed Rspack to solve performance issues they faced when developing and maintaining their internal monolithic applications, all of which rely heavily on complex Webpack configurations. Rspack being a rewrite allows to rely on Webpack's mature architecture and is, at the same time, an easy drop-in replacement.
ByteDance already applied Rspack on some of their internal business applications and has seen between 5 to 10x improvement in compilation performance.
@@ -46,7 +47,7 @@ All the usual Nx features, such as
..work out of the box.
-But not just the “speed features”. All the code generators, automate code migrations, and [code editor extensions](/getting-started/editor-setup) work too.
+But not just the "speed features". All the code generators, automate code migrations, and [code editor extensions](/getting-started/editor-setup) work too.
## Rspack in an Nx Monorepo
diff --git a/docs/blog/2023-04-19-nx-cloud-3.md b/docs/blog/2023-04-19-nx-cloud-3.md
index 9f4a2d549f0b2..3c9d6cd8e48c1 100644
--- a/docs/blog/2023-04-19-nx-cloud-3.md
+++ b/docs/blog/2023-04-19-nx-cloud-3.md
@@ -4,11 +4,12 @@ slug: 'nx-cloud-3-0-faster-more-efficient-modernized'
authors: [Juri Strumpflohner]
cover_image: '/blog/images/2023-04-19/featured_img.webp'
tags: [nx, nx-cloud]
+description: Nx Cloud 3.0 introduces a modern UI, faster cache management, enhanced DTE, VCS integrations, enterprise features, and a simplified pricing model.
---
It has been almost 2 years since we released [Nx Cloud 2.0](/nx-cloud). Since then, it has saved over 400 years of computation by leveraging its distributed caching and task execution. And we keep adding 8 years every single week. Not only does this tremendously [impact our environment](/blog/helping-the-environment-by-saving-two-centuries-of-compute-time), but it also helps developers be more productive and companies save money.
-In the last couple of months we have quadrupled the team and have done some amazing things. And we have some big plans for what is coming next. Here’s all you need to know!
+In the last couple of months we have quadrupled the team and have done some amazing things. And we have some big plans for what is coming next. Here's all you need to know!
**Table of Contents**
@@ -21,7 +22,7 @@ In the last couple of months we have quadrupled the team and have done some amaz
- [Coming Next](#coming-next)
- [Learn more](#learn-more)
-**Prefer a Video? We’ve got you Covered!**
+**Prefer a Video? We've got you Covered!**
{% youtube src="https://www.youtube.com/embed/cG2hEI5L3qI?si=9frDSD8_HK1iTNEi" /%}
@@ -78,7 +79,7 @@ In addition to the GitHub, we expanded our Nx Cloud live status updates to work
We have extensive experience working with Fortune 500 companies, helping them scale their development using monorepos. This has given us valuable insight into the unique security requirements of these companies. Our [Enterprise plan](/enterprise) reflects that allowing organizations to have a **fully self-contained version of Nx Cloud** that can be **hosted on their own servers** and comes with dedicated support from the Nx and Nx Cloud core team.
-We’ve recently made a couple of improvements to our enterprise offering.
+We've recently made a couple of improvements to our enterprise offering.
- **Helm Charts** — We added a **Helm chart** to simplify the process of deploying Nx Cloud to on-premises infrastructure, allowing organizations to quickly set up and manage their own instance of Nx Cloud within their secure environment.
- **Stability improvements** — We significantly reworked our on-premises solution to be identical to our SaaS deployment. This revamp resulted in a more robust and reliable on-premises deployment of Nx Cloud, ensuring enterprise-grade performance and reliability.
@@ -90,7 +91,7 @@ Learn more at [enterprise](/enterprise).
Nx Cloud has evolved a lot since we first released it in 2020, and is changing even more in 2023. To better adapt to Nx Cloud being a critical CI tool, we changed our pricing model to be more consistent and predictable for CI workloads.
-Nx Cloud’s previous pricing was based on time savings from Nx Cloud, which made sense when Nx Cloud was strictly a distributed caching service. The [new pricing model](/pricing) is based entirely on the number of CI pipeline executions per calendar month. We believe this is a simpler and more transparent model that should help you predict your costs far more easily.
+Nx Cloud's previous pricing was based on time savings from Nx Cloud, which made sense when Nx Cloud was strictly a distributed caching service. The [new pricing model](/pricing) is based entirely on the number of CI pipeline executions per calendar month. We believe this is a simpler and more transparent model that should help you predict your costs far more easily.
@@ -104,9 +105,9 @@ Learn more at [/pricing](/pricing).
## Coming Next
-We’ve got some big plans for Nx Cloud. You really want to write your CI script by focusing on what you want to achieve rather than thinking about making it fast. We’re going to make this happen!
+We've got some big plans for Nx Cloud. You really want to write your CI script by focusing on what you want to achieve rather than thinking about making it fast. We're going to make this happen!
-The current Distributed Task Execution (DTE) already goes a long way, but you still have to provision the agents by yourself. Providing the correct number of agents is crucial for maximizing efficiency and reducing idle time. And it is not even a static number but might depend on the actual run itself. Nx has extensive knowledge about the structure of the workspace and according tasks. We want to leverage that information. Imagine a setup where you have a roughly 20 line CI config for a repo with hundreds of developers and Nx Cloud automatically determines for each run the ideal number of agents required, provisions them, distributes all tasks efficiently and then disposes all agents again. All fully automatically. And it will be fast. To the point where you wouldn’t even need your Jenkins, CircleCI etc at all.
+The current Distributed Task Execution (DTE) already goes a long way, but you still have to provision the agents by yourself. Providing the correct number of agents is crucial for maximizing efficiency and reducing idle time. And it is not even a static number but might depend on the actual run itself. Nx has extensive knowledge about the structure of the workspace and according tasks. We want to leverage that information. Imagine a setup where you have a roughly 20 line CI config for a repo with hundreds of developers and Nx Cloud automatically determines for each run the ideal number of agents required, provisions them, distributes all tasks efficiently and then disposes all agents again. All fully automatically. And it will be fast. To the point where you wouldn't even need your Jenkins, CircleCI etc at all.
In addition, we are actively exploring ways to provide advanced analytics for your workspace, including insights into the frequency and duration of specific tasks. This valuable information can help identify large tasks that could benefit from being broken down into smaller ones, leveraging caching and other speed improvements to optimize performance. Stay tuned for more to come!
diff --git a/docs/blog/2023-05-02-nx-16-is-here.md b/docs/blog/2023-05-02-nx-16-is-here.md
index abdcd930d2106..d017250865a87 100644
--- a/docs/blog/2023-05-02-nx-16-is-here.md
+++ b/docs/blog/2023-05-02-nx-16-is-here.md
@@ -5,11 +5,12 @@ authors: ['Zack DeRose']
cover_image: '/blog/images/2023-05-02/n8JTIcKSYkebBOl8zZuF9w.png'
youtubeUrl: 'https://youtu.be/JIhOyJtuxEA'
tags: [nx, release]
+description: Nx 16 brings package rescoping, enhanced Deno support, Cypress testing improvements, task graph visualization, and PNPM migration for better performance.
---
-We’re proud to announce the release of Nx version 16! In this article, we’ll go over the major updates from Nx 16 and the key pieces of information you’ll need to know for the changes that Nx 16 brings!
+We're proud to announce the release of Nx version 16! In this article, we'll go over the major updates from Nx 16 and the key pieces of information you'll need to know for the changes that Nx 16 brings!
-But before we jump into the new features of Nx 16, let’s recap some of the recent features from our Nx 15 minor releases!
+But before we jump into the new features of Nx 16, let's recap some of the recent features from our Nx 15 minor releases!
- We introduced simpler presets for React, Angular, and [Node starter applications](https://youtu.be/K4f-fMuAoRY)
- We added official support for [Vite](/nx-api/vite) and Vitest for integrated Nx monorepos
@@ -21,7 +22,7 @@ But before we jump into the new features of Nx 16, let’s recap some of the rec
### Table of Contents
-· [Here’s how to Upgrade with Nx Migrate](#heres-how-to-upgrade-with-nx-migrate)
+· [Here's how to Upgrade with Nx Migrate](#heres-how-to-upgrade-with-nx-migrate)
· [Rescoping From @nrwl/_ to @nx/_](#rescoping-from-nrwl-to-nx)
· [Deno Standalone Apps, Edge Deployment and More](#deno-standalone-apps-edge-deployment-and-more)
· [Cypress Feature Testing](#cypress-feature-testing)
@@ -29,7 +30,7 @@ But before we jump into the new features of Nx 16, let’s recap some of the rec
· [The Nx Repo Switches to PNPM for its Package Manager](#the-nx-repo-switches-to-pnpm-for-its-package-manager)
· [Learn more](#learn-more)
-## Here’s how to Upgrade with Nx Migrate
+## Here's how to Upgrade with Nx Migrate
As with all new Nx releases, `nx migrate` can be used to bump your Nx packages to the appropriate version, as well as run any necessary changes to your codebase.
@@ -41,7 +42,7 @@ nx migrate latest
This will update your dependencies to the latest version, as well as update those dependencies in your root `package.json` file.
-If further migrations are available, you’ll see a `migrations.json` file in the root of your workspace. This file will describe any further code generation scripts that should be run. To run these, use the command..
+If further migrations are available, you'll see a `migrations.json` file in the root of your workspace. This file will describe any further code generation scripts that should be run. To run these, use the command..
```
nx migrate --run-migrations
diff --git a/docs/blog/2023-05-16-introducing-the-nx-champions-program.md b/docs/blog/2023-05-16-introducing-the-nx-champions-program.md
index cd6ed5dc3ea5c..67ad57e1be5a9 100644
--- a/docs/blog/2023-05-16-introducing-the-nx-champions-program.md
+++ b/docs/blog/2023-05-16-introducing-the-nx-champions-program.md
@@ -4,6 +4,7 @@ slug: 'introducing-the-nx-champions-program'
authors: ['Isaac Mann']
cover_image: '/blog/images/2023-05-16/cVGLh0H-uOpy7-D6.png'
tags: [nx]
+description: Introducing the Nx Champions program, recognizing and supporting community leaders in Nx expertise, content creation, and community bridging.
---
The Nx community is too large to be adequately supported by the Nx team alone. Luckily, there are many people who volunteer their time and expertise to help others and share how they use Nx to solve their problems. We are launching the Nx Champions program as a way of acknowledging the work of key members of the community and supporting them in their ongoing efforts.
@@ -19,7 +20,7 @@ A full list of Nx Champions is available at [/community](/community).
_List of Nx Champions_
-We appreciate everyone who was part of the initial group of Nx Champions, but acknowledge that there are more people who could qualify. If you are interested in joining the program, fill out the [application form](https://forms.gle/wYd9mC3ka64ki96G7) and let’s talk about it.
+We appreciate everyone who was part of the initial group of Nx Champions, but acknowledge that there are more people who could qualify. If you are interested in joining the program, fill out the [application form](https://forms.gle/wYd9mC3ka64ki96G7) and let's talk about it.
## Learn more about Nx
diff --git a/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md b/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md
index 5b1db3589a572..424b6a58af68e 100644
--- a/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md
+++ b/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md
@@ -4,17 +4,18 @@ slug: 'determine-your-user-location-with-netlify-edge-functions'
authors: ['Nicholas Cunningham']
cover_image: '/blog/images/2023-05-26/G2ynKDm6DIKLcZ2fJlV0dw.png'
tags: [nx, tutorial]
+description: A guide to user location detection using Nx and Netlify Edge Functions, with serverless function setup, IP geolocation integration, and deployment for region-aware web apps.
---
-Today, we will explore how to use `@nx/netlify` serverless functions to determine a user’s location. This can be an incredibly useful feature in various applications, such as customizing user experiences based on their region, displaying localized content, or tracking user demographics for marketing purposes. In this post, we’ll walk you through a step-by-step guide on implementing this functionality using `@nx/netlify` serverless functions.
+Today, we will explore how to use `@nx/netlify` serverless functions to determine a user's location. This can be an incredibly useful feature in various applications, such as customizing user experiences based on their region, displaying localized content, or tracking user demographics for marketing purposes. In this post, we'll walk you through a step-by-step guide on implementing this functionality using `@nx/netlify` serverless functions.
-Before we get started though, here’s a video introduction to the new `@nx/netlify` package:
+Before we get started though, here's a video introduction to the new `@nx/netlify` package:
{% youtube src="https://youtu.be/idH6GCkWq0w" /%}
### Step 1: Set up your Nx workspace with Netlify
-To get started, you need to have an Nx workspace. If you haven’t already, create a new Nx workspace by running:
+To get started, you need to have an Nx workspace. If you haven't already, create a new Nx workspace by running:
```shell
npx create-nx-workspace user-location --preset=@nx/netlify
@@ -29,9 +30,9 @@ mkdir src/functions/user-location
touch src/functions/user-location/user-location.ts
```
-### Step 3: Determine the user’s location
+### Step 3: Determine the user's location
-To determine the user’s location, we will leverage the `request.headers` object, specifically the `x-forwarded-for` header containing the user’s IP address. We can then use an IP geolocation API like ipapi ([https://ipapi.co/](https://ipapi.co/)) to fetch location data based on this IP address.
+To determine the user's location, we will leverage the `request.headers` object, specifically the `x-forwarded-for` header containing the user's IP address. We can then use an IP geolocation API like ipapi ([https://ipapi.co/](https://ipapi.co/)) to fetch location data based on this IP address.
_Note_ in **Node.js 18**, the experimental global fetch API is available by default. If you are using a node version **lower** than **18** you can install `node-fetch` to handle API requests:
@@ -72,7 +73,7 @@ export const handler: Handler = async (event, _) => {
When we created our workspace, the initial scaffolding generated a **deploy-target** inside our `project.json`.
> A **target** is a specific task you can run for a project.
-> You can think of it as a script/command that does a specific job. The most common targets are “build”, “serve”, “test”, “lint”, “deploy”, etc. For more information regarding `project.json` you can read about it at [project-configuration](/reference/project-configuration)
+> You can think of it as a script/command that does a specific job. The most common targets are "build", "serve", "test", "lint", "deploy", etc. For more information regarding `project.json` you can read about it at [project-configuration](/reference/project-configuration)
We can start off by creating our site on Netlify by running:
@@ -88,7 +89,7 @@ Now, to deploy your serverless function run:
nx run deploy
```
-Finally, navigate to your Netlify site’s Functions tab, and you should see your `user-location` function deployed and ready to use!
+Finally, navigate to your Netlify site's Functions tab, and you should see your `user-location` function deployed and ready to use!
For example, ours can be found at: [https://644a9b17d0299b00b581b33f--find-user-location.netlify.app/.netlify/functions/user-location](https://644a9b17d0299b00b581b33f--find-user-location.netlify.app/.netlify/functions/user-location)
@@ -96,7 +97,7 @@ For example, ours can be found at: [https://644a9b17d0299b00b581b33f--find-user-
{ "location": { "city": "Miami", "region": "Florida", "country": "US" } }
```
-By following these steps, you’ve successfully used `@nx/netlify` serverless function to determine a user’s location!
+By following these steps, you've successfully used `@nx/netlify` serverless function to determine a user's location!
### Wrapping up
diff --git a/docs/blog/2023-06-20-introducing-nx-ecosystem-ci.md b/docs/blog/2023-06-20-introducing-nx-ecosystem-ci.md
index a9aa6135d7b23..9adb010720c9b 100644
--- a/docs/blog/2023-06-20-introducing-nx-ecosystem-ci.md
+++ b/docs/blog/2023-06-20-introducing-nx-ecosystem-ci.md
@@ -4,29 +4,30 @@ slug: 'introducing-nx-ecosystem-ci'
authors: ['Katerina Skroumpelou']
cover_image: '/blog/images/2023-06-20/EffyLKcVe5gE_x3MT8PJUQ.png'
tags: [nx]
+description: Introducing Nx Ecosystem CI, a Vite-inspired automated testing framework for Nx ecosystem compatibility, pre-release testing, migration checks, and test suite management.
---
-The JavaScript ecosystem evolves at a rapid pace, frequently introducing new tools and packages. At Nx, we provide out-of-the-box integrations with the most popular among them so you don’t have to worry when stitching them together. That, however…yes you guessed it… can be a challenging task. There’s just one way to keep up: automation.
+The JavaScript ecosystem evolves at a rapid pace, frequently introducing new tools and packages. At Nx, we provide out-of-the-box integrations with the most popular among them so you don't have to worry when stitching them together. That, however…yes you guessed it… can be a challenging task. There's just one way to keep up: automation.
-We already run a ton of automated testing on our repository to ensure we don’t break anything. But given Nx’s popularity and vast usage across open source and enterprise projects, we want to go a step further: introducing the [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci). Inspired by the work done by our friends on the [Vite](https://vitejs.dev/) team, the [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci) is designed to enhance the stability of Nx by testing pre-release versions with projects in the Nx ecosystem.
+We already run a ton of automated testing on our repository to ensure we don't break anything. But given Nx's popularity and vast usage across open source and enterprise projects, we want to go a step further: introducing the [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci). Inspired by the work done by our friends on the [Vite](https://vitejs.dev/) team, the [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci) is designed to enhance the stability of Nx by testing pre-release versions with projects in the Nx ecosystem.
### Inspired by the Vite Ecosystem CI
The [Vite Ecosystem CI](https://github.com/vitejs/vite-ecosystem-ci) is an innovative tool that has significantly enhanced the use of [Vite](https://vitejs.dev/). It monitors the compatibility of Vite with various other packages and projects in the ecosystem by running tests against the latest changes in the Vite codebase and the projects it integrates with. This allows the Vite team to catch issues early and maintain a high level of stability, ensuring that developers using Vite can trust that new contributions to either Vite or their project will not result in breaking changes.
-This robust testing system is essential because it gives users confidence in Vite’s reliability, encouraging more developers to adopt Vite. It’s a great example of proactive testing in a fast-paced ecosystem and an inspiration for other projects, including Nx. The concept of the Ecosystem CI introduces a framework-agnostic way of testing integrations of one tool with other tools in the ecosystem. It puts together a “syntax” with which tools can easily find the way to test their latest versions with one another.
+This robust testing system is essential because it gives users confidence in Vite's reliability, encouraging more developers to adopt Vite. It's a great example of proactive testing in a fast-paced ecosystem and an inspiration for other projects, including Nx. The concept of the Ecosystem CI introduces a framework-agnostic way of testing integrations of one tool with other tools in the ecosystem. It puts together a "syntax" with which tools can easily find the way to test their latest versions with one another.
### Nx Ecosystem CI
-The [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci) is a fork of the [Vite Ecosystem CI](https://github.com/vitejs/vite-ecosystem-ci) but is tailored specifically for the Nx ecosystem. It’s designed to ensure that Nx maintains its high standards of reliability and compatibility with all our users.
+The [Nx Ecosystem CI](https://github.com/nrwl/nx-ecosystem-ci) is a fork of the [Vite Ecosystem CI](https://github.com/vitejs/vite-ecosystem-ci) but is tailored specifically for the Nx ecosystem. It's designed to ensure that Nx maintains its high standards of reliability and compatibility with all our users.
### How Nx Ecosystem CI Works
The Nx Ecosystem CI works in the following way:
1. It clones the provided repo which uses Nx
-2. It installs the project’s dependencies
-3. It runs a number of scripts specified by the project’s author (eg. `test`, `build`, `e2e`)
+2. It installs the project's dependencies
+3. It runs a number of scripts specified by the project's author (eg. `test`, `build`, `e2e`)
4. It migrates the repository to the `next` version of Nx (using `nx migrate next`)
5. It runs the scripts again
6. It reports the results of the runs to the [Nx Official Discord Server](https://go.nx.dev/community)
@@ -49,7 +50,7 @@ import { RunOptions } from '../types';
`RunOptions` is a type that represents the options for running a test suite. It includes properties such as the repository to test, the branch to use, and the commands to run for building, testing, and performing e2e tests (all optional).
-Next, you need to define the `test` function that accepts the `RunOptions`. Within this function, you’ll call the `runInRepo` function, passing in the options as well as any specific properties required for your suite:
+Next, you need to define the `test` function that accepts the `RunOptions`. Within this function, you'll call the `runInRepo` function, passing in the options as well as any specific properties required for your suite:
Again, using the example of `nx-rspack`:
@@ -66,11 +67,11 @@ export async function test(options: RunOptions) {
}
```
-In this example, the suite is set up to run on the ‘nrwl/nx-labs’ repository on the `main` branch. It will run `build rspack`, `test rspack`, and `e2e rspack-e2e` as its build, test, and e2e tests respectively. These commands will be invoked using the package manager used by your repository. So, in the `nx-labs` case, it will run `yarn build rspack` in the `nrwl/nx-labs` repo.
+In this example, the suite is set up to run on the 'nrwl/nx-labs' repository on the `main` branch. It will run `build rspack`, `test rspack`, and `e2e rspack-e2e` as its build, test, and e2e tests respectively. These commands will be invoked using the package manager used by your repository. So, in the `nx-labs` case, it will run `yarn build rspack` in the `nrwl/nx-labs` repo.
-For this reason, adding a new test suite to the Nx Ecosystem CI also requires setting up appropriate `scripts` in your repository’s `package.json` file. These scripts provide the commands that will be invoked by your package manager to carry out the `build`, `test`, and `e2e` steps.
+For this reason, adding a new test suite to the Nx Ecosystem CI also requires setting up appropriate `scripts` in your repository's `package.json` file. These scripts provide the commands that will be invoked by your package manager to carry out the `build`, `test`, and `e2e` steps.
-Here’s an example of how scripts might be configured in a package.json file for a repository using Nx:
+Here's an example of how scripts might be configured in a package.json file for a repository using Nx:
```
"scripts": {
@@ -84,7 +85,7 @@ Here’s an example of how scripts might be configured in a package.json file fo
These scripts should be set up in such a way that they can be invoked directly by your package manager. For example, in a repository using `pnpm`, you could run the build script with the command `pnpm run build`.
-When you create your test suite file, you’ll specify these script names in the `build`, `test`, and `e2e` properties of the `options` object passed to `runInRepo`.
+When you create your test suite file, you'll specify these script names in the `build`, `test`, and `e2e` properties of the `options` object passed to `runInRepo`.
```
export async function test(options: RunOptions) {
@@ -103,14 +104,14 @@ With this setup, the Nx Ecosystem CI will run these scripts in your repository a
In addition to creating the test suite and setting up the package.json scripts, you will also need to add the name of the new suite to the workflow configuration files in the `.github/workflows` directory of the Nx Ecosystem CI repository. This suite name should match the filename of your test suite script.
-There are two workflow files you’ll need to update:
+There are two workflow files you'll need to update:
- `.github/workflows/ecosystem-ci-selected.yml`
- `.github/workflows/ecosystem-ci.yml`
-In `.github/workflows/ecosystem-ci.yml` you’ll find a strategy section with a `matrix` property. This `matrix` property specifies an array of suite names for the workflow to run. You’ll need to add your new suite name to this array.
+In `.github/workflows/ecosystem-ci.yml` you'll find a strategy section with a `matrix` property. This `matrix` property specifies an array of suite names for the workflow to run. You'll need to add your new suite name to this array.
-Here’s what the strategy section might look like after adding a new suite named `my-new-suite`:
+Here's what the strategy section might look like after adding a new suite named `my-new-suite`:
```
strategy:
@@ -123,11 +124,11 @@ strategy:
- my-new-suite # your new suite
```
-By adding your suite name to this file, you’re instructing the Nx Ecosystem CI to include your suite in its test runs.
+By adding your suite name to this file, you're instructing the Nx Ecosystem CI to include your suite in its test runs.
In addition to the `.github/workflows/ecosystem-ci.yml` file, you also need to include your suite in the `.github/workflows/ecosystem-ci-selected.yml` file.
-The `ecosystem-ci-selected.yml` workflow is designed to allow manual selection of a test suite to run. To add a suite to this workflow, you add it to the options array under `workflow_dispatch > inputs > suite`. Here’s what it might look like with a new suite named `my-new-suite`:
+The `ecosystem-ci-selected.yml` workflow is designed to allow manual selection of a test suite to run. To add a suite to this workflow, you add it to the options array under `workflow_dispatch > inputs > suite`. Here's what it might look like with a new suite named `my-new-suite`:
```
on:
@@ -172,7 +173,7 @@ We are not alone in recognizing the value of an Ecosystem CI approach. Other OSS
- Rspack: [https://github.com/web-infra-dev/rspack-ecosystem-ci](https://github.com/web-infra-dev/rspack-ecosystem-ci)
- Storybook: [https://storybook.js.org/blog/storybook-ecosystem-ci/](https://storybook.js.org/blog/storybook-ecosystem-ci/)
-As we continue to improve and refine the Nx Ecosystem CI, we remain committed to the goal of making Nx a reliable and integral part of your development workflow. If you’re an open-source maintainer, you can create your own Ecosystem CI either from scratch (like Storybook) or by cloning the Vite Ecosystem CI. If your project uses Nx, you can easily add a new test suite for it.
+As we continue to improve and refine the Nx Ecosystem CI, we remain committed to the goal of making Nx a reliable and integral part of your development workflow. If you're an open-source maintainer, you can create your own Ecosystem CI either from scratch (like Storybook) or by cloning the Vite Ecosystem CI. If your project uses Nx, you can easily add a new test suite for it.
## Learn more
diff --git a/docs/blog/2023-06-29-nx-console-gets-lit.md b/docs/blog/2023-06-29-nx-console-gets-lit.md
index b76dac2a4f4e3..2e4b2de532c45 100644
--- a/docs/blog/2023-06-29-nx-console-gets-lit.md
+++ b/docs/blog/2023-06-29-nx-console-gets-lit.md
@@ -4,6 +4,343 @@ slug: 'nx-console-gets-lit'
authors: [Max Kless]
cover_image: '/blog/images/2023-06-29/featured_img.webp'
tags: [nx, nx-console]
+description: Nx Console's Generate UI rebuilt with Lit for a faster, more maintainable experience across VSCode and JetBrains IDEs.
+---
+
+Over the last few weeks, we rebuilt one of Nx Console's most liked features from the ground up: The Generate UI. It looks better, loads faster, and preliminary research shows using it makes you happier, too ;)
+
+You can use it today by installing the latest version of Nx Console for VSCode and JetBrains IDEs! 🎉🎉🎉
+
+- [Nx Console on the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
+- [Nx Console on the JetBrains Marketplace](https://plugins.jetbrains.com/plugin/21060-nx-console)
+
+If you're curious to learn more about the rewrite and the motivations behind it, this is the blog post for you! We'll touch on these topics and more:
+
+- Why did we choose to rewrite?
+- What's Lit and why did we use it over Angular?
+- How did the rewrite go and what Lit features were important for us?
+- What does the performance look like before and after?
+
+{% youtube src="https://www.youtube.com/embed/p455D4W7330?si=FRbiKJhGxT8dYzf9" /%}
+
+## Background: Why Migrate from Angular to Lit?
+
+### A Short History of Nx Console
+
+Let's go back in time: Nx Console has been around for a while. It first launched in 2018 — then called Angular Console — as a standalone Electron app which let you run Angular schematics and builders from a graphical interface. Of course, it was built with Angular and looked something like this:
+
+
+
+In 2019, it was ported to a VSCode extension with the now familiar UI and support for the standalone app was dropped.
+
+In 2020, support for the entire Nx ecosystem was added, it was renamed to Nx Console and an amazing transformation began: Today, Nx Console is much more than just a single form — it tightly integrates Nx into your IDE, gives you the overview of your projects that you need and puts your task-running just a click away.
+
+### Rewriting in Lit
+
+This evolution brought significant improvements to the usability of Nx Console and the value we could provide to developers, but not without presenting its own set of challenges. Inevitably, the codebase grew complex and convoluted over time — the context in which it ran changed, the scope of the product changed, yet the technology remained the same. Adding small features or fixing bugs became increasingly time consuming, and every PR compounded the problem.
+
+The UI looked somewhat outdated and had been built with only VSCode in mind — which became painfully obvious when support for JetBrains IDEs was added. While the web-based nature of the Generate UI allowed us to reuse the code in the new environment, the design looked out of place.
+
+In addition, we started questioning our usage of Angular. Angular is a great framework for building web apps, and in the original context of Angular Console, it made a lot of sense: A tool built by and for Angular engineers — of course it's written in Angular. But things changed, and Angular started to feel overkill for what we needed. Angular has a huge number of features right out of the box. But for our simple form, we didn't need routing, http requests or modules to organize our code. The amount of boilerplate and overhead Angular introduces is significant.
+
+So, ultimately, **we decided to pull the plug and rewrite the entire thing in [Lit](https://lit.dev/).**
+
+Lit is a lightweight framework built on top of web components and "adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier" (taken from their docs). We had used it before to [build the Nx Cloud view](/blog/nx-console-meets-nx-cloud) and were happy with the simple setup and great DX. So the decision to reuse it here was an easy one, since it allowed us to reuse code, build tooling and expertise. The rewrite also gave us the opportunity to improve the design for both supported IDEs and give the entire UI a clean, new coat of paint.
+
+
+
+Before I dive deeper into specifics, let's have a look at the general architecture of Nx Console first.
+
+## Nx Console Architectural Overview
+
+Nx Console is composed of 3 core parts:
+
+- The **nxls** is a language server based on the [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) and acts as the "brain" of Nx Console. It analyzes your Nx workspace and provides information on it, including code completion and more.
+- The **Generate UI** is the form-based view for running Nx generators.
+- The **platform-specific wrappers**. These are written in Typescript and Kotlin and connect the rest of Nx Console to IDE-specific APIs. Having the other parts separate greatly reduces the amount of duplicated code we have to write in order to support multiple IDEs
+
+This architecture's modularity meant we could quickly switch out the Generate UI for a new version without significantly impacting the rest of the codebase — only the parts that actually render the UI and communicate with it had to be adjusted slightly. It also allowed us to ensure backward compatibility: the old generate UI is still available via a feature toggle in the settings.
+
+If you want to dive deeper, there are many more resources on the architecture of Nx Console and how it's built:
+
+- [In-depth blog post about expanding to JetBrains IDEs](/blog/expanding-nx-console-to-jetbrains-ides)
+- [Accompanying Youtube video by Zack DeRose](https://www.youtube.com/watch?v=xUTm6GDqwJM)
+- [The Power of Nx Console — talk by Jon Cammisuli](https://www.youtube.com/watch?v=3C_9g9kt2KM)
+
+## Migrating to Lit: Step by Step
+
+To rebuild our UI, we first needed a new Lit app to work on. While there's no native Nx plugin for Lit, generating the code we need was still very straightforward:
+
+`nx generate @nx/web:app apps/generate-ui-v2`
+
+This generates an entire project for us, with a `tsconfig.json`, `index.html`, `main.ts`, and a `project.json`, where our Nx-specific config lives.
+
+I also installed a couple of dependencies:
+
+- The `@nx/esbuild` plugin because I like fast build times 🏎️
+- TailwindCSS because I don't like writing CSS 🤫
+- `@vscode/webview-ui-toolkit` because it does all of the VSCode work for me 🤖
+
+This is really where Nx shines, because it allows you to take these tools and quickly patch them together and build a pipeline that does exactly what you need. And it also allows you to think about your workspace visually. This is what this is what my task graph for building the Lit app ultimately looks like:
+
+
+
+You can see three build steps:
+
+- `generate-ui-v2:_build` uses esbuild to bundle my Lit components written in Typescript and spits out a `main.js` file
+- `generate-ui-v2:extract-dependencies` copies the third party assets we need into the dist folder. Right now it's just codicons `.css` and `.ttf` files.
+- `generate-ui-v2:build` finally runs tailwind over the bundled code. This could also be done with `postCss` or a custom `esbuild` plugin but running tailwind directly is the easier, so why complicate things?
+
+> 💡 There are different ways to generate this visualisation for your own workspaces:
+>
+> - In VSCode, use the Nx Project View or the `Nx: Focus task in Graph` action
+> - In JetBrains IDEs, use the Nx Toolwindow or context menus
+> - In the command line, run `nx build {{your project}} --graph`
+
+In the bigger context of Nx Console, here's what happens when you build the VSCode extension:
+
+
+
+You can see that we're still building both the new & old generate UI as well as the Nxls and the Nx Cloud webview before combining them all into one VSCode extension artifact.
+
+### Building the Form
+
+Lit is a very small library that provides useful abstractions over browser-native features like web components and messages. Here's what a simple Lit component, written with Typescript, looks like:
+
+```ts {% fileName="main.ts" %}
+@customElement('root-element')
+export class Root extends LitElement {
+ render() {
+ return html`
Hello World
`;
+ }
+}
+```
+
+```html {% fileName="index.html" %}
+
+
+
+
+
+
+
+```
+
+If you need to pass information up the DOM, you use normal events and you can set properties to send information to descendants. Check out the [Lit Docs](https://lit.dev/docs/components/rendering/) to learn more about how the render() method works, how to leverage reactivity, the shadow DOM and so much more.
+
+> 💡 All code samples in this section have been adapted for brevity and clarity. So you won't find this exact code anywhere, but it demonstrates the concepts well.
+
+### Communicating with the IDE — using Reactive Controllers
+
+To communicate with the host IDE, we were able to reuse almost all the logic from the previous UI (for more details, see [Communicating with IntelliJ](/blog/expanding-nx-console-to-jetbrains-ides) from the last blog post). Instead of a service that exposes observables that our component can consume, we used a [Reactive Controller](https://lit.dev/docs/composition/controllers/). Controllers are a neat feature of Lit — they hook into a component and can request DOM updates on their behalf. This eliminates the need for observable streams and subscriptions while keeping the communication code self-contained. Look at this example:
+
+```ts {% fileName="main.ts" %}
+@customElement('root-element')
+export class Root extends LitElement {
+ icc: IdeCommunicationController;
+
+ constructor() {
+ super();
+ this.icc = new IdeCommunicationController(this);
+ }
+ render() {
+ return html`${JSON.stringify(this.icc.generatorSchema)}`;
+ }
+}
+```
+
+```ts {% fileName="ide-communication-controller.ts" %}
+// ide-communication-controller.ts
+export class IdeCommunicationController implements ReactiveController {
+ generatorSchema: GeneratorSchema | undefined;
+ constructor(private host: ReactiveControllerHost) {}
+ // ...
+ private handleMessageFromIde(message: InputMessage) {
+ // ...
+ this.generatorSchema = message.payload;
+ this.host.requestUpdate();
+ }
+}
+```
+
+You can see that `root-element` can really just deal with rendering the form contents, delegating communicating with the IDE and when to update the DOM to the controller.
+
+### Rendering the form fields — using Mixins
+
+The core part of the UI is the form. We built all kinds of inputs: text fields, checkboxes, (multi-) select boxes and array fields. While those each have unique implementations, displaying them is also going to take a lot of repeated code. Every fields needs a label and description. Every field needs to know about its validation state, how dispatch change events and what aria attributes to set. In order to keep this code clean and DRY, we used [Class Mixins](https://lit.dev/docs/composition/mixins/). Mixins aren't really a Lit-specific feature, but I don't see them used much in other frameworks. A mixin is essentially a factory that takes a class and returns another, modified class. Check out this example:
+
+```ts {% fileName="field-mixin.ts" %}
+const Field = (superClass) =>
+ class extends superClass {
+ // we can define (reactive) properties that every field is going to need
+ @property()
+ option: Option;
+ protected get fieldId(): string {
+ return `${this.option.name}-field`;
+ }
+
+ // we can define methods that should be available to all fields
+ dispatchValue(value: string) {
+ // ...
+ }
+ };
+```
+
+```ts {% fileName="field-wrapper-mixin.ts" %}
+const FieldWrapper = (superClass) =>
+ class extends superClass {
+ // we can define a render() method so that fields are all rendered the same
+ protected render() {
+ return html`
+
${this.option.description}
+ ${this.renderField()}`;
+ }
+ };
+```
+
+```ts {% fileName="input-field.ts" %}
+@customElement('input-field')
+export class InputField extends FieldWrapper(Field(LitElement)) {
+ renderField() {
+ return html` `;
+ }
+}
+```
+
+You can see that each component and mixin deals with a specific subset of the overall logic, keeping our code cleanly separated and reusable. A checkbox, for example, is a special case because it's layout on the page is slightly different — no problem, we simply wrote a CheckboxWrapper with some modifications without having to worry about changing the checkbox logic itself.
+
+> 💡 Properly typing mixins is complicated so I left that part out. Refer to [Mixins in Typescript](https://lit.dev/docs/composition/mixins/#mixins-in-typescript) to learn more or [check out our source code on GitHub](https://github.com/nrwl/nx-console).
+
+### Injecting Services & Data — Lit Context
+
+If you're coming from the Angular world, you probably appreciate the great dependency injection (DI) mechanism they have. You can centrally define some services and reuse them across your app, without thinking about passing on props from component to component — the DI system takes care of it. Lit provides something similar via the []`@lit-labs/context`](https://lit.dev/docs/data/context/) package. It's based on the [Context Community Protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md) and similar to React's context API.
+
+Under the hood, it still works with normal browser events, but it abstracts it away from you so you can easily share data and services across your app.
+
+The Generate UI is rendered in both VSCode and JetBrains IDEs. In order to look appropriate, components need to know which environment they're in and adjust styling accordingly. Instead of passing this information from component to component, we can make it available contextually! And with a proper mixin, reading the editor context only has to be implemented once, too.
+
+Have a look at the following example:
+
+```ts {% fileName="editor-context.ts" %}
+export const editorContext = createContext<'vscode' | 'intellij'>(
+ Symbol('editor')
+);
+
+const EditorContext = (superClass) =>
+ class extends superClass {
+ @consume({ context: editorContext })
+ @state()
+ editor: 'vscode' | 'intellij';
+ };
+```
+
+```ts {% fileName="ide-communication-controller.ts" %}
+export class IdeCommunicationController implements ReactiveController {
+ // ...
+ constructor(private host: ReactiveElement) {
+ const editor = isVscode() ? 'vscode' : 'intellij';
+ // provide the context to all DOM children of the host element
+ new ContextProvider(host, {
+ context: editorContext,
+ initialValue: editor,
+ });
+ }
+}
+```
+
+```ts {% fileName="some-component.ts" %}
+@customElement('some-component')
+export class SomeComponent extends EditorContext(LitElement) {
+ render() {
+ return html`
I am rendered in ${this.editor}
`;
+ }
+}
+```
+
+### VSCode Webview UI Toolkit
+
+As we mentioned above, a big part of why we rewrote the UI is that it looked quite out of place in JetBrains IDEs. It was still useful, of course, but it's important to make sure the form _feels_ right.
+
+In VSCode, this is very easy to achieve, thanks to the [VSCode Webview UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit). It's a set of web components, provided by Microsoft, that are designed to look good and be used in VSCode webviews.
+
+
+
+Using it, you get the native look, a11y, and theme-aware styling for free! Thanks to everyone who built it, it's a huge help!
+
+### E2E Testing with Cypress
+
+One big upside of using a webview is the huge Javascript ecosystem is available to you! To make sure that no regressions are introduced later on, we use [Cypress](https://www.cypress.io/). We can mock the editor communication and provide different schemas, make sure the form is rendered correctly and the right messages are sent back to the IDE.
+
+While there's no particular Lit integration for Cypress, the tool itself is framework agnostic so it still works perfectly fine. Using the [`@nx/cypress`](/nx-api/cypress) executors did most of the work for us so setup was pretty quick too.
+
+### Results: Comparing Performance
+
+There's a number of different aspects to performance we can compare between the two implementations. The biggest one by far is not really quantifiable: The maintainability and looks of the new UI. In my opinion, it looks a lot fresher and more native in both environments. We got rid of a lot of legacy code and the new version is easier to reason about and work with.
+But there are thing we _can_ measure, so let's talk numbers!
+
+### Startup Time
+
+It takes time to bootstrap a large framework like Angular, so skipping that, the UI should load quicker than before.
+
+We measured the median time it took to render all options of the `@nx/angular:application` generator in both VSCode and IntelliJ. You can see that the results are pretty clear-cut, even though they are not hugely impactful.
+
+Old UI (Angular)New UI (Lit)SpeedupVSCode65 ms39 ms~ 1.7xIntelliJ189 ms122 ms~ 1.5x
+
+### Bundle Size
+
+As mentioned earlier, Angular comes with a lot more features out-of-the-box than Lit, so it would make sense that the built bundle will be bigger.
+
+We were able to reduce the bundle size (w/o compression) from about 733 kB to 282 kB, which comes out to about a 2,6x decrease. Unlike a website, where the bundle needs to be shipped to users when they load a page, Nx Console users only need to download it once when installing the plugin. This means we're not affected by network speeds after installation, which makes the bundle size less critical.
+
+> 💡 Because of a misconfiguration from a few Angular versions ago, the bundle size that we reported in [this tweet](https://twitter.com/MaxKless/status/1671095858182381569) was overly bloated. We corrected it, but Lit still came out ahead in terms of size and rendering times.
+
+### Build Time
+
+While it might not be important to users of Nx Console, the time it takes to build the project makes a difference to us developers.
+
+Since Lit is just javascript files that don't require a custom compiler or build tooling, we decided to use [`esbuild`](https://esbuild.github.io/) (via `@nx/esbuild`), which is written in Go and extremely fast. On the other hand, the old UI used the `@angular-builders/custom-webpack:browser` builder, which uses webpack under the hood.
+
+We went from about 3.5 seconds to less than 2 seconds of build time, which is less of an improvement than we expected. Since we also have to run tailwind over our files, some of that additional `esbuild` speed seems to be relativized.
+
+## Looking Ahead
+
+Rebuilding the UI has paved the road to reduce a lot of the maintenance burden of Nx Console. It will allow us to move even quicker on building new features to provide the best developer experience possible for you.
+
+Specifically, the updated architecture enabled us to build a (still secret and WIP) plugin feature for Nx Console. Just like Nx, there are always going to be things that are unique to your workspace. We want to make it easy for you to extend and modify Nx Console in ways that help you make the most of using it.
+
+So keep your eyes peeled for announcements and let us know via GitHub or Twitter if you have any ideas! We'd love to chat.
+
+## One more thing!
+
+Nx Console is a tool by developers for developers and there's one thing we love — keyboard shortcuts. So of course we had to build some in. In addition to being keyboard-friendly and tabbable, you can do the following:
+
+- `Cmd/Ctrl + Enter` to run the generator
+- `Cmd/Ctrl + Shift + Enter` to start a dry run
+- `Cmd/Ctrl + Shift + S` to focus the search bar and look for a specific option. Just `tab` to get back to the form
+
+If the prettier UI and better performance haven't convinced you, this surely will! 😉
+
+---
+
+## Learn more
+
+- [Nx Docs](/getting-started/intro)
+- [X/Twitter](https://twitter.com/nxdevtools) -- [LinkedIn](https://www.linkedin.com/company/nrwl/)
+- [Nx GitHub](https://github.com/nrwl/nx)
+- [Nx Official Discord Server](https://go.nx.dev/community)
+- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+
+---
+
+title: Nx Console gets Lit
+slug: 'nx-console-gets-lit'
+authors: [Max Kless]
+cover_image: '/blog/images/2023-06-29/featured_img.webp'
+tags: [nx, nx-console]
+
---
Over the last few weeks, we rebuilt one of Nx Console’s most liked features from the ground up: The Generate UI. It looks better, loads faster, and preliminary research shows using it makes you happier, too ;)
diff --git a/docs/blog/2023-07-06-nx-16-5-release.md b/docs/blog/2023-07-06-nx-16-5-release.md
index fbb396a4bceb8..e247b6607e055 100644
--- a/docs/blog/2023-07-06-nx-16-5-release.md
+++ b/docs/blog/2023-07-06-nx-16-5-release.md
@@ -4,19 +4,20 @@ slug: 'nx-16-5-release'
authors: ['Zack DeRose']
cover_image: '/blog/images/2023-07-06/Gm3s_wLWrAf_uH2AzfJvvQ.png'
tags: [nx, release]
+description: Nx 16.5 released with tag-based task targeting, NextJS 13 support, new recipes, Angular 16 compatibility, Verdaccio integration, custom CLI, external dependencies input, ESLint rule, and Rust integration for performance.
---
-We have launched SO MANY features since our last release blog on Nx 16.0, so we’re covering the major features in this blog!
+We have launched SO MANY features since our last release blog on Nx 16.0, so we're covering the major features in this blog!
{% youtube src="https://youtu.be/7XLoLOc3afY" /%}
-Be sure to mark your calendars for our Nx 16.5 livestream as well! We’ll highlight the features you see here AND field any questions live! Follow the link to schedule a notification for when we go live:
+Be sure to mark your calendars for our Nx 16.5 livestream as well! We'll highlight the features you see here AND field any questions live! Follow the link to schedule a notification for when we go live:
{% youtube src="https://youtu.be/EYgkKmYbRNI" /%}
## Targetting Tasks By Tags
-Our first major feature actually comes to us from the community. Nx has supported a tags property in your project.json file for awhile now — and it’s main purpose has been to be used in conjuncture with the [Nx Module Boundary lint rule](/features/enforce-module-boundaries) to define which projects in your Nx workspace can depend on what — for example, you don’t want your frontend applications to depend on any backend-specific code.
+Our first major feature actually comes to us from the community. Nx has supported a tags property in your project.json file for awhile now — and it's main purpose has been to be used in conjuncture with the [Nx Module Boundary lint rule](/features/enforce-module-boundaries) to define which projects in your Nx workspace can depend on what — for example, you don't want your frontend applications to depend on any backend-specific code.
With this new feature, you can add the `--tag` option to the [`nx affected`](/nx-api/nx/documents/affected) and [`nx run-many`](/nx-api/nx/documents/run-many) commands to specify to Nx to only run commands for projects that match the given tags.
@@ -24,15 +25,15 @@ With this new feature, you can add the `--tag` option to the [`nx affected`](/nx
## NextJS 13 Support
-React Server Components and the new NextJS app router are here, and Nx is here to support them. We’ve added support for the latest versions of Next — complete with generators and executors. We’ve also made sure that our [`withNx` NextJS plugin](/recipes/next/next-config-setup), which allows you to import from your other projects in your workspace while still working with the NextJS build scripts, works both for workspaces using our executors in an Integrated Monorepo approach, as well as for those using a Package-Based approach that are simply using the `next dev` command directly to start their dev server.
+React Server Components and the new NextJS app router are here, and Nx is here to support them. We've added support for the latest versions of Next — complete with generators and executors. We've also made sure that our [`withNx` NextJS plugin](/recipes/next/next-config-setup), which allows you to import from your other projects in your workspace while still working with the NextJS build scripts, works both for workspaces using our executors in an Integrated Monorepo approach, as well as for those using a Package-Based approach that are simply using the `next dev` command directly to start their dev server.
-There’s also built-in support for the new turbopack builder option via the `--turbo` command, for example: `nx serve webapp --turbo`
+There's also built-in support for the new turbopack builder option via the `--turbo` command, for example: `nx serve webapp --turbo`
-We’ve also launched a new preset for `npx create-nx-workpace` for a standalone NextJS app. Checkout it out using the command: `npx create-nx-workspace@latest --preset=nextjs-standalone` or use the interactive prompts to find it:
+We've also launched a new preset for `npx create-nx-workpace` for a standalone NextJS app. Checkout it out using the command: `npx create-nx-workspace@latest --preset=nextjs-standalone` or use the interactive prompts to find it:
-We’ve added a couple videos specifically on Next development in an Nx workspace in the past month, so if you’re looking for more on Next, be sure to check them out!
+We've added a couple videos specifically on Next development in an Nx workspace in the past month, so if you're looking for more on Next, be sure to check them out!
{% youtube src="https://youtu.be/RupxGAQ3fBY" /%}
@@ -42,7 +43,7 @@ We’ve added a couple videos specifically on Next development in an Nx workspac
Did you know that we maintain [a set of Nx workspaces](https://github.com/nrwl/nx-recipes) designed to serve as examples for different Nx Workspaces?
-We’ve recently added examples repos for:
+We've recently added examples repos for:
- fastify + mongo
- fastify + postgres
@@ -51,7 +52,7 @@ We’ve recently added examples repos for:
- remix
- serverless + fastify + planetscale
-Go check it out at [https://github.com/nrwl/nx-recipes](https://github.com/nrwl/nx-recipes) and let us know in the comments if there are more recipes you’d like to see or if you want to see videos made from any of the existing recipes!
+Go check it out at [https://github.com/nrwl/nx-recipes](https://github.com/nrwl/nx-recipes) and let us know in the comments if there are more recipes you'd like to see or if you want to see videos made from any of the existing recipes!
## Angular 16 Support And Migrations
@@ -59,7 +60,7 @@ Angular is continuing their pattern of releasing new and exciting features — a
As usual, we provide migrations to the most recent Angular version to cover your codebase for any breaking changes going to Angular 16.
-And in case you missed it, Nx is no longer tied to your Angular version — the most recent version of Nx will now always [support all currently LTS versions of Angular](/nx-api/angular/documents/angular-nx-version-matrix), meaning you DON’T have to upgrade your Angular version in order to get all these latest Nx Features. Be sure to use the `--interactive` flag to take advantage of this feature: `nx migrate latest --interactive`. You can find more details in [our docs for choosing optional packages to apply](/recipes/tips-n-tricks/advanced-update).
+And in case you missed it, Nx is no longer tied to your Angular version — the most recent version of Nx will now always [support all currently LTS versions of Angular](/nx-api/angular/documents/angular-nx-version-matrix), meaning you DON'T have to upgrade your Angular version in order to get all these latest Nx Features. Be sure to use the `--interactive` flag to take advantage of this feature: `nx migrate latest --interactive`. You can find more details in [our docs for choosing optional packages to apply](/recipes/tips-n-tricks/advanced-update).
{% youtube src="https://youtu.be/AQV4WFldwlY" /%}
@@ -81,9 +82,9 @@ These tools should help in particular with local testing of publishing packages
The use of command-line interfaces (CLIs) to create new workspaces is common in various technologies. React has one, so does Angular, Vue, Vite and many more. Maintaining a good CLI experience can be tedious though, especially because framework authors would rather want to focus on the library or framework itself.
-For a while now, Nx plugin authors had the possibility to create a so-called “preset” to control the entire Nx workspace structure. Once published it can be invoked by using the `--preset` flag:`npx create-nx-workspace myapp --preset=@my/plugin`. [Qwik-Nx](https://github.com/qwikifiers/qwik-nx) is an example of that.
+For a while now, Nx plugin authors had the possibility to create a so-called "preset" to control the entire Nx workspace structure. Once published it can be invoked by using the `--preset` flag:`npx create-nx-workspace myapp --preset=@my/plugin`. [Qwik-Nx](https://github.com/qwikifiers/qwik-nx) is an example of that.
-However, many authors would rather want to have a more “branded” experience. Like being able to invoke the previous example as follows:
+However, many authors would rather want to have a more "branded" experience. Like being able to invoke the previous example as follows:
```shell
npx create-qwik-nx myapp
@@ -107,7 +108,7 @@ nx g @nx/plugin:create-package --project= --e2e
Nx now supports a new input type: `externalDependencies` to add to the existing input types: `filesets`, `runtime` inputs, and `env` variables.
-By default, Nx will take the defensive stance of assuming that all packages will affect your commands, meaning all external dependencies are taken into account when hashing your task’s dependencies.
+By default, Nx will take the defensive stance of assuming that all packages will affect your commands, meaning all external dependencies are taken into account when hashing your task's dependencies.
The new `externalDependencies` input type allows you to specify a specific set of external dependencies for a given command, so you can configure your tasks to more accurately reflect their inputs.
@@ -126,19 +127,19 @@ For example, if you have a `publish-package` target that is using a `command` of
}
```
-This way you are free to change other dependencies that don’t affect this task without invalidating your cached run of the task.
+This way you are free to change other dependencies that don't affect this task without invalidating your cached run of the task.
{% youtube src="https://youtu.be/FRqgWBmHmAU" /%}
## New `@nx/dependency-checks` EsLint Rule
-We’ve added a new `@nx/dependency-checks` lint rule to help with detecting any issues when specifying dependencies for your packages.
+We've added a new `@nx/dependency-checks` lint rule to help with detecting any issues when specifying dependencies for your packages.
-This rule will analyze your source code to determine any dependencies you are using in this specific package, and will catch any missing dependencies, mismatched versions, and unused dependencies in your project’s `package.json` file.
+This rule will analyze your source code to determine any dependencies you are using in this specific package, and will catch any missing dependencies, mismatched versions, and unused dependencies in your project's `package.json` file.
Even better, this rule supports the `--fix` option to automatically fix any issues that are found - making it a great tool for automating your dependencies.
-After migrating your Nx workspace, you should have access to this lint rule. To turn it on, you’ll need to adjust the `lint` targets in your `project.json` files to include your `package.json` files like so:
+After migrating your Nx workspace, you should have access to this lint rule. To turn it on, you'll need to adjust the `lint` targets in your `project.json` files to include your `package.json` files like so:
```json
{
@@ -160,7 +161,7 @@ After migrating your Nx workspace, you should have access to this lint rule. To
}
```
-Then in “webapp” project’s `.eslintrc.json` file you'll want to turn the rule on for your json files:
+Then in "webapp" project's `.eslintrc.json` file you'll want to turn the rule on for your json files:
```json
{
@@ -188,7 +189,7 @@ Our biggest speed increase has come from moving our task hashing into the Nx Dae
Because the daemon persists between command runs, we are able to have more of the work that goes into hashing a task cached, which we added in Nx 16.3!
-In Nx 16.4 we also moved to a rust-based watcher to further improve performance. We had already began the migration of some of the more performance-intensive computation of Nx to Rust in prior version, but we’re excited to bring more of the core of Nx into Rust and see more of these performance gains!
+In Nx 16.4 we also moved to a rust-based watcher to further improve performance. We had already began the migration of some of the more performance-intensive computation of Nx to Rust in prior version, but we're excited to bring more of the core of Nx into Rust and see more of these performance gains!
Since our last benchmarking of Nx in October of last year where we clocked Nx at 276.2ms per command, these speed boosts have now gotten us down to 149.3ms, nearly doubling our speed!!
@@ -209,7 +210,7 @@ As part of the redesign, we also moved our webviews to the Lit framework — che
## Nx Changelog Launched
-Last but CERTAINLY not least, we’ve launched [a new changelog](/changelog) to our docs site!
+Last but CERTAINLY not least, we've launched [a new changelog](/changelog) to our docs site!
@@ -217,7 +218,7 @@ This changelog includes links to all the release notes for all major and minor v
## Wrap Up
-That’s all for now folks! We’re just starting up a new iteration of development on Nx, so be sure to subscribe to [our YouTube channel](https://youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
+That's all for now folks! We're just starting up a new iteration of development on Nx, so be sure to subscribe to [our YouTube channel](https://youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
## Learn more
diff --git a/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md b/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md
index 7b6915c455f3e..c6ccf2b3dfc30 100644
--- a/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md
+++ b/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md
@@ -4,15 +4,16 @@ slug: 'evergreen-tooling-more-than-just-codemods'
authors: ['Juri Strumpflohner']
cover_image: '/blog/images/2023-07-26/CPiI60mSguYXJzPfAHMbEQ.png'
tags: [nx]
+description: Nx's evergreen tooling approach automates migrations, updates code like a database, and uses plugins for seamless JavaScript ecosystem upgrades with backward compatibility and reduced maintenance.
---
-As developers we always want to use the latest shiny tools. There’s a new bundler? Let’s try! A new code editor, I’m in! For your side-project: for sure! At work: nah, not really. Keeping your tooling up to date with the rather fast moving JS ecosystem can be a major challenge. Nx provides a mechanism that can help mitigate that, by providing a command to upgrade your tooling automatically:
+As developers we always want to use the latest shiny tools. There's a new bundler? Let's try! A new code editor, I'm in! For your side-project: for sure! At work: nah, not really. Keeping your tooling up to date with the rather fast moving JS ecosystem can be a major challenge. Nx provides a mechanism that can help mitigate that, by providing a command to upgrade your tooling automatically:
```shell
npx nx migrate latest
```
-**Prefer a video? I’ve got you covered!**
+**Prefer a video? I've got you covered!**
{% youtube src="https://www.youtube.com/watch?v=Ss6MfcXi0jE" /%}
diff --git a/docs/blog/2023-08-03-storybook-interaction-tests-in-nx.md b/docs/blog/2023-08-03-storybook-interaction-tests-in-nx.md
index 12ffe8eebf9d3..5d06688f62efa 100644
--- a/docs/blog/2023-08-03-storybook-interaction-tests-in-nx.md
+++ b/docs/blog/2023-08-03-storybook-interaction-tests-in-nx.md
@@ -4,11 +4,12 @@ slug: 'storybook-interaction-tests-in-nx'
authors: ['Katerina Skroumpelou']
cover_image: '/blog/images/2023-08-03/NfJA7VBZvDwyyZHmV8qsiw.png'
tags: [nx]
+description: Nx 16.6 introduces Storybook interaction tests, offering automated UI testing, Jest and Playwright integration, and a streamlined workflow.
---
-In Nx 16.6 we are introducing our new generators for [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing)! These new generators replace the default Cypress tests we used to generate along with a project’s Storybook configuration, particularly for those already using Storybook. The intention is that if a user chooses to use Storybook and generate Storybook configuration, to integrate in that experience Storybook Interaction testing, and skip generating Cypress tests, to keep everything in one place, in an integrated experience.
+In Nx 16.6 we are introducing our new generators for [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing)! These new generators replace the default Cypress tests we used to generate along with a project's Storybook configuration, particularly for those already using Storybook. The intention is that if a user chooses to use Storybook and generate Storybook configuration, to integrate in that experience Storybook Interaction testing, and skip generating Cypress tests, to keep everything in one place, in an integrated experience.
-**Prefer a video walkthrough? We’ve got you covered**
+**Prefer a video walkthrough? We've got you covered**
{% youtube src="https://www.youtube.com/watch?v=SaHoUx-TUs8" /%}
@@ -16,11 +17,11 @@ In Nx 16.6 we are introducing our new generators for [Storybook interaction test
Interaction tests allow users to verify the functional aspects of UIs. This is done by supplying the initial state of a component, simulating user behavior such as clicks and form entries, and finally checking if the UI and component state update correctly. Very much like e2e tests are doing.
-In Storybook, this workflow occurs in your browser, which makes it easier to debug failures since you’re running tests in the same environment you develop components.
+In Storybook, this workflow occurs in your browser, which makes it easier to debug failures since you're running tests in the same environment you develop components.
## How it works
-You write a story to set up the component’s initial state, simulate user behavior using the [play function](https://storybook.js.org/docs/react/writing-stories/play-function), and then use the [test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) to confirm that the component renders correctly and that your interaction tests with the play function pass. [Storybook’s Test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) is a standalone utility — powered by Jest and Playwright — that executes all of your interaction tests, and runs parallel to your Storybook.
+You write a story to set up the component's initial state, simulate user behavior using the [play function](https://storybook.js.org/docs/react/writing-stories/play-function), and then use the [test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) to confirm that the component renders correctly and that your interaction tests with the play function pass. [Storybook's Test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) is a standalone utility — powered by Jest and Playwright — that executes all of your interaction tests, and runs parallel to your Storybook.
## Setting Up Storybook Interaction Tests on Nx
@@ -28,9 +29,9 @@ You can read our detailed guide on how to set up Storybook interaction tests on
## Writing Interaction Tests in Storybook
-An interaction test is defined inside a play function connected to a story. The story simulates the user’s behavior once it loads in the UI and verifies the underlying logic.
+An interaction test is defined inside a play function connected to a story. The story simulates the user's behavior once it loads in the UI and verifies the underlying logic.
-Under the hood, Storybook’s [@storybook/addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) mirrors [Testing Library](https://testing-library.com/)’s user-events API. So, you can use the same queries and assertions that you would use for Testing Library, like we already do with our unit tests.
+Under the hood, Storybook's [@storybook/addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) mirrors [Testing Library](https://testing-library.com/)'s user-events API. So, you can use the same queries and assertions that you would use for Testing Library, like we already do with our unit tests.
For complex flows, it can be worthwhile to group sets of related interactions using the step function. This allows you to provide a custom label that describes a set of interactions.
@@ -41,11 +42,11 @@ Storybook provides an interactive debugger that displays the step-by-step flow o
_Interaction test for the click of a button._
-If an error occurs during a story’s play function, it’ll be shown in the interaction addon panel to help with debugging. And since Storybook is a web app, anyone with the URL can reproduce the error with the same detailed information without any additional environment configuration or tooling required.
+If an error occurs during a story's play function, it'll be shown in the interaction addon panel to help with debugging. And since Storybook is a web app, anyone with the URL can reproduce the error with the same detailed information without any additional environment configuration or tooling required.
## Executing and Automating Tests
-Storybook only runs the interaction test when you’re viewing a story. Therefore, as a Storybook grows, it becomes unrealistic to review each change manually. The Storybook test-runner automates the process by running all tests for you. This can be executed via the command line or on CI environment.
+Storybook only runs the interaction test when you're viewing a story. Therefore, as a Storybook grows, it becomes unrealistic to review each change manually. The Storybook test-runner automates the process by running all tests for you. This can be executed via the command line or on CI environment.
## What should I choose? Interaction tests or E2E tests?
@@ -53,7 +54,7 @@ Setting up interaction tests with Nx and Storybook provides an extra layer of co
Storybook interaction tests provide a unique advantage over traditional e2e tests, especially when considering the development setup. With Storybook already in place, you essentially have a controlled environment set up for each of your components. This allows you to write interaction tests almost immediately, without the overhead of setting up and navigating through a full application environment, as is the case with e2e tests.
-Moreover, since Storybook isolates each component, you can ensure that the tests are solely focused on individual component behavior rather than application-level concerns. This results in faster test execution, easier debugging, and more granular feedback during the development process. In essence, with Storybook’s interaction tests, you get many of the benefits of e2e tests but with a setup that’s quicker, more focused, and integrated right into your component development workflow.
+Moreover, since Storybook isolates each component, you can ensure that the tests are solely focused on individual component behavior rather than application-level concerns. This results in faster test execution, easier debugging, and more granular feedback during the development process. In essence, with Storybook's interaction tests, you get many of the benefits of e2e tests but with a setup that's quicker, more focused, and integrated right into your component development workflow.
## Screenshare
diff --git a/docs/blog/2023-08-10-create-your-own-create-react-app-cli.md b/docs/blog/2023-08-10-create-your-own-create-react-app-cli.md
index d49f2ec927c01..7935c2b7c817f 100644
--- a/docs/blog/2023-08-10-create-your-own-create-react-app-cli.md
+++ b/docs/blog/2023-08-10-create-your-own-create-react-app-cli.md
@@ -4,6 +4,7 @@ slug: 'create-your-own-create-react-app-cli'
authors: ['Emily Xiong']
cover_image: '/blog/images/2023-08-10/j2QU-hjxt-1krFST8CGFiA.png'
tags: [nx]
+description: Build a custom create-react-app CLI with Nx plugins, including workspace setup, Verdaccio testing, and project template customization for a branded React app scaffolding experience.
---
Most technologies have a CLI to create a new workspace. In fact, it is so prevalent that NPM and other package managers support it natively. For example:
@@ -15,11 +16,11 @@ Most technologies have a CLI to create a new workspace. In fact, it is so preval
Having a CLI to quickly scaffold a starting project is great for onboarding new people, but it can also be a burden for framework authors as they want to rather focus on building the framework. Additionally, building **and supporting** a good CLI is another beast to tackle. And this is where Nx comes in.
-Nx has had support for [creating custom “presets”](/extending-nx/recipes/create-preset) for a while, allowing plugin authors to fully customize the workspace structure from the ground up. To use them you had to go via the `create-nx-workspace` command though, passing the name of your plugin as the `--preset` . This works, but you might want to have a more “branded command” experience, like `npx create-my-own-app` .
+Nx has had support for [creating custom "presets"](/extending-nx/recipes/create-preset) for a while, allowing plugin authors to fully customize the workspace structure from the ground up. To use them you had to go via the `create-nx-workspace` command though, passing the name of your plugin as the `--preset` . This works, but you might want to have a more "branded command" experience, like `npx create-my-own-app` .
-And this is exactly what we’re going to explore in this article. We will write our own CLI. And out of nostalgia, let’s build our own version of Create-React-App.
+And this is exactly what we're going to explore in this article. We will write our own CLI. And out of nostalgia, let's build our own version of Create-React-App.
-If you want to check out the final result, here’s the corresponding Github repo: [https://github.com/nrwl/nx-recipes/tree/main/nx-devkit-create-own-cli](https://github.com/nrwl/nx-recipes/tree/main/nx-devkit-create-own-cli)
+If you want to check out the final result, here's the corresponding Github repo: [https://github.com/nrwl/nx-recipes/tree/main/nx-devkit-create-own-cli](https://github.com/nrwl/nx-recipes/tree/main/nx-devkit-create-own-cli)
**Prefer a video? We got you covered!**
@@ -53,11 +54,11 @@ _Project graph of the workspace_
The resulting workspace contains 2 projects: a CLI and an Nx plugin.
- **create-my-own-react-app:** The CLI project. It contains the code to run when developers invoke `npx create-my-own-react-app`. This will set up a workspace for the developer.
-- **my-own-react:** Nx plugin to integrate react with Nx. It will contain the code for creating and serving an app. It is under the src folder. This will be installed in the user’s workspace.
+- **my-own-react:** Nx plugin to integrate react with Nx. It will contain the code for creating and serving an app. It is under the src folder. This will be installed in the user's workspace.
### CLI Package Structure
-Let’s focus on the `create-my-own-react-app` project which is our CLI.
+Let's focus on the `create-my-own-react-app` project which is our CLI.
@@ -130,17 +131,17 @@ cd tmp
npx create-my-own-react-app@1.0.0 test
```
-What you’ll get is an Nx workspace with the base setup and a `test` library project with a single TS file. Because that’s exactly what our current `preset` generator does.
+What you'll get is an Nx workspace with the base setup and a `test` library project with a single TS file. Because that's exactly what our current `preset` generator does.
-Let’s fix that in the next step.
+Let's fix that in the next step.
### Step 3: Change the CLI to Setup a React App
In this step, we dive a bit more into the actual Nx plugin development to create our CRA replica.
-We’ll go rather quickly but if you want a slower walkthrough you might be interested in this video that leverages a generator for automating the creation of projects. Exactly what we’re going to do in our preset now.
+We'll go rather quickly but if you want a slower walkthrough you might be interested in this video that leverages a generator for automating the creation of projects. Exactly what we're going to do in our preset now.
{% youtube src="https://youtu.be/myqfGDWC2go" /%}
@@ -200,8 +201,8 @@ addProjectConfiguration(tree, options.name, {
});
```
-- The `projectRoot` will be ‘.’, the root of a workspace
-- The `projectType` changes to `application`
+- The `projectRoot` will be ''.', the root of a workspace
+- The `projectType` changes to 'application'
2\. Next, change the files generated into the project under `src/generators/preset/files`. We will use the same template as `create-react-app` .
@@ -397,16 +398,16 @@ The CLI now creates a workspace with the dependencies we want and the code for t
## Step 5: Add a Serve Target
-The workspace setup is done, what we’re missing though is a way to easily serve our app. To stick to what CRA does we simply need to run `react-scripts start` , but ideally, we want to make that more convenient for the developer by pre-generating that script into the workspace.
+The workspace setup is done, what we're missing though is a way to easily serve our app. To stick to what CRA does we simply need to run `react-scripts start` , but ideally, we want to make that more convenient for the developer by pre-generating that script into the workspace.
We have two possibilities:
- add the script to the root-level`package.json` using the `updateJson` function exposed by `@nx/devkit`
- add a target to the `project.json` using the `addProjectConfiguration` function exposed by `@nx/devkit`
-Nx can use both. The `project.json` is Nx’s variant of a more evolved package.json scripts declaration, that allows to specify metadata in a structured way.
+Nx can use both. The `project.json` is Nx's variant of a more evolved package.json scripts declaration, that allows to specify metadata in a structured way.
-To keep things simple, let’s just generate a new script for the root-level `package.json`. We need to modify our `src/generators/preset/generator.ts` as follows:
+To keep things simple, let's just generate a new script for the root-level `package.json`. We need to modify our `src/generators/preset/generator.ts` as follows:
```shell
import {
@@ -431,7 +432,7 @@ export default async function (tree: Tree, options: PresetGeneratorSchema) {
}
```
-Note, we want to keep our `project.json` file even though it doesn’t have any targets defined. That way Nx recognizes it as a proper project and applies caching and other optimization strategies.
+Note, we want to keep our `project.json` file even though it doesn't have any targets defined. That way Nx recognizes it as a proper project and applies caching and other optimization strategies.
### Adding the target to the `project.json` rather than `package.json`
@@ -464,7 +465,7 @@ export default async function (tree: Tree, options: PresetGeneratorSchema) {
## Step 6: Run it Again to Get a React App That Can Be Served
-To test our changes, let’s publish a new version and run it again.
+To test our changes, let's publish a new version and run it again.
```shell
npx nx run-many --targets publish --ver 1.0.2 --tag latest
@@ -485,9 +486,9 @@ _serve output_
## Step 7: Add a Prompt to the CLI to Customize the Starter App
-Now, you have a CLI that creates a workspace that users can use to get started with React. But that’s not all. Let’s take it a step further and make it interactive by adding a prompt that can let different users customize the kind of workspace that they want to create.
+Now, you have a CLI that creates a workspace that users can use to get started with React. But that's not all. Let's take it a step further and make it interactive by adding a prompt that can let different users customize the kind of workspace that they want to create.
-Take a look at the CLI code at `create-my-own-react-package/bin/index.ts`, you will notice it is pretty barebone. It reads the`name` from the command’s arguments.
+Take a look at the CLI code at `create-my-own-react-package/bin/index.ts`, you will notice it is pretty barebone. It reads the`name` from the command's arguments.
You can use libraries like [enquirer](https://github.com/enquirer/enquirer) (or even fancier ones like [Clack](https://www.npmjs.com/package/@clack/prompts)) to prompt developers for options. For this example, prompt developers to select a light or dark theme for the starter app.
@@ -546,7 +547,7 @@ async function main() {
main();
```
-You can assemble options for `createWorkspace`; however, you’d like and they will be passed to the `my-own-react` preset.
+You can assemble options for `createWorkspace`; however, you'd like and they will be passed to the `my-own-react` preset.
3\. Change `src/generators/preset` to accept this option and apply it.
@@ -628,11 +629,11 @@ Recap:
- We adjusted the preset generator to setup a CRA-like React setup
- We wrote some e2e tests to ensure that things do not break
-This should give you a good insight into how to get started. But there’s more to explore:
+This should give you a good insight into how to get started. But there's more to explore:
- We could provide more [generators](/plugins/recipes/local-generators\) to our users that help with setting up new components, adding unit tests, configuring the React Router etc.
- Add a generator to add other Nx plugins such as Jest, ESLint, or Cypress
-- We could also include “[executors](/extending-nx/recipes/local-executors)”, which are wrappers around tasks to abstract the lower-level details of it
+- We could also include "[executors](/extending-nx/recipes/local-executors)", which are wrappers around tasks to abstract the lower-level details of it
- etc.
Now clearly this was a simple example of how you could build your own CRA using Nx. If you want to see a real-world React setup powered by Nx, check out our React Tutorial: [/getting-started/tutorials/react-standalone-tutorial](/getting-started/tutorials/react-standalone-tutorial)
diff --git a/docs/blog/2023-08-15-qwikify-your-dev.md b/docs/blog/2023-08-15-qwikify-your-dev.md
index db0bde8b8dddc..16ccf1eebed29 100644
--- a/docs/blog/2023-08-15-qwikify-your-dev.md
+++ b/docs/blog/2023-08-15-qwikify-your-dev.md
@@ -4,6 +4,7 @@ slug: 'qwikify-your-development-with-nx'
authors: ['Colum Ferry']
cover_image: '/blog/images/2023-08-15/featured_img.png'
tags: [nx, changelog, release]
+description: Learn how to integrate Qwik with Nx for a todo app, covering setup, routes, libraries, Qwik Context, and modular development best practices.
---
In the ever-evolving web development landscape, efficiency and modularity have become paramount. This is where [Nx]() and [Qwik](https://qwik.dev/) come into play.
@@ -12,7 +13,7 @@ Qwik is a modern web framework that focuses on application performance by reduci
Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can [learn more about Nx here](/getting-started/why-nx).
-In this blog post, we’ll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we’ll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called [`qwik-nx`](https://github.com/qwikifiers/qwik-nx).
+In this blog post, we'll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we'll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called [`qwik-nx`](https://github.com/qwikifiers/qwik-nx).
> You do not necessarily need to use an Nx Plugin for Qwik. Instead, you could use the [Qwik CLI](https://qwik.dev/docs/getting-started/#create-an-app-using-the-cli) to create your application and [add Nx later](/recipes/adopting-nx/adding-to-existing-project#install-nx-on-a-nonmonorepo-project).
> In this blog post we use the `qwik-nx` plugin to leverage better DX provided by the generators offered by the Plugin.
@@ -39,7 +40,7 @@ You can learn more about this integration in the video below:
## Creating the Workspace
-Let’s start by setting up our development environment. We’ll create an Nx workspace and integrate Qwik into it. Begin by generating an empty integrated workspace:
+Let's start by setting up our development environment. We'll create an Nx workspace and integrate Qwik into it. Begin by generating an empty integrated workspace:
```shell
npx create-nx-workspace@latest qwik-todo-app
@@ -63,7 +64,7 @@ npm install --save-dev qwik-nx
One of the benefits of using an Nx Plugin is that it comes with additional features such as automatic migrations, executors to act on your code and generators to scaffold code (_like CodeMods_).
-Now, let’s use the application generator provided by `qwik-nx` to scaffold the todo application:
+Now, let's use the application generator provided by `qwik-nx` to scaffold the todo application:
```shell
nx g qwik-nx:app todo
@@ -77,13 +78,13 @@ At this point, you can already run the `nx serve todo` and `nx build todo` comma
Qwik has another package called Qwik City that uses directory-based routing to handle navigation within your application. [Learn more about directory-based routing with Qwik City](https://qwik.dev/docs/qwikcity/).
-The `qwik-nx` plugin can help generate new routes within our application. Let’s use it to generate a route where we can store our todo logic.
+The `qwik-nx` plugin can help generate new routes within our application. Let's use it to generate a route where we can store our todo logic.
```shell
nx g qwik-nx:route --name=todo --project=todo
```
-After running this command, you’ll see a new directory and file created in your workspace:
+After running this command, you'll see a new directory and file created in your workspace:
@@ -97,7 +98,7 @@ export default component$(() => {
});
```
-As you can see, it’s very simple, just a standard Qwik Component.
+As you can see, it's very simple, just a standard Qwik Component.
If you run `nx serve todo` and navigate to `http://localhost:4200/todo` you can see that the route works and the component renders the content correctly.
@@ -105,7 +106,7 @@ If you run `nx serve todo` and navigate to `http://localhost:4200/todo` you can
## Build a Basic UI
-We want to build a todo application, so let’s add some UI elements to make this look more like an actual todo application.
+We want to build a todo application, so let's add some UI elements to make this look more like an actual todo application.
Update `apps/todo/src/routes/todo/index.tsx` to match the following:
@@ -132,19 +133,19 @@ export default component$(() => {
});
```
-You’ll see the page update and look like the following:
+You'll see the page update and look like the following:
Awesome!
-However, you’ll notice that when you click `Add`, nothing happens! Let’s add some logic to store new todos.
+However, you'll notice that when you click `Add`, nothing happens! Let's add some logic to store new todos.
## Generate a Library
Nx helps you organise your workspace in a modular fashion by creating workspace libraries that focus on specific functionality.
-Instead of organising your features into subfolders of your application, with Nx, you’ll extract them into workspace libraries (libraries that are not intended to be published, but still used by other libraries and applications in your repository). This helps to create a much stronger boundary between modules and features in your application as libraries have a public API (the `index.ts` file), allowing you to control exactly what can be accessed by consumers.
+Instead of organising your features into subfolders of your application, with Nx, you'll extract them into workspace libraries (libraries that are not intended to be published, but still used by other libraries and applications in your repository). This helps to create a much stronger boundary between modules and features in your application as libraries have a public API (the `index.ts` file), allowing you to control exactly what can be accessed by consumers.
> [Learn more about defining and ensuring project boundaries in the Nx docs.](/features/enforce-module-boundaries)
>
@@ -154,7 +155,7 @@ Instead of organising your features into subfolders of your application, with Nx
Using this feature of Nx, we can organise the state management of our todo application into its own library, separating the logic from the application itself.
-Let’s generate a new library with the help of `qwik-nx`.
+Let's generate a new library with the help of `qwik-nx`.
```shell
nx g qwik-nx:lib data-access
@@ -174,7 +175,7 @@ libs/data-access/src/lib/data-access.spec.tsx
Qwik uses [Contexts](https://qwik.dev/docs/components/context/) to help store state across both the server-side and client-side and across routes within the application.
-We’ll use a Context to store the todos in the application, but first, let’s create a file to store the TS Interfaces we’ll use in our application.
+We'll use a Context to store the todos in the application, but first, let's create a file to store the TS Interfaces we'll use in our application.
Create `libs/data-access/src/lib/api.ts` and add the following:
@@ -185,7 +186,7 @@ export interface Todo {
}
```
-Next, let’s create a new file `libs/data-access/src/lib/todo.context.tsx` and add the following content:
+Next, let's create a new file `libs/data-access/src/lib/todo.context.tsx` and add the following content:
```tsx {% fileName="libs/data-access/src/lib/todo.context.tsx" %}
import {
@@ -217,11 +218,11 @@ This will create our Context and set up a Store within our application to store
> [Learn more about how Qwik uses Signals.](https://qwik.dev/docs/components/state/)
-Finally, let’s update the public entry point to the library to expose our Context and Interface.
+Finally, let's update the public entry point to the library to expose our Context and Interface.
## Using the Context
-Let’s update the root page to add our Context Provider. Open `apps/todo/src/root.tsx` and add `TodoContextProvider` after `QwikCityProvider` in the component tree. Your file should look like the following:
+Let's update the root page to add our Context Provider. Open `apps/todo/src/root.tsx` and add `TodoContextProvider` after `QwikCityProvider` in the component tree. Your file should look like the following:
```tsx {% fileName="apps/todo/src/root.tsx" %}
import { component$, useStyles$ } from '@builder.io/qwik';
@@ -267,7 +268,7 @@ export * from './lib/todo.context';
export * from './lib/api';
```
-Now that our Context is in place, let’s use it in our todo route to manage our todos.
+Now that our Context is in place, let's use it in our todo route to manage our todos.
Update `apps/todo/src/routes/todo/index.tsx` to match the following:
@@ -298,7 +299,7 @@ export default component$(() => {
});
```
-Our store has no todos in it when the application starts up, so if you serve the application you will no longer see any todos listed. Let’s fix that!
+Our store has no todos in it when the application starts up, so if you serve the application you will no longer see any todos listed. Let's fix that!
## Adding a `routeLoader$` to load data on Navigation
@@ -306,11 +307,11 @@ Qwik allows you to fetch data when a route is navigated to, allowing you to fetc
> [Learn more about routeLoader$.](https://qwik.dev/docs/route-loader/)
-It does this by providing a function called `routeLoader$`. We’ll use this function to preload our store with some todos that will theoretically exist in a database.
+It does this by providing a function called `routeLoader$`. We'll use this function to preload our store with some todos that will theoretically exist in a database.
-For this blog post, we’ll create an in-memory db to store some initial todos.
+For this blog post, we'll create an in-memory db to store some initial todos.
-We’ll start by updating our `libs/data-access/src/lib/api.ts` to add our in-memory DB.
+We'll start by updating our `libs/data-access/src/lib/api.ts` to add our in-memory DB.
```ts {% fileName="libs/data-access/src/lib/api.ts" %}
export interface Todo {
@@ -348,7 +349,7 @@ export const db: DB = {
};
```
-Now that we have this, let’s use it in our `/todo` route to load some data when the user navigates to `/todo`.
+Now that we have this, let's use it in our `/todo` route to load some data when the user navigates to `/todo`.
Update `apps/todo/src/routes/todo/index.tsx` to match the following:
@@ -406,11 +407,11 @@ export default component$(() => {
});
```
-When you serve the application, you’ll see the first todo is fetched and rendered correctly!
+When you serve the application, you'll see the first todo is fetched and rendered correctly!
## Handle the Form Action to add todos
-Qwik also allows you to handle form actions on the server using the `routeAction$` API. Let’s create the logic to add new todos to the store.
+Qwik also allows you to handle form actions on the server using the `routeAction$` API. Let's create the logic to add new todos to the store.
> [Learn more about `routeAction$`](https://qwik.dev/docs/action/)
@@ -485,7 +486,7 @@ export default component$(() => {
Awesome! We can now add todos to our application!
-However, you might have noticed that our file is starting to get very long. Not only that there’s a lot of logic in the route file itself. Let’s use Nx to separate the logic into the library we created earlier to keep logic collocated.
+However, you might have noticed that our file is starting to get very long. Not only that there's a lot of logic in the route file itself. Let's use Nx to separate the logic into the library we created earlier to keep logic collocated.
## Improve the Architecture
@@ -527,7 +528,7 @@ export * from './lib/api';
export * from './lib/todo';
```
-Finally, let’s update `apps/todo/src/routes/todo/index.tsx` to use our newly created functions:
+Finally, let's update `apps/todo/src/routes/todo/index.tsx` to use our newly created functions:
```tsx {% fileName="apps/todo/src/routes/todo/index.tsx" %}
import { component$, useContext, useTask$ } from '@builder.io/qwik';
@@ -580,7 +581,7 @@ export default component$(() => {
});
```
-If you run `nx serve todo` again, you’ll notice that our refactor will not have changed anything for the user, but it has made the codebase more manageable!
+If you run `nx serve todo` again, you'll notice that our refactor will not have changed anything for the user, but it has made the codebase more manageable!
Now, if we need to update the logic for loading or adding todos, we only need to retest the library, and not the full application, improving our CI times!
@@ -588,7 +589,7 @@ Now, if we need to update the logic for loading or adding todos, we only need to
## Conclusion
-The collaboration between Nx and Qwik has led us to create a todo app that showcases efficient development practices and modular design. By centralizing route logic in a library, we’ve not only demonstrated the capabilities of Nx and Qwik but also highlighted how this approach can significantly improve cache and CI times.
+The collaboration between Nx and Qwik has led us to create a todo app that showcases efficient development practices and modular design. By centralizing route logic in a library, we've not only demonstrated the capabilities of Nx and Qwik but also highlighted how this approach can significantly improve cache and CI times.
This journey through Qwik and Nx demonstrates how thoughtful architecture and the right tools can significantly enhance your development experience. So go ahead, Qwikify your development and build amazing web applications with ease!
diff --git a/docs/blog/2023-08-24-step-by-step-guide-to-creating-an-expo-monorepo-with-nx.md b/docs/blog/2023-08-24-step-by-step-guide-to-creating-an-expo-monorepo-with-nx.md
index 30ac0b6a5e599..bc29a00b01e43 100644
--- a/docs/blog/2023-08-24-step-by-step-guide-to-creating-an-expo-monorepo-with-nx.md
+++ b/docs/blog/2023-08-24-step-by-step-guide-to-creating-an-expo-monorepo-with-nx.md
@@ -4,6 +4,7 @@ slug: 'step-by-step-guide-to-creating-an-expo-monorepo-with-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2023-08-24/IpM0kZdUNXoDWV4r8J5xXQ.png'
tags: [nx, tutorial]
+description: A comprehensive tutorial on building a multi-app Expo monorepo using Nx, featuring shared UI components, navigation setup, and deployment configurations, demonstrated through the creation of two mobile apps.
---
This blog will show you how to create an Expo monorepo with Nx. In this example, you will be creating two Expo apps in a monorepo with `@nx/expo`: one shows random facts about cats, and the other shows random facts about dogs.
@@ -25,7 +26,7 @@ Github repo: [xiongemi/nx-expo-monorepo](https://github.com/xiongemi/nx-expo-mon
## Creating an Nx Workspace
-To create a new Nx workspace, run the command `npx create-nx-workspace ` in the terminal. In this example, let’s name it `nx-expo-monorepo`:
+To create a new Nx workspace, run the command `npx create-nx-workspace ` in the terminal. In this example, let's name it `nx-expo-monorepo`:
```
✔ Where would you like to create your workspace? · create-nx-monorepo
@@ -344,7 +345,7 @@ It will then ask you to choose which binary to submit from one of the following
- Path to an .apk or .aab or .ipa archive on your local filesystem.
- URL to the app archive.
-Alternatively, you can submit your app on the [expo.dev](https://expo.dev/) site. Go to your build, under options, choose “Submit to an app store”:
+Alternatively, you can submit your app on the [expo.dev](https://expo.dev/) site. Go to your build, under options, choose "Submit to an app store":
diff --git a/docs/blog/2023-09-06-nx-16-8-release.md b/docs/blog/2023-09-06-nx-16-8-release.md
index 009038f82973d..4b70569de33b1 100644
--- a/docs/blog/2023-09-06-nx-16-8-release.md
+++ b/docs/blog/2023-09-06-nx-16-8-release.md
@@ -4,9 +4,10 @@ slug: 'nx-16-8-release'
authors: ['Zack DeRose']
cover_image: '/blog/images/2023-09-06/16gTRcKon8B4IKYQAY9V8w.png'
tags: [nx, release]
+description: Nx 16.8 released with new project generator behavior, enhanced TypeScript library packaging, high-performance TypeScript compilation, Playwright support, Netlify integration, and interactive Nx Console features.
---
-As always, the Nx Team has been hard at work, and we’re here to launch our latest release: Nx 16.8! And it’s absolutely bursting with new features. We’ll go into all these in depth below, but be sure to check out our latest release video on YouTube!
+As always, the Nx Team has been hard at work, and we're here to launch our latest release: Nx 16.8! And it's absolutely bursting with new features. We'll go into all these in depth below, but be sure to check out our latest release video on YouTube!
If you have more questions — be sure to stop by our latest Nx Live to ask them there! You can sign up for a notification from the link below!
@@ -29,7 +30,7 @@ Nx is also coming up on 20k Github stars [please help us get there!](https://git
· [Packaging TypeScript Libraries — Secondary Entrypoints, ESM, CJS](#packaging-typescript-libraries-secondary-entrypoints-esm-cjs)
· [High Performance TypeScript Compilation: Introducing Batch Mode & Rust-based Dependency Resolution](#high-performance-typescript-compilation-introducing-batch-mode-rustbased-dependency-resolution)
· [NEW Nx PLUGIN: Playwright](#new-nx-plugin-playwright)
-· [NEW INTEGRATION: Netlify’s Improved Monorepo Experience](#new-integration-netlifys-improved-monorepo-experience)
+· [NEW INTEGRATION: Netlify's Improved Monorepo Experience](#new-integration-netlifys-improved-monorepo-experience)
· [NEW Nx CONSOLE FEATURE: Interactive Graph Functionality](#new-nx-console-feature-interactive-graph-functionality)
· [ENHANCEMENT: Storybook Support for Interaction Testing](#enhancement-storybook-support-for-interaction-testing)
· [NEW GENERATOR: convert-to-monorepo](#new-generator-converttomonorepo)
@@ -49,13 +50,13 @@ Over the years, we found this to be much too rigid, so we made these locations m
We also simplified the definition of Nx projects to be any directory that had a `project.json` file in it, allowing for the ability to nest projects in your filesytem and also forego app or lib directories altogether!
-With Nx 16.8, we’re introducing an all-new option in this `workspaceLayout` category: `projectNameAndRootFormat` where you can chose either the option to apply project names `as-provided` or `derived`.
+With Nx 16.8, we're introducing an all-new option in this `workspaceLayout` category: `projectNameAndRootFormat` where you can chose either the option to apply project names `as-provided` or `derived`.
-If you don’t set this option in your `nx.json` file, our generators will now prompt you as to how we should set:
+If you don't set this option in your `nx.json` file, our generators will now prompt you as to how we should set:
-- the name of your project (as in the project’s `project.json` file)
+- the name of your project (as in the project's `project.json` file)
- where to put the project in your filesystem
@@ -78,7 +79,7 @@ To get the legacy behavior, be sure to change the `projectNameAndRootFormat` to
{% youtube src="https://youtu.be/Vy4d0-SF5cY" /%}
-Nx has always had first-class TypeScript support from the very beginning. You never really had to worry about Type Definition files being properly included or setting up TS support in the first place. But there are some aspects that can be tricky, like defining and properly exporting secondary entry points or packaging in multiple formats (ESM and CJS). That’s why we did some research to help make it easier.
+Nx has always had first-class TypeScript support from the very beginning. You never really had to worry about Type Definition files being properly included or setting up TS support in the first place. But there are some aspects that can be tricky, like defining and properly exporting secondary entry points or packaging in multiple formats (ESM and CJS). That's why we did some research to help make it easier.
The `package.json` format supports an [export field](https://nodejs.org/api/packages.html#package-entry-points) which is a modern alternative to the `main` property, allowing to have multiple such entry points.
@@ -93,7 +94,7 @@ The `package.json` format supports an [export field](https://nodejs.org/api/pack
}
```
-To make it easier to maintain these, we’ve added two new options to the `@nx/js` package: `additionalEntryPoints` and `generateExportsField`. Here's an example:
+To make it easier to maintain these, we've added two new options to the `@nx/js` package: `additionalEntryPoints` and `generateExportsField`. Here's an example:
```
// packages/my-awesome-lib/project.json
@@ -191,7 +192,7 @@ Speed is in our DNA! And TypeScript compilation can be slow which is mostly due
To help with this, the TypeScript team introduced [Project References](https://www.typescriptlang.org/getting-started/intro/handbook/project-references.html) which performs incremental compilation by caching intermediate results. However this comes with some [caveats you need to be aware of](https://www.typescriptlang.org/getting-started/intro/handbook/project-references.html#caveats-for-project-references) and it can be intense to maintain by hand on a large codebase.
-We wanted to make it transparent though and not something the user needs to worry about. That’s why we introduced [“Batch Mode”](/showcase/benchmarks/tsc-batch-mode). Batch mode is still experimental, and you can enable it for any project using the `@nx/js:tsc` executor by adding the environment variable `NX_BATCH_MODE=true`:
+We wanted to make it transparent though and not something the user needs to worry about. That's why we introduced ["Batch Mode"](/showcase/benchmarks/tsc-batch-mode). Batch mode is still experimental, and you can enable it for any project using the `@nx/js:tsc` executor by adding the environment variable `NX_BATCH_MODE=true`:
```
> NX_BATCH_MODE=true nx run-many --target=build
@@ -211,7 +212,7 @@ A new Nx plugin has appeared!!
Nx now supports Playwright as an e2e option alongside our long-standing support for Cypress!
-First off, this means we’ve added Playwright as an option when generating new frontend applications:
+First off, this means we've added Playwright as an option when generating new frontend applications:
@@ -221,7 +222,7 @@ If you want to add playwright to an existing project in your workspace you can a
npm add -D @nx/playwright
```
-Then running our new generator to add playwright to your project (here I’m adding it to my application called `my-app`):
+Then running our new generator to add playwright to your project (here I'm adding it to my application called `my-app`):
```
nx g @nx/playwright:configuration --project=my-app
@@ -229,19 +230,19 @@ nx g @nx/playwright:configuration --project=my-app
This will setup playwright for you, and add an `e2e` target to your project using playwright!
-## NEW INTEGRATION: Netlify’s Improved Monorepo Experience
+## NEW INTEGRATION: Netlify's Improved Monorepo Experience
-On Netlify’s enterprise tier, approximately 46% of builds are monorepos, with the majority leveraging Nx and [Lerna](https://lerna.js.org/). Recognizing this trend, Netlify has focused on enhancing the setup and deployment experiences for monorepo projects. In particular they worked on an “automatic monorepo detection” feature. When you connect your project to GitHub, Netlify automatically detects if it’s part of a monorepo, reads the relevant settings, and pre-configures your project. This eliminates the need for manual setup. This feature also extends to local development via the Netlify CLI.
+On Netlify's enterprise tier, approximately 46% of builds are monorepos, with the majority leveraging Nx and [Lerna](https://lerna.js.org/). Recognizing this trend, Netlify has focused on enhancing the setup and deployment experiences for monorepo projects. In particular they worked on an "automatic monorepo detection" feature. When you connect your project to GitHub, Netlify automatically detects if it's part of a monorepo, reads the relevant settings, and pre-configures your project. This eliminates the need for manual setup. This feature also extends to local development via the Netlify CLI.
-[Juri Strumpflohner](https://twitter.com/juristr) from the Nx team sits down with [Lukas Holzer](https://twitter.com/luka5c0m) from Netlify to discuss what monorepos are, when you might need them, their challenges and benefits, and the tooling support Nx provides. But it’s not just talk; they also walk you through setting up a new Nx monorepo, adding Netlify Edge functions, and deploying it all to Netlify — both via the website and locally through the newly improved Netlify CLI.
+[Juri Strumpflohner](https://twitter.com/juristr) from the Nx team sits down with [Lukas Holzer](https://twitter.com/luka5c0m) from Netlify to discuss what monorepos are, when you might need them, their challenges and benefits, and the tooling support Nx provides. But it's not just talk; they also walk you through setting up a new Nx monorepo, adding Netlify Edge functions, and deploying it all to Netlify — both via the website and locally through the newly improved Netlify CLI.
{% youtube src="https://youtu.be/KL7PCwf-mtM" /%}
-If you prefer the blog post, check out [“Elevating enterprise deployment: Introducing an enhanced monorepo experience on Netlify”](https://www.netlify.com/blog/elevating-enterprise-deployment-introducing-an-enhanced-monorepo-experience-on-netlify/) on the Netlify blog.
+If you prefer the blog post, check out ["Elevating enterprise deployment: Introducing an enhanced monorepo experience on Netlify"](https://www.netlify.com/blog/elevating-enterprise-deployment-introducing-an-enhanced-monorepo-experience-on-netlify/) on the Netlify blog.
## NEW Nx CONSOLE FEATURE: Interactive Graph Functionality
-If you’re not familiar — Nx Console is our IDE enhancement for [VsCode (1.4 million installations!!)](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) and [JetBrains Products (Intellij/WebStorm/etc — 52 thousand downloads!)](https://plugins.jetbrains.com/plugin/21060-nx-console).
+If you're not familiar — Nx Console is our IDE enhancement for [VsCode (1.4 million installations!!)](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) and [JetBrains Products (Intellij/WebStorm/etc — 52 thousand downloads!)](https://plugins.jetbrains.com/plugin/21060-nx-console).
Nx Console provides a Graphical User Interface for running tasks and generating code for your Nx Monorepos, and it also provides the ability to view your project graph
@@ -257,7 +258,7 @@ As of our latest release, Nx Console has added the new feature of adding buttons
-And gives you a “play button” to run any task within your task graph:
+And gives you a "play button" to run any task within your task graph:
@@ -277,9 +278,9 @@ Nx has always provided similar functionality via our Storybook + Cypress integra
## NEW GENERATOR: convert-to-monorepo
-Towards the start of the year, we added support for Nx standalone applications. These were designed as a way of using Nx features in a way where you didn’t need to opt into a monorepo setup.
+Towards the start of the year, we added support for Nx standalone applications. These were designed as a way of using Nx features in a way where you didn't need to opt into a monorepo setup.
-Ever since we introduced these, we’ve had requests from the community to add a generator to convert your standalone workspace to a monorepo setup — to support repos that grew to emcompass more than just the 1 application.
+Ever since we introduced these, we've had requests from the community to add a generator to convert your standalone workspace to a monorepo setup — to support repos that grew to emcompass more than just the 1 application.
This is where our new [`convert-to-monorepo` generator](/nx-api/workspace/generators/convert-to-monorepo) comes into play!
@@ -295,13 +296,13 @@ When all is said and done, you should be able to now add additional applications
One of the great things about Nx is the extensibility, and the wide range of plugins that are available for supporting languages, frameworks, and tools that the core Nx team does not directly support.
-Our docs site has hosted [a registry of these plugins](/plugin-registry) for awhile now, but we’ve recently added npm downloads, github stars, release dates, and compatible Nx versions to this registry:
+Our docs site has hosted [a registry of these plugins](/plugin-registry) for awhile now, but we've recently added npm downloads, github stars, release dates, and compatible Nx versions to this registry:
We expect that these will be valuable signals to users as to the quality of the plugin.
-We’ve also added the ability to sort the registry by these metrics as a way of surfacing the higher quality plugins to the top!
+We've also added the ability to sort the registry by these metrics as a way of surfacing the higher quality plugins to the top!
@@ -311,27 +312,27 @@ Go [check it out now](/plugin-registry) live on our docs site!
Our mission to improve Nx docs continues: this edition with some major updates to our [Docs intro page](/getting-started/intro).
-We improved the messaging around Nx and more prominently emphasizing the [core features](/features) that distinguish Nx from other tools out there. We also linked a new “What is Nx” video. You should check it out 🐐
+We improved the messaging around Nx and more prominently emphasizing the [core features](/features) that distinguish Nx from other tools out there. We also linked a new "What is Nx" video. You should check it out 🐐
{% youtube src="https://youtu.be/-_4WMl-Fn0w" /%}
-The core part of the intro page now has a dedicated section for “Learning Nx”, surfacing some of our Nx, Nx Cloud and Monorepo videos as well as our in-depth tutorial about monorepos and single-project Nx workspaces. And we already have more in the works, so stay tuned.
+The core part of the intro page now has a dedicated section for "Learning Nx", surfacing some of our Nx, Nx Cloud and Monorepo videos as well as our in-depth tutorial about monorepos and single-project Nx workspaces. And we already have more in the works, so stay tuned.
-We’re also proud of all the new examples we’ve added in the last months. We have a brand new [Nx Recipe](https://github.com/nrwl/nx-recipes) repo with a variety of example projects that showcase Nx in combination with different technologies, even outside the JS ecosystem (e.g. with Rust, Go and .Net).
+We're also proud of all the new examples we've added in the last months. We have a brand new [Nx Recipe](https://github.com/nrwl/nx-recipes) repo with a variety of example projects that showcase Nx in combination with different technologies, even outside the JS ecosystem (e.g. with Rust, Go and .Net).
-Go pick the ones you’re most interested in!
+Go pick the ones you're most interested in!
-You can find all of the examples and more on our “Showcase” section: [/showcase](/showcase).
+You can find all of the examples and more on our "Showcase" section: [/showcase](/showcase).
## NEW GENERATOR: ESLint Flat Config
-ESLint has announced a new config system — nicknamed “flat config” — whose intent is to be be familiar and much simpler than the current config system. You can read more about this [in their blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/).
+ESLint has announced a new config system — nicknamed "flat config" — whose intent is to be be familiar and much simpler than the current config system. You can read more about this [in their blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/).
-As part of our continued support for ESLint, we’ve introduced [a new generator](/nx-api/eslint/generators/convert-to-flat-config) to convert your Nx monorepo to this new system:
+As part of our continued support for ESLint, we've introduced [a new generator](/nx-api/eslint/generators/convert-to-flat-config) to convert your Nx monorepo to this new system:
```
> nx g convert-to-flat-config
@@ -341,7 +342,7 @@ Flat config is still experimental, so you can use this as a way of easily previe
## New Nx Cloud Overview Video
-We’ve been working hard on our premium product: Nx Cloud, and part of that has been this awesome video from our own Rares Matei on what exactly Nx Cloud is!
+We've been working hard on our premium product: Nx Cloud, and part of that has been this awesome video from our own Rares Matei on what exactly Nx Cloud is!
{% youtube src="https://youtu.be/NZF0ZJpgaJM" /%}
@@ -349,13 +350,13 @@ Be sure to checkout the [Nx Cloud landing site](/nx-cloud) for more details on a
## Nx Conf Coming Up
-Last but definitely not least, [Nx Conf 2023](/conf) is fast approaching! We’ll be coming to you live from New York City on September 26!
+Last but definitely not least, [Nx Conf 2023](/conf) is fast approaching! We'll be coming to you live from New York City on September 26!
Be sure to [register to attend online FOR FREE](https://ti.to/nx-conf/nxconf2023online) and be sure to checkout our [lineup of talks](/conf#speakers) and [speakers](/conf#agenda)!
## Wrap Up
-That’s all for now folks! We’re just starting up a new iteration of development on Nx, so be sure to subscribe to our YouTube channel to get updates when new features land! Until next time, KEEP WORKING HARD!
+That's all for now folks! We're just starting up a new iteration of development on Nx, so be sure to subscribe to our YouTube channel to get updates when new features land! Until next time, KEEP WORKING HARD!
## Learn more
diff --git a/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md b/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md
index 4d2e8758b792e..68cf69c425e65 100644
--- a/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md
+++ b/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md
@@ -4,6 +4,7 @@ slug: 'introducing-playwright-support-for-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2023-09-18/589bVpPTJ4D4IACBePXWQ.png'
tags: [nx, release, tutorial]
+description: 'Discover how to integrate Playwright, a powerful end-to-end testing tool, into your Nx workspaces with our new @nx/playwright plugin.'
---
We are very excited to announce our support for Playwright with our new plugin `@nx/playwright`.
@@ -18,9 +19,9 @@ This blog will show you:
## What is Playwright?
-Before we start, let’s answer this question: what is Playwright and why should we use it?
+Before we start, let's answer this question: what is Playwright and why should we use it?
-From [playwright.dev](https://playwright.dev/), it says: “Playwright is end-to-end testing for modern web apps”. It sounds good, what does it do for us developers? What developer experience does it provide?
+From [playwright.dev](https://playwright.dev/), it says: "Playwright is end-to-end testing for modern web apps". It sounds good, what does it do for us developers? What developer experience does it provide?
### Multiple Browsers
@@ -52,12 +53,12 @@ export default defineConfig({
### Auto Waiting
-Playwright automatically waits for the relevant checks to pass, then performs the request action. What does it mean? For example, let’s say we have a sign-up form where:
+Playwright automatically waits for the relevant checks to pass, then performs the request action. What does it mean? For example, let's say we have a sign-up form where:
- while the app checks that the user name is unique, the submit button is disabled.
- after checking with the server, the submit button becomes enabled.
-How do we write tests in the Playwright? Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. So we don’t need to wait for the button to be enabled. Playwright will check it. We can simply write:
+How do we write tests in the Playwright? Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. So we don't need to wait for the button to be enabled. Playwright will check it. We can simply write:
```
await page.getByTestId('submit-button').click();
@@ -77,7 +78,7 @@ _Test error_
It also has other features like recording [screenshots](https://playwright.dev/docs/screenshots) and [videos](https://playwright.dev/docs/videos), [test generation](https://playwright.dev/docs/codegen), and [visual comparisons](https://playwright.dev/docs/test-snapshots). Read more about Playwright at [https://playwright.dev](https://playwright.dev/)
-Next, let’s write and run some Playwright tests.
+Next, let's write and run some Playwright tests.
## Create a new Nx Workspace with Playwright
diff --git a/docs/blog/2023-09-25-nx-raises.md b/docs/blog/2023-09-25-nx-raises.md
index 700544ac71870..afa78283c1547 100644
--- a/docs/blog/2023-09-25-nx-raises.md
+++ b/docs/blog/2023-09-25-nx-raises.md
@@ -3,9 +3,10 @@ title: Nx Raises $16M Series A
slug: 'nx-raises-16m-series-a'
authors: [Jeff Cross]
tags: [nx]
+description: Nx raises $16M Series A led by Nexus Venture Partners and a16z, a milestone in revolutionizing monorepo tooling and workflows.
---
-Victor and I are excited to announce that Nx has raised another $16M in a Series A funding round with Nexus Venture Partners and a16z! See our announcement video for more, and be sure to check out the [live stream of Nx Conf 2023](https://youtube.com/live/IQ5YyEYZw68?feature=share) tomorrow to see what we’re up to!
+Victor and I are excited to announce that Nx has raised another $16M in a Series A funding round with Nexus Venture Partners and a16z! See our announcement video for more, and be sure to check out the [live stream of Nx Conf 2023](https://youtube.com/live/IQ5YyEYZw68?feature=share) tomorrow to see what we're up to!
{% youtube src="https://www.youtube.com/embed/KuyYhC4ClW8?si=qoZL6i6X1E7wjChD" /%}
diff --git a/docs/blog/2023-10-13-nx-conf-2023-recap.md b/docs/blog/2023-10-13-nx-conf-2023-recap.md
index 3481c164517a2..6ea86bdb74883 100644
--- a/docs/blog/2023-10-13-nx-conf-2023-recap.md
+++ b/docs/blog/2023-10-13-nx-conf-2023-recap.md
@@ -4,9 +4,10 @@ slug: 'nx-conf-2023-recap'
authors: [Juri Strumpflohner]
cover_image: '/blog/images/2023-10-13/featured_img.webp'
tags: [nx, nx-conf]
+description: 'Nx Conf 2023 recap - keynotes, tech talks, and community discussions on Nx ecosystem growth, tooling, and monorepo development.'
---
-The 3rd edition of [Nx Conf](/conf), this year live from New York City. If you missed the talks, no worries, we’ve got you covered. This article does a brief recap of all the presentations and has links to the individual recordings and slides.
+The 3rd edition of [Nx Conf](/conf), this year live from New York City. If you missed the talks, no worries, we've got you covered. This article does a brief recap of all the presentations and has links to the individual recordings and slides.
{% youtube src="https://www.youtube.com/embed/P_W8MwX25a0?si=gpjul3hdqmOiBdev" /%}
@@ -20,7 +21,7 @@ Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem,
-Such integration capabilities really help push the developer productivity, whether that’s in single-project workspaces or monorepos.
+Such integration capabilities really help push the developer productivity, whether that's in single-project workspaces or monorepos.
Juri also dives deeper into efforts from the team to provide high quality educational content around Nx and its capabilities. The [Nx docs](/getting-started/intro) have been restructured to follow the [Diataxis](https://diataxis.fr/) framework, dividing content into into learning-, task-, understanding- and information-oriented sections.
@@ -29,11 +30,11 @@ This makes it easier to find keep the content organized and focused and makes it
The Nx team not only produces written content, but also video content mainly on the [Nx YouTube Channel](https://www.youtube.com/@nxdevtools). Juri shows some of the growth stats, with the channel now having more than 14k subscribers and around 3.7k hours of watch time per month. The channel serves mostly short-form videos about new releases, highlighting new features as well as longer-form tutorial videos.
-The Nx Community also got a special place in the keynote. Juri highlighted in particular the transition from the “Nrwl Community Slack” to the new “Nx Community” on Discord.
+The Nx Community also got a special place in the keynote. Juri highlighted in particular the transition from the "Nrwl Community Slack" to the new "Nx Community" on Discord.
-Discord is built for managing communities and will open up a series of features to come. Things like a built-in forum to ask questions, the ability to highlight Nx events (e.g. the Nx live stream) and having powerful automation and moderation tools. Since the launch a couple of weeks ago, already 1500+ members have signed up. If you didn’t sign up yet, go to [https://go.nx.dev/community](https://go.nx.dev/community).
+Discord is built for managing communities and will open up a series of features to come. Things like a built-in forum to ask questions, the ability to highlight Nx events (e.g. the Nx live stream) and having powerful automation and moderation tools. Since the launch a couple of weeks ago, already 1500+ members have signed up. If you didn't sign up yet, go to [https://go.nx.dev/community](https://go.nx.dev/community).
Juri also highlighted the [Nx Champions](/community) program that got launched this year which helps with efforts to grow the Nx community. The program features members that stood out in the Nx community by helping support others, producing content or speaking at conferences about Nx and related tech.
Finally there were also two **announcements**:
@@ -41,15 +42,15 @@ Finally there were also two **announcements**:
- the Nx team decided to move off Medium for a better publishing experience but mainly also to avoid the paywall, something that the team has no control over. The new blog is currently being built and will be hosted at [blog](/blog). This also allows to better resurface information by being able to integrate blog articles into the Nx docs search and make them also accessible to the Nx AI Assistant which was the 2nd announcement.
- the **Nx AI Assistant** is an experiment the team is running to use AI to improve discoverability on the Nx docs. The ChatGPT powered assistant allows to ask natural language questions and responds based on the Nx docs training data, also including links to the sources. Try it out at [ai-chat](/ai-chat) and use the feedback thumbs-up/down buttons to help improve it over time 🙏.
-Also, Nx is open source: [https://github.com/nrwl/nx](https://github.com/nrwl/nx). Contribute! And while you’re there, don’t forget to give us a star 😃.
+Also, Nx is open source: [https://github.com/nrwl/nx](https://github.com/nrwl/nx). Contribute! And while you're there, don't forget to give us a star 😃.
**Victor Savkin** began the second segment of the keynote discussing the hidden expenses that often plague large teams.
-He emphasized that as an organization grows, so does the supporting work. This isn’t limited to just communication and management. Every artifact, be it code, process, or otherwise, needs to be assimilated into the broader context. This supporting work becomes intricate and demanding. He pointed out that the remote work trend, while it started with a lot of momentum, struggles in larger corporations because it demands even more coordination and effort. In contrast, smaller entities often outshine their larger counterparts due to the reduced overhead of supporting work.
+He emphasized that as an organization grows, so does the supporting work. This isn't limited to just communication and management. Every artifact, be it code, process, or otherwise, needs to be assimilated into the broader context. This supporting work becomes intricate and demanding. He pointed out that the remote work trend, while it started with a lot of momentum, struggles in larger corporations because it demands even more coordination and effort. In contrast, smaller entities often outshine their larger counterparts due to the reduced overhead of supporting work.
-One of Victor’s main points was the potential of software developers. Given the right tools and environment, they can achieve remarkable feats. CI is one such tool.
+One of Victor's main points was the potential of software developers. Given the right tools and environment, they can achieve remarkable feats. CI is one such tool.
@@ -59,7 +60,7 @@ However, scaling CI is a challenge. In larger workspace, up to 50 agents is pret
-This might be manageable in a static repository setup, but monorepos introduce an added layer of complexity. Here, static “CI recipes” just won’t cut it. The result is either an overuse of computational resources, leading to waste of money, or a painfully slow CI.
+This might be manageable in a static repository setup, but monorepos introduce an added layer of complexity. Here, static "CI recipes" just won't cut it. The result is either an overuse of computational resources, leading to waste of money, or a painfully slow CI.
Victor critiqued that most current CI setups are:
@@ -103,7 +104,7 @@ This elevated abstraction is possible because Nx Cloud & Nx are intimately famil
-Beyond simplifying CI configurations, Nx Cloud Workflows helps optimize computational resource use. Agents are instantiated dynamically based on the project’s requirements.
+Beyond simplifying CI configurations, Nx Cloud Workflows helps optimize computational resource use. Agents are instantiated dynamically based on the project's requirements.
@@ -132,17 +133,17 @@ Simon Critchley (Senior Software Architect at Nx) dives into the more technical
-Apart from the distributed caching, Nx Cloud already offers [DTE (Distributed Task Execution)](/ci/features/distribute-task-execution), which is a mechanism to seamlessly distribute tasks across various machines to achieve a high degree of parallelism. Up until now it was on you to configure your existing CI in a way to provision machines (agents) to Nx Cloud DTE. This required some fine-tuning to understand the best level of parallelism given the underlying monorepo and tasks that need to be run. If you have too many machines, it’ll be wasteful, if you have to few your CI will be slower.
+Apart from the distributed caching, Nx Cloud already offers [DTE (Distributed Task Execution)](/ci/features/distribute-task-execution), which is a mechanism to seamlessly distribute tasks across various machines to achieve a high degree of parallelism. Up until now it was on you to configure your existing CI in a way to provision machines (agents) to Nx Cloud DTE. This required some fine-tuning to understand the best level of parallelism given the underlying monorepo and tasks that need to be run. If you have too many machines, it'll be wasteful, if you have to few your CI will be slower.
Nx Cloud Workflow is an advancement of the DTE mechanism, where machines can be automatically provisioned and scaled based on the tasks that need to be run. Essentially it is a replacement for your existing CI but way smarter because it is able to leverage the knowledge it has about the Nx workspace, historical data and can thus do a series of optimizations. Traditional CI systems are running low-level commands on machines. Nx Cloud Workflows is task oriented instead: you tell it to run builds, tests, e2e, linting on the affected projects of the Nx workspace and it figures out how to split them up into fine-grained tasks and then distributes them among dynamically provisioned agents.
-From a developer’s perspective, Nx Cloud Workflows are written in Yaml (or alternatively in JSON which is handy if you need to generate them). The format is very similar to existing CI providers to make sure the knowledge you have easily transfers. If you want an example, we’re dog-fooding Nx Cloud Workflows on the Nx repo (note the config will change as the product progresses): [https://github.com/nrwl/nx/blob/master/.nx/workflows/agents.yaml](https://github.com/nrwl/nx/blob/master/.nx/workflows/agents.yaml)
+From a developer's perspective, Nx Cloud Workflows are written in Yaml (or alternatively in JSON which is handy if you need to generate them). The format is very similar to existing CI providers to make sure the knowledge you have easily transfers. If you want an example, we're dog-fooding Nx Cloud Workflows on the Nx repo (note the config will change as the product progresses): [https://github.com/nrwl/nx/blob/master/.nx/workflows/agents.yaml](https://github.com/nrwl/nx/blob/master/.nx/workflows/agents.yaml)
Simon then dives way deeper into the underlying architecture. In particular, how scheduling in Kubernetes works, which is used at the infrastructure level for Nx Cloud Workflows.
-Workflow scheduling is handled by Kubernetes, specifically through a “Workflow Controller” that interacts with the K8s API Server and triggers Kubernetes Pods. Each Pod contains a Workflow executor and sidecar containers. All containers in the Nx Cloud workflow share a workspace volume for collaborative access. This allows for interesting optimizations in terms of sharing `node_modules` and restoring cache results.
+Workflow scheduling is handled by Kubernetes, specifically through a "Workflow Controller" that interacts with the K8s API Server and triggers Kubernetes Pods. Each Pod contains a Workflow executor and sidecar containers. All containers in the Nx Cloud workflow share a workspace volume for collaborative access. This allows for interesting optimizations in terms of sharing `node_modules` and restoring cache results.
@@ -168,7 +169,7 @@ Michael talks about how to leverage Nx to migrate multiple repositories into a m
- how to do the move in parallel
- how to measure the progress
-The project usually starts with an architectural audit. That involves a detailed analysis of the underlying codebase, also including an executive summary for non technical folks. Once the audit is done, the actual move is planned and prepared. A part of that is to define “Nx migration goals”, like
+The project usually starts with an architectural audit. That involves a detailed analysis of the underlying codebase, also including an executive summary for non technical folks. Once the audit is done, the actual move is planned and prepared. A part of that is to define "Nx migration goals", like
- Single Version Policy
- Improved Maintenance
@@ -183,7 +184,7 @@ To prioritize which ones to address first, Michael uses the following metaphor:
-The important part here is to understand why “apples get bad” in the first place. Is it the harvesting process?
+The important part here is to understand why "apples get bad" in the first place. Is it the harvesting process?
Once the priorities are defined and roadmap laid out, the goal is to **move in parallel.**
As part of that move the following gets produced:
@@ -215,7 +216,7 @@ Demo Repo:
{% youtube src="https://www.youtube.com/watch?v=bnjOu7iOrMg" /%}
-Craigory did a deep dive into the new Nx inference API. This is particularly interesting if you’re developing [Nx plugins](/extending-nx/intro/getting-started) or if you have leverage/build some more advanced automation for your Nx workspace.
+Craigory did a deep dive into the new Nx inference API. This is particularly interesting if you're developing [Nx plugins](/extending-nx/intro/getting-started) or if you have leverage/build some more advanced automation for your Nx workspace.
What is project inference:
@@ -239,7 +240,7 @@ Project graph API v2
- `createNodes` - finds graph nodes based on files on disk
- `createDependencies` - finds edges to be added to the graph
-Still 2 parts, but there’s no overlap between these two and they have very specific purposes.
+Still 2 parts, but there's no overlap between these two and they have very specific purposes.
`createNodes` is a tuple composed of:
@@ -285,7 +286,7 @@ Currently, Nx offers support for two predominant monorepo styles: package-based
- These are structured to prioritize consistency and maintainability.
- Updates within this framework are automated, and the setup adheres to a single-version policy.
-Isaac then drew parallels between the Apollo program and the package-based mindset. The Apollo missions were evolutionary in nature, constantly pushing the envelope and embracing innovation with each successive mission. However, this trailblazing approach wasn’t without its perils, as evidenced by tragic accidents. This experimental approach was feasible because the core team, responsible for creating the setup, remained consistent throughout the project’s duration.
+Isaac then drew parallels between the Apollo program and the package-based mindset. The Apollo missions were evolutionary in nature, constantly pushing the envelope and embracing innovation with each successive mission. However, this trailblazing approach wasn't without its perils, as evidenced by tragic accidents. This experimental approach was feasible because the core team, responsible for creating the setup, remained consistent throughout the project's duration.
In contrast, Isaac likened the International Space Station (ISS) to the integrated mindset. The ISS epitomizes the challenges of coordination, given its international collaboration involving numerous countries. Emphasizing longevity, the ISS necessitates that every new crew member be proficient in operating its intricate machinery.
@@ -298,7 +299,7 @@ Shifting gears, Isaac delved into a hands-on demonstration. He outlined the proc
- Devising a novel Nx generator, streamlining the process of setting up new libraries within the workspace.
- Finally, he showcased the seamless upgrade mechanism, ensuring the workspace is always aligned with the latest version.
-## Nx’t Level Publishing
+## Nx't Level Publishing
**Speaker:** [James Henry](https://twitter.com/MrJamesHenry)
[Slides](https://main--idyllic-dieffenbachia-3699ec.netlify.app/1)
@@ -322,7 +323,7 @@ Important to note that all the existing plugins are still valid and will still b
James goes forward demoing how `nx release` works in a simple NPM package: [jump directly into the video](https://www.youtube.com/watch?si=xoIW0Q-mQWTGgrek&t=411&v=p5qW5-2nKqI&feature=youtu.be).
-Nx release can be added to any npm package. All that’s needed is the `nx` and `@nx/js` package and a `nx: {}` node in the `package.json`.
+Nx release can be added to any npm package. All that's needed is the `nx` and `@nx/js` package and a `nx: {}` node in the `package.json`.
Nx release has a dry-run mode; `nx release version --dry-run`. This will output a diff of what version would be created and on which `package.json` files (if there are multiple).
The same mechanism also works for the `changelog` command, e.g. `nx release changelog --dry-run`. In addition to just dry-run, the `changelog` command also has an `--interactive` mode that allows to get the generated changelog in an interactive editor where you can adjust and add extra stuff.
@@ -335,7 +336,7 @@ A nice feature is also that the changelog will...
- automatically group first by type (e.g. features grouped together, fixes etc)
- within each type grouping it will be grouped by scope such as pkg-a etc which will be alphabetized
-- if there’s a fix on the entire repo that’ll come first before the per-package changes
+- if there's a fix on the entire repo that'll come first before the per-package changes
`nx release changelog --create-release=github` allows to also automatically push the changelog to a Github release.
@@ -344,7 +345,7 @@ When running `nx release publish`, Nx also takes into account the right order of
Future roadmap:
- ability to customize how the release works by defining it in `nx.json`
-- “release groups” will allow to group packages and define whether versions should be in sync or versioned independently; filter by projects, or even just publish a subset of projects of a workspace
+- "release groups" will allow to group packages and define whether versions should be in sync or versioned independently; filter by projects, or even just publish a subset of projects of a workspace
- publishing also automatically takes into account the provenance data on NPM
## Lightning Talk: What if your stories were — already — your e2e tests?
diff --git a/docs/blog/2023-10-20-nx-17-release.md b/docs/blog/2023-10-20-nx-17-release.md
index f5a9288dd1b6d..0451eaade40a3 100644
--- a/docs/blog/2023-10-20-nx-17-release.md
+++ b/docs/blog/2023-10-20-nx-17-release.md
@@ -4,13 +4,14 @@ slug: 'nx-17-release'
authors: ['Juri Strumpflohner', 'Zack DeRose']
cover_image: '/blog/images/2023-10-20/featured_img.png'
tags: [nx, release]
+description: Nx 17 released with Vue.js support, Module Federation enhancements, generator path improvements, AI chatbot integration, and more.
---
-We’re excited to announce the release of Nx version 17!
+We're excited to announce the release of Nx version 17!
This article will cover the main things you need to know to get the most out of Nx 17!
-Here’s a Table of Contents so you can skip straight to the updates you care about the most:
+Here's a Table of Contents so you can skip straight to the updates you care about the most:
- [It's a Vue-tiful Day for Nx](#its-a-vuetiful-day-for-nx)
- [Enhancements to Module Federation Support](#enhancements-to-module-federation-support)
@@ -33,7 +34,7 @@ Here’s a Table of Contents so you can skip straight to the updates you care ab
---
-## It’s a Vue-tiful Day for Nx!
+## It's a Vue-tiful Day for Nx!
Ever since we added Vite as a first-class citizen to Nx workspaces (see `@nx/vite`), we started falling in love with the Vue community. The only logical next step: Nx now provides a brand new Vue plugin that is being maintained by the Nx team! (And we're already working on a [Nuxt](https://nuxt.com/) plugin 🤫)
@@ -47,13 +48,13 @@ This option will create a new Nx workspace with a fresh Vue application, all set
npm add -D @nx/vue
```
-And you’ll have access to Nx generators so that you can generate Vue applications, libraries, components, and more in your workspace:
+And you'll have access to Nx generators so that you can generate Vue applications, libraries, components, and more in your workspace:
-We’re very excited for this support to land, and we’re eager to get it into our user’s hands and see what Nx can do to help Vue developers so we can continue to refine our support and make Vue with Nx an excellent developer experience.
+We're very excited for this support to land, and we're eager to get it into our user's hands and see what Nx can do to help Vue developers so we can continue to refine our support and make Vue with Nx an excellent developer experience.
-If you’re eager to learn more, make sure to check out our new [Vue standalone tutorial](/getting-started/tutorials/vue-standalone-tutorial).
+If you're eager to learn more, make sure to check out our new [Vue standalone tutorial](/getting-started/tutorials/vue-standalone-tutorial).
## Enhancements to Module Federation Support
@@ -61,7 +62,7 @@ Nx already had great support for Module Federation — Nx 17 improves on this su
### NEW: Typesafe Config
-Projects created with Nx’s generators for module federation will now be created with a `module-federation.config.ts` file (as opposed to a `.js` file). A new `ModuleFederationConfig` interface is also exported from the `@nx/webpack` plugin.
+Projects created with Nx's generators for module federation will now be created with a `module-federation.config.ts` file (as opposed to a `.js` file). A new `ModuleFederationConfig` interface is also exported from the `@nx/webpack` plugin.
### Better Typesafety Across Modules
@@ -119,13 +120,13 @@ This config will ensure that version `0.0.1` of the `is-odd` is used.
Similar to the [adjustments we made in 16.8](https://www.youtube.com/watch?v=bw8pRh0iC4A&t=14s) for most of our project-creating generators, v17 brings updates to how component generators work. These updates aim to give you more control over the name and file location of your components.
-Towards this end, we’ve added a new `--nameAndDirectoryFormat` option that you can set to either `as-provided` or `derived`.
+Towards this end, we've added a new `--nameAndDirectoryFormat` option that you can set to either `as-provided` or `derived`.
When set to `as-provided`, the generator will use the `name` option for the name of your component and the `directory` option to determine where on your file system to add the component. `as-provided` will be used by default if none is specified.
When set to `derived`, the generator will try to determine where to create your component based on the `project` option - which will mainly operate how component generators do now.
-In addition, component generators now follow any given casing for component files. For example, let’s say we have an integrated monorepo with a react application called “my-app” and want to add a “Home” component. With Nx 17, you can run the command:
+In addition, component generators now follow any given casing for component files. For example, let's say we have an integrated monorepo with a react application called "my-app" and want to add a "Home" component. With Nx 17, you can run the command:
```shell
> nx g component apps/my-app/src/app/Home
@@ -133,7 +134,7 @@ In addition, component generators now follow any given casing for component file
And a `Home.tsx` file will be added in the `apps/my-app/src/app` directory.
-Finally, generators will now factory in your current working directory, so you can also create this “Home” component via:
+Finally, generators will now factory in your current working directory, so you can also create this "Home" component via:
```shell
cd apps/my-app/src/app
@@ -142,7 +143,7 @@ nx g component Home
## The NEW Nx AI ChatBot
-We’ve added a new AI ChatBot to our docs site. You can access it now at [/ai-chat](/ai-chat).
+We've added a new AI ChatBot to our docs site. You can access it now at [/ai-chat](/ai-chat).
@@ -156,9 +157,9 @@ After running the `nx migrate` command to upgrade to Nx 17 and using Nx Cloud, y
Our Nx Cloud updates come alongside configuration changes in your `nx.json` file and project configuration.
-Specifically, we’ve added an optional `nxCloudAccessToken` to the `nx.json` file - as long as a token is provided here, we'll make sure that you take advantage of the currently deployed version of Nx Cloud when running commands with Nx.
+Specifically, we've added an optional `nxCloudAccessToken` to the `nx.json` file - as long as a token is provided here, we'll make sure that you take advantage of the currently deployed version of Nx Cloud when running commands with Nx.
-We’ve also removed the need to specify `cacheableOperations` at the task-runner level. From now on, every `target` configured in your `project.json` can be defined as cacheable using the `cache` property.
+We've also removed the need to specify `cacheableOperations` at the task-runner level. From now on, every `target` configured in your `project.json` can be defined as cacheable using the `cache` property.
```json {% fileName="nx.json" %}
{
@@ -173,7 +174,7 @@ We’ve also removed the need to specify `cacheableOperations` at the task-runne
If you use the `nx migrate` command, all updates will be handled for you using the `targetDefaults` in your `nx.json` file. [More in the docs.](/features/cache-task-results)
-We’ve been working hard at reducing and simplifying all the configuration required for your Nx workspaces. Checkout our latest guide on how to [Reduce Repetitive Configuration](/recipes/running-tasks/reduce-repetitive-configuration) for more, and stay tuned as we’ve got new efforts underway to make this simplification even more appealing!
+We've been working hard at reducing and simplifying all the configuration required for your Nx workspaces. Checkout our latest guide on how to [Reduce Repetitive Configuration](/recipes/running-tasks/reduce-repetitive-configuration) for more, and stay tuned as we've got new efforts underway to make this simplification even more appealing!
## Nx Repo Dog-Fooding Nx Workflows
@@ -183,19 +184,19 @@ If you missed it, Simon Critchley walks you through in his [Nx Conf](/blog/nx-co
{% youtube src="https://www.youtube.com/embed/JG1FWfZFByM?si=7_NzxJP8nA7RbFhl" /%}
-Put simply, Nx Workflows represents Nx entering the CI provider arena, where Nx can now provide you with Cloud Computation to run your CI tasks. This creates the foundation for a whole new class of Nx Cloud features that we’re excited to work on in the coming cycles.
+Put simply, Nx Workflows represents Nx entering the CI provider arena, where Nx can now provide you with Cloud Computation to run your CI tasks. This creates the foundation for a whole new class of Nx Cloud features that we're excited to work on in the coming cycles.
-The Nx repo itself is now “dog-fooding” this latest feature (dog-fooding refers to using our tool in our own projects, or “eating our own dog food”), and you can see how it’s going now on our [public Nx Cloud workspace](https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438/overview).
+The Nx repo itself is now "dog-fooding" this latest feature (dog-fooding refers to using our tool in our own projects, or "eating our own dog food"), and you can see how it's going now on our [public Nx Cloud workspace](https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438/overview).
-Nx Workflows are still in the experimental phase. We’re running pilots with our enterprise clients and are excited to open this up for everyone soon!
+Nx Workflows are still in the experimental phase. We're running pilots with our enterprise clients and are excited to open this up for everyone soon!
## Task Graphing Improvements
-Task Caching in Nx is based on a set of “input” files calculated for a given task. You can specify specific files or patterns of files in your project.json for a particular task or in the `targetDefaults` of your `nx.json` to set the default file sets for your inputs.
+Task Caching in Nx is based on a set of "input" files calculated for a given task. You can specify specific files or patterns of files in your project.json for a particular task or in the `targetDefaults` of your `nx.json` to set the default file sets for your inputs.
-There have been some difficulties in determining precisely which files were included and which weren’t for a given task. This is where our latest update to the task graph comes in:
+There have been some difficulties in determining precisely which files were included and which weren't for a given task. This is where our latest update to the task graph comes in:
@@ -205,7 +206,7 @@ You can open this graph using the command:
nx graph
```
-And then selecting “Task” from the “Project”/”Task” graph dropdown in the top left. Clicking on a specific task now allows you to see a comprehensive list of all files that were factored in as inputs for this task:
+And then selecting "Task" from the "Project"/"Task" graph dropdown in the top left. Clicking on a specific task now allows you to see a comprehensive list of all files that were factored in as inputs for this task:
@@ -227,19 +228,19 @@ In Nx 17, we removed any remaining traces of `tslint` from our linter package, s
As we solidify this command, we intend to bring robust support for various versioning and publishing strategies, as well as built-in support for publishing packages or modules to a variety of languages, registries, and platforms.
-For more [checkout our API docs](/nx-api/nx/documents/release), and be sure to catch James Henry’s announcement of this new command at [Nx Conf](/blog/nx-conf-2023-recap):
+For more [checkout our API docs](/nx-api/nx/documents/release), and be sure to catch James Henry's announcement of this new command at [Nx Conf](/blog/nx-conf-2023-recap):
{% youtube src="https://www.youtube.com/embed/p5qW5-2nKqI?si=FzpGMJwPVINc1hgL" /%}
## Experimental: Nx Project Inference API v2
-At Nx, we’re OBSESSED with building a better, more robust experience for our developers. Towards this end, we’re now in [v2 of our Project Inference API](/extending-nx/recipes/project-graph-plugins).
+At Nx, we're OBSESSED with building a better, more robust experience for our developers. Towards this end, we're now in [v2 of our Project Inference API](/extending-nx/recipes/project-graph-plugins).
This API is a way of extending the Nx project graph, which can be particularly helpful for extending Nx to support other languages, allowing Nx to determine where to find and draw boundaries around projects in your workspace. A great example is our very own [Vue plugin](/getting-started/tutorials/vue-standalone-tutorial).
Interestingly, v2 includes support for dynamic targets as well. This opens up exciting new doors to reducing configuration, and we hope to expand on this to better support our first-party plugins in the near future.
-For most developers, the main thing you need to know is that plugins may now add additional targets that you won’t see in your `project.json` file. To see your actual project configuration, you can now use the command:
+For most developers, the main thing you need to know is that plugins may now add additional targets that you won't see in your `project.json` file. To see your actual project configuration, you can now use the command:
```shell
nx show project
@@ -269,7 +270,7 @@ npx nx migrate --run-migrations
## Wrapping up
-That’s all for now folks! We’re just starting up a new iteration of development on Nx, so be sure to subscribe to our [YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
+That's all for now folks! We're just starting up a new iteration of development on Nx, so be sure to subscribe to our [YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
---
diff --git a/docs/blog/2023-11-08-state-management.md b/docs/blog/2023-11-08-state-management.md
index 8a0f8fab0e3ee..2ae5552585edf 100644
--- a/docs/blog/2023-11-08-state-management.md
+++ b/docs/blog/2023-11-08-state-management.md
@@ -4,6 +4,7 @@ slug: 'state-management-nx-react-native-expo-apps-with-tanstack-query-and-redux'
authors: [Emily Xiong]
cover_image: '/blog/images/2023-11-08/featured_img.webp'
tags: [nx, React Native]
+description: Implementing state management in Nx React Native/Expo apps with TanStack Query and Redux, covering setup, dev tools, and unit testing.
---
There are currently countless numbers of state management libraries out there. This blog will show you how to use state management for React Native in Nx monorepo with [TanStack Query](https://tanstack.com/query/latest) (which happens to use [Nx on their repo](https://cloud.nx.app/orgs/6412ca9d1c251d000efa21ba/workspaces/6412c827e6da5d7b4a0b1fe3/overview)) and Redux.
@@ -88,7 +89,7 @@ const App = () => {
export default App;
```
-Note: the [React Query Devtools](https://tanstack.com/query/latest/docs/framework/react/devtools) currently do not support react native, and it only works on the web, so there is a condition: `{ Platform.OS === ‘web’ && }.`
+Note: the [React Query Devtools](https://tanstack.com/query/latest/docs/framework/react/devtools) currently do not support react native, and it only works on the web, so there is a condition: `{ Platform.OS === 'web' && }.`
For the react native apps, in order to use this tool, you need to use [react-native-web](https://necolas.github.io/react-native-web/) to interpolate your native app to the web app first.
@@ -102,9 +103,9 @@ Or you can run `npx nx serve cats` to launch the app in a web browser and debug
What is a query?
-> “A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise-based method (including GET and POST methods) to fetch data from a server.” [(https://tanstack.com/query/v4/docs/react/guides/queries)](https://tanstack.com/query/v4/docs/react/guides/queries)
+> "A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise-based method (including GET and POST methods) to fetch data from a server." [(https://tanstack.com/query/v4/docs/react/guides/queries)](https://tanstack.com/query/v4/docs/react/guides/queries)
-Now let’s add our first query. In this example, it will be added under `lib/queries` folder. To create a query to fetch a new fact about cats, run the command:
+Now let's add our first query. In this example, it will be added under `lib/queries` folder. To create a query to fetch a new fact about cats, run the command:
```shell
# expo workspace
@@ -124,7 +125,7 @@ Now notice under libs folder, `use-cat-fact` folder got created under `libs/quer
If you use React Native CLI, just add a folder in your workspace root.
-For this app, let’s use this API: [https://catfact.ninja/](https://catfact.ninja/). At `libs/queries/use-cat-fact/src/lib/use-cat-fact.ts`, add code to fetch the data from this API:
+For this app, let's use this API: [https://catfact.ninja/](https://catfact.ninja/). At `libs/queries/use-cat-fact/src/lib/use-cat-fact.ts`, add code to fetch the data from this API:
```ts
import { useQuery } from '@tanstack/react-query';
@@ -187,7 +188,7 @@ fetchMock.enableMocks();
**2\. Create Mock Query Provider**
-In order to test out `useQuery` hook, you need to wrap it inside a mock `QueryClientProvider`. Since this mock query provider is going to be used more than once, let’s create a library for this wrapper:
+In order to test out `useQuery` hook, you need to wrap it inside a mock `QueryClientProvider`. Since this mock query provider is going to be used more than once, let's create a library for this wrapper:
```shell
# expo library
diff --git a/docs/blog/2023-11-21-ai-assistant.md b/docs/blog/2023-11-21-ai-assistant.md
index f00472e6dd7c7..f8c4cd8ac857f 100644
--- a/docs/blog/2023-11-21-ai-assistant.md
+++ b/docs/blog/2023-11-21-ai-assistant.md
@@ -4,6 +4,7 @@ slug: 'nx-docs-ai-assistant'
authors: [Katerina Skroumpelou]
cover_image: '/blog/images/2023-11-21/featured_img.webp'
tags: [nx, docs, AI]
+description: Explore the Nx Docs AI Assistant's architecture, user benefits, and how it enhances documentation accessibility through intelligent search and contextual responses.
---
## Introduction
diff --git a/docs/blog/2023-11-22-unit-testing-expo.md b/docs/blog/2023-11-22-unit-testing-expo.md
index 191e8433af95c..3389a79f2b69e 100644
--- a/docs/blog/2023-11-22-unit-testing-expo.md
+++ b/docs/blog/2023-11-22-unit-testing-expo.md
@@ -4,6 +4,7 @@ slug: 'unit-testing-expo-apps-with-jest'
authors: [Emily Xiong]
cover_image: '/blog/images/2023-11-22/featured_img.webp'
tags: [nx, tutorial]
+description: Learn how to unit test Expo apps using Jest and React Native Testing Library, with solutions for mocking AsyncStorage, Redux, and React Navigation.
---
In my latest [blog](/blog/step-by-step-guide-to-creating-an-expo-monorepo-with-nx), I successfully navigated through the steps of setting up an Expo Monorepo with [Nx](). The next challenge? Testing! This blog dives into:
@@ -16,7 +17,7 @@ Repo:
## Stacks
-Here’s my setup
+Here's my setup
- Testing framework: [jest](https://jestjs.io/)
- Testing library: [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/)
@@ -24,7 +25,7 @@ Here’s my setup
## Writing and Running Unit Tests
-When you use Nx, it not only configures and sets up Jest, but also creates a default unit test for every expo component that is being generated. Here’s what that looks like:
+When you use Nx, it not only configures and sets up Jest, but also creates a default unit test for every expo component that is being generated. Here's what that looks like:
```typescript
import { render } from '@testing-library/react-native';
@@ -46,7 +47,7 @@ To run all unit tests for a given project, use:
npx nx test
```
-Here’s the output of running this for my example app:
+Here's the output of running this for my example app:
@@ -95,7 +96,7 @@ I am using the library `@react-native-async-storage/async-storage`, and I got th
The issue is that `@react-native-async-storage/async-storage` library can only be used in `NativeModule`. Since unit testing with Jest only tests JS/TS file logic, I need to mock this library.
-In the app’s test-setup.ts file, add the below lines:
+In the app's test-setup.ts file, add the below lines:
```typescript
jest.mock('@react-native-async-storage/async-storage', () =>
@@ -103,7 +104,7 @@ jest.mock('@react-native-async-storage/async-storage', () =>
);
```
-## Error: Could not find “store”
+## Error: Could not find "store"
I am using Redux for state management, and I got this error for my stateful components:
@@ -146,7 +147,7 @@ beforeEach(() => {
});
```
-For example, one of my stateful components’ unit test will become:
+For example, one of my stateful components' unit test will become:
```typescript
import React from 'react';
@@ -207,7 +208,7 @@ jest.spyOn(ReactQuery, 'useQuery').mockImplementation(
);
```
-### Error: Couldn’t find a navigation object
+### Error: Couldn't find a navigation object
If you use `@react-navigation` library for navigation, and inside your component, there are hooks from this library like `useNavigation` and `useRoute`, you are likely to get this error:
@@ -215,7 +216,7 @@ If you use `@react-navigation` library for navigation, and inside your component
Couldn't find a navigation object. Is your component inside NavigationContainer?
```
-The fix this, I need to mock the `@react-nativgation/native` library. In the app’s test-setup.ts file, I need to add:
+The fix this, I need to mock the `@react-nativgation/native` library. In the app's test-setup.ts file, I need to add:
```typescript
jest.mock('@react-navigation/native', () => {
@@ -234,7 +235,7 @@ jest.mock('@react-navigation/native', () => {
});
```
-### SyntaxError: Unexpected token ‘export’
+### SyntaxError: Unexpected token 'export'
I got this error when using a library with ECMAScript Module (ESM), such as [`udid`](https://github.com/uuidjs/uuid):
@@ -252,7 +253,7 @@ I got this error when using a library with ECMAScript Module (ESM), such as [`ud
Jest does not work with ESM out of the box. The simple solution is to map this library to the CommonJS version of this library.
-In the app’s `jest.config.ts`, there should be an option called `moduleNameMapper`. The library I used is called `uuid`, so I need to add the map `uuid: require.resolve(‘uuid’)` under `moduleNameMapper`. So when the code encounters imports from `uuid` library, it will resolve the CommonJS version of it:
+In the app's `jest.config.ts`, there should be an option called `moduleNameMapper`. The library I used is called `uuid`, so I need to add the map `uuid: require.resolve('uuid')` under `moduleNameMapper`. So when the code encounters imports from `uuid` library, it will resolve the CommonJS version of it:
```typescript
module.exports = {
@@ -292,8 +293,8 @@ I got this error when I was importing from a library such as [react-native-vecto
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
- • If you need a custom transformation specify a "transform" option in your config.
- • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
+ • If I need a custom transformation specify a "transform" option in my config.
+ • If I simply want to mock my non-JS modules (e.g. binary assets) I can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
@@ -305,7 +306,7 @@ To fix this, add this library name to `transformIgnorePatterns` in the app's jes
What is `transformIgnorePatterns`? The `transformIgnorePatterns` allows developers to specify which files shall be transformed by Babel. `transformIgnorePatterns` is an array of regexp pattern strings that should be matched against all source file paths before the transformation. If the file path matches any patterns, it will not be transformed by Babel.
-By default, Jest will ignore all the files under node_modules and only transform the files under the project’s src.
+By default, Jest will ignore all the files under node_modules and only transform the files under the project's src.
However, some libraries such as `react-native-paper` or `react-native-svg`, the library files are in `.ts` or `.tsx`. These files are not compiled to `js`. So I need to add these libraries' names to `transformIgnorePatterns`, so these libraries will be transformed by Babel along with my project. source file. The default generated `jest.config.js` already has:
@@ -324,7 +325,7 @@ If I have an error related to a library with an unexpected token, I need to chec
Here are some common errors that I will probably run into while doing unit testing. The solution to most problems is to find a way to mock a library that is not relevant to my component logic.
-With Nx, you do not need to explicitly install any testing library, so you can dive right in and focus on writing the tests rather than spending time on setup.
+With Nx, I do not need to explicitly install any testing library, so I can dive right in and focus on writing the tests rather than spending time on setup.
## Learn more
diff --git a/docs/blog/2023-12-20-nx-17-2-release.md b/docs/blog/2023-12-20-nx-17-2-release.md
index 75f844cd41d65..2c66a79cacac2 100644
--- a/docs/blog/2023-12-20-nx-17-2-release.md
+++ b/docs/blog/2023-12-20-nx-17-2-release.md
@@ -4,9 +4,10 @@ slug: 'nx-17-2-release'
authors: [Zack DeRose]
cover_image: '/blog/images/2023-12-20/featured_img.png'
tags: [nx, changelog, release]
+description: Nx 17.2 released with simplified project configuration, Rust-powered task hashing, enhanced Module Federation, expanded releases, Angular 17 support, and Nx Agents for faster CI.
---
-It’s been a bit since we launched [Nx 17](/blog/nx-17-release)! In this article, we’ll go over some of the new developments and improvements that have landed in Nx 17.2:
+It's been a bit since we launched [Nx 17](/blog/nx-17-release)! In this article, we'll go over some of the new developments and improvements that have landed in Nx 17.2:
- [Nx Closes In On 4 Million Weekly NPM Downloads!!](#nx-closes-in-on-4-million-weekly-npm-downloads)
- [New Simplified Project Configuration On the Way](#new-simplified-project-configuration-on-the-way)
@@ -27,40 +28,40 @@ And our downloads on NPM keep confirming this. We are about to cross 4 million d
-If this made you curious, keep an eye on [our blog](/blog) or [X/Twitter](https://twitter.com/nxdevtools) as we’re going to release a 2023 year recap blog post next week.
+If this made you curious, keep an eye on [our blog](/blog) or [X/Twitter](https://twitter.com/nxdevtools) as we're going to release a 2023 year recap blog post next week.
## New Simplified Project Configuration On the Way
Adoption is crucial, and simplicity is the driver for adoption. Last year we heavily optimized how you can use Nx in an existing project. Just drop the `nx` package (or run `nx init`) and that's it. Nx understands your workspace and efficiently runs your `package.json` scripts.
-Using Nx at that level is definitely useful as you get intelligent parallelization, task pipelines and caching. But it is just the tip of the iceberg of what Nx is actually capable of. Nx plugins provide much more, especially in terms of DX and developer productivity by taking away some of the burden of configuring your monorepo tooling. But many devs new to Nx found it harder to get started with them initially and incrementally migrating to Nx plugins wasn’t as straightforward as we’d wanted it to be.
+Using Nx at that level is definitely useful as you get intelligent parallelization, task pipelines and caching. But it is just the tip of the iceberg of what Nx is actually capable of. Nx plugins provide much more, especially in terms of DX and developer productivity by taking away some of the burden of configuring your monorepo tooling. But many devs new to Nx found it harder to get started with them initially and incrementally migrating to Nx plugins wasn't as straightforward as we'd wanted it to be.
-This is something that’s gonna change drastically in 2024. And we’ve layed the first cornerstone for that. But it is behind a feature flag still as we’re streamlining the last bits. The goal?
+This is something that's gonna change drastically in 2024. And we've layed the first cornerstone for that. But it is behind a feature flag still as we're streamlining the last bits. The goal?
- Going almost configuration-less (good defaults, you customize when you need to)
- Allowing easy drop-in of Nx plugins into existing workspaces (provides immediate productivity gains, but stays out of your way)
-This opens up a series of possibilities which we’re already super excited about. You’ll hear more about this in the new year ;)
+This opens up a series of possibilities which we're already super excited about. You'll hear more about this in the new year ;)
## Rust for Speed, Typescript for Extensibility
-At Nx, we’ve heavily embraced Typescript from the beginning, and we’ve been very happy with that decision.
+At Nx, we've heavily embraced Typescript from the beginning, and we've been very happy with that decision.
-If you’ve been paying attention to previous release announcements though, you’ve probably noticed that we’ve been moving more and more of the computationally intensive and performance critical pieces of the core of Nx from Typescript to Rust.
+If you've been paying attention to previous release announcements though, you've probably noticed that we've been moving more and more of the computationally intensive and performance critical pieces of the core of Nx from Typescript to Rust.
-That trend continues in Nx 17.2 with Nx [using Rust for its task hashing by default](https://github.com/nrwl/nx/pull/19617). There’s no adjustments needed for this change, and Nx will continue to behave the same way, just faster!
+That trend continues in Nx 17.2 with Nx [using Rust for its task hashing by default](https://github.com/nrwl/nx/pull/19617). There's no adjustments needed for this change, and Nx will continue to behave the same way, just faster!
{% tweet url="https://twitter.com/victorsavkin/status/1724464283227234420" /%}
## Module Federation Updates
-Module Federation has been a particularly hot topic lately, and 17.2 is coming in with some great enhancements to Nx’s already best-in-class support for Module Federation!
+Module Federation has been a particularly hot topic lately, and 17.2 is coming in with some great enhancements to Nx's already best-in-class support for Module Federation!
-To start, we’ve greatly reduced the CPU and memory used for standing up your Module Federation “web” locally. These enhancements should be great news to larger workspaces using a Module Federation approach, where there were heavy CPU and memory costs to serving your entire federation locally.
+To start, we've greatly reduced the CPU and memory used for standing up your Module Federation "web" locally. These enhancements should be great news to larger workspaces using a Module Federation approach, where there were heavy CPU and memory costs to serving your entire federation locally.
We accomplished these improvements by batching any applications that are not being watched for changes (listed with the `--devRemotes` option) to a single server, rather than a unique server for each application. We also parallelized the builds of these static applications when you start up your serve! You can now use the `--parallel={number}` option to specify how many builds you want going at any given time.
-In addition to performance improvements, we’ve brought the concept of dynamic federation to our React module federation support. Dynamic federation allows a host application to dynamically load remotes via the manifest file.
+In addition to performance improvements, we've brought the concept of dynamic federation to our React module federation support. Dynamic federation allows a host application to dynamically load remotes via the manifest file.
You can generate your react module federation workspace now to use dyanmic federation via the `--dynamic` flag:
@@ -80,7 +81,7 @@ Lastly, we have an [example repo](https://github.com/jaysoo/nx-react-vite-module
Nx 17 launched with the new `nx release` capability in the Nx CLI. Since then we've been streamlining the experience, accounting for various edge cases and release scenarios. (extensive docs are being worked on rn ;)
-To give you full flexibility, in 17.2, we’ve added a programmatic API, which will allow you to easily write custom release scripts:
+To give you full flexibility, in 17.2, we've added a programmatic API, which will allow you to easily write custom release scripts:
```ts
import { releaseChangelog, releasePublish, releaseVersion } from 'nx/release';
@@ -98,9 +99,9 @@ import { releaseChangelog, releasePublish, releaseVersion } from 'nx/release';
})();
```
-This script above demonstrates how you can use this API to create your own script for updating your workspace’s version, then creating a changelog, and then publishing your package!
+This script above demonstrates how you can use this API to create your own script for updating your workspace's version, then creating a changelog, and then publishing your package!
-We’ve also added first class support for independently released projects, meaning you can now target a specific project for release with the `--projects` command. For example, you can create a new version for just one project in your workspace with the command:
+We've also added first class support for independently released projects, meaning you can now target a specific project for release with the `--projects` command. For example, you can create a new version for just one project in your workspace with the command:
```shell
nx release version patch --project=my-project
@@ -140,19 +141,19 @@ nx migrate latest --interactive
## Smart Monorepos — Fast CI
-We just gave our Nx homepage a small facelift, including a new tagline, subtagline and illustration to better reflect Nx’s mission statement.
+We just gave our Nx homepage a small facelift, including a new tagline, subtagline and illustration to better reflect Nx's mission statement.
When you enter the monorepo space, having good local development experience and tooling to support you is one thing, scaling is the other. And scaling comes with multiple challenges, from scaling teams working on the monorepo to maintaining high throughput on CI.
-The latter is a common headache and we’ve seen companies struggle. With Nx we’re moving into the direction of becoming your e2e solution for monorepos, where we don’t just cover your local dev experience, but also provide robust and scalable solutions on CI.
+The latter is a common headache and we've seen companies struggle. With Nx we're moving into the direction of becoming your e2e solution for monorepos, where we don't just cover your local dev experience, but also provide robust and scalable solutions on CI.
-We’re super excited to have launched “Nx Agents” to Early Access. If you haven’t seen Victor’s video yet about how he reduced e2e tests from 90 minutes to 10, then make sure to [check it out](/ci/features/distribute-task-execution).
+We're super excited to have launched "Nx Agents" to Early Access. If you haven't seen Victor's video yet about how he reduced e2e tests from 90 minutes to 10, then make sure to [check it out](/ci/features/distribute-task-execution).
-**“Nx Agents”** are the next iteration of DTE, providing a more flexible, cost effective and more performant approach to distribution on CI. This includes things like being able to dynamically allocate machines based on the size of the PR and flaky task detection and re-running. Also, it can be configured with a single line:
+**"Nx Agents"** are the next iteration of DTE, providing a more flexible, cost effective and more performant approach to distribution on CI. This includes things like being able to dynamically allocate machines based on the size of the PR and flaky task detection and re-running. Also, it can be configured with a single line:
```yaml
- name: Start CI run
@@ -160,11 +161,11 @@ We’re super excited to have launched “Nx Agents” to Early Access. If you h
...
```
-You can run Nx Agents on any CI provider. If you’re curious, [sign up for early access](https://go.nx.dev/nx-agents-ea)!
+You can run Nx Agents on any CI provider. If you're curious, [sign up for early access](https://go.nx.dev/nx-agents-ea)!
## New Canary Releases
-We’ve added a new npm release tag: canary!
+We've added a new npm release tag: canary!
@@ -182,7 +183,7 @@ This should be useful for previewing new not-yet released features!
{% youtube src="https://www.youtube.com/embed/OXXTUjSO1hs?si=iDFETYdpg-0BrAIP" title="Nx 17.2 Release Livestream" /%}
-We’re going live in January with the Nx team to go over these updates as well! Be sure to click the link to get notified when we go live! And feel free to come with your questions in the chat!
+We're going live in January with the Nx team to go over these updates as well! Be sure to click the link to get notified when we go live! And feel free to come with your questions in the chat!
## Automatically Update Nx
@@ -201,7 +202,7 @@ npx nx migrate --run-migrations
## Wrapping up
-That’s all for now folks! We’re just starting up a new iteration of development on Nx, so be sure to subscribe to our [YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
+That's all for now folks! We're just starting up a new iteration of development on Nx, so be sure to subscribe to our [YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
---
diff --git a/docs/blog/2023-12-28-highlights-2023.md b/docs/blog/2023-12-28-highlights-2023.md
index 6c0d7a5cba15a..207aff654e45c 100644
--- a/docs/blog/2023-12-28-highlights-2023.md
+++ b/docs/blog/2023-12-28-highlights-2023.md
@@ -4,6 +4,7 @@ slug: 'nx-highlights-of-2023'
authors: [Juri Strumpflohner, Victor Savkin, Zack DeRose]
cover_image: /blog/images/2023-12-28/featured_img.png
tags: [nx, nx-cloud]
+description: "Nx's 2023 highlights - Rust for performance, Vite support, publishing improvements, new backend tools, expanded IDE support, Playwright integration, TypeScript enhancements, Vue plugin, and community growth."
---
It is that time again: getting flooded by Year of Review blog posts. We did it last year, and we should do it again! So here we go, and be warned, 2023 was massive!!
@@ -13,7 +14,7 @@ It is that time again: getting flooded by Year of Review blog posts. We did it l
- [Top 10 Nx Highlights of 2023](#top-10-nx-highlights-of-2023)
- [TypeScript for Extensibility — Rust for Speed](#typescript-for-extensibility-rust-for-speed)
- [First Class Vite Support](#first-class-vite-support)
- - [Nx’t Level Publishing](#nxt-level-publishing)
+ - [Nx't Level Publishing](#nxt-level-publishing)
- [Improved Node Backend Development: Fastify and Docker](#improved-node-backend-development-fastify-and-docker)
- [Nx Console support for IntelliJ](#nx-console-support-for-intellij)
- [Playwright for e2e testing](#playwright-for-e2e-testing)
@@ -38,7 +39,7 @@ We've picked out 10 highlights for you.
### TypeScript for Extensibility — Rust for Speed
-At Nx, we’ve heavily embraced Typescript from the beginning and we’ve been very happy with that decision. Nx also stands as the [fastest JS monorepo tool](https://github.com/vsavkin/large-monorepo) available, demonstrating that adopting TypeScript does not necessarily compromise speed. However, we don’t stop here. To push the boundaries further, we started to rewrite the most performance critical and computationally intensive parts of the Nx core in Rust.
+At Nx, we've heavily embraced Typescript from the beginning and we've been very happy with that decision. Nx also stands as the [fastest JS monorepo tool](https://github.com/vsavkin/large-monorepo) available, demonstrating that adopting TypeScript does not necessarily compromise speed. However, we don't stop here. To push the boundaries further, we started to rewrite the most performance critical and computationally intensive parts of the Nx core in Rust.
Our initial focus was on [rewriting the task hasher](/blog/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook), previously reliant on Git with a Node fallback. This shift to Rust brings a noticeable performance boost, particularly in large repositories, while maintaining the same user experience.
@@ -50,9 +51,9 @@ Such enhancements are especially crucial for the efficient [project graph calcul
### First Class Vite Support
-Vite is rapidly transforming the landscape of frontend development! Its refreshing simplicity and innovative approach have made a significant mark in the developer community. What truly stands out is not just Vite’s technological aspect but also how its team approaches and grows the community around the tool. Vite stands for speed and community, values that deeply resonate with us here at Nx.
+Vite is rapidly transforming the landscape of frontend development! Its refreshing simplicity and innovative approach have made a significant mark in the developer community. What truly stands out is not just Vite's technological aspect but also how its team approaches and grows the community around the tool. Vite stands for speed and community, values that deeply resonate with us here at Nx.
-Our collaboration with our friends in the Vite core team has been incredibly fruitful. Vite is not just compatible but a first-class option with many of Nx’s frontend plugins. When you create a new Nx powered React workspace, Vite (and [Vitest](https://vitest.dev/)) are your default options.
+Our collaboration with our friends in the Vite core team has been incredibly fruitful. Vite is not just compatible but a first-class option with many of Nx's frontend plugins. When you create a new Nx powered React workspace, Vite (and [Vitest](https://vitest.dev/)) are your default options.
@@ -60,21 +61,21 @@ We also built some powerful code generators that not only facilitate a seamless
[AnalogJS](https://analogjs.org/) — the fullstack Angular meta-framework which also heavily builds on top of Vite — is using the `@nx/vite` plugin to power its Angular and Nx based workspaces.
-We also spoke at both editions of [ViteConf](https://viteconf.org/23/). If you’re curious check out [Juri’s talk about High Speed Monorepos](https://www.youtube.com/watch?si=A5Nkg3rxe3DlODc4&v=TiU-hdn7_To&feature=youtu.be) and this year’s talk by [Katerina on Streamlining your Vite dev flow with Nx](https://www.youtube.com/watch?si=A5Nkg3rxe3DlODc4&v=TiU-hdn7_To&feature=youtu.be).
+We also spoke at both editions of [ViteConf](https://viteconf.org/23/). If you're curious check out [Juri's talk about High Speed Monorepos](https://www.youtube.com/watch?si=A5Nkg3rxe3DlODc4&v=TiU-hdn7_To&feature=youtu.be) and this year's talk by [Katerina on Streamlining your Vite dev flow with Nx](https://www.youtube.com/watch?si=A5Nkg3rxe3DlODc4&v=TiU-hdn7_To&feature=youtu.be).
-### Nx’t Level Publishing
+### Nx't Level Publishing
-Open source libraries and frameworks share a common necessity: the need to develop multiple packages cohesively and efficiently while managing their versioning and publishing to NPM. Nx has emerged as a go-to choice for handling such open source monorepos (as we’ll explore further in the next section of this blog post). Until recently, one area Nx did not address directly was versioning and release management. Traditionally, this gap has been filled with tools like [release-it](https://github.com/release-it/release-it), [changesets](https://github.com/changesets/changesets), or custom Node scripts, similar to our approach in the Nx repository.
+Open source libraries and frameworks share a common necessity: the need to develop multiple packages cohesively and efficiently while managing their versioning and publishing to NPM. Nx has emerged as a go-to choice for handling such open source monorepos (as we'll explore further in the next section of this blog post). Until recently, one area Nx did not address directly was versioning and release management. Traditionally, this gap has been filled with tools like [release-it](https://github.com/release-it/release-it), [changesets](https://github.com/changesets/changesets), or custom Node scripts, similar to our approach in the Nx repository.
-However, many in our community have expressed a desire for a more native, integrated experience for versioning and publishing, akin to what Lerna offers. In response to this feedback, we’ve introduced [the “nx release” command](/features/manage-releases), a solution designed to seamlessly integrate these processes into the Nx workflow.
+However, many in our community have expressed a desire for a more native, integrated experience for versioning and publishing, akin to what Lerna offers. In response to this feedback, we've introduced [the "nx release" command](/features/manage-releases), a solution designed to seamlessly integrate these processes into the Nx workflow.
-James Henry gave a deep dive talk of an early version of it at this year’s Nx Conf:
+James Henry gave a deep dive talk of an early version of it at this year's Nx Conf:
{% youtube src="https://www.youtube.com/embed/p5qW5-2nKqI" /%}
-Since its introduction, the “nx release” feature has significantly evolved, leveraging the power of the Nx project graph to effectively understand inter-package dependencies. This understanding is crucial as it allows for:
+Since its introduction, the "nx release" feature has significantly evolved, leveraging the power of the Nx project graph to effectively understand inter-package dependencies. This understanding is crucial as it allows for:
-- Versioning packages offering support for both independent and “locked” versioning strategies.
+- Versioning packages offering support for both independent and "locked" versioning strategies.
- Releasing packages in the correct sequence, ensuring dependency integrity.
Beyond these core functionalities, the feature also includes a robust grouping mechanism, supports semantic versioning, and changelog generation. Additionally, it provides various release targets, such as GitHub and NPM. For those having special requirements, the [programmatic API](/features/manage-releases#using-the-programmatic-api-for-nx-release) offers maximum flexibility.
@@ -83,21 +84,21 @@ Beyond these core functionalities, the feature also includes a robust grouping m
Colocating frontend and backend code within the same monorepo has become a popular practice. It greatly facilitates cross-functional teams and helps ensure end-to-end type safety. Although you can use [other backend stacks](https://www.nx-dotnet.com/) with Nx, Node is a popular backend companion for JS based frontends. We had support for [Express](https://expressjs.com/) and [NestJS](https://nestjs.com/) backend for a while.
-This year we added another popular option: [Fastify](https://fastify.dev/). Known for its high performance, excellent developer experience, and useful built-in features like logging, Fastify aligns well with Nx’s modular software design principles. Its extensible and modular nature complements the Nx philosophy perfectly.
+This year we added another popular option: [Fastify](https://fastify.dev/). Known for its high performance, excellent developer experience, and useful built-in features like logging, Fastify aligns well with Nx's modular software design principles. Its extensible and modular nature complements the Nx philosophy perfectly.
{% youtube src="https://www.youtube.com/embed/LHLW0b4fr2w?si=WeTqm5msQxssQ_d3" /%}
-In tandem with Fastify, we’ve also introduced [Docker support](https://youtu.be/LHLW0b4fr2w?feature=shared) for Node deployments.
+In tandem with Fastify, we've also introduced [Docker support](https://youtu.be/LHLW0b4fr2w?feature=shared) for Node deployments.
### Nx Console support for IntelliJ
-Nx Console has evolved from an experimental side project of the Nx team to a core part for enhancing your productivity when working in a monorepo. Being integrated right into your editor it can provide useful information and functionality right where you need it, whether that’s running commands, [providing contextual autocomplete support](https://twitter.com/juristr/status/1653032530474565638) or the ability to explore the project and task graph.
+Nx Console has evolved from an experimental side project of the Nx team to a core part for enhancing your productivity when working in a monorepo. Being integrated right into your editor it can provide useful information and functionality right where you need it, whether that's running commands, [providing contextual autocomplete support](https://twitter.com/juristr/status/1653032530474565638) or the ability to explore the project and task graph.
This year we not only added a lot of new features to Nx Console, but also rewrote its [internals](/blog/nx-console-gets-lit) which paved the way to expand Nx Console to other code editors: **JetBrains IDEs.**
-Yes, this means you can now use the latest Nx Console directly in your [Webstorm IDE](https://www.jetbrains.com/webstorm/). Read the [announcement blog post](/blog/expanding-nx-console-to-jetbrains-ides) for all the details or go ahead and install Nx Console if you didn’t already:
+Yes, this means you can now use the latest Nx Console directly in your [Webstorm IDE](https://www.jetbrains.com/webstorm/). Read the [announcement blog post](/blog/expanding-nx-console-to-jetbrains-ides) for all the details or go ahead and install Nx Console if you didn't already:
- [Nx Console for VSCode](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
- [Nx Console for IntelliJ](https://plugins.jetbrains.com/plugin/21060-nx-console)
@@ -189,11 +190,11 @@ Similarly we improved the ability to package your TS libraries in multiple forma
}
```
-Here’s a video that walks you through:
+Here's a video that walks you through:
{% youtube src="https://www.youtube.com/embed/Vy4d0-SF5cY?si=mHatqRPRqHAK0X9o" /%}
-But we wouldn’t be talking about Nx if we didn’t also look into speeding up TypeScript compilation for large monorepos. We called it “[batch mode](/showcase/benchmarks/tsc-batch-mode)”. When enabling batch mode, Nx leverages the underlying [project graph](/features/explore-graph) to generate TypeScript project references behind the scenes for you, to fully leverage TS incremental building. The results are amazing. According to [our benchmarks](https://github.com/nrwl/large-ts-monorepo), batch mode has the potential to speed up Typescript compilation by up to 5x for large monorepos.
+But we wouldn't be talking about Nx if we didn't also look into speeding up TypeScript compilation for large monorepos. We called it "[batch mode](/showcase/benchmarks/tsc-batch-mode)". When enabling batch mode, Nx leverages the underlying [project graph](/features/explore-graph) to generate TypeScript project references behind the scenes for you, to fully leverage TS incremental building. The results are amazing. According to [our benchmarks](https://github.com/nrwl/large-ts-monorepo), batch mode has the potential to speed up Typescript compilation by up to 5x for large monorepos.
@@ -205,7 +206,7 @@ Vue is currently the second most popular frontend framework (according to npm do
-The first place your might notice Nx’s support for Vue is in the `create-nx-workspace` script:
+The first place your might notice Nx's support for Vue is in the `create-nx-workspace` script:
@@ -215,7 +216,7 @@ The option above will create a new Nx workspace with a fresh new Vue application
% npm add -D @nx/vue
```
-And you’ll then have access to Nx generators so you can create Vue applications, libraries, and more in your workspace!
+And you'll then have access to Nx generators so you can create Vue applications, libraries, and more in your workspace!
@@ -223,9 +224,9 @@ Checkout out our [Vue standalone tutorial](/getting-started/tutorials/vue-standa
### Extending Nx: Local Generators, Build your Own CLI, Verdaccio Support
-Extensibility is at the heart of Nx, serving as the cornerstone of its flexibility. It enables the Nx core team to continually expand capabilities through dedicated plugins and simultaneously paves the way for a rich array of [community plugin contributions](/plugin-registry). Furthermore, Nx’s adaptable nature is particularly beneficial for large enterprises, as it allows for the creation of custom automation solutions, specifically tailored to meet their unique organizational needs.
+Extensibility is at the heart of Nx, serving as the cornerstone of its flexibility. It enables the Nx core team to continually expand capabilities through dedicated plugins and simultaneously paves the way for a rich array of [community plugin contributions](/plugin-registry). Furthermore, Nx's adaptable nature is particularly beneficial for large enterprises, as it allows for the creation of custom automation solutions, specifically tailored to meet their unique organizational needs.
-In 2023 we kept improving Nx’s extensibility, unifying the Nx plugin development model and how you develop workspace-local automations. You can now scaffold a new plugin into your Nx workspace and run it right away which makes it an interesting approach to automate your monorepo.
+In 2023 we kept improving Nx's extensibility, unifying the Nx plugin development model and how you develop workspace-local automations. You can now scaffold a new plugin into your Nx workspace and run it right away which makes it an interesting approach to automate your monorepo.
{% youtube src="https://www.youtube.com/embed/myqfGDWC2go?si=q6_9JReS1nF8d3pZ" /%}
@@ -241,7 +242,7 @@ We wanted to make building on top of Nx even more pleasant, allowing you to intr
npx create-qwik-nx
```
-And finally, we extracted our own [Verdaccio](https://verdaccio.org/) setup that we’ve been using to run our e2e tests in the [Nx repo](https://github.com/nrwl/nx) s.t. you can use it for your own plugin development as well. Check out [this video](https://www.youtube.com/watch?v=t1c925TzrzE) for a walkthrough on how this works.
+And finally, we extracted our own [Verdaccio](https://verdaccio.org/) setup that we've been using to run our e2e tests in the [Nx repo](https://github.com/nrwl/nx) s.t. you can use it for your own plugin development as well. Check out [this video](https://www.youtube.com/watch?v=t1c925TzrzE) for a walkthrough on how this works.
### Module Federation
@@ -251,17 +252,17 @@ Simply put, Module Federation allows a Javascript application running in a brows
This is an exciting development as it allows a paradigm shift in how you can architect, build, and deploy Javascript applications! And this is especially exciting for monorepo fans, as Nx has best-in-class support for module federation that makes a Module Federation approach easy to adopt and simple to understand!
-Currently, our `@nx/angular` and `@nx/react` plugins both have generators to [create a “host” application](/recipes/module-federation/create-a-host) that will load and consume federated modules from [“remote” applications](/recipes/module-federation/create-a-remote), which you can also generate using Nx. Then, by running a simple command with Nx, you can serve all applications required for your host application with the command:
+Currently, our `@nx/angular` and `@nx/react` plugins both have generators to [create a "host" application](/recipes/module-federation/create-a-host) that will load and consume federated modules from ["remote" applications](/recipes/module-federation/create-a-remote), which you can also generate using Nx. Then, by running a simple command with Nx, you can serve all applications required for your host application with the command:
```shell
nx serve host-application --devRemotes=remote-application
```
-Where in the example above your host application is named “host-application” and a remote application that you want live updates on as you’re developing is named “remote-application”.
+Where in the example above your host application is named "host-application" and a remote application that you want live updates on as you're developing is named "remote-application".
-Throughout 2023, we’ve continued to increase Nx’s support and general dev experience around Module Federation, including [adding a generator to federate an existing module](/recipes/module-federation/federate-a-module), improving the local developer experience by improving local webserver performance, and introducing the concept of [Dynamic Module Federation](/recipes/angular/dynamic-module-federation-with-angular#advanced-angular-micro-frontends-with-dynamic-module-federation) which will allow you to dynamically specify the location of your remote applications via a “module-federation.manifest.json” file!
+Throughout 2023, we've continued to increase Nx's support and general dev experience around Module Federation, including [adding a generator to federate an existing module](/recipes/module-federation/federate-a-module), improving the local developer experience by improving local webserver performance, and introducing the concept of [Dynamic Module Federation](/recipes/angular/dynamic-module-federation-with-angular#advanced-angular-micro-frontends-with-dynamic-module-federation) which will allow you to dynamically specify the location of your remote applications via a "module-federation.manifest.json" file!
-At Nx, we’re excited about the Module Federation support we offer for our users, and think that it has many interesting applications when paired with Nx’s CI capabilities, in particular allowing for [much shorter build times](/concepts/module-federation/faster-builds-with-module-federation) especially for larger Angular applications.
+At Nx, we're excited about the Module Federation support we offer for our users, and think that it has many interesting applications when paired with Nx's CI capabilities, in particular allowing for [much shorter build times](/concepts/module-federation/faster-builds-with-module-federation) especially for larger Angular applications.
## Many OSS repos adopt Nx
@@ -276,13 +277,13 @@ Numerous open-source packages are adopting Nx in this lightweight manner. It ena
I picked out some of the more well-known OSS repos that started using Nx this year:
-[**Tanstack**](https://tanstack.com/) — Tanstack has evolved to an entire ecosystem consisting of the famous [Tanstack (or React) Query](https://github.com/tanstack/query), [Tanstack Table](https://github.com/tanstack/table), now also [Tanstack Router](https://github.com/tanstack/router) and [Tanstack Form](https://github.com/tanstack/form). It started with Tanstack Query, which adopted Nx and Nx Cloud. [Zack talked about this collab with Dominik](https://www.youtube.com/watch?v=NvPXK6DVZGE), and we also had [Dominik](https://twitter.com/TkDodo) on our [Nx live stream](https://www.youtube.com/live/IbU6b6s0H1Q?si=0QZexPwulLXB9FIN). Now, all the above-mentioned Tanstack libs have adopted Nx, and there’s more coming.
+[**Tanstack**](https://tanstack.com/) — Tanstack has evolved to an entire ecosystem consisting of the famous [Tanstack (or React) Query](https://github.com/tanstack/query), [Tanstack Table](https://github.com/tanstack/table), now also [Tanstack Router](https://github.com/tanstack/router) and [Tanstack Form](https://github.com/tanstack/form). It started with Tanstack Query, which adopted Nx and Nx Cloud. [Zack talked about this collab with Dominik](https://www.youtube.com/watch?v=NvPXK6DVZGE), and we also had [Dominik](https://twitter.com/TkDodo) on our [Nx live stream](https://www.youtube.com/live/IbU6b6s0H1Q?si=0QZexPwulLXB9FIN). Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.
-[**Sentry JavaScript**](https://github.com/getsentry/sentry-javascript/) — Sentry, renowned for its comprehensive solutions in frontend monitoring and error logging, recently adopted Nx for their [official JavaScript SDK](https://github.com/getsentry/sentry-javascript/). This move integrates Nx’s capabilities into their monorepo, containing packages for popular frontend and Node.js backend integrations. They also published a blog post on [the benefits they’ve seen following the adoption of Nx in their monorepo](https://sentry.engineering/blog/reduce-ci-time-with-nx-caching) (hint: reducing CI times by 35%).
+[**Sentry JavaScript**](https://github.com/getsentry/sentry-javascript/) — Sentry, renowned for its comprehensive solutions in frontend monitoring and error logging, recently adopted Nx for their [official JavaScript SDK](https://github.com/getsentry/sentry-javascript/). This move integrates Nx's capabilities into their monorepo, containing packages for popular frontend and Node.js backend integrations. They also published a blog post on [the benefits they've seen following the adoption of Nx in their monorepo](https://sentry.engineering/blog/reduce-ci-time-with-nx-caching) (hint: reducing CI times by 35%).
-[**RxJS**](https://github.com/ReactiveX/rxjs) — The library for reactive programming in JavaScript. It is widely popular, with over 40 million downloads/week on NPM. RxJS only recently adopted Nx, not only leveraging speed improvements via caching, but also leveraging Nx’s latest `nx release` feature to publish packages to NPM.
+[**RxJS**](https://github.com/ReactiveX/rxjs) — The library for reactive programming in JavaScript. It is widely popular, with over 40 million downloads/week on NPM. RxJS only recently adopted Nx, not only leveraging speed improvements via caching, but also leveraging Nx's latest `nx release` feature to publish packages to NPM.
-[**AnalogJS**](https://analogjs.org/) — Analog is a full-stack Angular meta-framework that brings exciting features to Angular, like faster Vite setup, support for both server-side and static rendering, and easy file-based routing. Analog uses an Nx monorepo for its development and also uses [Nx’s DevKit](/extending-nx/intro/getting-started) to create tools that work great in both Nx and Angular CLI workspaces.
+[**AnalogJS**](https://analogjs.org/) — Analog is a full-stack Angular meta-framework that brings exciting features to Angular, like faster Vite setup, support for both server-side and static rendering, and easy file-based routing. Analog uses an Nx monorepo for its development and also uses [Nx's DevKit](/extending-nx/intro/getting-started) to create tools that work great in both Nx and Angular CLI workspaces.
[**Qwikifier**](https://github.com/qwikifiers/qwik-nx) — The Qwikifiers community built a dedicated Nx plugin to combine the power of Qwik and Nx. Their repo is a great example of building Nx plugins and [using Nx to build your own CLI](/extending-nx/recipes/create-install-package).
@@ -290,11 +291,11 @@ I picked out some of the more well-known OSS repos that started using Nx this ye
[**Ghost**](https://github.com/TryGhost/Ghost) — Are you into blogging? You might want to look at [Ghost](https://ghost.org/). They were using Lerna in the past and migrated to a fully Nx-powered workspace.
-And these are just some of them that joined in 2023. If I missed some cool ones (which I’m pretty sure), [ping me](https://twitter.com/juristr) and let me know!
+And these are just some of them that joined in 2023. If I missed some cool ones (which I'm pretty sure), [ping me](https://twitter.com/juristr) and let me know!
## Nx Community
-Nx has a huge community! We’re lucky to have so many folks rooting for Nx, whether on socials, talking at conferences, writing blog posts or [creating awesome plugins](/plugin-registry).
+Nx has a huge community! We're lucky to have so many folks rooting for Nx, whether on socials, talking at conferences, writing blog posts or [creating awesome plugins](/plugin-registry).
**Nx Champions** — This year we finally launched which we had planned for a long time. Our [Nx Champions](/community) program.
@@ -308,16 +309,16 @@ Make sure [you join](https://go.nx.dev/community)!
## New Content & Improved Docs
-Our [Youtube channel](https://www.youtube.com/@nxdevtools) has grown to over 15k subscribers and peaks of 65k views a month. We love to provide educational video content, so make sure to subscribe! It got a little silent towards the end of the year, but we’ve been working a lot behind the scenes. So stay tuned!
+Our [Youtube channel](https://www.youtube.com/@nxdevtools) has grown to over 15k subscribers and peaks of 65k views a month. We love to provide educational video content, so make sure to subscribe! It got a little silent towards the end of the year, but we've been working a lot behind the scenes. So stay tuned!
-We also poured a lot of [effort into the docs](/getting-started/intro). We restructured them following the [Diataxis](https://diataxis.fr/) to make pages less overwhelming and more structured based on their type of content. You’ll find
+We also poured a lot of [effort into the docs](/getting-started/intro). We restructured them following the [Diataxis](https://diataxis.fr/) to make pages less overwhelming and more structured based on their type of content. You'll find
- [**Concept docs**](/concepts) — which explain some of the inner workings and mental model behind certain features. Like [how caching works](/concepts/how-caching-works).
- [**Recipes**](/recipes) — which are solution oriented. You already know how to cook, we provide the exact recipe for it.
- [**Tutorials**](/getting-started/tutorials) — for when you just want to sit down and follow along, step by step to learn how to use Nx in a certain context.
- [**Reference**](/reference) and [**API docs**](/nx-api) — pure, raw and to the point.
-We created a brand new [“Why Nx”](/getting-started/why-nx) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of.
+We created a brand new ["Why Nx"](/getting-started/why-nx) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of.
We also refreshed our [entry pages](/getting-started/intro), including dedicated examples of using Nx with popular stacks:
@@ -331,13 +332,13 @@ And obviously, we jumped on the AI train as well. A couple of months ago, we add
## New Tagline: Smart Monorepos — Fast CI
-Nx stands out for its flexibility, accommodating for both monorepo and non-monorepo project structures. This approach allows users to begin with simpler project configurations, leveraging the benefits of Nx’s robust tooling, and later, when the need arises, seamlessly [migrate to a monorepo](/recipes/tips-n-tricks/standalone-to-monorepo).
+Nx stands out for its flexibility, accommodating for both monorepo and non-monorepo project structures. This approach allows users to begin with simpler project configurations, leveraging the benefits of Nx's robust tooling, and later, when the need arises, seamlessly [migrate to a monorepo](/recipes/tips-n-tricks/standalone-to-monorepo).
-However, Nx’s true strength becomes most apparent at scale, typically within a monorepo setup. We wanted to capture it in our new tagline: **Smart Monorepos — Fast CI**.
+However, Nx's true strength becomes most apparent at scale, typically within a monorepo setup. We wanted to capture it in our new tagline: **Smart Monorepos — Fast CI**.
{% tweet url="https://twitter.com/juristr/status/1734558895547568634" /%}
-Setting up an efficient and maintainable CI process for monorepos can be a complex task, so we’ve also made it a focal point in our new tagline. Nx expands beyond the local development experience, helping you set up an efficient CI process. We’re publicly launching [Nx Agents](/ci/features/distribute-task-execution) to add seamless distribution to your CI pipeline, and more are coming in 2024.
+Setting up an efficient and maintainable CI process for monorepos can be a complex task, so we've also made it a focal point in our new tagline. Nx expands beyond the local development experience, helping you set up an efficient CI process. We're publicly launching [Nx Agents](/ci/features/distribute-task-execution) to add seamless distribution to your CI pipeline, and more are coming in 2024.
As part of that, we also restructured our docs to have a section entirely dedicated to CI: [/ci](/ci/intro/ci-with-nx).
@@ -347,7 +348,7 @@ We did it again! The second in-person Nx Conf was a resounding success, this tim
-There’s not much to say. Check out some of the amazing talks. I did a [Nx Conf 2023 recap blog post](/blog/nx-conf-2023-recap).
+There's not much to say. Check out some of the amazing talks. I did a [Nx Conf 2023 recap blog post](/blog/nx-conf-2023-recap).
## Looking ahead — 2024
@@ -355,7 +356,7 @@ Although we shipped a lot in 2023, in many ways 2023 was about preparing for wha
### Solving CI
-Legacy CI systems are a performance and productivity bottleneck if you use a powerful build system like Nx. Big tech companies know it and that’s why their CI systems look nothing like Circle or Jenkins. We’ve been narrowing this gap over the years, but only this year we finally built a turn-key CI solution that gives you great performance, scalability, dev ergonomics, and must better cost efficiency.
+Legacy CI systems are a performance and productivity bottleneck if you use a powerful build system like Nx. Big tech companies know it and that's why their CI systems look nothing like Circle or Jenkins. We've been narrowing this gap over the years, but only this year we finally built a turn-key CI solution that gives you great performance, scalability, dev ergonomics, and must better cost efficiency.
It has three components:
@@ -369,13 +370,13 @@ Optimal parallelization and distribution, using the right numbers of agents for
Balancing simplicity and power is the trickiest part of the dev tools design. Simple onboarding for small projects or handling the biggest enterprise systems? Two years ago we solved this problem by giving you a choice between the package-based setup (a more powerful version of something like Turborepo) and the integrated setup (we manage your whole monorepo in the most optimal way). But now we believe we have a much better solution, where you have both, the simplicity of the former with the power of the latter. So you no longer have to choose.
-We took inspiration from VSCode. Any project you open in VSCode will work right away: it is simple, and you don’t need to configure anything. If you install say a Playwright plugin, VSCode becomes aware of Playwright. It can run and debug your tests right in the editor. That’s what the Nx experience is going to be like. Any project, any tool will work right away. But if you — for instance — install the Playwright plugin, Nx will become aware of Playwright and will be able to cache test runs in the most optimal way and distribute your e2e tests across machines for best efficiency. All the benefits with none of the costs.
+We took inspiration from VSCode. Any project you open in VSCode will work right away: it is simple, and you don't need to configure anything. If you install say a Playwright plugin, VSCode becomes aware of Playwright. It can run and debug your tests right in the editor. That's what the Nx experience is going to be like. Any project, any tool will work right away. But if you — for instance — install the Playwright plugin, Nx will become aware of Playwright and will be able to cache test runs in the most optimal way and distribute your e2e tests across machines for best efficiency. All the benefits with none of the costs.
The whole team is excited about it as the new experience feels much more elegant.
As always, we try very hard not to break folks, so all your current workspaces will keep working, and we will [provide automatic migrations](/features/automate-updating-dependencies) to bring you to this new way of using Nx.
-Exciting stuff! So keep an eye on our channels, and subscribe if you haven’t already ;)
+Exciting stuff! So keep an eye on our channels, and subscribe if you haven't already ;)
---
diff --git a/docs/blog/2024-02-05-nx-18-project-crystal.md b/docs/blog/2024-02-05-nx-18-project-crystal.md
index bf4e74cb13460..eeb0526bcbc63 100644
--- a/docs/blog/2024-02-05-nx-18-project-crystal.md
+++ b/docs/blog/2024-02-05-nx-18-project-crystal.md
@@ -5,9 +5,10 @@ authors: [Juri Strumpflohner]
cover_image: '/blog/images/2024-02-05/featured_img.png'
tags: [nx, releases]
reposts: []
+description: Introducing Project Crystal in Nx 18, a transformative approach to Nx plugins that makes them more transparent and lightweight, featuring inferred targets, reduced configuration overhead, and improved monorepo adoption.
---
-Enhance, but don’t interfere! That’s the ideal! And this is how extensions work in VSCode (or Webstorm). You can use VSCode without any extension and get some basic functionality, or you can add an extension on top to enhance your experience and, ideally, increase your productivity.
+Enhance, but don't interfere! That's the ideal! And this is how extensions work in VSCode (or Webstorm). You can use VSCode without any extension and get some basic functionality, or you can add an extension on top to enhance your experience and, ideally, increase your productivity.
Table of Contents
@@ -23,14 +24,14 @@ Table of Contents
---
-**Prefer a video? We’ve got you covered!**
+**Prefer a video? We've got you covered!**
{% youtube src="https://www.youtube.com/embed/wADNsVItnsM?si=sQ3-Dlx6KBRBUMkE" title="What if Nx Plugins Were More Like VSCode Extensions" /%}
-Also, make sure to check out [Launch Nx Conf](/launch-nx) on Thursday, Feb 8th, where we’ll have more in-depth talks about Project Crystal as well as other exciting features around Nx and Nx Cloud.
+Also, make sure to check out [Launch Nx Conf](/launch-nx) on Thursday, Feb 8th, where we'll have more in-depth talks about Project Crystal as well as other exciting features around Nx and Nx Cloud.
---
-Take, for instance, the Playwright plugin. You install it, and it’ll automatically detect the Playwright config file and enhance your workspace by providing quick run buttons alongside your tests or even a dedicated Test Explorer window.
+Take, for instance, the Playwright plugin. You install it, and it'll automatically detect the Playwright config file and enhance your workspace by providing quick run buttons alongside your tests or even a dedicated Test Explorer window.
_The Playwright VSCode extension enhancing the developer experience_
@@ -43,13 +44,13 @@ You can add Nx to an existing npm/yarn/pnpm monorepo quite straightforwardly. Yo
npx nx@latest init
```
-You’ll get an `nx` package installed and an `nx.json` allowing you to define [task dependencies](/recipes/running-tasks/defining-task-pipeline) and caching. With that, you're now able to run commands like `nx build ` or nx `run-many -t build test` to run all `build` and `test` targets in your workspace in parallel. Nx will read and use your existing `package.json` scripts. I've written an in-depth [blog post about adopting Nx in such a scenario](/blog/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx).
+You'll get an `nx` package installed and an `nx.json` allowing you to define [task dependencies](/recipes/running-tasks/defining-task-pipeline) and caching. With that, you're now able to run commands like `nx build ` or nx `run-many -t build test` to run all `build` and `test` targets in your workspace in parallel. Nx will read and use your existing `package.json` scripts. I've written an in-depth [blog post about adopting Nx in such a scenario](/blog/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx).
This is the most lightweight setup you can get while still getting some improvements via Nx regarding faster task running and more intelligent parallelization. But, you need to deal with the remaining of the monorepo setup.
## Project Crystal
-Nx always had more to offer, though, which it mainly did through its plugins. They’re optional but usually something you’d get set up when creating a new workspace with `create-nx-workspace`. Nx Plugins are extremely powerful, helping you not only create and configure new monorepos, but also taking away the burden of integrating various tooling as well as providing features for enforcing consistency and helping with maintainability. These aspects are fundamental in enterprise settings, where Nx Plugins have proven to help teams successfully manage their monorepos.
+Nx always had more to offer, though, which it mainly did through its plugins. They're optional but usually something you'd get set up when creating a new workspace with `create-nx-workspace`. Nx Plugins are extremely powerful, helping you not only create and configure new monorepos, but also taking away the burden of integrating various tooling as well as providing features for enforcing consistency and helping with maintainability. These aspects are fundamental in enterprise settings, where Nx Plugins have proven to help teams successfully manage their monorepos.
However, this is a balancing act. More abstraction and automation means more support but also potentially a learning curve and giving up some low-level control. It also requires a slightly more significant upfront investment when migrating to an Nx plugin-powered monorepo.
@@ -74,7 +75,7 @@ When you create a new Nx workspace using
npx create-nx-workspace myorg
```
-... and you choose an “integrated monorepo” you’ll get the usual setup powered by Nx Plugins and all the features and benefits that come with them. Where you’ll see Project Crystal in action is when you open a `project.json` file, which will most likely look like the following:
+... and you choose an "integrated monorepo" you'll get the usual setup powered by Nx Plugins and all the features and benefits that come with them. Where you'll see Project Crystal in action is when you open a `project.json` file, which will most likely look like the following:
```json {% fileName="project.json" }
{
@@ -89,7 +90,7 @@ npx create-nx-workspace myorg
### Inferred Targets
-Starting with Nx 18 and Project Crystal, we don’t generate any targets anymore, but the corresponding Nx plugin instead [infers them](/concepts/inferred-tasks). If we open the `nx.json`, you'll see a new property, `plugins`:
+Starting with Nx 18 and Project Crystal, we don't generate any targets anymore, but the corresponding Nx plugin instead [infers them](/concepts/inferred-tasks). If we open the `nx.json`, you'll see a new property, `plugins`:
```json {% fileName="nx.json" %}
{
diff --git a/docs/blog/2024-02-06-nuxt-js-support-in-nx.md b/docs/blog/2024-02-06-nuxt-js-support-in-nx.md
index f7a408d82923d..d711e7e880e34 100644
--- a/docs/blog/2024-02-06-nuxt-js-support-in-nx.md
+++ b/docs/blog/2024-02-06-nuxt-js-support-in-nx.md
@@ -4,6 +4,7 @@ slug: 'introducing-nx-nuxt-enhanced-nuxt-js-support-in-nx'
cover_image: '/blog/images/2024-02-06/featured_img.png'
authors: ['Katerina Skroumpelou']
tags: [devtools, javascript, monorepos, nuxt]
+description: 'Explore how the new @nx/nuxt plugin enhances Nuxt.js development with automated task recognition and improved monorepo capabilities.'
---
We're excited to introduce a new way to enhance your [Nuxt](https://nuxt.com/) development workflow! After the Vue plugin, we're introducing our new Nx plugin for Nuxt, `@nx/nuxt`. Designed for Nuxt developers and existing Nx users alike, this integration brings the best of both worlds into your development ecosystem, enabling you to leverage Nx's powerful capabilities seamlessly within your Nuxt projects.
@@ -180,7 +181,7 @@ Whether you're starting a new Nuxt project or looking to enhance an existing one
## Nx Live With Nuxt Maintainer Daniel Roe
-Don’t miss Nx team members Zack and Katerina with Nuxt’s maintainer, Daniel Roe — live!
+Don't miss Nx team members Zack and Katerina with Nuxt's maintainer, Daniel Roe — live!
{% youtube src="https://www.youtube.com/watch?v=uHwUxFYX2DY" %}
diff --git a/docs/blog/2024-02-07-fast-effortless-ci.md b/docs/blog/2024-02-07-fast-effortless-ci.md
index 28228f4c3dd67..600b3d18e3fd1 100644
--- a/docs/blog/2024-02-07-fast-effortless-ci.md
+++ b/docs/blog/2024-02-07-fast-effortless-ci.md
@@ -5,6 +5,7 @@ authors: [Isaac Mann]
cover_image: '/blog/images/2024-02-07/featured_img.png'
tags: [nx, nx-cloud, release]
reposts: []
+description: 'Discover how Nx Agents speeds up CI pipelines from 90 to 10 minutes by intelligently distributing tasks and managing resources.'
---
## From 90-minute to 10-minute CI Pipelines
@@ -59,7 +60,7 @@ At any point in the future, if a task is added to the system or there is a chang
## A Build System That Runs Your CI
-Part of the reason CI is so difficult to maintain is that it has no knowledge of your repository. Your CI provider can’t optimize your pipeline because it doesn’t even know the language you’re using, let alone relationships between your projects. A build system, on the other hand, must know all that information in order to properly function.
+Part of the reason CI is so difficult to maintain is that it has no knowledge of your repository. Your CI provider can't optimize your pipeline because it doesn't even know the language you're using, let alone relationships between your projects. A build system, on the other hand, must know all that information in order to properly function.
The key that unlocks all the power of Nx Agents is this architectural shift:
@@ -102,19 +103,19 @@ Nx understands that some CI pipelines need more resources than others. To accoun
## Automatically Split E2E Tasks by File
-Typically, e2e tests are the tasks that take the longest in CI. In order to take advantage of parallelization and task distribution, these large tasks would need to be split into smaller tasks, but doing this manually would involve duplicating a lot of configuration code and making sure to keep that configuration synchronized. Nx 18’s [Project Crystal](/blog/what-if-nx-plugins-were-more-like-vscode-extensions) allows you to [automatically create separate Cypress and Playwright tasks](/ci/features/split-e2e-tasks) for each spec file in the e2e project. These individual tasks can all be triggered by running the `e2e-ci` task. What was once a tedious manual process can now be done for you automatically.
+Typically, e2e tests are the tasks that take the longest in CI. In order to take advantage of parallelization and task distribution, these large tasks would need to be split into smaller tasks, but doing this manually would involve duplicating a lot of configuration code and making sure to keep that configuration synchronized. Nx 18's [Project Crystal](/blog/what-if-nx-plugins-were-more-like-vscode-extensions) allows you to [automatically create separate Cypress and Playwright tasks](/ci/features/split-e2e-tasks) for each spec file in the e2e project. These individual tasks can all be triggered by running the `e2e-ci` task. What was once a tedious manual process can now be done for you automatically.
## Identify and Re-run Flaky Tasks
-There are some tasks that will fail or succeed in CI without any changes to the task’s code. These are flaky tasks and in order to merge a change in unrelated code, developers need to manually re-run the entire pipeline until that flaky task succeeds. Because Nx is already tracking inputs and outputs of tasks, it knows when a task is flaky. Now, Nx Cloud will [automatically re-run a flaky task if it fails](/ci/features/flaky-tasks), without a developer needing to manually trigger it.
+There are some tasks that will fail or succeed in CI without any changes to the task's code. These are flaky tasks and in order to merge a change in unrelated code, developers need to manually re-run the entire pipeline until that flaky task succeeds. Because Nx is already tracking inputs and outputs of tasks, it knows when a task is flaky. Now, Nx Cloud will [automatically re-run a flaky task if it fails](/ci/features/flaky-tasks), without a developer needing to manually trigger it.
## Run Some Tasks on Another CI Provider
-If you have a task that can’t be run on Nx Agents for some reason, you can easily [flag it to run directly on the main CI job](/ci/reference/nx-cloud-cli#enablingdisabling-distribution). Add a `--no-agents` flag to the command and Nx will not run it on an agent.
+If you have a task that can't be run on Nx Agents for some reason, you can easily [flag it to run directly on the main CI job](/ci/reference/nx-cloud-cli#enablingdisabling-distribution). Add a `--no-agents` flag to the command and Nx will not run it on an agent.
---
diff --git a/docs/blog/2024-02-09-versioning-and-releasing-packages.md b/docs/blog/2024-02-09-versioning-and-releasing-packages.md
index 61d3c5a670e8e..738f953e43a4d 100644
--- a/docs/blog/2024-02-09-versioning-and-releasing-packages.md
+++ b/docs/blog/2024-02-09-versioning-and-releasing-packages.md
@@ -2,6 +2,7 @@
title: Versioning and Releasing Packages in a Monorepo
slug: 'versioning-and-releasing-packages-in-a-monorepo'
authors: [Juri Strumpflohner]
+description: 'Learn how to use Nx Release to version and publish packages in your monorepo with conventional commits and automated changelog generation.'
cover_image: '/blog/images/2024-02-09/featured_img.png'
tags: [nx, nx-cloud, releases, changelog]
---
@@ -10,7 +11,7 @@ When it comes to publishing NPM packages, there are a bunch of libraries and uti
Nx already has all that knowledge, and it can leverage the information it has about your project dependencies and relationships to optimize your task runs.
-Here’s the structure of our current example workspace we’re going to refer to in this article:
+Here's the structure of our current example workspace we're going to refer to in this article:
@@ -53,7 +54,7 @@ This brings up a couple of questions including whether to install [Project Cryst
-It gives you some additional benefits ([you can read more here](/blog/what-if-nx-plugins-were-more-like-vscode-extensions)), but you don’t have to as it is not required for Nx Release.
+It gives you some additional benefits ([you can read more here](/blog/what-if-nx-plugins-were-more-like-vscode-extensions)), but you don't have to as it is not required for Nx Release.
## Installing the JavaScript/TypeScript versioning Package
@@ -67,7 +68,7 @@ _(We use the `-w` flag to install it at the monorepo root level)_
## Running Nx Release
-Once you’re set-up, you can already go ahead and run the following command:
+Once you're set-up, you can already go ahead and run the following command:
```shell
pnpm nx release --dry-run
@@ -77,7 +78,7 @@ This command will do the versioning, changelog generation, and publishing steps
-You’ll get asked whether you want to release a major, pre-major, minor… release or choose an exact version.
+You'll get asked whether you want to release a major, pre-major, minor… release or choose an exact version.
Once this runs through, you might hit the following error:
@@ -169,7 +170,7 @@ pnpm nx release --dry-run
-Let’s go ahead and change something in our `@tuskdesign/buttons` package and then commit it as follows:
+Let's go ahead and change something in our `@tuskdesign/buttons` package and then commit it as follows:
```shell
git commit -am 'feat(buttons): add new background shadow'
@@ -229,13 +230,13 @@ Note, you can still use `--dry-run` and it'd show you the URL where the GitHub r
## Programmatic Mode
-As you’ve seen, you can use `nx release` right away with minimal configuration. However, we are very well aware that many real-world scenarios are more complex, you want/need more control over when the version is happening, when the changelog generation kicks in and so on. This is why we also introduced a **programmatic API.**
+As you've seen, you can use `nx release` right away with minimal configuration. However, we are very well aware that many real-world scenarios are more complex, you want/need more control over when the version is happening, when the changelog generation kicks in and so on. This is why we also introduced a **programmatic API.**
-This approach gives you full control to embed Nx Release into your current release flow. There’s a nice [example script in our docs](/features/manage-releases#using-the-programmatic-api-for-nx-release) that can help you get started.
+This approach gives you full control to embed Nx Release into your current release flow. There's a nice [example script in our docs](/features/manage-releases#using-the-programmatic-api-for-nx-release) that can help you get started.
Create a file — I call it `release.ts` - at the root of my workspace. Nx Release obviously doesn't care how the file is called or where you place it. You can also go with plain JS.
-Here’s the [example script from our docs](/features/manage-releases#using-the-programmatic-api-for-nx-release):
+Here's the [example script from our docs](/features/manage-releases#using-the-programmatic-api-for-nx-release):
```ts
import { releaseChangelog, releasePublish, releaseVersion } from 'nx/release';
diff --git a/docs/blog/2024-02-15-launch-week-recap.md b/docs/blog/2024-02-15-launch-week-recap.md
index 33f81c1b50cc3..dee8b2992aa93 100644
--- a/docs/blog/2024-02-15-launch-week-recap.md
+++ b/docs/blog/2024-02-15-launch-week-recap.md
@@ -4,11 +4,12 @@ slug: 'launch-nx-week-recap'
authors: [Zack DeRose]
cover_image: '/blog/images/2024-02-15/featured_img.png'
tags: [nx, nx-cloud, releases, changelog]
+description: 'Explore the major announcements from Launch Nx Week, including Nx 18.0, Project Crystal, Nuxt plugin, Nx Agents, and Tusky AI integration.'
---
We just finished wrapping up [Launch Nx Week](/launch-nx), which ran from February 5–9, including a full conference on Thursday!
-In this article, we’re going to recap all the things launched during Launch Nx Conf, as well as all the talks given during the conference! Here’s a set of links so you can fast-forward to the stuff you’re most interested in if you want!
+In this article, we're going to recap all the things launched during Launch Nx Conf, as well as all the talks given during the conference! Here's a set of links so you can fast-forward to the stuff you're most interested in if you want!
**Prefer a video?**
@@ -29,7 +30,7 @@ In this article, we’re going to recap all the things launched during Launch Nx
## Nx 18.0 && Project Crystal
-Exciting news!! We’ve broken our standard release cadence of publishing a new major version every 6 months to release Nx 18, just 3 months after releasing Nx 17 in December 2024.
+Exciting news!! We've broken our standard release cadence of publishing a new major version every 6 months to release Nx 18, just 3 months after releasing Nx 17 in December 2024.
Juri announced launched Project Crystal with this video:
@@ -39,7 +40,7 @@ The short version is: Nx project crystal means Nx plugins make your codebases wo
For the long version, checkout this blog post by Juri where he describes [how Nx plugins are now more like VsCode Extentions](/blog/what-if-nx-plugins-were-more-like-vscode-extensions)!
-And don’t miss our two conference talks on this subject:
+And don't miss our two conference talks on this subject:
### Conference Talk: Project Crystal
@@ -55,7 +56,7 @@ And don’t miss our two conference talks on this subject:
## New Plugin: @nx/nuxt
-On Tuesday we launched our newest plugin, and our first plugin to be :gem:crystalized:gem: from it’s very beginning: @nx/nuxt!
+On Tuesday we launched our newest plugin, and our first plugin to be :gem:crystalized:gem: from it's very beginning: @nx/nuxt!
Zack explains Nuxt and how to use the new plugin in this video:
@@ -77,7 +78,7 @@ Zack, Katerina, and Daniel got together to live code a working tic-tac-toe app u
Nx Agents are here!! We launched Nx Agents on Wednesday, and it climbed into the top 20 on [Product Hunt](https://www.producthunt.com/products/nx-cloud#nx-agents)!
-We’re very excited about Nx Agents because we think that in its current state, Continuous Integration/Deployment is broken, and we think that Nx paired with Nx Agents fixes Continuous Integration. Zack explains more in this video:
+We're very excited about Nx Agents because we think that in its current state, Continuous Integration/Deployment is broken, and we think that Nx paired with Nx Agents fixes Continuous Integration. Zack explains more in this video:
{% youtube src="https://www.youtube.com/embed/_FSHQIwITic?si=jDpwTVXLYFXiHEm0" title="Nx Agents" /%}
@@ -111,15 +112,15 @@ In the teaser video, you can see some ways Tusky will be integrated into Nx Clou
The more exciting features of Tusky though includes the ability to perfectly optimize the number of agents used per PR — even spinning up and tearing down agents mid-pipeline! This is a huge optimization for task distribution, and will help optimize both walltime of your CI, as well as compute costs!
-Tusky will also be able to provide organizational-level insights to your codebase, including automatically detecting development groups (like lines of business) inside your codebase based on commit history, and providing statistical insights on their commit patterns. We’re also excited about Tusky being able to make suggestions on things you can do to further optimize your codebase — like generating a PR to introduce [Codeowners](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners) to the repo!
+Tusky will also be able to provide organizational-level insights to your codebase, including automatically detecting development groups (like lines of business) inside your codebase based on commit history, and providing statistical insights on their commit patterns. We're also excited about Tusky being able to make suggestions on things you can do to further optimize your codebase — like generating a PR to introduce [Codeowners](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners) to the repo!
## Nx Release Is Stable
Versioning and publishing packages is always a bit tricky. Mix in the added complexity of having multiple packages — sometimes with different versioning or publishing strategies — inside the same codebase, and things can get weird quick!
-For a long time, Nx has been purposefully versioning and publishing agnostic, but given our time spent as [stewards of Lerna](/blog/lerna-is-dead-long-live-lerna) (the OG Javascript monorepo tool), we’ve been able to take alot of that experience and finally feel confident creating our own versioning and publishing implementation.
+For a long time, Nx has been purposefully versioning and publishing agnostic, but given our time spent as [stewards of Lerna](/blog/lerna-is-dead-long-live-lerna) (the OG Javascript monorepo tool), we've been able to take alot of that experience and finally feel confident creating our own versioning and publishing implementation.
-Therefore, we’ve been working on a new command to the Nx CLI: [nx release](/recipes/nx-release/get-started-with-nx-release#get-started-with-nx-release). We launched this on Friday of our Launch Nx week!
+Therefore, we've been working on a new command to the Nx CLI: [nx release](/recipes/nx-release/get-started-with-nx-release#get-started-with-nx-release). We launched this on Friday of our Launch Nx week!
Juri goes into [full details in this blog post](/blog/versioning-and-releasing-packages-in-a-monorepo), and James Henry — our Director of Engineering and the primary engineer responsible for both maintaining Lerna and creating Nx Release — expands further in his conference talk:
@@ -135,7 +136,7 @@ Juri, Zack, and Victor wrapped up the week with a livestream recapping the launc
{% youtube src="https://www.youtube.com/embed/xjLrFvEcxZw?si=O70JD4NgseP0lknA" title="Launch Nx Week Wrap Up" /%}
-That’s all for now folks! We’re just starting up a new iteration of development on Nx, so be sure to subscribe to [our YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
+That's all for now folks! We're just starting up a new iteration of development on Nx, so be sure to subscribe to [our YouTube channel](https://www.youtube.com/@nxdevtools) to get updates when new features land! Until next time, KEEP WORKING HARD!
---
diff --git a/docs/blog/2024-03-20-why-speed-matters.md b/docs/blog/2024-03-20-why-speed-matters.md
index 22ee7c28789be..dad4a597fcfc4 100644
--- a/docs/blog/2024-03-20-why-speed-matters.md
+++ b/docs/blog/2024-03-20-why-speed-matters.md
@@ -4,11 +4,12 @@ slug: 'monorepos-why-speed-matters'
authors: ['Katerina Skroumpelou', 'Jeff Cross']
tags: [nx, nxdevtools, speed, ci]
cover_image: '/blog/images/2024-03-20/featured_img.png'
+description: 'Discover how Nx enhances development speed through Rust integration, improved caching, Nx Agents, and test atomization features.'
---
In the ever-evolving landscape of software development, efficiency and speed are vital. As projects grow in complexity, developers and teams need tools that can keep up without sacrificing quality or performance.
-Nx is a suite of powerful tools designed to optimize your development workflow, which sets the [building blocks for a fast CI](/ci/concepts/building-blocks-fast-ci). Nx is always innovating in many ways to make developers’ lives easier, but this post is exclusively focused on the things Nx has done in the past year to make development faster and faster.
+Nx is a suite of powerful tools designed to optimize your development workflow, which sets the [building blocks for a fast CI](/ci/concepts/building-blocks-fast-ci). Nx is always innovating in many ways to make developers' lives easier, but this post is exclusively focused on the things Nx has done in the past year to make development faster and faster.
## Why speed matters
@@ -18,13 +19,13 @@ The ability to iterate quickly and efficiently is vital for any software project
- **Reduced time to market:** Accelerating the development process can significantly cut down the overall time to market, providing a competitive edge which reclaims revenue that would have otherwise been lost.
- **Decreased developer frustration:** [No more waiting for builds and tests to complete](/ci/concepts/reduce-waste). A streamlined workflow keeps morale high and productivity higher.
-If you’re using Nx already, you’re already familiar with
+If you're using Nx already, you're already familiar with
- [**Affected**](/ci/features/affected) - identifying and running tasks only on projects impacted by code changes,
- [**Nx Replay**](/ci/features/remote-cache) - our powerful cache and
- [**Nx Agents**](/ci/features/distribute-task-execution) - the concept of [Parallelization and Distribution](/ci/concepts/parallelization-distribution).
-But let’s see all the extra things we did this past year to make everything faster.
+But let's see all the extra things we did this past year to make everything faster.
## Speed at the core
@@ -44,9 +45,9 @@ The archive file is a binary file that contains the workspace file hashes with t
-Nx Replay enables caching and reusing of task results. It’s our well known Nx remote cache! It allows developers to avoid re-running expensive tasks by retrieving the cached results from a remote cache. This significantly improves build and test performance, as well as developer productivity. Nx Replay is also critical to the functioning of Nx Agents, which rely on the remote cache to ensure that the results of a task will be shared with every agent that needs them. By using Nx Replay, developers can optimize their workflows and reduce the time spent waiting for tasks to complete.
+Nx Replay enables caching and reusing of task results. It's our well known Nx remote cache! It allows developers to avoid re-running expensive tasks by retrieving the cached results from a remote cache. This significantly improves build and test performance, as well as developer productivity. Nx Replay is also critical to the functioning of Nx Agents, which rely on the remote cache to ensure that the results of a task will be shared with every agent that needs them. By using Nx Replay, developers can optimize their workflows and reduce the time spent waiting for tasks to complete.
-With Nx Replay, you can see significant speed improvements in your CI pipelines for modified PRs. What’s also important is that if a task has been executed in CI, a developer running that same task locally can reuse the task result instead of actually running the task. So you will also see improvements locally.
+With Nx Replay, you can see significant speed improvements in your CI pipelines for modified PRs. What's also important is that if a task has been executed in CI, a developer running that same task locally can reuse the task result instead of actually running the task. So you will also see improvements locally.
### Nx Agents
@@ -55,7 +56,7 @@ With Nx Replay, you can see significant speed improvements in your CI pipelines
[Nx Agents](/ci/features/distribute-task-execution) represent the pinnacle of task distribution optimization, ensuring that tasks are executed as efficiently as possible based on the specific requirements of each change. Some features that make up this effort are:
- [Easy integration with existing providers](/ci/recipes/set-up)
- - Distribution is handled on the Nx Cloud infrastructure and all you need is a single line. What’s more, all results are played back to your original CI provider script which triggers the Nx Cloud distribution, so that you can make use of the resulting artifacts
+ - Distribution is handled on the Nx Cloud infrastructure and all you need is a single line. What's more, all results are played back to your original CI provider script which triggers the Nx Cloud distribution, so that you can make use of the resulting artifacts
- [Efficient task distribution](/ci/features/dynamic-agents)
- Save compute resources and reduce costs, minimizing idle time and compute waste
- Dynamic sizing based on PR size
@@ -82,7 +83,7 @@ Nx creates a hash of all the inputs for a task whenever it is run. If it encount
### Module Federation
-With the help of Nx and the Module Federation setup that Nx offers, you can split up large Angular apps into smaller “vertical slices”. This can significantly speed up your builds and app startup time. Nx has revolutionized the use of Module Federation, especially in how static remotes are built and served. We make use of Nx’s task orchestration, allowing users to fine tune the number of builds happening in parallel to improve local startup time, manage machine resources better, allow for scaling.
+With the help of Nx and the Module Federation setup that Nx offers, you can split up large Angular apps into smaller "vertical slices". This can significantly speed up your builds and app startup time. Nx has revolutionized the use of Module Federation, especially in how static remotes are built and served. We make use of Nx's task orchestration, allowing users to fine tune the number of builds happening in parallel to improve local startup time, manage machine resources better, allow for scaling.
### First-Class Playwright support
diff --git a/docs/blog/2024-03-21-reliable-ci.md b/docs/blog/2024-03-21-reliable-ci.md
index 22398fc897eda..c575e477f766d 100644
--- a/docs/blog/2024-03-21-reliable-ci.md
+++ b/docs/blog/2024-03-21-reliable-ci.md
@@ -5,19 +5,20 @@ authors: [Victor Savkin]
cover_image: '/blog/images/2024-03-21/featured_img.png'
tags: [nx, nx-cloud, releases]
pinned: true
+description: 'Learn how Nx Cloud revolutionizes CI with a task-based execution model that solves both flaky tests and slow pipelines.'
---
-The proverbial slow and flaky CI isn’t the failure of the developers or even the testing tools. It’s the failure of the CI execution model we relied on for the last 20 years.
+The proverbial slow and flaky CI isn't the failure of the developers or even the testing tools. It's the failure of the CI execution model we relied on for the last 20 years.
**By switching from the old CI model, implemented as a graph of VMs, to the new one, implemented as a graph of tasks, we can solve both the flakiness and slowness.**
-In this blog post I’ll explore why this is the case, and how you can do it by using Nx Cloud.
+In this blog post I'll explore why this is the case, and how you can do it by using Nx Cloud.
---
## History of CI
-It’s easy to forget that Continuous Integration has been around for only 20 years. For reference, UI frameworks have been around since the 1970s.
+It's easy to forget that Continuous Integration has been around for only 20 years. For reference, UI frameworks have been around since the 1970s.
@@ -37,9 +38,9 @@ A traditional CI execution is a directed acyclic graph (DAG) of virtual machines
**Every distributed system needs efficient communication between nodes and the ability to tolerate failure.**
-The traditional CI execution model offers **very basic** means of communication: the status code propagation and ad-hoc ways of uploading/downloading files. Because the communication is effortful, in practice, **it’s either not done at all or very minimally.**
+The traditional CI execution model offers **very basic** means of communication: the status code propagation and ad-hoc ways of uploading/downloading files. Because the communication is effortful, in practice, **it's either not done at all or very minimally.**
-To understand why the traditional CI execution model fails to handle failures, let’s review the types of failures we can have.
+To understand why the traditional CI execution model fails to handle failures, let's review the types of failures we can have.
Failures can be:
@@ -54,11 +55,11 @@ Tasks can fail:
- for external reasons _(npm install fails cause npm is down)_
- for unknown reasons _(a flaky test)_
-**The traditional CI execution model doesn’t tolerate any of these failures.**
+**The traditional CI execution model doesn't tolerate any of these failures.**
## Problem in numbers
-Let’s see how varying a few parameters affects the probability of the CI execution failing.
+Let's see how varying a few parameters affects the probability of the CI execution failing.
| Number of VMS | Avg Tests per VM | Flaky Test Probability | Slow Test Probability | Broken CI Builds (Flaky) | Slow CI Builds |
| :-----------: | :--------------: | :--------------------: | :-------------------: | :----------------------: | :------------: |
@@ -69,9 +70,9 @@ Let’s see how varying a few parameters affects the probability of the CI execu
| 10 | 10 | 0.5% | 1% | 40% | 65% |
| 50 | 10 | 0.5% | 1% | 92% | 99% |
-**The result is much worse than most intuitively expect.** For instance, assuming that an **e2e test has 1 in 1000 chance (0.1%) of failing** for a flaky reason, when the number of e2e tests reaches 500, **the probability of the CI failing for a flaky reason reaches 39%**, and the vast majority of CI executions are slowed down. Note, this is an exceptionally stable test suite. The bottom part of the table is more representative of a typical e2e suite, and the CI becomes “broken” at a much smaller scale.
+**The result is much worse than most intuitively expect.** For instance, assuming that an **e2e test has 1 in 1000 chance (0.1%) of failing** for a flaky reason, when the number of e2e tests reaches 500, **the probability of the CI failing for a flaky reason reaches 39%**, and the vast majority of CI executions are slowed down. Note, this is an exceptionally stable test suite. The bottom part of the table is more representative of a typical e2e suite, and the CI becomes "broken" at a much smaller scale.
-One can try to fix it by increasing the robustness of the tests, but at some point, doing this is costly. If an e2e test has a 10% chance of a flaky failure, it’s relatively easy to bring this number to 1%. Going from 1% to 0.5% is harder. Going from 0.5% to 0.1% is exceptionally hard and may be practically impossible. Testing complex systems is simply a difficult task.
+One can try to fix it by increasing the robustness of the tests, but at some point, doing this is costly. If an e2e test has a 10% chance of a flaky failure, it's relatively easy to bring this number to 1%. Going from 1% to 0.5% is harder. Going from 0.5% to 0.1% is exceptionally hard and may be practically impossible. Testing complex systems is simply a difficult task.
This is the formula for the failed CI run:
diff --git a/docs/blog/2024-04-19-manage-your-gradle.md b/docs/blog/2024-04-19-manage-your-gradle.md
index 3d05839afecb1..9a416dbe9ee87 100644
--- a/docs/blog/2024-04-19-manage-your-gradle.md
+++ b/docs/blog/2024-04-19-manage-your-gradle.md
@@ -4,9 +4,10 @@ slug: 'manage-your-gradle-project-using-nx'
authors: ['Emily Xiong']
cover_image: '/blog/images/2024-04-19/featured_img.png'
tags: [nx, gradle, how-to]
+description: 'Learn how to manage Gradle projects in Nx workspaces using the new @nx/gradle plugin for better library visualization and multi-tech stack support.'
---
-Here’s my situation: I have a Gradle workspace with multiple Gradle libraries. How do I easily view the relationships between different libraries? I have a monorepo workspace with both Gradle and Javascript libraries, how do I manage these libraries of different tech stacks?
+Here's my situation: I have a Gradle workspace with multiple Gradle libraries. How do I easily view the relationships between different libraries? I have a monorepo workspace with both Gradle and Javascript libraries, how do I manage these libraries of different tech stacks?
We are very excited to announce our support for Gradle with our new plugin: `@nx/gradle`.
@@ -24,9 +25,9 @@ This blog will show you:
## What is Nx?
-Before we start, let’s answer this question: what is Nx and why should we use it?
+Before we start, let's answer this question: what is Nx and why should we use it?
-From [nx.dev](): “Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.” It sounds good, what benefits does it bring?
+From [nx.dev](): "Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI." It sounds good, what benefits does it bring?
Nx adds the following features to your workspace:
@@ -41,7 +42,7 @@ Nx adds the following features to your workspace:
## How to add Nx to a Gradle Workspace?
-Now we understand the benefits of Nx, now let’s set it up. The setup is pretty easy, just need to run one command.
+Now we understand the benefits of Nx, now let's set it up. The setup is pretty easy, just need to run one command.
In the workspace, run the below command:
@@ -77,7 +78,7 @@ found 0 vulnerabilities
✔ Initializing @nx/gradle...
```
-That’s it! Now we have Nx in our Gradle project.
+That's it! Now we have Nx in our Gradle project.
### Example: Gradle Init
diff --git a/docs/blog/2024-05-08-nx-19-release.md b/docs/blog/2024-05-08-nx-19-release.md
index b3e64fa9ff20a..d3a5cc5a3b33a 100644
--- a/docs/blog/2024-05-08-nx-19-release.md
+++ b/docs/blog/2024-05-08-nx-19-release.md
@@ -4,6 +4,7 @@ slug: 'nx-19-release'
authors: ['Zack DeRose']
cover_image: '/blog/images/2024-05-08/nx-19-thumbnail.png'
tags: [nx, release]
+description: 'Explore Nx 19.0, returning to our six-month release cycle with enhanced Project Crystal plugins that work seamlessly with minimal configuration.'
---
Hey folks!
diff --git a/docs/blog/2024-06-18-podcast-episode-1-hicham-el-hammouchi.md b/docs/blog/2024-06-18-podcast-episode-1-hicham-el-hammouchi.md
index ff85b3482404c..4cd73e0bd7480 100644
--- a/docs/blog/2024-06-18-podcast-episode-1-hicham-el-hammouchi.md
+++ b/docs/blog/2024-06-18-podcast-episode-1-hicham-el-hammouchi.md
@@ -9,6 +9,7 @@ podcastSpotifyId: 24yagCNpu9EGj0fCwSDQkj
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/899a2e4c-2e56-4dfa-a3e3-e69eb216f2b0/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-1-hicham-el-hamouchi
podcastAppleUrl: https://podcasters.spotify.com/pod/show/enterprise-software/episodes/The-Enterprise-Software-Podcast-By-Nx-1--Hicham-El-Hamouchi-e2l0302
podcastIHeartUrl: https://www.iheart.com/podcast/269-the-enterprise-software-po-186891508/episode/the-enterprise-software-podcast-by-nx-186891511/
+description: 'Join Zack DeRose as he discusses enterprise software development with veteran Hicham El Hammouchi, exploring challenges and emerging trends.'
---
In this episode, Zack DeRose from Nx chats with Hicham El Hammouchi, a veteran in enterprise software. Hicham dives into his background, sharing his career journey and the wealth of experience he's gathered along the way.
diff --git a/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md b/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md
index 6991711eac39c..6fbc043a3bb1f 100644
--- a/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md
+++ b/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md
@@ -9,6 +9,7 @@ podcastSpotifyId: 0CCQaWCln7rvwkkVvsyxsk
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/53934cd9-c521-441e-8523-8b947ed207ca/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-2-tine-kondo
podcastAppleUrl: https://podcasts.apple.com/us/podcast/the-enterprise-software-podcast-by-nx-2-tine-kondo/id1752704996?i=1000662764990
podcastIHeartUrl: https://www.iheart.com/podcast/269-the-enterprise-software-po-186891508/episode/the-enterprise-software-podcast-by-nx-197335640/
+description: 'Explore insights from Nx Champion Tine Kondo on monorepo benefits and the potential of Nx Gradle plugin for Java development.'
---
In this episode, welcome Nx Champion and Nx Expert, Tine Kondo. Our discussion highlights how Nx is poised to make an impact in the Java space.
diff --git a/docs/blog/2024-07-29-explain-with-ai.md b/docs/blog/2024-07-29-explain-with-ai.md
index 018da8b40016c..eb49a389ef5bb 100644
--- a/docs/blog/2024-07-29-explain-with-ai.md
+++ b/docs/blog/2024-07-29-explain-with-ai.md
@@ -5,6 +5,7 @@ authors: ['Philip Fulcher']
cover_image: '/blog/images/2024-07-29/explain-with-ai-header.avif'
tags: [nx, nx-cloud, ai, release]
youtubeUrl: https://youtu.be/g2m9cHp-O-Q?si=ax-SKCO0Xvy9vFIz
+description: Explain with AI in Nx Cloud Pro helps debug CI failures with AI explanations and suggested fixes.
---
It's Friday, and you absolutely, positively have to deploy to production. But you can't get CI to pass your PR. What do you do? It's an inevitable part of your life as a developer, and you've built a collection of tools to deal with it: Google, MDN, Discord, ChatGPT. We've got one more tool for your toolbox: **"Explain with AI" for [Nx Cloud](/nx-cloud)**.
diff --git a/docs/blog/2024-08-01-nx-19-5-update.md b/docs/blog/2024-08-01-nx-19-5-update.md
index cdcc0d4459ca3..c29b29d5fe8f2 100644
--- a/docs/blog/2024-08-01-nx-19-5-update.md
+++ b/docs/blog/2024-08-01-nx-19-5-update.md
@@ -4,6 +4,7 @@ slug: 'nx-19-5-adds-stackblitz-new-features-and-more'
authors: ['Zack DeRose']
cover_image: '/blog/images/2024-08-01/nx-19-5-thumbnail.png'
tags: [nx, release]
+description: 'Nx 19.5 brings StackBlitz support, Bun and Pnpm v9 compatibility, local flaky task detection, and more.'
---
## Table of Contents
@@ -77,7 +78,7 @@ Nx Cloud has long offered [flaky task detection](/ci/features/flaky-tasks) on CI
-If a task is detected as flaky during local execution, you’ll receive a warning. Nx identifies flaky tasks by tracking the outcomes of your tasks in relation to your source code and external dependencies. When the same code produces different results, Nx flags the task as flaky and triggers the warning.
+If a task is detected as flaky during local execution, you'll receive a warning. Nx identifies flaky tasks by tracking the outcomes of your tasks in relation to your source code and external dependencies. When the same code produces different results, Nx flags the task as flaky and triggers the warning.
Detecting flaky tasks in the local environment empowers developers to address issues early in the development cycle—before they affect your CI pipelines.
diff --git a/docs/blog/2024-08-14-podcast-episode-3-ahmed-elsakaan.md b/docs/blog/2024-08-14-podcast-episode-3-ahmed-elsakaan.md
index 77e530671c268..68392c5249b52 100644
--- a/docs/blog/2024-08-14-podcast-episode-3-ahmed-elsakaan.md
+++ b/docs/blog/2024-08-14-podcast-episode-3-ahmed-elsakaan.md
@@ -9,6 +9,7 @@ podcastSpotifyId: 4d4oE8B3y9BmECZ3P4uvDP
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/28209cf9-1b88-48b5-a798-7b24c843e9b1/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-3-ahmed-elsakaan
podcastAppleUrl: https://podcasts.apple.com/us/podcast/the-enterprise-software-podcast-by-nx-3-ahmed-elsakaan/id1752704996?i=1000665363260
podcastIHeartUrl: https://www.iheart.com/podcast/269-the-enterprise-software-po-186891508/episode/the-enterprise-software-podcast-by-nx-205664230/
+description: 'Join Nx Champion Ahmed Elsakaan as he discusses his tools noodle and OrbitKit, exploring how they improve monorepo setup and module creation.'
---
In this episode we welcome Nx Champion and creator of [noodle](https://noodle.run) and [OrbitKit](https://orbitkit.dev/): Ahmed Elsakaan.
diff --git a/docs/blog/2024-08-21-podcast-epsiode-4-cvent.md b/docs/blog/2024-08-21-podcast-epsiode-4-cvent.md
index dd2f7b54cbacc..baa83541f58e3 100644
--- a/docs/blog/2024-08-21-podcast-epsiode-4-cvent.md
+++ b/docs/blog/2024-08-21-podcast-epsiode-4-cvent.md
@@ -9,6 +9,7 @@ podcastSpotifyId: 1zWuMFxcnGy90AN41gkodx
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/7e19eb25-76f9-4d1e-89c0-c2fd1f585f9b/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-4-cvent-platform-architect-panel
podcastAppleUrl: https://podcasts.apple.com/us/podcast/the-enterprise-software-podcast-by-nx-4-cvent/id1752704996?i=1000666133320
podcastIHeartUrl: https://www.iheart.com/podcast/269-the-enterprise-software-po-186891508/episode/the-enterprise-software-podcast-by-nx-207751657/
+description: "Discover how Cvent's Platform Architects leverage Nx in their platform engineering strategy to empower teams across their organization."
---
In this edition of the Nx Enterprise Podcast, Zack sits down with a panel of Platform Architects from the event platform company, [Cvent](https://www.cvent.com/).
diff --git a/docs/blog/2024-08-28-nxcloud-improved-ci-log.md b/docs/blog/2024-08-28-nxcloud-improved-ci-log.md
index e36b6daff14af..8e1721838ec0c 100644
--- a/docs/blog/2024-08-28-nxcloud-improved-ci-log.md
+++ b/docs/blog/2024-08-28-nxcloud-improved-ci-log.md
@@ -5,6 +5,7 @@ authors: ['Juri Strumpflohner']
tags: [nx-cloud, release]
cover_image: /blog/images/2024-08/nx-cloud-table-log-output-thumb.jpg
youtubeUrl: https://youtu.be/aacrw0H0m4Q
+description: Nx Cloud introduces a structured table view for CI logs, enhancing monorepo task tracking and visibility.
---
Whenever we talk about Nx Cloud, speed is often a major focus—and for good reason. However, Nx Cloud isn't just about speed. Similar to Nx itself, it's about making work within monorepos more pleasant and efficient. A key part of that is continuously **optimizing developer ergonomics**.
diff --git a/docs/blog/2024-08-29-nx-live-with-trunk.md b/docs/blog/2024-08-29-nx-live-with-trunk.md
index 90f89ed2c2147..537a5c11d4ad0 100644
--- a/docs/blog/2024-08-29-nx-live-with-trunk.md
+++ b/docs/blog/2024-08-29-nx-live-with-trunk.md
@@ -5,6 +5,7 @@ authors: ['Zack DeRose']
tags: [livestream]
cover_image: /blog/images/2024-08-29/nx-live-trunk.png
youtubeUrl: https://youtube.com/live/E8Gh-Vkxok0
+description: Live demo with Trunk.io's David on optimizing PR workflows using Nx and Trunk Merge Queues, featuring first-class Nx support for improved dev efficiency.
---
In this episode of Nx Live, Zack sits down with David from [Trunk.io](https://trunk.io) to explore hands-on examples of how to fast-track your PRs using Nx and Trunk Merge Queues. They also discuss the latest [first-class support for Nx](https://docs.trunk.io/merge-queue/parallel-queues/nx) recently added to Trunk, demonstrating how these tools can streamline your development workflow.
diff --git a/docs/blog/2024-08-30-announcing-your-monorepo-world-speakers.md b/docs/blog/2024-08-30-announcing-your-monorepo-world-speakers.md
index 6df208bf8ad41..2416d16736b2c 100644
--- a/docs/blog/2024-08-30-announcing-your-monorepo-world-speakers.md
+++ b/docs/blog/2024-08-30-announcing-your-monorepo-world-speakers.md
@@ -4,27 +4,28 @@ slug: announcing-your-monorepo-world-speakers
authors: ['Mike Hartington']
tags: [monorepo-world]
cover_image: /blog/images/2024-08-30/mw-blog-post.avif
+description: Meet the first round of Monorepo World speakers, including experts from Zephyr Cloud, Atlassian, GitHub, and HeroDevs, discussing bundlers, dependency graphs, and monorepo best practices.
---
-[Monorepo World](https://monorepo.world) is our two-track conference bringing together experts in developer tooling and of course, monorepos. We’re thrilled to share some of this year's speakers, including folks from Zephyr Cloud, Atlassian, GitHub, and HeroDevs. Without further ado, let’s meet your first round of speakers!
+[Monorepo World](https://monorepo.world) is our two-track conference bringing together experts in developer tooling and of course, monorepos. We're thrilled to share some of this year's speakers, including folks from Zephyr Cloud, Atlassian, GitHub, and HeroDevs. Without further ado, let's meet your first round of speakers!
### Hacking Bundlers in Nx
[Lois Zhao](https://x.com/zmzlois), Zephyr Cloud
-Want to know how builders work and how they can impact your projects? Let’s look at various bundlers and see how they affect the build time and output while also potentially saving organizations millions of dollars.
+Want to know how builders work and how they can impact your projects? Let's look at various bundlers and see how they affect the build time and output while also potentially saving organizations millions of dollars.
### What's In Your Dependency Graph
[Josh VanAllen](https://x.com/JVAsays), HeroDevs
-Ever ask yourself “why is this build taking so long?” You’re not alone. With monorepos, managing your workspace’s dependency graph can make the difference between spending countless hours waiting to see if your simple changes fixes your apps. Learn how to find the hidden bottlenecks in your dependency graphs and make them efficient!
+Ever ask yourself "why is this build taking so long?" You're not alone. With monorepos, managing your workspace's dependency graph can make the difference between spending countless hours waiting to see if your simple changes fixes your apps. Learn how to find the hidden bottlenecks in your dependency graphs and make them efficient!
### How To Use Git - The Right Way - For Monorepos
[Scott Arbeit](https://x.com/ScottArbeit), GitHub
-We all use git in our day to day, and it’s great! Until you have to clone a large repository, like potentially a monorepo. Thankfully, there are some tips and tricks you can use to work with large repositories and git that can greatly improve your user experience.
+We all use git in our day to day, and it's great! Until you have to clone a large repository, like potentially a monorepo. Thankfully, there are some tips and tricks you can use to work with large repositories and git that can greatly improve your user experience.
### Atlassian Frontend's Journey To The Monorepo
@@ -34,6 +35,6 @@ Adopting a monorepo for an organization can be a transformative experience. Lear
## Get Your Tickets Today
-We hope you’re excited to see these amazing sessions! We’ll have more to share soon about what other speakers you can expect to see at Monorepo world! Don’t forget to register and get your ticket before prices go up September 6th 😱!
+We hope you're excited to see these amazing sessions! We'll have more to share soon about what other speakers you can expect to see at Monorepo world! Don't forget to register and get your ticket before prices go up September 6th 😱!
[Get your tickets today!](https://bit.ly/3YZcb5r)
diff --git a/docs/blog/2024-09-05-nx-live-introduction-to-nx.md b/docs/blog/2024-09-05-nx-live-introduction-to-nx.md
index e177dddfe103d..63f4c20360d6a 100644
--- a/docs/blog/2024-09-05-nx-live-introduction-to-nx.md
+++ b/docs/blog/2024-09-05-nx-live-introduction-to-nx.md
@@ -5,6 +5,7 @@ authors: ['Zack DeRose', 'Mike Hartington']
tags: [livestream]
cover_image: /blog/images/2024-09-05/thumbnail.png
youtubeUrl: https://youtube.com/live/dgtZ6GHZ-tA
+description: Watch a live coding session where Zack guides Mike through building a full-stack app with Nx, showcasing key features and best practices.
---
In this episode of Nx Live, Zack introduces new Nx team member Mike Hartington to the value of Nx. Together, Zack and Mike build out a full-stack application in their workspace - complete with linting, testing, and end-to-end tests using Nx's generators, and they look at the capabilities that Nx offers in terms of defining their workspace, and how Nx can leverage that information for task-running - especially in CI!
diff --git a/docs/blog/2024-09-10-personal-access-tokens.md b/docs/blog/2024-09-10-personal-access-tokens.md
index 6edc24d0b9e10..be5fed0094b70 100644
--- a/docs/blog/2024-09-10-personal-access-tokens.md
+++ b/docs/blog/2024-09-10-personal-access-tokens.md
@@ -5,6 +5,7 @@ authors: ['Philip Fulcher']
tags: [nx-cloud]
cover_image: /blog/images/2024-09-10/personal-access-tokens-header.avif
youtubeUrl: https://youtu.be/i51LPtagb2s
+description: Introducing Personal Access Tokens in Nx Cloud, a major security upgrade that provides enhanced control over cached artifacts access.
---
Today, Nx Cloud gets a huge upgrade to managing access to your cached artifacts
diff --git a/docs/blog/2024-09-12-next-gen-module-federation-deployments.md b/docs/blog/2024-09-12-next-gen-module-federation-deployments.md
index 48888388e7c4a..2fbf53cda3fa0 100644
--- a/docs/blog/2024-09-12-next-gen-module-federation-deployments.md
+++ b/docs/blog/2024-09-12-next-gen-module-federation-deployments.md
@@ -5,6 +5,7 @@ authors: ['Colum Ferry']
tags: [nx, module federation, rspack, zephyr cloud]
cover_image: /blog/images/2024-09-12/next-gen-module-federation-deployments.png
published: true
+description: Learn how Nx and Zephyr Cloud simplify deploying Micro Frontends with Module Federation, making it easier to manage multiple build artifacts.
---
Nx has supported Module Federation for a long time now and its popularity is seeing year-on-year increase. It has proven
diff --git a/docs/blog/2024-09-16-announcing-your-monorepo-world-speakers-pt-2.md b/docs/blog/2024-09-16-announcing-your-monorepo-world-speakers-pt-2.md
index 1dc86e1d05993..76b1927db4749 100644
--- a/docs/blog/2024-09-16-announcing-your-monorepo-world-speakers-pt-2.md
+++ b/docs/blog/2024-09-16-announcing-your-monorepo-world-speakers-pt-2.md
@@ -4,15 +4,16 @@ slug: announcing-your-monorepo-world-speakers-pt-2
authors: ['Mike Hartington']
tags: [monorepo-world]
cover_image: /blog/images/2024-09-16/mw-blog-post.avif
+description: Meet the next group of Monorepo World speakers, including experts from Aspect Build Systems, Trunk.io, and more, discussing Python monorepos, Bazel, and large-scale merge queues.
---
-[Monorepo World](https://monorepo.world) is our two-track conference bringing together experts in developer tooling and of course, monorepos. We’re thrilled to share some of this year's speakers, including folks from Aspect Build Systems, Trunk.io, Aviator Technologies, and Postman. Without further ado, let’s meet your speakers!
+[Monorepo World](https://monorepo.world) is our two-track conference bringing together experts in developer tooling and of course, monorepos. We're thrilled to share some of this year's speakers, including folks from Aspect Build Systems, Trunk.io, Aviator Technologies, and Postman. Without further ado, let's meet your speakers!
## Python Monorepos with Bazel
[Alex Eagle](https://x.com/Jakeherringbone), Aspect Build Systems
-Bazel is Google’s open source incremental build tool made for extreme scalability and support for many languages. Let’s look at how Bazel can provide features like CI/CD, building and testing, as well as formatting/linting in a Python environment.
+Bazel is Google's open source incremental build tool made for extreme scalability and support for many languages. Let's look at how Bazel can provide features like CI/CD, building and testing, as well as formatting/linting in a Python environment.
## Merge Queues at Scale
@@ -36,8 +37,8 @@ We often pit Polyrepos against Monorepos, but why not merge the best of both wor
[Patrick Sevat](https://x.com/_Sevat), Postman
-“Oops, it turns out my PR was actually a breaking change. I'm so sorry I broke production for all apps except ours”. This developer nightmare was the worst case scenario the team at Postman has solved. This talk will focus on how shared dependencies can keep federated apps small in bundle size, but come at the risk of breaking other apps when semantic versioning (SemVer) is not adhered to.
+"Oops, it turns out my PR was actually a breaking change. I'm so sorry I broke production for all apps except ours". This developer nightmare was the worst case scenario the team at Postman has solved. This talk will focus on how shared dependencies can keep federated apps small in bundle size, but come at the risk of breaking other apps when semantic versioning (SemVer) is not adhered to.
-We hope you’re excited to see these amazing sessions! We’ll have more to share soon about what other speakers you can expect to see at Monorepo world! Don’t forget to register and get your ticket before it’s too late 😱!
+We hope you're excited to see these amazing sessions! We'll have more to share soon about what other speakers you can expect to see at Monorepo world! Don't forget to register and get your ticket before it's too late 😱!
[Get your tickets today!](https://bit.ly/3YZcb5r)
diff --git a/docs/blog/2024-09-18-podcast-episode-5-ruben-casas-postman.md b/docs/blog/2024-09-18-podcast-episode-5-ruben-casas-postman.md
index cf2dc80736b96..b9134abfbcf74 100644
--- a/docs/blog/2024-09-18-podcast-episode-5-ruben-casas-postman.md
+++ b/docs/blog/2024-09-18-podcast-episode-5-ruben-casas-postman.md
@@ -9,6 +9,7 @@ podcastSpotifyId: 7LJlqLGR708OccUwyzz9wT
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/352e8cef-b8df-4e81-be38-96a0cf62e0f5/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-5-ruben-casas-postman
podcastAppleUrl: https://podcasts.apple.com/us/podcast/the-enterprise-software-podcast-by-nx-5-ruben-casas-postman/id1752704996?i=1000669972799
podcastIHeartUrl: https://www.iheart.com/podcast/269-the-enterprise-software-po-186891508/episode/the-enterprise-software-podcast-by-nx-217668148/
+description: "Join Postman's Ruben Casas as he explores frontend architecture evolution and how platform teams can create a 'pit of success' for developers."
---
In this episode, Zack sits down with Ruben of Postman to discuss:
diff --git a/docs/blog/2024-09-20-nx-19-8.md b/docs/blog/2024-09-20-nx-19-8.md
index 13ddaa4da1cb1..4c045a5ee9e04 100644
--- a/docs/blog/2024-09-20-nx-19-8.md
+++ b/docs/blog/2024-09-20-nx-19-8.md
@@ -5,6 +5,7 @@ authors: [Zack DeRose]
tags: [nx, release]
cover_image: /blog/images/2024-09-20/thumbnail.png
youtubeUrl: https://youtu.be/Zgv4LHvwGx0
+description: The final minor release before Nx v20 brings Nx Import, improved task scheduling, and Project Crystal support for Angular projects.
---
Nx 19.8 is here! This is our last minor release before we get ready to move ahead into Nx v20, which should land in October around the same time as the [Monorepo World Conference](https://monorepo.world/)!
diff --git a/docs/blog/2024-09-25-evolving-nx.md b/docs/blog/2024-09-25-evolving-nx.md
index b3b9a919fb8d4..16bd7ec5e6726 100644
--- a/docs/blog/2024-09-25-evolving-nx.md
+++ b/docs/blog/2024-09-25-evolving-nx.md
@@ -4,6 +4,7 @@ slug: evolving-nx
authors: [Jeff Cross]
tags: [nx, release]
cover_image: /blog/images/evolving-nx/thumbnail.png
+description: Nx's journey from a side project to a tool for millions, including Nx Cloud and Nx Powerpack developments.
---
_Update from Jeff Cross, October 17, 2024_
@@ -12,30 +13,30 @@ In my original version of this post, I said that Powerpack is completely new fun
---
-Over the years, Nx has grown from a small 20% side project of our consulting business into a tool that empowers millions of developers worldwide and helps Fortune 500 companies ship high-quality software faster. In the last two years, we successfully transformed our consulting business into a product company, where our team can fully focus on evolving Nx and building Nx Cloud to extend Nx’s capabilities beyond local development.
+Over the years, Nx has grown from a small 20% side project of our consulting business into a tool that empowers millions of developers worldwide and helps Fortune 500 companies ship high-quality software faster. In the last two years, we successfully transformed our consulting business into a product company, where our team can fully focus on evolving Nx and building Nx Cloud to extend Nx's capabilities beyond local development.
This success is in large part thanks to:
- Our commitment to building Nx as MIT-licensed open-source software, supported by the incredible contributions from our vibrant Nx community.
- Close collaboration with our customers, allowing us to understand their needs and continuously improve Nx and Nx Cloud to address their demanding and complex challenges.
-When we have new ideas to make Nx better, we’ve always had two options: it could be in the open source build system, or it could be in the paid cloud product, [Nx Cloud](/nx-cloud). But sometimes, there are important things we want to offer that can solve some gnarly problems for teams but don’t require them to spend months convincing their IT department to incorporate yet another cloud service. So, we decided to create a collection of non-cloud-dependent Nx add-ons in a new package called **Nx Powerpack**, which will require paid licenses to use.
+When we have new ideas to make Nx better, we've always had two options: it could be in the open source build system, or it could be in the paid cloud product, [Nx Cloud](/nx-cloud). But sometimes, there are important things we want to offer that can solve some gnarly problems for teams but don't require them to spend months convincing their IT department to incorporate yet another cloud service. So, we decided to create a collection of non-cloud-dependent Nx add-ons in a new package called **Nx Powerpack**, which will require paid licenses to use.
## Introducing Nx Powerpack
-**[Nx Powerpack](/powerpack)** — our newest product designed to elevate the Nx CLI experience for enterprise environments. Powerpack offers advanced features like self-hosted remote cache storage, code ownership for monorepos, and workspace conformance, seamlessly integrating into sealed systems with strict security requirements. It’s also designed for ease of implementation, helping enterprises bypass lengthy procurement processes and quickly access the tools they need.
+**[Nx Powerpack](/powerpack)** — our newest product designed to elevate the Nx CLI experience for enterprise environments. Powerpack offers advanced features like self-hosted remote cache storage, code ownership for monorepos, and workspace conformance, seamlessly integrating into sealed systems with strict security requirements. It's also designed for ease of implementation, helping enterprises bypass lengthy procurement processes and quickly access the tools they need.
> If you want to get into the technical details, we wrote a separate blog post diving deeper into the technical details: [Introducing Nx Powerpack](/blog/introducing-nx-powerpack).
-Powerpack is mostly new functionality. However, this change coincides with some Nx improvements that will eventually interfere with users who were relying on our original filesystem-based implementation of local caching. We’ve completely rewritten Nx's local caching to be faster and more secure, partly by using a local database instead of checking the filesystem for artifact metadata. With this rewrite, any custom remote caches that rely on metadata reflected in the filesystem will not work as of Nx 21. This is why we decided to build an API into Powerpack to be able to connect Nx’s cache to different clouds and data sources. Now with Powerpack, teams can use an officially-supported implementation of remote caching, without needing to use Nx Cloud.
+Powerpack is mostly new functionality. However, this change coincides with some Nx improvements that will eventually interfere with users who were relying on our original filesystem-based implementation of local caching. We've completely rewritten Nx's local caching to be faster and more secure, partly by using a local database instead of checking the filesystem for artifact metadata. With this rewrite, any custom remote caches that rely on metadata reflected in the filesystem will not work as of Nx 21. This is why we decided to build an API into Powerpack to be able to connect Nx's cache to different clouds and data sources. Now with Powerpack, teams can use an officially-supported implementation of remote caching, without needing to use Nx Cloud.
-There’s a Steve Jobs quote that I think rings true with all of us at Nx:
+There's a Steve Jobs quote that I think rings true with all of us at Nx:
> "I think money is a wonderful thing because it enables you to do things. It enables you to invest in ideas that don't have a short-term payback." - Steve Jobs
-As Nx has grown, we’ve hired more people to make the product better. Naturally, those people want to do good work and be paid. We all show up for work to build things we’re passionate about, and solve real pain points for the millions of developers using Nx every day. Money is what enables us to keep doing what we love. So as much as Victor Savkin and I want to just build things and give them away for free, we need to balance our personal passion with what’s the best long-term decisions for Nx — the project, the community, and the company.
+As Nx has grown, we've hired more people to make the product better. Naturally, those people want to do good work and be paid. We all show up for work to build things we're passionate about, and solve real pain points for the millions of developers using Nx every day. Money is what enables us to keep doing what we love. So as much as Victor Savkin and I want to just build things and give them away for free, we need to balance our personal passion with what's the best long-term decisions for Nx — the project, the community, and the company.
-Like many open source projects, one of the bigger challenges to sustainability in recent years has been larger cloud products who wait for projects to become successful, and then try to capitalize on that success at the expense of the maintainers. To battle this, many open source projects have decided to make their open source licensing more restrictive, or introduce dual licenses, forcing those vendors to work with the maintainers on a fair arrangement. We think we’ve come up with a better solution for the community by introducing a new package, Powerpack, with a new commercial license, with only new functionality. **Nx itself still has one license: the MIT license.**
+Like many open source projects, one of the bigger challenges to sustainability in recent years has been larger cloud products who wait for projects to become successful, and then try to capitalize on that success at the expense of the maintainers. To battle this, many open source projects have decided to make their open source licensing more restrictive, or introduce dual licenses, forcing those vendors to work with the maintainers on a fair arrangement. We think we've come up with a better solution for the community by introducing a new package, Powerpack, with a new commercial license, with only new functionality. **Nx itself still has one license: the MIT license.**
@@ -45,13 +46,13 @@ Open source projects can continue to use Nx Cloud for **free** the same way they
## How to Get Nx Powerpack
-Powerpack can be easily purchased as a one-off license and is automatically included for all existing enterprise customers. If you’re looking to purchase a license, you can [do so on this page](/powerpack).
+Powerpack can be easily purchased as a one-off license and is automatically included for all existing enterprise customers. If you're looking to purchase a license, you can [do so on this page](/powerpack).
-Are you a startup? If these features make sense for your team but the cost is a concern, reach out to our support team, and we’ll work with you to find a solution that fits.
+Are you a startup? If these features make sense for your team but the cost is a concern, reach out to our support team, and we'll work with you to find a solution that fits.
## Got Questions?
-If you’re curious to learn more about these changes for Nx and how to get started, [check out our docs](/nx-enterprise/powerpack).
+If you're curious to learn more about these changes for Nx and how to get started, [check out our docs](/nx-enterprise/powerpack).
## Learn more
diff --git a/docs/blog/2024-09-25-introducing-nx-powerpack.md b/docs/blog/2024-09-25-introducing-nx-powerpack.md
index 7934316c0bd29..10b5875bd8484 100644
--- a/docs/blog/2024-09-25-introducing-nx-powerpack.md
+++ b/docs/blog/2024-09-25-introducing-nx-powerpack.md
@@ -5,12 +5,13 @@ authors: [Juri Strumpflohner]
tags: [nx, release]
cover_image: /blog/images/introducing-powerpack/thumbnail.png
youtubeUrl: https://youtu.be/KZ0nh2lj8zE
+description: Introducing Nx Powerpack, a paid extension suite for enterprise use cases, ensuring Nx remains open source and existing features are free.
---
Today we're introducing our latest product, **Nx Powerpack**, a suite of paid extensions for Nx, specifically designed around common enterprise needs. Now, before anyone draws the wrong conclusions:
-- No, we’re **not going to restrict Nx’s license**, lock you in, and then harvest. Nx remains MIT licensed and fully open source.
-- No, we’re **not placing existing features behind a paywall**. Nx Powerpack introduces new features on top of Nx (more about that below).
+- No, we're **not going to restrict Nx's license**, lock you in, and then harvest. Nx remains MIT licensed and fully open source.
+- No, we're **not placing existing features behind a paywall**. Nx Powerpack introduces new features on top of Nx (more about that below).
- Yes, we still **strongly believe in OSS and our community**, and we will keep improving Nx more than ever; if anything, Powerpack will help us fund our OSS work on Nx core and ensure its long-term sustainability.
### What about my open-source repo ?
@@ -28,7 +29,7 @@ But now to the fun, technical part! Nx Powerpack is a bundle that - in this very
- [Self-hosted cache storage](#selfhosted-cache-storage)
- [Workspace conformance (beta)](#workspace-conformance-beta)
-Let’s dive in!
+Let's dive in!
## Get an Nx Powerpack License
@@ -42,9 +43,9 @@ npx nx activate-powerpack
## Codeowners for Monorepos
-Setting up Codeowners is highly recommended when designing a monorepo. If you’re not familiar, Codeowners is a common feature of VCS providers (such as GitHub, GitLab, Bitbucket, etc.), allowing you to enforce specific code reviewers to approve PRs. This functionality is especially important in a monorepo, where you manage multiple projects with multiple teams. You want to ensure the right people are reviewing the code being submitted.
+Setting up Codeowners is highly recommended when designing a monorepo. If you're not familiar, Codeowners is a common feature of VCS providers (such as GitHub, GitLab, Bitbucket, etc.), allowing you to enforce specific code reviewers to approve PRs. This functionality is especially important in a monorepo, where you manage multiple projects with multiple teams. You want to ensure the right people are reviewing the code being submitted.
-Here’s a simple example of a [GitHub CODEOWNERS definition](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners):
+Here's a simple example of a [GitHub CODEOWNERS definition](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners):
```plain {% fileName=".github/CODEOWNERS" %}
/docs/ @doc-owner
diff --git a/docs/blog/2024-10-03-nx-20-release.md b/docs/blog/2024-10-03-nx-20-release.md
index eefde82d6ef12..983fd9ebab54f 100644
--- a/docs/blog/2024-10-03-nx-20-release.md
+++ b/docs/blog/2024-10-03-nx-20-release.md
@@ -5,6 +5,7 @@ authors: [Mike Hartington]
tags: [nx, release]
cover_image: /blog/images/2024-10-03/nx-20-header.png
youtubeUrl: https://youtu.be/5-QwtlhaJK8
+description: Nx 20 enhances monorepo and TypeScript performance, adding to Nx 19's features.
---
I know it's hard to believe but Nx 20 is here! There's a lot of great updates in this release, but look back at some of the major features from Nx 19:
@@ -27,13 +28,13 @@ If you've been around the Nx ecosystem for any amount of time, you're probably a
With Nx 20, when using `create-nx-workspace --preset=ts`, workspaces will use Project References out of the box. Nx removes the maintenance cost of this feature by automatically updating the references for you when you run `build` or `typecheck` targets. You can also run [`nx sync`](/reference/nx-commands#sync) to update project references in your `tsconfig.json`, and `nx sync:check` in CI to validate the workspace.
-In addition to adopting Project References, we're also changing the way we link projects in a TypeScript monorepos. **Workspaces** is the standard way to link packages in monorepos. This is a feature that all modern package managers support, such as [npm](https://docs.npmjs.com/cli/using-npm/workspaces), [yarn](https://yarnpkg.com/features/workspaces), [pnpm](https://pnpm.io/workspaces), and [bun](https://bun.sh/docs/install/workspaces), where you can declare a `workspace` key in your `package.json` and provide it an array of paths. Then on install, your package manager will traverse any directories that it finds in the workspaces key, and link them to your `node-modules`. This built in feature provides a much more standard way of connecting your packages in a monorepo that it’s a no-brainer. Now we have a proper way to provide type information and have your packages available in a way developers are used to.
+In addition to adopting Project References, we're also changing the way we link projects in a TypeScript monorepos. **Workspaces** is the standard way to link packages in monorepos. This is a feature that all modern package managers support, such as [npm](https://docs.npmjs.com/cli/using-npm/workspaces), [yarn](https://yarnpkg.com/features/workspaces), [pnpm](https://pnpm.io/workspaces), and [bun](https://bun.sh/docs/install/workspaces), where you can declare a `workspace` key in your `package.json` and provide it an array of paths. Then on install, your package manager will traverse any directories that it finds in the workspaces key, and link them to your `node-modules`. This built in feature provides a much more standard way of connecting your packages in a monorepo that it's a no-brainer. Now we have a proper way to provide type information and have your packages available in a way developers are used to.
Note that we've enabled Project References and Workspaces for the TS preset (i.e. `--preset=ts`), and we're working on extending this support for all other presets soon (Angular, React, Vue, Node). If you are an existing Nx user and want to create an empty workspace in the previous "integrated" style, you can use `create-nx-workspace --preset=apps`.
## `@nx/rspack` Graduates From Labs 🎓
-[Rspack][rspack] has become one of the most exciting new bundlers in recent years. With a webpack-compatible API, it's a painless migration for folks who want faster builds without having to rewrite their entire build process. At Nx, we're big fans of Rspack and have been working on a plugin for folks who would like to migrate. With that in mind, the `@nx/rspack` plugin has officially been merged into the main Nx repository and will become a fully supported plugin for the ecosystem. Want to learn more about Rspac in general? Check out our recent live stream where we deep dive into how to use Rspack and cover it’s involvement with module federation.
+[Rspack][rspack] has become one of the most exciting new bundlers in recent years. With a webpack-compatible API, it's a painless migration for folks who want faster builds without having to rewrite their entire build process. At Nx, we're big fans of Rspack and have been working on a plugin for folks who would like to migrate. With that in mind, the `@nx/rspack` plugin has officially been merged into the main Nx repository and will become a fully supported plugin for the ecosystem. Want to learn more about Rspac in general? Check out our recent live stream where we deep dive into how to use Rspack and cover it's involvement with module federation.
{% youtube
src="https://www.youtube.com/watch?v=_c4zjYm0pYE"
diff --git a/docs/blog/2024-10-25-sports-retailer-success.md b/docs/blog/2024-10-25-sports-retailer-success.md
index 1a9c2dacf0874..23d9337f1c113 100644
--- a/docs/blog/2024-10-25-sports-retailer-success.md
+++ b/docs/blog/2024-10-25-sports-retailer-success.md
@@ -5,6 +5,7 @@ authors: [Philip Fulcher]
tags: [nx, 'customer story']
cover_image: '/blog/images/2024-10-25/header.avif'
pinned: true
+description: "US sports retailer's Nx monorepo transformation: CI pipeline times from 1hr to 7-9min, cache hit rates from 20% to 57%."
---
When adopting monorepos and Nx, it can feel like there's a lot that needs to be understood first before you get all the benefits. Oftentimes it's tempting to skip some fundamentals and just add all your code into one monorepo and call it a day. Following this mentality is the best way to actually _increase_ your CI run times and cost. Monorepos should simplify your architecture and reduce costs, not cause you to spend more money and time to build, test, and deploy. To make this possible, following a simple restructure of multiple applications and investing time and effort into setting up your monorepo can pay off in the long run. But what does this ideal structure look like, and what are the benefits?
@@ -17,7 +18,7 @@ While it's easy to say this architectural approach is better, it does help to hi
## Projects All The Way Down
-In our sports retailer monorepo, let’s consider that we have three apps for different parts of our frontend. In a worst case scenario, we bring all these apps together, configure their CI pipelines, and call it a day. This bare minimum, while it does give us a monorepo, it does not provide any real substantial value outside of dependencies being matched across the apps. As we start to add more and more to the monorepo, we'll see our CI run times start to increase. Anytime we try to cut a release, we'll be left waiting longer and longer. So what's the solution here?
+In our sports retailer monorepo, let's consider that we have three apps for different parts of our frontend. In a worst case scenario, we bring all these apps together, configure their CI pipelines, and call it a day. This bare minimum, while it does give us a monorepo, it does not provide any real substantial value outside of dependencies being matched across the apps. As we start to add more and more to the monorepo, we'll see our CI run times start to increase. Anytime we try to cut a release, we'll be left waiting longer and longer. So what's the solution here?
Let's say we have some code in our app that exists in all three of our apps that is copied across all of them. When your PR hits CI, this portion of code is built, tested, and linted in every place that it is copied, which is unnecessary. One block of shared code won't fix our CI pipeline times, but it will set us on the correct path. The solution is to start migrating portions that are common across any apps in a monorepo into its own project that we can import.
diff --git a/docs/blog/2024-10-29-nx-import.md b/docs/blog/2024-10-29-nx-import.md
index 64aec8942668d..fa7579826d7b7 100644
--- a/docs/blog/2024-10-29-nx-import.md
+++ b/docs/blog/2024-10-29-nx-import.md
@@ -5,6 +5,7 @@ authors: [Zack DeRose]
tags: [nx]
cover_image: '/blog/images/2024-10-29/nx-import-thumbnail.avif'
youtubeUrl: https://youtu.be/hnbwoV2-620
+description: Learn about the new nx import command that lets you import external repositories into your Nx monorepo while preserving git history.
---
- [The Need](#the-need)
diff --git a/docs/blog/2024-11-14-handling-cors.md b/docs/blog/2024-11-14-handling-cors.md
index 6d48574b5f3dc..407bedc087727 100644
--- a/docs/blog/2024-11-14-handling-cors.md
+++ b/docs/blog/2024-11-14-handling-cors.md
@@ -4,6 +4,7 @@ slug: handling-cors
authors: [Mike Hartington]
tags: [nx]
cover_image: '/blog/images/2024-11-14/cors.png'
+description: Learn to handle CORS issues in web development, with practical examples and solutions for common challenges.
---
## CORS - The Great Initiation For Web Developers
@@ -26,7 +27,7 @@ Now CORS-related issues can be addressed in multiple ways, and it can be as simp
> But wait, I thought Nx would do this for me?
-In past releases, Nx would provide options in our executors to configure a proxy connection between backend and frontend applications. This still exists for example in our Angular plugin where we are still using executors. However, with our decision to move to a more “optionally opinionated” approach, we now recommend that you use native CLI tools (like vite or webpack) instead of our executors. In this approach, you’d configure the proxy exactly according to how the tool prescribes. Nx doesn’t get in your way!
+In past releases, Nx would provide options in our executors to configure a proxy connection between backend and frontend applications. This still exists for example in our Angular plugin where we are still using executors. However, with our decision to move to a more "optionally opinionated" approach, we now recommend that you use native CLI tools (like vite or webpack) instead of our executors. In this approach, you'd configure the proxy exactly according to how the tool prescribes. Nx doesn't get in your way!
To address this, our two possible solutions could be at the API level, or the framework level.
@@ -91,7 +92,7 @@ app.use(
);
```
-Now, why would you use the `cors` middleware when you could just set the `Access-Control-Allow-Origin` header yourself? The middleware handles a lot of edge cases that you would need to write yourself, and at sub 250 lines of code, it doesn’t add too much to your codebase.
+Now, why would you use the `cors` middleware when you could just set the `Access-Control-Allow-Origin` header yourself? The middleware handles a lot of edge cases that you would need to write yourself, and at sub 250 lines of code, it doesn't add too much to your codebase.
### Leave It To The Framework Tools
diff --git a/docs/blog/2024-11-19-ci-affected-graph.md b/docs/blog/2024-11-19-ci-affected-graph.md
index fdc14968fb38a..16ecf41237d73 100644
--- a/docs/blog/2024-11-19-ci-affected-graph.md
+++ b/docs/blog/2024-11-19-ci-affected-graph.md
@@ -5,6 +5,7 @@ authors: ['Philip Fulcher']
tags: [nx-cloud]
cover_image: /blog/images/2024-11-19/header.avif
youtubeUrl: https://youtu.be/TS-Fp2iSlVM
+description: Nx Cloud's affected project graph visualization helps you understand CI impacts on projects and tasks, providing insight into monorepo dependencies.
---
As monorepos grow in size and complexity, it can be difficult to understand the relationships between different parts of
diff --git a/docs/blog/2024-11-30-advent-of-code-crystal.md b/docs/blog/2024-11-30-advent-of-code-crystal.md
index 298342d393ba1..42c03afa01073 100644
--- a/docs/blog/2024-11-30-advent-of-code-crystal.md
+++ b/docs/blog/2024-11-30-advent-of-code-crystal.md
@@ -5,6 +5,7 @@ authors: ['Zack DeRose']
tags: [nx]
cover_image: /blog/images/2024-11-30/thumbnail.png
youtubeUrl: https://youtu.be/st6Yq-19bW8
+description: Get started with Advent of Code using our Nx-powered starter repo that handles all setup, letting you focus purely on solving the daily challenges.
---
Talking with developers, we've found that one of the main reasons folks like using Nx is: Nx allows their team to focus on shipping a great product, while Nx handles all the rest:
diff --git a/docs/blog/2024-12-03-define-the-relationship-with-monorepos.md b/docs/blog/2024-12-03-define-the-relationship-with-monorepos.md
index 9217c3f170a9e..b2fbebb417139 100644
--- a/docs/blog/2024-12-03-define-the-relationship-with-monorepos.md
+++ b/docs/blog/2024-12-03-define-the-relationship-with-monorepos.md
@@ -4,6 +4,7 @@ slug: define-the-relationship-with-monorepos
authors: ['Philip Fulcher']
tags: [nx]
cover_image: /blog/images/2024-12-03/header.avif
+description: Discover how monorepos strengthen project relationships through code colocation, enabling faster iterations and better maintainability.
---
A monorepo might sound like a big, intimidating thing, but we're going to break it down to just the bare essentials. **A monorepo helps you better manage the relationships that already exist between your projects.** Once we understand those relationships, we can use tools to very quickly define them and pull them together into a more cohesive whole.
diff --git a/docs/blog/2024-12-06-nx-cloud-pipelines-in-nx-console.md b/docs/blog/2024-12-06-nx-cloud-pipelines-in-nx-console.md
index 27f754cb37377..a31a671c56ea8 100644
--- a/docs/blog/2024-12-06-nx-cloud-pipelines-in-nx-console.md
+++ b/docs/blog/2024-12-06-nx-cloud-pipelines-in-nx-console.md
@@ -4,6 +4,7 @@ slug: nx-cloud-pipelines-come-to-nx-console
authors: [Zack DeRose]
tags: [nx, nx-cloud, nx-console, enterprise]
cover_image: /blog/images/2024-11-25/thumbnail.png
+description: Track your Nx Cloud CI pipelines directly in your IDE with the new Nx Console integration, featuring status updates and notifications.
---
## Your CI Pipelines, Now At-A-Glance In Your IDE
diff --git a/docs/blog/2024-12-10-tailoring-nx-for-your-organization.md b/docs/blog/2024-12-10-tailoring-nx-for-your-organization.md
index 3c1d3abb5a5e9..ff03d704107e1 100644
--- a/docs/blog/2024-12-10-tailoring-nx-for-your-organization.md
+++ b/docs/blog/2024-12-10-tailoring-nx-for-your-organization.md
@@ -4,13 +4,14 @@ slug: tailoring-nx-for-your-organization
authors: ['Philip Fulcher']
tags: [nx]
cover_image: /blog/images/2024-12-10/header.avif
+description: Create custom Nx plugins to enforce standards and automate workflows, making your monorepo more maintainable and efficient.
---
Maintaining a scalable and maintainable monorepo is one of the biggest challenges for growing teams. Standards are essential for keeping code consistent, but relying on documentation and human diligence often falls short. The real challenge is _how_ to enforce those standards effectively and sustainably.
This is where Nx comes in. Nx provides ["drop-in" plugins](/plugin-registry) that enhance the developer experience in monorepos, offering solutions for everything from code generation to automating caching and task execution. One of the biggest benefits is how easily you can **create [custom plugins](/extending-nx/intro/getting-started)** which allow you to **automate your standards based on your organization's needs**.
-In this article, we’ll explore how Nx plugins, including custom ones, can help you maintain scalable monorepos while simplifying workflows for your team.
+In this article, we'll explore how Nx plugins, including custom ones, can help you maintain scalable monorepos while simplifying workflows for your team.
## What are Nx Plugins and why do you need them?
@@ -20,7 +21,7 @@ Nx plugins reduce the overhead of using specific tools or frameworks in a monore
- **Executors**: For automating tasks like building, testing, or deploying.
- **Migrations**: For updating codebases, similar to codemods.
-You’re not required to use Nx plugins, but they can significantly simplify your workflows. For example, they automate repetitive tasks and enforce consistency across your projects. You can explore the [Nx Plugin Registry](/plugin-registry) to see the available plugins, including those built by the Nx core team and contributions from the community.
+You're not required to use Nx plugins, but they can significantly simplify your workflows. For example, they automate repetitive tasks and enforce consistency across your projects. You can explore the [Nx Plugin Registry](/plugin-registry) to see the available plugins, including those built by the Nx core team and contributions from the community.
Installing a plugin is straightforward. Use the `nx add` command to integrate a plugin into your workspace. For example:
@@ -28,9 +29,9 @@ Installing a plugin is straightforward. Use the `nx add` command to integrate a
nx add @nx/playwright
```
-The plugins provided by the Nx team are usually designed to cover general use cases, like setting up popular frameworks or tools. However, the real power of lies in **creating your own plugins—or extending existing ones—to** automate your organization’s specific workflows.
+The plugins provided by the Nx team are usually designed to cover general use cases, like setting up popular frameworks or tools. However, the real power of lies in **creating your own plugins—or extending existing ones—to** automate your organization's specific workflows.
-Creating a custom plugin might sound intimidating, but it’s simpler than you think. The `@nx/devkit` package provides utilities to help you build functionality just like the Nx core team. You’re not starting from scratch; you’re leveraging an established API designed to make the process accessible and efficient.
+Creating a custom plugin might sound intimidating, but it's simpler than you think. The `@nx/devkit` package provides utilities to help you build functionality just like the Nx core team. You're not starting from scratch; you're leveraging an established API designed to make the process accessible and efficient.
## Getting started with custom plugins
@@ -110,7 +111,7 @@ export async function libraryGenerator(
export default libraryGenerator;
```
-This example of a generator doesn’t do much on its own, but it pre-populates options for the underlying generator. This can already be a huge gain in terms of ensuring consistency as it:
+This example of a generator doesn't do much on its own, but it pre-populates options for the underlying generator. This can already be a huge gain in terms of ensuring consistency as it:
- Names the project appropriately
- Creates the correct import path
@@ -128,9 +129,9 @@ These generators will also show up in [Nx Console](/getting-started/editor-setup
Nx plugins that are located within an existing Nx workspace can be run directly, without the need to build, bundle, or package. They just work and respond to changes just as quickly as any other project in your workspace.
-Since we’re the monorepo people, it might seem wild to suggest that you would have multiple monorepos in your organization; but this is a common scenario, and we whole-heartedly support it.
+Since we're the monorepo people, it might seem wild to suggest that you would have multiple monorepos in your organization; but this is a common scenario, and we whole-heartedly support it.
-To support consistency across your org, you can publish this plugin so that all of your Nx workspaces share the same generators and inferred tasks you just created. This makes onboarding any new Nx workspace easier and more consistent. The generator for your plugin will include configuration for [`nx release`](/features/manage-releases) so that you’re ready to publish immediately:
+To support consistency across your org, you can publish this plugin so that all of your Nx workspaces share the same generators and inferred tasks you just created. This makes onboarding any new Nx workspace easier and more consistent. The generator for your plugin will include configuration for [`nx release`](/features/manage-releases) so that you're ready to publish immediately:
```bash
nx release --first-release
@@ -144,7 +145,7 @@ nx local-registry
## Presets to create your workspace the way you want it, every time
-If you’re publishing a plugin for multiple workspaces in your organization, you’ll want those new workspaces to be created as consistently as your projects. When you create an Nx workspace, you might use a preset like this:
+If you're publishing a plugin for multiple workspaces in your organization, you'll want those new workspaces to be created as consistently as your projects. When you create an Nx workspace, you might use a preset like this:
```shell
npx create-nx-workspace@latest react-monorepo --preset=react-monorepo
diff --git a/docs/blog/2024-12-16-angular-state-management-2025.md b/docs/blog/2024-12-16-angular-state-management-2025.md
index 5d67c932bc140..5bb54c55fa002 100644
--- a/docs/blog/2024-12-16-angular-state-management-2025.md
+++ b/docs/blog/2024-12-16-angular-state-management-2025.md
@@ -4,6 +4,7 @@ slug: angular-state-management-2025
authors: ['Mike Hartington']
tags: [angular]
cover_image: /blog/images/2024-12-16/thumbnail.png
+description: Discover how Angular Signals and modern state management approaches simplify application development in 2025.
---
## Revisiting State Management
diff --git a/docs/blog/2024-12-18-dynamic-targets-with-inference.md b/docs/blog/2024-12-18-dynamic-targets-with-inference.md
index fcda366e1460d..466b2802e5b4c 100644
--- a/docs/blog/2024-12-18-dynamic-targets-with-inference.md
+++ b/docs/blog/2024-12-18-dynamic-targets-with-inference.md
@@ -5,6 +5,7 @@ authors: ['Nicolas Beaussart', 'Juri Strumpflohner']
tags: [nx]
cover_image: /blog/images/articles/heroimg-nx-dynamic-targets.jpg
youtubeUrl: https://www.youtube.com/embed/v0lSEYPjgOs
+description: Use Nx's task inference to automatically assign unique ports to Storybook instances, preventing conflicts in your monorepo.
---
{% callout type="info" title="Nx Champion takeover" %}
diff --git a/docs/blog/2024-12-22-nx-highlights-2024.md b/docs/blog/2024-12-22-nx-highlights-2024.md
index 42aa743938aa3..c70578cb3a5f5 100644
--- a/docs/blog/2024-12-22-nx-highlights-2024.md
+++ b/docs/blog/2024-12-22-nx-highlights-2024.md
@@ -5,6 +5,7 @@ authors: ['Juri Strumpflohner', 'Victor Savkin']
tags: ['nx']
cover_image: /blog/images/articles/nx-highlights-2024-bg.jpg
youtubeUrl: https://youtu.be/n4MBETdLBVg
+description: 'See how Nx evolved in 2024 with Project Crystal, Nx Agents, and enhanced monorepo capabilities for both open source and enterprise.'
---
Thank you for being part of the Nx community. Your support and contributions make Nx what it is today, driving it forward as the go-to solution for delivering the best developer experience in monorepos. Nx and Nx Cloud integrate to provide a **complete solution for managing monorepos** at every stage of the development cycle, both locally and in CI.
@@ -13,7 +14,7 @@ In 2024, we focused on making Nx **more adaptable**, seamlessly fitting into OSS
{% github-repository title="Star Nx on GitHub" url="https://github.com/nrwl/nx" /%}
-As we wrap up the year, we’re excited to share the highlights and give you a look at what’s coming in 2025.
+As we wrap up the year, we're excited to share the highlights and give you a look at what's coming in 2025.
{% toc /%}
@@ -27,9 +28,9 @@ Nx has been solving monorepos long before package managers introduced features l
When **npm**, **Yarn**, and **PNPM** introduced "workspaces," another option emerged: **package-based monorepos**, where Nx primarily acted as a task runner with caching and parallelization.
-Integrated monorepos offer automation but are opinionated. Package-based monorepos provide flexibility but require more effort to manage. Combining the two wasn’t easy, largely because of how Nx plugins were initially designed.
+Integrated monorepos offer automation but are opinionated. Package-based monorepos provide flexibility but require more effort to manage. Combining the two wasn't easy, largely because of how Nx plugins were initially designed.
-We wanted to make sure you didn’t have to choose. This led to **Project Crystal**, an effort to make Nx plugins more adaptable. These "crystalized" plugins:
+We wanted to make sure you didn't have to choose. This led to **Project Crystal**, an effort to make Nx plugins more adaptable. These "crystalized" plugins:
- **Rely on your existing config files** (e.g., `@nx/vite` enhances `vite.config.ts` rather than replacing it).
- **Enhance without interfering**, allowing for a better experience without locking you into the plugin.
@@ -46,7 +47,7 @@ Want to dive deeper? Check out [our announcement blog post](/blog/what-if-nx-plu
-Nx isn’t just about managing monorepos locally. A big part of the workflow happens on CI. If your monorepo doesn’t run reliably in CI, it’s not working. That’s why Nx Cloud has been a major focus, especially for scaling monorepos in CI environments. This year, we introduced some of the most impactful features yet:
+Nx isn't just about managing monorepos locally. A big part of the workflow happens on CI. If your monorepo doesn't run reliably in CI, it's not working. That's why Nx Cloud has been a major focus, especially for scaling monorepos in CI environments. This year, we introduced some of the most impactful features yet:
- [Nx Agents](/ci/features/distribute-task-execution)
- [Atomizer](/ci/features/split-e2e-tasks)
@@ -54,11 +55,11 @@ Nx isn’t just about managing monorepos locally. A big part of the workflow hap
With remote caching as the foundation, these features take CI performance to the next level. At scale, **parallelizing tasks across machines becomes necessary**. We've done this manually for clients in the past, scripting complex CI setups. A lot of that experience shaped Nx Agents, making distribution seamless and efficient.
-Manually configuring parallelization is time-consuming and fragile. It’s a static optimization, while your monorepo keeps changing. We wrote a [blog post](/blog/reliable-ci-a-new-execution-model-fixing-both-flakiness-and-slowness) that explains the difference between the traditional **push-based model** and Nx’s **pull-based approach** to CI.
+Manually configuring parallelization is time-consuming and fragile. It's a static optimization, while your monorepo keeps changing. We wrote a [blog post](/blog/reliable-ci-a-new-execution-model-fixing-both-flakiness-and-slowness) that explains the difference between the traditional **push-based model** and Nx's **pull-based approach** to CI.
-If you haven’t tried Nx Agents yet, enabling them takes a single line in your CI setup:
+If you haven't tried Nx Agents yet, enabling them takes a single line in your CI setup:
```yaml
npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js"
@@ -76,9 +77,9 @@ Finally, we introduced **flakiness detection** across all CI task runs. Flaky ta
### Nx Release
-A big use case for Nx isn’t just managing application monorepos but also developing and publishing packages to NPM. One missing piece was a built-in way to handle versioning, changelog generation, and publishing. While tools like [Lerna](https://lerna.js.org) or [Changesets](https://github.com/changesets/changesets) could be integrated, many wanted something more tightly connected to Nx itself.
+A big use case for Nx isn't just managing application monorepos but also developing and publishing packages to NPM. One missing piece was a built-in way to handle versioning, changelog generation, and publishing. While tools like [Lerna](https://lerna.js.org) or [Changesets](https://github.com/changesets/changesets) could be integrated, many wanted something more tightly connected to Nx itself.
-That’s why we released [**Nx Release**](/features/manage-releases). It handles the entire process:
+That's why we released [**Nx Release**](/features/manage-releases). It handles the entire process:
- Bumping versions
- Generating changelogs
@@ -110,7 +111,7 @@ Migrating projects into a monorepo is often seen as complicated and error-prone.
`nx import` builds on the work done in **Project Crystal**, making migrations smoother. For example, when importing a Gradle-based app, Nx detects the Gradle configuration, suggests installing the `@nx/gradle` plugin, and sets everything up for you. It reads your Gradle files, identifies runnable tasks, configures caching, and integrates the project into the workspace.
-The experience is the same whether you’re importing a JavaScript app, a Gradle project, or another tech stack.
+The experience is the same whether you're importing a JavaScript app, a Gradle project, or another tech stack.
With `nx import`, you can:
@@ -132,7 +133,7 @@ By connecting your GitHub organization, you can select repositories directly. Nx
-A major benefit is that user management syncs directly with GitHub. When someone links their GitHub account to Nx Cloud, they’re automatically added to the correct organization. Membership changes in GitHub are reflected in Nx Cloud without manual intervention.
+A major benefit is that user management syncs directly with GitHub. When someone links their GitHub account to Nx Cloud, they're automatically added to the correct organization. Membership changes in GitHub are reflected in Nx Cloud without manual intervention.
Learn more about how it works [here](/ci/intro/connect-to-nx-cloud).
@@ -144,7 +145,7 @@ One major update was the new pattern for the **module-federation-dev-server**. I
We also adopted **Module Federation 2.0**, adding runtime plugins and key enhancements. On top of that, we introduced support for **Rspack Module Federation**, allowing Nx users to take advantage of newer tools in the ecosystem.
-To simplify setup, we launched **@nx/module-federation**, a package that streamlines configuration and management of federated apps in Nx workspaces. Nx’s approach to Module Federation has been highlighted by the community and is now featured on [module-federation.io](https://module-federation.io/practice/monorepos/nx-for-module-federation.html).
+To simplify setup, we launched **@nx/module-federation**, a package that streamlines configuration and management of federated apps in Nx workspaces. Nx's approach to Module Federation has been highlighted by the community and is now featured on [module-federation.io](https://module-federation.io/practice/monorepos/nx-for-module-federation.html).
For more details on how Module Federation works in Nx, check out the [technical overview](/concepts/module-federation/nx-module-federation-technical-overview) or catch one of our [live streams on Rspack and Module Federation](https://www.youtube.com/watch?v=_c4zjYm0pYE).
@@ -152,7 +153,7 @@ For more details on how Module Federation works in Nx, check out the [technical
Nx Console has become a key part of the "Nx experience." In 2024, we introduced several updates to make it even more useful.
-One standout feature is the **Project Detail View**. With Project Crystal, Nx can dynamically infer targets from your configuration. You can see these [inferred tasks](/concepts/inferred-tasks) by running `nx show project my-project --web`, but now they’re directly available inside Nx Console. This gives you quick access to project details, command options, caching configurations, and more, right in your editor.
+One standout feature is the **Project Detail View**. With Project Crystal, Nx can dynamically infer targets from your configuration. You can see these [inferred tasks](/concepts/inferred-tasks) by running `nx show project my-project --web`, but now they're directly available inside Nx Console. This gives you quick access to project details, command options, caching configurations, and more, right in your editor.
{% video-player src="/documentation/blog/media/nxconsole-project-view.mp4" alt="Nx Console Project Detail View" autoPlay=true loop=true /%}
@@ -166,7 +167,7 @@ Nx Console notifies you inside your IDE when pipelines succeed or fail. This rem
These updates make CI more accessible and help you stay focused without leaving your development environment.
-If you haven’t tried it yet, grab Nx Console for [VSCode](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) or [JetBrains IDEs](https://plugins.jetbrains.com/plugin/21060-nx-console).
+If you haven't tried it yet, grab Nx Console for [VSCode](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) or [JetBrains IDEs](https://plugins.jetbrains.com/plugin/21060-nx-console).
### Affected Project Graph in Nx Cloud
@@ -204,7 +205,7 @@ We have already a lot of exciting features that we want to ship next year. Here
Nx Cloud already helps balance **speed and cost** by dynamically scaling agents based on PR size and workload. This ensures you only use the resources you need, keeping CI fast without unnecessary expense.
-But there’s still untapped potential. **Local Agents** will let you connect your developer machine to Nx Cloud, allowing it to handle tasks when it’s underutilized. This reduces the need for extra CI agents while making better use of the machines you already have, without disrupting your workflow.
+But there's still untapped potential. **Local Agents** will let you connect your developer machine to Nx Cloud, allowing it to handle tasks when it's underutilized. This reduces the need for extra CI agents while making better use of the machines you already have, without disrupting your workflow.
We have a proof-of-concept in place, and we're working to turn this into a full feature.
@@ -223,35 +224,35 @@ Stay tuned as we keep working on this and releasing it in 2025.
### Rewriting Nx Core in Rust
-We’ve already rewritten performance-critical parts of Nx in **Rust**, and in 2025 we plan to extend this to more of the core. One of the main goals is to ensure that Nx adds as little overhead as possible to your monorepo, keeping things fast and efficient at scale.
+We've already rewritten performance-critical parts of Nx in **Rust**, and in 2025 we plan to extend this to more of the core. One of the main goals is to ensure that Nx adds as little overhead as possible to your monorepo, keeping things fast and efficient at scale.
-This rewrite aligns with Nx’s goal of being **tech agnostic**, supporting polyglot monorepos and workflows beyond JavaScript. By reducing reliance on Node.js for the core, Nx can fit into a wider range of environments, while plugins will continue to be written in **TypeScript** to keep development familiar and extensible.
+This rewrite aligns with Nx's goal of being **tech agnostic**, supporting polyglot monorepos and workflows beyond JavaScript. By reducing reliance on Node.js for the core, Nx can fit into a wider range of environments, while plugins will continue to be written in **TypeScript** to keep development familiar and extensible.
-By moving core parts to Rust, we’re focusing on performance where it matters most, while maintaining the flexibility that makes Nx useful across different tech stacks.
+By moving core parts to Rust, we're focusing on performance where it matters most, while maintaining the flexibility that makes Nx useful across different tech stacks.
### Support for Long-Running Tasks
-Nx is built around tasks that start and finish, but that doesn’t always fit workflows involving **dev servers, watch-mode builds, or background services**. These tasks run indefinitely, which can be tricky to manage, especially when other processes depend on them, like e2e tests that require a server to stay up.
+Nx is built around tasks that start and finish, but that doesn't always fit workflows involving **dev servers, watch-mode builds, or background services**. These tasks run indefinitely, which can be tricky to manage, especially when other processes depend on them, like e2e tests that require a server to stay up.
-We’re working on adding support for **long-running tasks** that can run alongside regular build and test processes. This will make workflows smoother and help avoid the need for manual orchestration. The upcoming **Nx terminal UI rewrite** will reflect this, making it easier to track and visualize long-running processes alongside other tasks (more about that later in the article).
+We're working on adding support for **long-running tasks** that can run alongside regular build and test processes. This will make workflows smoother and help avoid the need for manual orchestration. The upcoming **Nx terminal UI rewrite** will reflect this, making it easier to track and visualize long-running processes alongside other tasks (more about that later in the article).
-If you’re curious about the direction we’re heading, take a look at the ongoing [RFC](https://github.com/nrwl/nx/discussions/29025).
+If you're curious about the direction we're heading, take a look at the ongoing [RFC](https://github.com/nrwl/nx/discussions/29025).
### Unified Monorepo Support
-Nx already works well with both **integrated monorepos** driven by Nx plugins and **package-based monorepos** using npm, Yarn, or PNPM workspaces. Where things get trickier is mixing the two approaches since integrated plugins didn’t always align smoothly with workspace-based setups.
+Nx already works well with both **integrated monorepos** driven by Nx plugins and **package-based monorepos** using npm, Yarn, or PNPM workspaces. Where things get trickier is mixing the two approaches since integrated plugins didn't always align smoothly with workspace-based setups.
-With **Nx Crystal Plugins**, we’re making it easier to blend these approaches. You get the automation and guardrails of Nx plugins while retaining the flexibility of workspace-based monorepos. This lets you enhance a PNPM, npm, or Yarn workspace with Nx’s powerful task orchestration, caching, and dependency management, without fully committing to an integrated setup.
+With **Nx Crystal Plugins**, we're making it easier to blend these approaches. You get the automation and guardrails of Nx plugins while retaining the flexibility of workspace-based monorepos. This lets you enhance a PNPM, npm, or Yarn workspace with Nx's powerful task orchestration, caching, and dependency management, without fully committing to an integrated setup.
A great example of this is our [Next.js + Nx + PNPM course](/courses/pnpm-nx-next), where we show how to enhance a PNPM workspace with Nx. But this is just the beginning. Our goal is to make the experience even better, reducing friction and making it seamless to mix and match both models.
-Also note: existing workspaces won’t be affected. Integrated monorepos will continue to work as they always have, but new projects will default to this more flexible model.
+Also note: existing workspaces won't be affected. Integrated monorepos will continue to work as they always have, but new projects will default to this more flexible model.
You can read more about this direction in the [RFC](https://github.com/nrwl/nx/discussions/29099).
### Nx Terminal Redesign
-The terminal is one of the main ways developers interact with Nx, and we’re working on a complete redesign to make it nicer, clearer, and easier to use.
+The terminal is one of the main ways developers interact with Nx, and we're working on a complete redesign to make it nicer, clearer, and easier to use.
The goal is to reduce noise and surface the most important information for each task. Regardless whether you're running multiple dev servers, long-running tasks, or parallel builds.
@@ -269,7 +270,7 @@ We want Nx to feel just as natural for scaling Node applications as it does for
Nx has grown beyond JavaScript, with support for tools across different ecosystems. In 2024, we introduced **Gradle support** to simplify Java app management in monorepos.
-Next, we’re expanding to **Maven** and **.NET**, continuing to break down barriers for teams managing projects in multiple languages. The goal is to make Nx a natural fit for polyglot monorepos, keeping workflows fast and consistent across tech stacks.
+Next, we're expanding to **Maven** and **.NET**, continuing to break down barriers for teams managing projects in multiple languages. The goal is to make Nx a natural fit for polyglot monorepos, keeping workflows fast and consistent across tech stacks.
## Excited for 2025?
diff --git a/docs/blog/2025-01-06-nx-update-20-3.md b/docs/blog/2025-01-06-nx-update-20-3.md
index 68f4a965f7e31..80d34a5bdc62e 100644
--- a/docs/blog/2025-01-06-nx-update-20-3.md
+++ b/docs/blog/2025-01-06-nx-update-20-3.md
@@ -4,6 +4,7 @@ slug: nx-update-20-3
authors: [Zack DeRose]
tags: [nx]
cover_image: /blog/images/2025-01-06/nx-20-3.png
+description: Discover the latest in Nx 20.3, featuring TypeScript project references, enhanced Rspack support, Nx Console improvements, and powerful Nx Cloud updates.
---
It's been a few months now since our last major update with [Nx 20](), let's check in with the latest updates since 20 came out, as we've now dropped 3 minor releases since them. Here's a rundown of everything new:
diff --git a/docs/blog/2025-01-09-who-gave-js-a-build-step.md b/docs/blog/2025-01-09-who-gave-js-a-build-step.md
index 34a770339a6d9..99724b548dd41 100644
--- a/docs/blog/2025-01-09-who-gave-js-a-build-step.md
+++ b/docs/blog/2025-01-09-who-gave-js-a-build-step.md
@@ -4,6 +4,7 @@ slug: who-gave-js-a-build-step
authors: [Zack DeRose]
tags: []
cover_image: /blog/images/2025-01-09/thumbnail.png
+description: 'Explore the evolution of JavaScript build tools with Webpack maintainer Zack Jackson, from simple script tags to modern bundling solutions.'
---
JavaScript is awesome for many reasons. Not the least of these is as an interpreted language, we can actually send our JavaScript as-is over HTTP just as plain text right to a browser.
@@ -75,7 +76,7 @@ When we utilize "code-splitting", we're "chunking" that 1 massive javascript fil
Our bundler is capable of automating some of this code-splitting for us, but by using [dynamic `import()` statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import), we can signal to most bundlers to create dynamic chunks around those imports. This can be particularly effective when using a router on your application - to ensure that the code for each route is dynamically loaded when the route is activated.
-Let’s break down code-splitting with an actual example. Imagine you’re building a single-page application (SPA) with React and `react-router` that dynamically loads components for each route:
+Let's break down code-splitting with an actual example. Imagine you're building a single-page application (SPA) with React and `react-router` that dynamically loads components for each route:
```tsx {% filename="app.tsx" %}
import React from 'react';
@@ -154,7 +155,7 @@ EcmaScript Modules (or ESM or `"type": "module"` or `.mjs`) vs. CommonJS modules
Quoting from [an article I read on this topic that rang especially true](https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1):
-> Superficially, ESM looks very similar to CJS, but their implementations couldn’t be more different. One of them is a honey bee, and the other is a murder hornet. But I can never remember which one is which.
+> Superficially, ESM looks very similar to CJS, but their implementations couldn't be more different. One of them is a honey bee, and the other is a murder hornet. But I can never remember which one is which.
The ESM module format uses `import` statements to bring in other modules, and `export` statements to mark public/consumable pieces of a module.
diff --git a/docs/blog/2025-01-27-project-references.md b/docs/blog/2025-01-27-project-references.md
index 0543a0ee5765e..e388ae261551b 100644
--- a/docs/blog/2025-01-27-project-references.md
+++ b/docs/blog/2025-01-27-project-references.md
@@ -5,6 +5,7 @@ authors: [Zack DeRose]
tags: [typescript, monorepo, nx]
cover_image: /blog/images/articles/ts-islands.png
youtubeUrl: https://youtu.be/SDE3cIq28s8
+description: Learn how TypeScript Project References create efficient boundaries in your codebase, improving build performance and type checking in large-scale projects.
---
{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
diff --git a/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md b/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md
index b68ccc21bf089..83e43b6a1008e 100644
--- a/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md
+++ b/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md
@@ -4,6 +4,7 @@ slug: managing-ts-packages-in-monorepos
authors: [Juri Strumpflohner]
tags: [typescript, monorepo, nx]
cover_image: /blog/images/articles/bg-managing-typescript-packages.jpg
+description: Compare strategies for managing TypeScript packages in monorepos, from relative imports to project references, and find the best approach for your project.
---
{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
@@ -16,7 +17,7 @@ This article is part of the TypeScript Project References series:
{% /callout %}
-Managing TypeScript packages in a monorepo presents unique challenges. As your monorepo grows, so does the complexity of structuring and resolving dependencies between packages. From using simple relative imports to taking advantage of TypeScript path aliases, project references, and your package manager’s workspaces feature, developers have a variety of strategies at their disposal. But which approach is the best fit for you?
+Managing TypeScript packages in a monorepo presents unique challenges. As your monorepo grows, so does the complexity of structuring and resolving dependencies between packages. From using simple relative imports to taking advantage of TypeScript path aliases, project references, and your package manager's workspaces feature, developers have a variety of strategies at their disposal. But which approach is the best fit for you?
{% toc /%}
@@ -245,12 +246,10 @@ This is distinct from `tsconfig.base.json`, which is used to share common config
"module": "NodeNext",
"strict": true,
"moduleResolution": "NodeNext",
-+ "composite": true,
-+ "declaration": true,
-+ "declarationMap": true,
+ "composite": true,
+ "declaration": true,
+ "declarationMap": true,
"sourceMap": true,
- "baseUrl": ".",
-- "rootDir": ".",
"paths": {
"@ts-monorepo-linking/lib-a": ["packages/lib-a/src/index.ts"]
}
@@ -400,10 +399,6 @@ This approach **eliminates the need for TypeScript path aliases for module resol
"declaration": true,
"declarationMap": true,
"sourceMap": true,
-- "baseUrl": ".",
-- "paths": {
-- "@ts-monorepo-linking/lib-a": ["packages/lib-a/src/index.ts"]
-- }
}
}
```
diff --git a/docs/blog/2025-01-29-new-nx-experience.md b/docs/blog/2025-01-29-new-nx-experience.md
index 5b1b6e777015e..e441530572124 100644
--- a/docs/blog/2025-01-29-new-nx-experience.md
+++ b/docs/blog/2025-01-29-new-nx-experience.md
@@ -5,6 +5,7 @@ authors: [Juri Strumpflohner]
tags: []
cover_image: /blog/images/articles/new-ts-experience-bg.jpg
youtubeUrl: https://youtu.be/D9D8KNffyBk
+description: Discover how Nx's new workspaces setup combines package managers with TypeScript project references for better performance and developer experience in monorepos.
---
{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
@@ -186,7 +187,7 @@ For example, after importing `mytslib` into `myviteapp`, you'll notice that `app
{% video-player src="/documentation/blog/media/08-tssetup-watching.mp4" alt="Automatically watching buildable libraries and rebuilding them." showControls=true autoPlay=true loop=false showDescription=true /%}
-In our current setup, the `mytslib` package is not “buildable”. Notice it directly exports the TypeScript files. This means when `myviteapp` imports `mytslib`, it directly imports the TypeScript files and handles the transpilation. As a result, if we serve the application in dev mode, any changes to `mytslib` will automatically update the application because it depends on the source files directly.
+In our current setup, the `mytslib` package is not "buildable". Notice it directly exports the TypeScript files. This means when `myviteapp` imports `mytslib`, it directly imports the TypeScript files and handles the transpilation. As a result, if we serve the application in dev mode, any changes to `mytslib` will automatically update the application because it depends on the source files directly.
However, in some cases, you may have buildable libraries. These are useful for caching, CI optimizations, or releasing packages outside the monorepo. When a buildable library changes, it must be recompiled to reflect the updates. To streamline this process, Nx introduces a `watch-deps` target, which automatically watches and rebuilds the dependencies of your applications.
@@ -336,7 +337,7 @@ And note, this is the **worst-case scenario**, relying solely on distributing ty
It's also important to emphasize that the main reason we can fully leverage these benefits from TypeScript project references is that we avoid the maintenance burden of setting them up manually, thanks to the automated [Nx sync](#automatically-syncing-typescript-project-references) command.
-Now, **if your company struggles with these performance issues in large TypeScript monorepos**, [let us know](https://bit.ly/3EgXq5x). We’ve [worked with many teams](/customers) to solve similar challenges and would be happy to help. [Reach out!](https://bit.ly/3EgXq5x)
+Now, **if your company struggles with these performance issues in large TypeScript monorepos**, [let us know](https://bit.ly/3EgXq5x). We've [worked with many teams](/customers) to solve similar challenges and would be happy to help. [Reach out!](https://bit.ly/3EgXq5x)
## FAQ
@@ -370,9 +371,9 @@ For now, we continue to use the TypeScript path alias-based setup for pure Angul
## Wrapping up
-That’s it! Try it out and let us know what you think. If you encounter any issues or have questions, don’t hesitate to reach out. We want to catch all edge cases before making this the default for new Nx workspaces.
+That's it! Try it out and let us know what you think. If you encounter any issues or have questions, don't hesitate to reach out. We want to catch all edge cases before making this the default for new Nx workspaces.
-If you’re working in a large monorepo and **struggling with the performance issues we discussed**, [reach out](https://bit.ly/3EgXq5x). We’ve [helped many teams](/customers) tackle similar challenges and would be happy to assist.
+If you're working in a large monorepo and **struggling with the performance issues we discussed**, [reach out](https://bit.ly/3EgXq5x). We've [helped many teams](/customers) tackle similar challenges and would be happy to assist.
---
diff --git a/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md b/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md
index 676fb07036ada..4cc47b8e4e04b 100644
--- a/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md
+++ b/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md
@@ -4,6 +4,7 @@ slug: ota-updates-with-zephyr
authors: [Colum Ferry]
tags: []
cover_image: /blog/images/2025-01-31/cover-image.jpg
+description: 'Deploy React Native app updates instantly with Module Federation and Zephyr Cloud, skipping app store review processes.'
---
Module Federation is an exciting and continually evolving technology. The use cases for Module Federation have expanded from [Micro Frontends](/concepts/module-federation/micro-frontend-architecture) and [Faster Builds](/concepts/module-federation/faster-builds-with-module-federation) to also include something that should be extremely interesting for React Native users.
@@ -12,9 +13,9 @@ Thanks to the wonderful work from the [Re.Pack](https://re-pack.dev/) team at [C
We have an article on [**Next-Gen Module Federation Deployments with Nx and Zephyr Cloud**](/blog/next-gen-module-federation-deployment) where you can learn more about what Zephyr Cloud is and how you can leverage it to improve your deployment story with Module Federation.
-In this article, we’ll be discussing Super Apps and how you can achieve Over-The-Air updates to your native mobile applications with React Native and Re.Pack.
+In this article, we'll be discussing Super Apps and how you can achieve Over-The-Air updates to your native mobile applications with React Native and Re.Pack.
-## What are “Super Apps”?
+## What are "Super Apps"?
First, to help us all get familiar with terminology, Super Apps are a term commonly used in the Asian development world to signify single applications that encompass many different domains. A good example is the [WeChat](https://www.wechat.com/) app which expanded from a simple messaging service to also include payments and e-commerce systems.
@@ -43,7 +44,7 @@ Zephyr Cloud is already known as the best-in-class solution for deploying and ma
As Zephyr Cloud handles rollbacks and versioning of producers - hot fixes and issue remediation can happen within seconds. Load the dashboard, find the producer, rollback to previous version.
-For user support this is incredible. Imagine a scenario where a user is Live Chatting with your support team about an issue - the agent contacts the dev team about the issue - the dev team rolls back to the previous working version all within a matter of minutes (Zephyr Cloud’s rollbacks tend to be sub-second, but we need to account for time lost in communication). The agent can then tell the user to simply close and re-open the application. It’s **incredible**.
+For user support this is incredible. Imagine a scenario where a user is Live Chatting with your support team about an issue - the agent contacts the dev team about the issue - the dev team rolls back to the previous working version all within a matter of minutes (Zephyr Cloud's rollbacks tend to be sub-second, but we need to account for time lost in communication). The agent can then tell the user to simply close and re-open the application. It's **incredible**.
## Where does Nx fit?
@@ -53,7 +54,7 @@ While you could have multiple repositories housing each portion of the applicati
There are known limitations around dependency management when using React Native, Re.Pack and Module Federation. Limitations such as dependencies that rely on native code must be aligned between all portions of the application. If these were to change, a new binary deployment to the app store must be done. JavaScript dependencies _can_ differ between portions, but this also introduces risk of runtime breaking changes.
-Nx mitigates these risks. With its enforcement of a [single-version policy](/concepts/decisions/dependency-management#single-version-policy) it becomes much easier to ensure that if a dependency changes _all_ portions of the Module Federation setup are marked as [“affected”](/ci/features/affected) requiring a new deployment.
+Nx mitigates these risks. With its enforcement of a [single-version policy](/concepts/decisions/dependency-management#single-version-policy) it becomes much easier to ensure that if a dependency changes _all_ portions of the Module Federation setup are marked as ["affected"](/ci/features/affected) requiring a new deployment.
Beyond just mitigating risk of changing dependencies that can cause runtime errors, Nx will also ensure your application to scale to more developers and more feature teams. With features such as [Task Caching](/features/cache-task-results) and [Task Orchestration](/features/run-tasks#defining-a-task-pipeline) developers will know when they make their changes if they are introducing regressions or breaking changes to other areas within the system faster - before it hits production.
@@ -116,7 +117,7 @@ If you run `pnpm nx graph` you will see the project graph below:
-MobileHost is the main binary application while the others act as “Mini apps” that provide the federated modules for each domain/feature within the shell application.
+MobileHost is the main binary application while the others act as "Mini apps" that provide the federated modules for each domain/feature within the shell application.
The [README.md](http://README.md) at the root of the workspace provides a great overview of the architecture involved and the next steps for commands to be run.
diff --git a/nx-dev/nx-dev/app/blog/[slug]/page.tsx b/nx-dev/nx-dev/app/blog/[slug]/page.tsx
index 55a5cd148beac..3ffd23d03cdde 100644
--- a/nx-dev/nx-dev/app/blog/[slug]/page.tsx
+++ b/nx-dev/nx-dev/app/blog/[slug]/page.tsx
@@ -17,7 +17,7 @@ export async function generateMetadata(
return {
title: `${post.title} | Nx Blog`,
- description: 'Latest news from the Nx & Nx Cloud core team',
+ description: post.description,
openGraph: {
url: `https://nx.dev/blog/${slug}`,
title: post.title,
diff --git a/nx-dev/ui-blog/src/lib/blog-details.tsx b/nx-dev/ui-blog/src/lib/blog-details.tsx
index dec23f9ff6cb5..23affa98e1df8 100644
--- a/nx-dev/ui-blog/src/lib/blog-details.tsx
+++ b/nx-dev/ui-blog/src/lib/blog-details.tsx
@@ -11,26 +11,6 @@ export interface BlogDetailsProps {
post: BlogPostDataEntry;
}
-export async function generateMetadata({ post }: BlogDetailsProps) {
- return {
- title: post.title,
- description: post.description,
- openGraph: {
- images: [
- {
- url: post.cover_image
- ? `https://nx.dev${post.cover_image}`
- : 'https://nx.dev/socials/nx-media.png',
- width: 800,
- height: 421,
- alt: 'Nx: Smart Monorepos · Fast CI',
- type: 'image/jpeg',
- },
- ],
- },
- };
-}
-
export function BlogDetails({ post }: BlogDetailsProps) {
const { node } = renderMarkdown(post.content, {
filePath: post.filePath ?? '',
@@ -79,11 +59,7 @@ export function BlogDetails({ post }: BlogDetailsProps) {