Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 FrozenPandaz
|
dc470cbca0 |
+140
-3
@@ -1,5 +1,13 @@
|
||||
version: 2.1
|
||||
|
||||
# -------------------------
|
||||
# ORBS
|
||||
# -------------------------
|
||||
orbs:
|
||||
nx: nrwl/nx@1.6.2
|
||||
rust: circleci/rust@1.6.0
|
||||
browser-tools: circleci/browser-tools@1.4.8
|
||||
|
||||
# -------------------------
|
||||
# EXECUTORS
|
||||
# -------------------------
|
||||
@@ -11,9 +19,56 @@ executors:
|
||||
linux:
|
||||
<<: *defaults
|
||||
docker:
|
||||
- image: cimg/rust:1.84.0-browsers
|
||||
resource_class: small
|
||||
- image: cimg/rust:1.73.0-browsers
|
||||
resource_class: medium+
|
||||
|
||||
macos:
|
||||
<<: *defaults
|
||||
resource_class: macos.m1.medium.gen1
|
||||
macos:
|
||||
xcode: '14.2.0'
|
||||
|
||||
# -------------------------
|
||||
# COMMANDS
|
||||
# -------------------------
|
||||
commands:
|
||||
run-pnpm-install:
|
||||
parameters:
|
||||
os:
|
||||
type: string
|
||||
steps:
|
||||
- restore_cache:
|
||||
name: Restore pnpm Package Cache
|
||||
keys:
|
||||
- node-deps-{{ arch }}-v3-{{ checksum "pnpm-lock.yaml" }}
|
||||
- when:
|
||||
condition:
|
||||
equal: [<< parameters.os >>, linux]
|
||||
steps:
|
||||
- run:
|
||||
name: Install pnpm package manager (linux)
|
||||
command: |
|
||||
npm install --prefix=$HOME/.local -g @pnpm/exe@8
|
||||
- when:
|
||||
condition:
|
||||
equal: [<< parameters.os >>, macos]
|
||||
steps:
|
||||
- run:
|
||||
name: Install pnpm package manager (macos)
|
||||
command: |
|
||||
npm install -g @pnpm/exe@8
|
||||
- run:
|
||||
name: Install Dependencies
|
||||
command: |
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm playwright install --with-deps
|
||||
- save_cache:
|
||||
name: Save pnpm Package Cache
|
||||
key: node-deps-{{ arch }}-v3-{{ checksum "pnpm-lock.yaml" }}
|
||||
paths:
|
||||
- ~/.pnpm-store
|
||||
- ~/.cache/Cypress
|
||||
- node_modules
|
||||
# -------------------------
|
||||
# JOBS
|
||||
# -------------------------
|
||||
@@ -23,8 +78,88 @@ jobs:
|
||||
# -------------------------
|
||||
main-linux:
|
||||
executor: linux
|
||||
environment:
|
||||
NX_E2E_CI_CACHE_KEY: e2e-circleci-linux
|
||||
NX_DAEMON: 'true'
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_NATIVE_LOGGING: 'false'
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_CI_EXECUTION_ENV: 'linux'
|
||||
NX_CLOUD_DTE_V2: 'true'
|
||||
steps:
|
||||
- run: echo "We are in the process of transitioning from Circle CI to GitHub Actions. For details about your build results, consult github actions build logs."
|
||||
- checkout
|
||||
- nx/set-shas:
|
||||
main-branch-name: 'master'
|
||||
- run: npx nx-cloud@next start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml" --stop-agents-after="e2e"
|
||||
- run:
|
||||
command: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates lsof libvips-dev libglib2.0-dev libgirepository1.0-dev
|
||||
- browser-tools/install-chrome
|
||||
- run-pnpm-install:
|
||||
os: linux
|
||||
- run:
|
||||
name: Check Documentation
|
||||
command: pnpm nx documentation --no-dte
|
||||
no_output_timeout: 20m
|
||||
- run:
|
||||
name: Run Checks/Lint/Test/Build
|
||||
no_output_timeout: 60m
|
||||
command: |
|
||||
pids=()
|
||||
|
||||
pnpm nx-cloud record -- nx format:check --base=$NX_BASE --head=$NX_HEAD &
|
||||
pids+=($!)
|
||||
|
||||
pnpm nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte &
|
||||
pids+=($!)
|
||||
|
||||
(pnpm nx affected --targets=lint,test,build --base=$NX_BASE --head=$NX_HEAD --parallel=3 &&
|
||||
pnpm nx affected --targets=e2e,e2e-ci --base=$NX_BASE --head=$NX_HEAD --parallel=1) &
|
||||
pids+=($!)
|
||||
|
||||
for pid in "${pids[@]}"; do
|
||||
wait "$pid"
|
||||
done
|
||||
# -------------------------
|
||||
# JOBS: Main-MacOS
|
||||
# -------------------------
|
||||
mainmacos:
|
||||
executor: macos
|
||||
environment:
|
||||
NX_E2E_CI_CACHE_KEY: e2e-circleci-macos
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_CI_EXECUTION_ENV: 'macos'
|
||||
SELECTED_PM: 'npm' # explicitly define npm for macOS tests
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: Restore Homebrew packages
|
||||
keys:
|
||||
- nrwl-nx-homebrew-packages
|
||||
- run:
|
||||
name: Configure Detox Environment, Install applesimutils
|
||||
command: |
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null
|
||||
xcrun simctl shutdown all && xcrun simctl erase all
|
||||
no_output_timeout: 20m
|
||||
- save_cache:
|
||||
name: Save Homebrew Cache
|
||||
key: nrwl-nx-homebrew-packages
|
||||
paths:
|
||||
- /usr/local/Homebrew
|
||||
- ~/Library/Caches/Homebrew
|
||||
- run-pnpm-install:
|
||||
os: macos
|
||||
- rust/install
|
||||
- nx/set-shas:
|
||||
main-branch-name: 'master'
|
||||
- run:
|
||||
name: Run E2E Tests for macOS
|
||||
command: |
|
||||
pnpm nx affected -t e2e-macos-ci --parallel=1 --base=$NX_BASE --head=$NX_HEAD
|
||||
no_output_timeout: 45m
|
||||
|
||||
# -------------------------
|
||||
# WORKFLOWS(JOBS)
|
||||
@@ -35,3 +170,5 @@ workflows:
|
||||
build:
|
||||
jobs:
|
||||
- main-linux
|
||||
- mainmacos:
|
||||
name: main-macos-e2e
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
# Commit Command
|
||||
|
||||
## Description
|
||||
|
||||
Create a git commit following Nx repository standards and validation requirements.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
/commit [message]
|
||||
```
|
||||
|
||||
## What this command does:
|
||||
|
||||
1. **Pre-commit validation**: Runs the full validation suite (`pnpm nx prepush`) to ensure code quality
|
||||
2. **Formatting**: Automatically formats changed files with Prettier
|
||||
3. **Testing**: Runs tests on affected projects to validate changes
|
||||
4. **Commit creation**: Creates a well-formed commit with proper message formatting (without co-author attribution)
|
||||
5. **Status reporting**: Provides clear feedback on the commit process
|
||||
|
||||
## Workflow:
|
||||
|
||||
1. Format any modified files with Prettier
|
||||
2. Run the prepush validation suite
|
||||
3. If validation passes, stage relevant changes
|
||||
4. Create commit with descriptive message
|
||||
5. Provide summary of what was committed
|
||||
|
||||
## Commit Message Format:
|
||||
|
||||
- Use conventional commit format when appropriate
|
||||
- Include scope (e.g., `feat(core):`, `fix(angular):`, `docs(nx):`)
|
||||
- Keep first line under 72 characters
|
||||
- Include detailed description if needed
|
||||
|
||||
## Examples:
|
||||
|
||||
- `/commit "feat(core): add new project graph visualization"`
|
||||
- `/commit "fix(react): resolve build issues with webpack config"`
|
||||
- `/commit "docs(nx): update getting started guide"`
|
||||
|
||||
## Validation Requirements:
|
||||
|
||||
- All tests must pass
|
||||
- Code must be properly formatted
|
||||
- No linting errors
|
||||
- E2E tests for affected areas should pass
|
||||
@@ -1,155 +0,0 @@
|
||||
# GitHub Issue Planning and Resolution
|
||||
|
||||
This command provides guidance for both automated and manual GitHub issue workflows.
|
||||
|
||||
## Automated Workflow (GitHub Actions)
|
||||
|
||||
The automated workflow consists of two phases:
|
||||
|
||||
### Phase 1: Planning (`@claude plan` or `claude:plan` label)
|
||||
|
||||
- Claude analyzes the issue and creates a detailed implementation plan
|
||||
- Plan is posted as a comment on the issue
|
||||
- Issue is labeled with `claude:planned`
|
||||
|
||||
### Phase 2: Implementation (`@claude implement` or `claude:implement` label)
|
||||
|
||||
- Claude implements the solution based on the plan
|
||||
- Runs validation tests and creates a feature branch
|
||||
- Suggests opening a PR with proper formatting
|
||||
|
||||
## Planning Phase Template
|
||||
|
||||
When creating a plan (either automated or manual), include these sections:
|
||||
|
||||
### Problem Analysis
|
||||
|
||||
- Root cause identification
|
||||
- Impact assessment
|
||||
- Related components or systems affected
|
||||
|
||||
### Proposed Solution
|
||||
|
||||
- High-level approach
|
||||
- Alternative solutions considered
|
||||
- Trade-offs and rationale
|
||||
|
||||
### Implementation Details
|
||||
|
||||
- Files that need to be modified
|
||||
- Key changes required
|
||||
- Dependencies or prerequisites
|
||||
|
||||
### Testing Strategy
|
||||
|
||||
- Unit tests to add/modify
|
||||
- Integration tests needed
|
||||
- E2E test considerations
|
||||
|
||||
### Validation Steps
|
||||
|
||||
```bash
|
||||
# Test specific affected projects
|
||||
nx run-many -t test,build,lint -p PROJECT_NAME
|
||||
|
||||
# Test all affected projects
|
||||
nx affected -t build,test,lint
|
||||
|
||||
# Run affected e2e tests
|
||||
nx affected -t e2e-local
|
||||
|
||||
# Format code
|
||||
npx nx prettier -- FILES
|
||||
|
||||
# Final validation
|
||||
pnpm nx prepush
|
||||
```
|
||||
|
||||
### Risks and Considerations
|
||||
|
||||
- Breaking changes
|
||||
- Performance implications
|
||||
- Migration requirements
|
||||
|
||||
## Manual Workflow
|
||||
|
||||
When working on a GitHub issue manually, follow this systematic approach:
|
||||
|
||||
## 1. Get Issue Details
|
||||
|
||||
```bash
|
||||
# Get issue details using GitHub CLI (replace ISSUE_NUMBER with actual number)
|
||||
gh issue view ISSUE_NUMBER
|
||||
```
|
||||
|
||||
When cloning reproduction repos, please clone within `./tmp/claude/repro-ISSUE_NUMBER`
|
||||
|
||||
## 2. Analyze the Plan
|
||||
|
||||
- Look for a plan or implementation details in the issue description
|
||||
- Check comments for additional context or clarification
|
||||
- Identify affected projects and components
|
||||
|
||||
## 3. Implement the Solution
|
||||
|
||||
- Follow the plan outlined in the issue
|
||||
- Make focused changes that address the specific problem
|
||||
- Ensure code follows existing patterns and conventions
|
||||
|
||||
## 4. Run Full Validation
|
||||
|
||||
```bash
|
||||
# Test specific affected projects first
|
||||
nx run-many -t test,build,lint -p PROJECT_NAME
|
||||
|
||||
# Test all affected projects
|
||||
nx affected -t build,test,lint
|
||||
|
||||
# Run affected e2e tests
|
||||
nx affected -t e2e-local
|
||||
|
||||
# Final pre-push validation
|
||||
pnpm nx prepush
|
||||
```
|
||||
|
||||
## 5. Submit Pull Request
|
||||
|
||||
- Create a descriptive PR title that references the issue
|
||||
- Include "Fixes #ISSUE_NUMBER" in the PR description
|
||||
- Provide a clear summary of changes made
|
||||
- Request appropriate reviewers
|
||||
|
||||
## Pull Request Template
|
||||
|
||||
When creating a pull request, follow the template found in `.github/PULL_REQUEST_TEMPLATE.md`. The template includes:
|
||||
|
||||
### Required Sections
|
||||
|
||||
1. **Current Behavior**: Describe the behavior we have today
|
||||
2. **Expected Behavior**: Describe the behavior we should expect with the changes in this PR
|
||||
3. **Related Issue(s)**: Link the issue being fixed so it gets closed when the PR is merged
|
||||
|
||||
### Template Format
|
||||
|
||||
```markdown
|
||||
## Current Behavior
|
||||
|
||||
<!-- This is the behavior we have today -->
|
||||
|
||||
## Expected Behavior
|
||||
|
||||
<!-- This is the behavior we should expect with the changes in this PR -->
|
||||
|
||||
## Related Issue(s)
|
||||
|
||||
<!-- Please link the issue being fixed so it gets closed when this is merged. -->
|
||||
|
||||
Fixes #ISSUE_NUMBER
|
||||
```
|
||||
|
||||
### Guidelines
|
||||
|
||||
- Ensure your commit message follows the conventional commit format (use `pnpm commit`)
|
||||
- Read the submission guidelines in CONTRIBUTING.md before posting
|
||||
- For complex changes, you can request a dedicated Nx release by mentioning the Nx team
|
||||
- Always link the related issue using "Fixes #ISSUE_NUMBER" to automatically close it when merged
|
||||
@@ -1,30 +0,0 @@
|
||||
# Claude Issue Workflow Usage Guide
|
||||
|
||||
## Quick Start
|
||||
|
||||
## Expected Outputs
|
||||
|
||||
### Planning Phase
|
||||
|
||||
- Detailed analysis comment posted to issue
|
||||
- Implementation plan with steps and file changes
|
||||
- Testing strategy and validation steps
|
||||
- Risk assessment
|
||||
|
||||
### Implementation Phase
|
||||
|
||||
- Code changes made according to plan
|
||||
- Tests run and validated
|
||||
- Feature branch created: `fix/issue-{number}`
|
||||
- PR suggestion with proper title format
|
||||
|
||||
## Manual Override
|
||||
|
||||
If you need to work on an issue manually, use the `/gh-issue-plan` command for structured guidance following the same workflow patterns.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- Ensure you're on the authorized users list
|
||||
- Check that the issue has sufficient detail for analysis
|
||||
- For implementation, ensure a plan comment exists from the planning phase
|
||||
- If workflows fail, check the Actions tab for detailed logs
|
||||
@@ -1,34 +0,0 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(find:*)",
|
||||
"Bash(ls:*)",
|
||||
"Bash(mkdir:*)",
|
||||
"WebFetch(domain:github.com)",
|
||||
"WebFetch(domain:www.typescriptlang.org)",
|
||||
"Bash(git log:*)",
|
||||
"Bash(gh issue list:*)",
|
||||
"Bash(gh issue view:*)",
|
||||
"Bash(npx prettier:*)",
|
||||
"Bash(nx prepush:*)",
|
||||
"Bash(pnpm commit:*)",
|
||||
"Bash(rg:*)",
|
||||
"mcp__nx__nx_docs",
|
||||
"mcp__nx__nx_workspace",
|
||||
"mcp__nx__nx_project_details",
|
||||
"Bash(nx show projects:*)",
|
||||
"Bash(nx run-many:*)",
|
||||
"Bash(nx run:*)",
|
||||
"Bash(nx affected:*)",
|
||||
"Bash(nx lint:*)",
|
||||
"Bash(nx test:*)",
|
||||
"Bash(nx build:*)",
|
||||
"Bash(nx documentation:*)"
|
||||
],
|
||||
"deny": []
|
||||
},
|
||||
"enableAllProjectMcpServers": true,
|
||||
"env": {
|
||||
"BASH_MAX_TIMEOUT_MS": "1800000"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"nx-mcp": {
|
||||
"url": "http://localhost:9470/sse"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
FROM mcr.microsoft.com/devcontainers/typescript-node:20-bullseye
|
||||
|
||||
# Update the underlying (Debian) OS, to make sure we have the latest security patches and libraries like 'GLIBC'
|
||||
RUN sudo apt-get update && sudo apt-get -y upgrade
|
||||
|
||||
# Update pnpm
|
||||
RUN npm install -g pnpm@8.15.7
|
||||
@@ -3,46 +3,31 @@
|
||||
{
|
||||
"name": "NxDevContainer",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
|
||||
// Starting from a base image that already contains GLIBC v2.33 or higher (required by Nx)
|
||||
// Try a more recent distribution, if your are having build issues related to GLIBC version
|
||||
// Here we use 'bookworm', which is based on `Debian-12`, which comes with `GLIBC v2.36`
|
||||
// (Nx tools currenlty requires `GLIBC v2.33` or higher)
|
||||
"image": "mcr.microsoft.com/devcontainers/typescript-node:20-bookworm",
|
||||
|
||||
"build": {
|
||||
// Path is relative to the devcontainer.json file.
|
||||
"dockerfile": "Dockerfile"
|
||||
},
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/rust:1": {}
|
||||
},
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
// 4211 = nx graph port
|
||||
// 4873 = verdaccio (local npm registry) port
|
||||
"forwardPorts": [4211, 4873],
|
||||
|
||||
"forwardPorts": [4211],
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "./.devcontainer/postCreateCommand.sh",
|
||||
|
||||
// Configure tool-specific properties.
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"nrwl.angular-console",
|
||||
"firsttris.vscode-jest-runner",
|
||||
"eamodio.gitlens",
|
||||
"mhutchie.git-graph",
|
||||
"mutantdino.resourcemonitor" // to monitor cpu, memory usage from the dev container
|
||||
"eamodio.gitlens"
|
||||
],
|
||||
"settings": {
|
||||
"debug.javascript.autoAttachFilter": "disabled" // workaround for that issue: https://github.com/microsoft/vscode-js-debug/issues/374#issuecomment-622239998
|
||||
"debug.javascript.autoAttachFilter": "onlyWithFlag" // workaround for that issue: https://github.com/microsoft/vscode-js-debug/issues/374#issuecomment-622239998
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// To improve disk performances when installing node modules
|
||||
// See https://code.visualstudio.com/remote/advancedcontainers/improve-performance
|
||||
"mounts": [
|
||||
"source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
|
||||
],
|
||||
}
|
||||
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
|
||||
"remoteUser": "root"
|
||||
// "remoteUser": "root"
|
||||
}
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
#!/bin/sh
|
||||
|
||||
# Update the underlying (Debian) OS, to make sure we have the latest security patches and libraries like 'GLIBC'
|
||||
echo "⚙️ Updating the underlying OS..."
|
||||
sudo apt-get update && sudo apt-get -y upgrade
|
||||
|
||||
# Uninstall globally installed PNPM (required version will be reinstalled through corepack)
|
||||
echo "❌ Uninstalling globally installed PNPM..."
|
||||
npm uninstall -g pnpm
|
||||
|
||||
# Prevent corepack from prompting user before downloading PNPM
|
||||
export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
|
||||
|
||||
# Enable corepack
|
||||
corepack enable
|
||||
|
||||
# Install the PNPM version defined in the root package.json
|
||||
echo "⚙️ Installing required PNPM version..."
|
||||
corepack prepare --activate
|
||||
|
||||
# Install NPM dependencies
|
||||
echo "⚙️ Installing NPM dependencies..."
|
||||
# Install dependencies
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
|
||||
+1
-34
@@ -9,21 +9,7 @@
|
||||
"extends": ["plugin:storybook/recommended"],
|
||||
"rules": {
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
"paths": [
|
||||
{
|
||||
"name": "create-nx-workspace",
|
||||
"message": "Please import utils from nx or @nx/devkit instead."
|
||||
},
|
||||
{
|
||||
"name": "node-fetch",
|
||||
"message": "Please default to native fetch instead of 'node-fetch'."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-restricted-imports": ["error", "create-nx-workspace"],
|
||||
"@typescript-eslint/no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
@@ -75,27 +61,8 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"@nx/workspace/valid-command-object": "error"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["pnpm-lock.yaml"],
|
||||
"parser": "./tools/eslint-rules/raw-file-parser.js",
|
||||
"rules": {
|
||||
"@nx/workspace/ensure-pnpm-lock-version": [
|
||||
"error",
|
||||
{
|
||||
"version": "9.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts"],
|
||||
"rules": {
|
||||
"@angular-eslint/prefer-standalone": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
#
|
||||
# https://help.github.com/articles/dealing-with-line-endings/
|
||||
#
|
||||
# Linux start script should use lf
|
||||
/gradlew text eol=lf
|
||||
|
||||
# These are Windows script files and should use crlf
|
||||
*.bat text eol=crlf
|
||||
|
||||
# Exclude files from Graphite reviews
|
||||
docs/generated/* linguist-generated=true
|
||||
@@ -1,7 +1,6 @@
|
||||
name: 🐞 Bug Report
|
||||
description: This form is to report unexpected behavior in Nx.
|
||||
labels: ["type: bug"]
|
||||
type: Bug
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
@@ -60,7 +59,7 @@ body:
|
||||
label: Package Manager Version
|
||||
description: |
|
||||
If `nx report` doesn't work, please provide the name and the version of your package manager.
|
||||
You can get version information by running `PACKAGE_MANAGER --version`, where PACKAGE_MANAGER is any of `yarn`, `pnpm`, `bun` or `npm`, depending on the package manager used.
|
||||
You can get version information by running `yarn --version`, `pnpm --version` or `npm --version`, depending on the package manager used.
|
||||
- type: checkboxes
|
||||
id: os
|
||||
attributes:
|
||||
|
||||
@@ -1,316 +0,0 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- '[0-9]+.[0-9]+.x'
|
||||
pull_request:
|
||||
branches:
|
||||
- "**"
|
||||
|
||||
env:
|
||||
NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
|
||||
PNPM_HOME: ~/.pnpm
|
||||
|
||||
jobs:
|
||||
main-linux:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NX_E2E_CI_CACHE_KEY: e2e-github-linux
|
||||
NX_DAEMON: 'true'
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_VERBOSE_LOGGING: 'false'
|
||||
NX_NATIVE_LOGGING: 'false'
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_CI_EXECUTION_ENV: 'linux'
|
||||
NX_CLOUD_NO_TIMEOUTS: 'true'
|
||||
NX_ALLOW_NON_CACHEABLE_DTE: 'true'
|
||||
NX_CLOUD_USE_NEW_TASK_APIS: 'true'
|
||||
NX_CLOUD_USE_NEW_STREAM_OUTPUT: 'true'
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- name: Fetch Master
|
||||
run: git fetch origin master:master
|
||||
if: ${{ github.event_name == 'pull_request' }}
|
||||
|
||||
- name: Set SHAs
|
||||
uses: nrwl/nx-set-shas@v4
|
||||
with:
|
||||
main-branch-name: 'master'
|
||||
|
||||
- name: Start CI Run
|
||||
run: npx nx-cloud@next start-ci-run --distribute-on="./.nx/workflows/dynamic-changesets.yaml" --stop-agents-after="e2e"
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates lsof libvips-dev libglib2.0-dev libgirepository1.0-dev
|
||||
|
||||
- name: Install Chrome
|
||||
uses: browser-actions/setup-chrome@v1
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 10.11.1
|
||||
run_install: false
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache Rust toolchain and cargo registry
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
~/.cargo/bin/
|
||||
~/.cargo/registry/index/
|
||||
~/.cargo/registry/cache/
|
||||
~/.cargo/git/db/
|
||||
target/
|
||||
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-cargo-
|
||||
|
||||
- name: Install Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
|
||||
- name: Setup Java
|
||||
uses: actions/setup-java@v4
|
||||
with:
|
||||
distribution: temurin
|
||||
java-version: 17
|
||||
|
||||
- name: Setup Gradle
|
||||
uses: gradle/actions/setup-gradle@v4
|
||||
|
||||
- name: Install project dependencies
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm playwright install --with-deps
|
||||
|
||||
- name: Check Documentation
|
||||
run: pnpm nx documentation
|
||||
timeout-minutes: 20
|
||||
|
||||
- name: Run Checks/Lint/Test/Build
|
||||
run: |
|
||||
pids=()
|
||||
|
||||
pnpm nx-cloud record -- nx format:check &
|
||||
pids+=($!)
|
||||
|
||||
pnpm nx-cloud record -- nx sync:check
|
||||
pids+=($!)
|
||||
|
||||
pnpm nx-cloud record -- nx-cloud conformance:check
|
||||
pids+=($!)
|
||||
|
||||
pnpm nx run-many -t check-imports check-commit check-lock-files check-codeowners --parallel=1 --no-dte &
|
||||
pids+=($!)
|
||||
|
||||
pnpm nx affected --targets=lint,test,build,e2e,e2e-ci,format-native,lint-native &
|
||||
pids+=($!)
|
||||
|
||||
for pid in "${pids[@]}"; do
|
||||
wait "$pid"
|
||||
done
|
||||
timeout-minutes: 100
|
||||
|
||||
main-macos:
|
||||
runs-on: macos-latest
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}${{ contains(github.event_name, 'push') && format('-{0}', github.sha) || '' }}
|
||||
cancel-in-progress: true
|
||||
|
||||
env:
|
||||
NX_E2E_CI_CACHE_KEY: e2e-github-macos
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_CI_EXECUTION_ENV: 'macos'
|
||||
SELECTED_PM: 'npm'
|
||||
steps:
|
||||
|
||||
- name: Log concurrency info
|
||||
run: |
|
||||
echo "Concurrency group: ${{ github.workflow }}-${{ github.ref }}${{ contains(github.event_name, 'push') && format('-{0}', github.sha) || '' }}"
|
||||
echo "Concurrency cancel-in-progress: ${{ !contains(github.event_name, 'push') }}"
|
||||
echo "Concurrency cancel-event-name: ${{ github.event_name }}"
|
||||
if: always()
|
||||
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- name: Fetch Master
|
||||
run: git fetch origin master:master
|
||||
if: ${{ github.event_name == 'pull_request' }}
|
||||
|
||||
- name: Restore Homebrew packages
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
/opt/homebrew
|
||||
~/Library/Caches/Homebrew
|
||||
key: nrwl-nx-homebrew-packages
|
||||
|
||||
- name: Configure Detox Environment, Install applesimutils
|
||||
run: |
|
||||
# Ensure Xcode command line tools are installed and configured
|
||||
xcode-select --print-path || sudo xcode-select --reset
|
||||
sudo xcode-select -s /Applications/Xcode.app
|
||||
|
||||
# Install or update applesimutils with error handling
|
||||
if ! brew list applesimutils &>/dev/null; then
|
||||
echo "Installing applesimutils..."
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null || {
|
||||
echo "Failed to install applesimutils, retrying with update..."
|
||||
brew update
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils
|
||||
}
|
||||
else
|
||||
echo "Updating applesimutils..."
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew upgrade applesimutils || true
|
||||
fi
|
||||
|
||||
# Verify applesimutils installation
|
||||
applesimutils --version || (echo "applesimutils installation failed" && exit 1)
|
||||
|
||||
# Configure environment for M-series Mac
|
||||
echo "DEVELOPER_DIR=/Applications/Xcode.app/Contents/Developer" >> $GITHUB_ENV
|
||||
echo "PLATFORM_NAME=iOS Simulator" >> $GITHUB_ENV
|
||||
|
||||
# Set additional environment variables for better debugging
|
||||
echo "DETOX_DISABLE_TELEMETRY=1" >> $GITHUB_ENV
|
||||
echo "DETOX_LOG_LEVEL=trace" >> $GITHUB_ENV
|
||||
|
||||
# Verify Xcode installation
|
||||
xcodebuild -version
|
||||
|
||||
# List available simulators
|
||||
xcrun simctl list devices available
|
||||
timeout-minutes: 10
|
||||
continue-on-error: false
|
||||
|
||||
- name: Reset iOS Simulators
|
||||
id: reset-simulators
|
||||
run: |
|
||||
echo "Resetting iOS Simulators..."
|
||||
|
||||
# Kill simulator processes
|
||||
sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService 2>/dev/null || true
|
||||
killall "Simulator" 2>/dev/null || true
|
||||
killall "iOS Simulator" 2>/dev/null || true
|
||||
|
||||
# Wait for processes to terminate
|
||||
sleep 3
|
||||
|
||||
# Shutdown and erase all simulators (ignore failures)
|
||||
xcrun simctl shutdown all 2>/dev/null || true
|
||||
sleep 5
|
||||
xcrun simctl erase all 2>/dev/null || true
|
||||
|
||||
# If erase failed, try the nuclear option
|
||||
if xcrun simctl list devices | grep -q "Booted" 2>/dev/null; then
|
||||
echo "Standard reset failed, using nuclear option..."
|
||||
rm -rf ~/Library/Developer/CoreSimulator/Devices/* 2>/dev/null || true
|
||||
launchctl remove com.apple.CoreSimulator.CoreSimulatorService 2>/dev/null || true
|
||||
sleep 3
|
||||
fi
|
||||
|
||||
# Clean up additional directories
|
||||
rm -rf ~/Library/Developer/CoreSimulator/Caches/* 2>/dev/null || true
|
||||
rm -rf ~/Library/Logs/CoreSimulator/* 2>/dev/null || true
|
||||
rm -rf ~/Library/Developer/Xcode/DerivedData/* 2>/dev/null || true
|
||||
|
||||
echo "Simulator reset completed"
|
||||
timeout-minutes: 5
|
||||
continue-on-error: true
|
||||
|
||||
- name: Verify Simulator Reset
|
||||
if: ${{ steps.reset-simulators.outcome == 'success' }}
|
||||
run: |
|
||||
# Verify CoreSimulator service restarted
|
||||
pgrep -fl "CoreSimulator" || (echo "CoreSimulator service not running" && exit 1)
|
||||
|
||||
# Check simulator list is clean
|
||||
xcrun simctl list devices
|
||||
|
||||
# Verify simulator runtime paths exist and are writable
|
||||
test -d ~/Library/Developer/CoreSimulator/Devices || (echo "Simulator devices directory missing" && exit 1)
|
||||
touch ~/Library/Developer/CoreSimulator/Devices/test || (echo "Simulator devices directory not writable" && exit 1)
|
||||
rm ~/Library/Developer/CoreSimulator/Devices/test
|
||||
timeout-minutes: 5
|
||||
|
||||
- name: Diagnose Simulator Reset Failure
|
||||
if: ${{ steps.reset-simulators.outcome == 'failure' }}
|
||||
run: |
|
||||
echo "Simulator reset failed. Collecting diagnostic information..."
|
||||
xcrun simctl list
|
||||
echo "Checking simulator logs..."
|
||||
ls -la ~/Library/Logs/CoreSimulator/ || echo "No simulator logs found"
|
||||
|
||||
- name: Save Homebrew Cache
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
/opt/homebrew
|
||||
~/Library/Caches/Homebrew
|
||||
key: nrwl-nx-homebrew-packages
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 10.11.1
|
||||
run_install: false
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache Rust toolchain and cargo registry
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
~/.cargo/bin/
|
||||
~/.cargo/registry/index/
|
||||
~/.cargo/registry/cache/
|
||||
~/.cargo/git/db/
|
||||
target/
|
||||
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-cargo-
|
||||
|
||||
- name: Install Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
|
||||
- name: Install project dependencies
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm playwright install --with-deps
|
||||
|
||||
- name: Set SHAs
|
||||
uses: nrwl/nx-set-shas@v4
|
||||
with:
|
||||
main-branch-name: 'master'
|
||||
|
||||
- name: Run E2E Tests for macOS
|
||||
run: |
|
||||
HAS_CHANGED=$(node ./scripts/check-react-native-changes.js $NX_BASE $NX_HEAD);
|
||||
if $HAS_CHANGED; then
|
||||
pnpm nx affected -t e2e-macos-local --parallel=1 --base=$NX_BASE --head=$NX_HEAD
|
||||
else
|
||||
echo "Skip E2E tests for macOS as there are no changes in React Native projects."
|
||||
fi
|
||||
@@ -1,93 +0,0 @@
|
||||
name: Claude Code
|
||||
|
||||
env:
|
||||
PNPM_HOME: ~/.pnpm
|
||||
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
pull_request_review_comment:
|
||||
types: [created]
|
||||
issues:
|
||||
types: [opened, assigned]
|
||||
pull_request_review:
|
||||
types: [submitted]
|
||||
|
||||
jobs:
|
||||
claude:
|
||||
if: |
|
||||
contains(fromJson('["AgentEnder", "barbados-clemens", "Cammisuli", "Coly010", "FrozenPandaz", "isaacplmann", "JamesHenry", "jaysoo", "leosvelperez", "mandarini", "MaxKless", "meeroslav", "nartc", "ndcunningham", "philipjfulcher", "vsavkin", "xiongemi"]'), github.actor) &&
|
||||
((github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
|
||||
(github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
|
||||
(github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
|
||||
(github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude'))))
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
issues: write
|
||||
actions: read
|
||||
id-token: write
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 250
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates lsof libvips-dev libglib2.0-dev libgirepository1.0-dev
|
||||
|
||||
- name: Install Chrome
|
||||
uses: browser-actions/setup-chrome@v1
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 10.11.1
|
||||
run_install: false
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache cargo
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
~/.cargo/registry/index/
|
||||
~/.cargo/registry/cache/
|
||||
~/.cargo/git/db/
|
||||
.cargo-cache
|
||||
target/
|
||||
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-cargo-
|
||||
|
||||
- name: Install Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
|
||||
- name: Setup Java
|
||||
uses: actions/setup-java@v4
|
||||
with:
|
||||
distribution: temurin
|
||||
java-version: 17
|
||||
|
||||
- name: Setup Gradle
|
||||
uses: gradle/actions/setup-gradle@v4
|
||||
|
||||
- name: Install project dependencies
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm playwright install --with-deps
|
||||
|
||||
- name: Run Claude Code
|
||||
id: claude
|
||||
uses: anthropics/claude-code-action@beta
|
||||
timeout-minutes: 90
|
||||
with:
|
||||
anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
|
||||
allowed_tools: "Bash,Edit,Read,Write,Glob,Grep,LS,MultiEdit,NotebookRead,NotebookEdit"
|
||||
|
||||
+380
-267
@@ -19,60 +19,41 @@ jobs:
|
||||
preinstall:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
runs-on: ${{ matrix.os }}
|
||||
timeout-minutes: 20
|
||||
strategy:
|
||||
matrix:
|
||||
os:
|
||||
- ubuntu-latest
|
||||
- macos-latest
|
||||
# - windows-latest Windows fails to build gradle wrapper which always runs when we build nx.
|
||||
## https://staging.nx.app/runs/LgD4vxGn8w?utm_source=pull-request&utm_medium=comment
|
||||
node_version:
|
||||
- 20
|
||||
- 22
|
||||
# - 23
|
||||
- 18
|
||||
exclude:
|
||||
# run just node v20 on macos and windows
|
||||
# run just node v20 on macos
|
||||
- os: macos-latest
|
||||
node_version: 22
|
||||
# - os: macos-latest
|
||||
# node_version: 23
|
||||
# - os: windows-latest TODO (emily): Windows fails to build gradle wrapper which always runs when we build nx. Re-enable when we fix this.
|
||||
# node_version: 22
|
||||
# - os: windows-latest TODO (emily): Windows fails to build gradle wrapper which always runs when we build nx. Re-enable when we fix this.
|
||||
# node_version: 23
|
||||
node_version: 18
|
||||
|
||||
name: Cache install (${{ matrix.os }}, node v${{ matrix.node_version }})
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 10.11.1
|
||||
run_install: false
|
||||
- name: Install PNPM
|
||||
run: |
|
||||
npm install -g @pnpm/exe@8
|
||||
|
||||
- name: Set node
|
||||
uses: actions/setup-node@v4
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
run: echo "path=$(pnpm store path)" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Cache pnpm store
|
||||
uses: actions/cache@v4
|
||||
- name: Cache node_modules
|
||||
id: cache-modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ${{ steps.pnpm-cache.outputs.path }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
lookup-only: true
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
|
||||
|
||||
- name: Ensure Python setuptools Installed on Macos
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
@@ -80,6 +61,7 @@ jobs:
|
||||
run: brew install python-setuptools
|
||||
|
||||
- name: Install packages
|
||||
if: steps.cache-modules.outputs.cache-hit != 'true'
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Homebrew cache directory path
|
||||
@@ -89,7 +71,7 @@ jobs:
|
||||
|
||||
- name: Cache Homebrew
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
uses: actions/cache@v4
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
lookup-only: true
|
||||
path: ${{ steps.homebrew-cache-dir-path.outputs.dir }}
|
||||
@@ -99,7 +81,7 @@ jobs:
|
||||
|
||||
- name: Cache Cypress
|
||||
id: cache-cypress
|
||||
uses: actions/cache@v4
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
lookup-only: true
|
||||
path: '${{ github.workspace }}/.cypress'
|
||||
@@ -109,77 +91,214 @@ jobs:
|
||||
if: steps.cache-cypress.outputs.cache-hit != 'true'
|
||||
run: npx cypress install
|
||||
|
||||
prepare-matrix:
|
||||
name: Prepare matrix combinations
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
timeout-minutes: 5
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
matrix: ${{ steps.process-json.outputs.MATRIX }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- name: Process matrix data
|
||||
id: process-json
|
||||
run:
|
||||
echo "MATRIX=$(npx tsx .github/workflows/nightly/process-matrix.ts | jq -c .)" >> $GITHUB_OUTPUT
|
||||
|
||||
e2e:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
needs:
|
||||
- preinstall
|
||||
- prepare-matrix
|
||||
needs: preinstall
|
||||
permissions:
|
||||
contents: read
|
||||
runs-on: ${{ matrix.os }}
|
||||
timeout-minutes: 200 # <- cap each job to 200 minutes
|
||||
timeout-minutes: 90
|
||||
strategy:
|
||||
matrix: ${{fromJson(needs.prepare-matrix.outputs.matrix)}} # Load matrix from previous job
|
||||
matrix:
|
||||
os:
|
||||
- ubuntu-latest
|
||||
- macos-latest
|
||||
node_version:
|
||||
- 20
|
||||
- 18
|
||||
package_manager:
|
||||
- npm
|
||||
- yarn
|
||||
- pnpm
|
||||
project:
|
||||
- e2e-angular
|
||||
- e2e-cypress
|
||||
- e2e-detox
|
||||
- e2e-esbuild
|
||||
- e2e-eslint
|
||||
- e2e-expo
|
||||
- e2e-gradle
|
||||
- e2e-jest
|
||||
- e2e-js
|
||||
- e2e-lerna-smoke-tests
|
||||
- e2e-next
|
||||
- e2e-node
|
||||
- e2e-nuxt
|
||||
- e2e-nx-init
|
||||
- e2e-nx
|
||||
- e2e-playwright
|
||||
- e2e-plugin
|
||||
- e2e-react
|
||||
- e2e-react-native
|
||||
- e2e-release
|
||||
- e2e-remix
|
||||
- e2e-rollup
|
||||
- e2e-storybook
|
||||
- e2e-vite
|
||||
- e2e-vue
|
||||
- e2e-web
|
||||
- e2e-webpack
|
||||
- e2e-workspace-create
|
||||
include:
|
||||
# os short names
|
||||
- os: ubuntu-latest
|
||||
os_name: 'Linux'
|
||||
- os: macos-latest
|
||||
os_name: 'MacOS'
|
||||
# test timeouts
|
||||
- os: ubuntu-latest
|
||||
os_timeout: 60
|
||||
- os: macos-latest
|
||||
os_timeout: 90
|
||||
# codeowner groups
|
||||
- project: e2e-angular
|
||||
codeowners: 'S04SS457V38'
|
||||
- project: e2e-cypress
|
||||
codeowners: 'S04T16BTJJY'
|
||||
- project: e2e-detox
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-esbuild
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-expo
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-gradle
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-jest
|
||||
codeowners: 'S04T16BTJJY'
|
||||
- project: e2e-js
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-lerna-smoke-tests
|
||||
codeowners: 'S04TNCVEETS'
|
||||
- project: e2e-eslint
|
||||
codeowners: 'S04SYJGKSCT'
|
||||
- project: e2e-next
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-node
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-nx-init
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-nx
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-plugin
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-release
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-react
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-react-native
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-web
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-rollup
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-storybook
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-playwright
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-remix
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-vite
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-vue
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-nuxt
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-webpack
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-workspace-create
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
exclude:
|
||||
# exclude react-native tests from ubuntu
|
||||
- os: ubuntu-latest
|
||||
project: e2e-react-native
|
||||
- os: ubuntu-latest
|
||||
project: e2e-detox
|
||||
- os: ubuntu-latest
|
||||
project: e2e-expo
|
||||
# exclude non-CNW/Lerna tests from non-LTS node versions
|
||||
- node_version: 18
|
||||
project: e2e-angular
|
||||
- node_version: 18
|
||||
project: e2e-cypress
|
||||
- node_version: 18
|
||||
project: e2e-detox
|
||||
- node_version: 18
|
||||
project: e2e-esbuild
|
||||
- node_version: 18
|
||||
project: e2e-expo
|
||||
- node_version: 18
|
||||
project: e2e-gradle
|
||||
- node_version: 18
|
||||
project: e2e-jest
|
||||
- node_version: 18
|
||||
project: e2e-js
|
||||
- node_version: 18
|
||||
project: e2e-eslint
|
||||
- node_version: 18
|
||||
project: e2e-next
|
||||
- node_version: 18
|
||||
project: e2e-node
|
||||
- node_version: 18
|
||||
project: e2e-nuxt
|
||||
- node_version: 18
|
||||
project: e2e-nx-init
|
||||
- node_version: 18
|
||||
project: e2e-nx
|
||||
- node_version: 18
|
||||
project: e2e-plugin
|
||||
- node_version: 18
|
||||
project: e2e-playwright
|
||||
- node_version: 18
|
||||
project: e2e-react
|
||||
- node_version: 18
|
||||
project: e2e-react-native
|
||||
- node_version: 18
|
||||
project: e2e-web
|
||||
- node_version: 18
|
||||
project: e2e-remix
|
||||
- node_version: 18
|
||||
project: e2e-rollup
|
||||
- node_version: 18
|
||||
project: e2e-storybook
|
||||
- node_version: 18
|
||||
project: e2e-vite
|
||||
- node_version: 18
|
||||
project: e2e-vue
|
||||
- node_version: 18
|
||||
project: e2e-webpack
|
||||
# run just npm v20 on macos
|
||||
- os: macos-latest
|
||||
package_manager: yarn
|
||||
- os: macos-latest
|
||||
package_manager: pnpm
|
||||
- os: macos-latest
|
||||
node_version: 18
|
||||
fail-fast: false
|
||||
|
||||
name: ${{ matrix.os_name }}/${{ matrix.package_manager }}/${{ matrix.node_version }} ${{ join(matrix.project) }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- name: Prepare dir for output
|
||||
run: mkdir -p outputs
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 10.11.1
|
||||
run_install: false
|
||||
- name: Install PNPM
|
||||
run: |
|
||||
npm install -g @pnpm/exe@8
|
||||
|
||||
- name: Use Node.js ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v4
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install Rust
|
||||
if: ${{ matrix.os != 'windows-latest' }}
|
||||
run: |
|
||||
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh -s -- -y
|
||||
source "$HOME/.cargo/env"
|
||||
rustup toolchain install 1.70.0
|
||||
|
||||
- name: Load Cargo Env
|
||||
if: ${{ matrix.os != 'windows-latest' }}
|
||||
run: echo "PATH=$HOME/.cargo/bin:$PATH" >> $GITHUB_ENV
|
||||
|
||||
- name: Install bun
|
||||
if: ${{ matrix.os != 'windows-latest' }}
|
||||
uses: oven-sh/setup-bun@v1
|
||||
- name: Cache node_modules
|
||||
id: cache-modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
bun-version: latest
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
|
||||
|
||||
- name: Install packages
|
||||
run: pnpm install --frozen-lockfile
|
||||
@@ -203,7 +322,7 @@ jobs:
|
||||
|
||||
- name: Cache Homebrew
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
uses: actions/cache@v4
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ${{ steps.homebrew-cache-dir-path.outputs.dir }}
|
||||
key: brew-${{ matrix.node_version }}
|
||||
@@ -212,7 +331,7 @@ jobs:
|
||||
|
||||
- name: Cache Cypress
|
||||
id: cache-cypress
|
||||
uses: actions/cache@v4
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: '${{ github.workspace }}/.cypress'
|
||||
key: ${{ runner.os }}-cypress
|
||||
@@ -221,159 +340,44 @@ jobs:
|
||||
if: steps.cache-cypress.outputs.cache-hit != 'true'
|
||||
run: npx cypress install
|
||||
|
||||
- name: Configure Detox Environment, Install applesimutils
|
||||
- name: Install applesimutils, reset ios simulators
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
run: |
|
||||
# Ensure Xcode command line tools are installed and configured
|
||||
xcode-select --print-path || sudo xcode-select --reset
|
||||
sudo xcode-select -s /Applications/Xcode.app
|
||||
|
||||
# Install or update applesimutils with error handling
|
||||
if ! brew list applesimutils &>/dev/null; then
|
||||
echo "Installing applesimutils..."
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null || {
|
||||
echo "Failed to install applesimutils, retrying with update..."
|
||||
brew update
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils
|
||||
}
|
||||
else
|
||||
echo "Updating applesimutils..."
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew upgrade applesimutils || true
|
||||
fi
|
||||
|
||||
# Verify applesimutils installation
|
||||
applesimutils --version || (echo "applesimutils installation failed" && exit 1)
|
||||
|
||||
# Configure environment for M-series Mac
|
||||
echo "DEVELOPER_DIR=/Applications/Xcode.app/Contents/Developer" >> $GITHUB_ENV
|
||||
echo "PLATFORM_NAME=iOS Simulator" >> $GITHUB_ENV
|
||||
|
||||
# Set additional environment variables for better debugging
|
||||
echo "DETOX_DISABLE_TELEMETRY=1" >> $GITHUB_ENV
|
||||
echo "DETOX_LOG_LEVEL=trace" >> $GITHUB_ENV
|
||||
|
||||
# Verify Xcode installation
|
||||
xcodebuild -version
|
||||
|
||||
timeout-minutes: 10
|
||||
continue-on-error: false
|
||||
|
||||
- name: Reset iOS Simulators
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
id: reset-simulators
|
||||
run: |
|
||||
echo "Resetting iOS Simulators..."
|
||||
|
||||
# Kill simulator processes
|
||||
sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService 2>/dev/null || true
|
||||
killall "Simulator" 2>/dev/null || true
|
||||
killall "iOS Simulator" 2>/dev/null || true
|
||||
|
||||
# Wait for processes to terminate
|
||||
sleep 3
|
||||
|
||||
# Shutdown and erase all simulators (ignore failures)
|
||||
xcrun simctl shutdown all 2>/dev/null || true
|
||||
sleep 5
|
||||
xcrun simctl erase all 2>/dev/null || true
|
||||
|
||||
# If erase failed, try the nuclear option
|
||||
if xcrun simctl list devices | grep -q "Booted" 2>/dev/null; then
|
||||
echo "Standard reset failed, using nuclear option..."
|
||||
rm -rf ~/Library/Developer/CoreSimulator/Devices/* 2>/dev/null || true
|
||||
launchctl remove com.apple.CoreSimulator.CoreSimulatorService 2>/dev/null || true
|
||||
sleep 3
|
||||
fi
|
||||
|
||||
# Clean up additional directories
|
||||
rm -rf ~/Library/Developer/CoreSimulator/Caches/* 2>/dev/null || true
|
||||
rm -rf ~/Library/Logs/CoreSimulator/* 2>/dev/null || true
|
||||
rm -rf ~/Library/Developer/Xcode/DerivedData/* 2>/dev/null || true
|
||||
|
||||
echo "Simulator reset completed"
|
||||
timeout-minutes: 5
|
||||
continue-on-error: true
|
||||
|
||||
- name: Verify Simulator Reset
|
||||
if: ${{ matrix.os == 'macos-latest' && steps.reset-simulators.outcome == 'success' }}
|
||||
run: |
|
||||
# Verify CoreSimulator service restarted
|
||||
pgrep -fl "CoreSimulator" || (echo "CoreSimulator service not running" && exit 1)
|
||||
|
||||
# Verify simulator runtime paths exist and are writable
|
||||
test -d ~/Library/Developer/CoreSimulator/Devices || (echo "Simulator devices directory missing" && exit 1)
|
||||
touch ~/Library/Developer/CoreSimulator/Devices/test || (echo "Simulator devices directory not writable" && exit 1)
|
||||
rm ~/Library/Developer/CoreSimulator/Devices/test
|
||||
timeout-minutes: 5
|
||||
|
||||
- name: Diagnose Simulator Reset Failure
|
||||
if: ${{ matrix.os == 'macos-latest' && steps.reset-simulators.outcome == 'failure' }}
|
||||
run: |
|
||||
echo "Simulator reset failed. Collecting diagnostic information..."
|
||||
xcrun simctl list
|
||||
echo "Checking simulator logs..."
|
||||
ls -la ~/Library/Logs/CoreSimulator/ || echo "No simulator logs found"
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null
|
||||
xcrun simctl shutdown all && xcrun simctl erase all
|
||||
|
||||
- name: Configure git metadata (needed for lerna smoke tests)
|
||||
if: ${{ (matrix.os != 'macos-latest') || (matrix.os == 'macos-latest' && steps.reset-simulators.outcome == 'success') }}
|
||||
run: |
|
||||
git config --global user.email test@test.com
|
||||
git config --global user.name "Test Test"
|
||||
|
||||
- name: Set starting timestamp
|
||||
if: ${{ (matrix.os != 'macos-latest') || (matrix.os == 'macos-latest' && steps.reset-simulators.outcome == 'success') }}
|
||||
id: before-e2e
|
||||
shell: bash
|
||||
run: |
|
||||
echo "timestamp=$(date +%s)" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Run e2e tests with pnpm (Linux/Windows)
|
||||
id: e2e-run-pnpm
|
||||
if: ${{ matrix.os != 'macos-latest' }}
|
||||
run: pnpm nx run ${{ matrix.project }}:e2e-local
|
||||
shell: bash
|
||||
- name: Run e2e tests
|
||||
id: e2e-run
|
||||
run: pnpm nx run-many -t e2e-local -p ${{ matrix.project }}
|
||||
timeout-minutes: ${{ matrix.os_timeout }}
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
NX_E2E_CI_CACHE_KEY: e2e-gha-${{ matrix.os }}-${{ matrix.node_version }}-${{ matrix.package_manager }}
|
||||
NX_DAEMON: 'true'
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_E2E_VERBOSE_LOGGING: 'true'
|
||||
NX_NATIVE_LOGGING: 'false'
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_CLOUD_NO_TIMEOUTS: 'true'
|
||||
NX_E2E_SKIP_CLEANUP: 'true'
|
||||
NODE_OPTIONS: --max_old_space_size=8192
|
||||
SELECTED_PM: ${{ matrix.package_manager }}
|
||||
npm_config_registry: http://localhost:4872
|
||||
YARN_REGISTRY: http://localhost:4872
|
||||
CI: true
|
||||
|
||||
- name: Run e2e tests with npm (macOS)
|
||||
id: e2e-run-npm
|
||||
if: ${{ matrix.os == 'macos-latest' && steps.reset-simulators.outcome == 'success' }}
|
||||
run: |
|
||||
# Run the tests
|
||||
if [[ "${{ matrix.project }}" == "e2e-detox" ]] || [[ "${{ matrix.project }}" == "e2e-react-native" ]] || [[ "${{ matrix.project }}" == "e2e-expo" ]]; then
|
||||
NX_E2E_VERBOSE_DEBUG=1 pnpm nx run ${{ matrix.project }}:e2e-macos-local
|
||||
else
|
||||
NX_E2E_VERBOSE_DEBUG=1 pnpm nx run ${{ matrix.project }}:e2e-local
|
||||
fi
|
||||
|
||||
env:
|
||||
NX_E2E_CI_CACHE_KEY: e2e-gha-${{ matrix.os }}-${{ matrix.node_version }}-${{ matrix.package_manager }}
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_CI_EXECUTION_ENV: 'macos'
|
||||
NX_E2E_VERBOSE_LOGGING: 'true'
|
||||
NX_NATIVE_LOGGING: 'false'
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_CACHE_DIRECTORY: 'tmp'
|
||||
NX_E2E_SKIP_CLEANUP: 'true'
|
||||
NODE_OPTIONS: --max_old_space_size=8192
|
||||
SELECTED_PM: 'npm'
|
||||
npm_config_registry: http://localhost:4872
|
||||
YARN_REGISTRY: http://localhost:4872
|
||||
DEVELOPER_DIR: '/Applications/Xcode.app/Contents/Developer'
|
||||
CI: true
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_E2E_VERBOSE_LOGGING: 'true'
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_DAEMON: 'true'
|
||||
NX_SKIP_LOG_GROUPING: 'true'
|
||||
|
||||
- name: Save matrix config in file
|
||||
if: ${{ always() }}
|
||||
@@ -383,99 +387,210 @@ jobs:
|
||||
before=${{ steps.before-e2e.outputs.timestamp }}
|
||||
now=$(date +%s)
|
||||
delta=$(($now - $before))
|
||||
|
||||
# Determine the outcome based on which step ran
|
||||
outcome="${{ matrix.os == 'macos-latest' && steps.e2e-run-npm.outcome || steps.e2e-run-pnpm.outcome }}"
|
||||
|
||||
matrix=$((
|
||||
echo '${{ toJSON(matrix) }}'
|
||||
) | jq --argjson delta $delta -c '. + { "status": "'"$outcome"'", "duration": $delta }')
|
||||
echo "$matrix" > 'outputs/matrix.json'
|
||||
) | jq --argjson delta $delta -c '. + { "status": "${{ steps.e2e-run.outcome}}", "duration": $delta }')
|
||||
echo "$matrix" > matrix
|
||||
path=outputs/${{ matrix.os_name}}-${{ matrix.node_version}}-${{ matrix.package_manager}}-${{ matrix.project }}
|
||||
echo "path=$path" >> $GITHUB_OUTPUT
|
||||
echo "$matrix" > $path
|
||||
|
||||
- name: Upload matrix config
|
||||
uses: actions/upload-artifact@v4
|
||||
uses: actions/upload-artifact@v3
|
||||
if: ${{ always() }}
|
||||
with:
|
||||
name: ${{ matrix.os_name}}-${{ matrix.node_version}}-${{ matrix.package_manager}}-${{ matrix.project }}
|
||||
overwrite: true
|
||||
if-no-files-found: 'ignore'
|
||||
path: 'outputs/matrix.json'
|
||||
name: outputs
|
||||
path: ${{ steps.save-matrix.outputs.path }}
|
||||
|
||||
- name: Setup tmate session
|
||||
if: ${{ github.event_name == 'workflow_dispatch' && inputs.debug_enabled && failure() }}
|
||||
uses: mxschmitt/action-tmate@v3.8
|
||||
timeout-minutes: 15
|
||||
with:
|
||||
sudo: ${{ matrix.os != 'windows-latest' }} # disable sudo for windows debugging
|
||||
|
||||
process-result:
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: e2e
|
||||
timeout-minutes: 10
|
||||
outputs:
|
||||
message: ${{ steps.process-json.outputs.slack_message }}
|
||||
proj_duration: ${{ steps.process-json.outputs.slack_proj_duration }}
|
||||
pm_duration: ${{ steps.process-json.outputs.slack_pm_duration }}
|
||||
codeowners: ${{ steps.process-json.outputs.codeowners }}
|
||||
has_golden_failures: ${{ steps.process-json.outputs.has_golden_failures }}
|
||||
message: ${{ steps.process-json.outputs.SLACK_MESSAGE }}
|
||||
proj-duration: ${{ steps.process-json.outputs.SLACK_PROJ_DURATION }}
|
||||
pm-duration: ${{ steps.process-json.outputs.SLACK_PM_DURATION }}
|
||||
codeowners: ${{ steps.process-json.outputs.CODEOWNERS }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
|
||||
- name: Prepare dir for output
|
||||
run: mkdir -p outputs
|
||||
|
||||
- name: Load outputs
|
||||
uses: actions/download-artifact@v4
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: outputs
|
||||
path: outputs
|
||||
|
||||
- name: Join and stringify matrix configs
|
||||
id: combine-json
|
||||
run: |
|
||||
combined=$(jq -sc . outputs/*/matrix.json)
|
||||
combined=$((jq -s . outputs/*) | jq tostring)
|
||||
echo "combined=$combined" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Process results with TypeScript script
|
||||
- name: Make slack outputs
|
||||
id: process-json
|
||||
run: |
|
||||
echo '${{ steps.combine-json.outputs.combined }}' | npx tsx .github/workflows/nightly/process-result.ts
|
||||
uses: actions/github-script@v6
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
with:
|
||||
script: |
|
||||
const combined = JSON.parse(${{ steps.combine-json.outputs.combined }});
|
||||
const failedProjects = combined.filter(c => c.status === 'failure').sort((a, b) => a.project.localeCompare(b.project));
|
||||
|
||||
// codeowners
|
||||
const codeowners = new Set();
|
||||
failedProjects.forEach(c => {
|
||||
codeowners.add(c.codeowners);
|
||||
});
|
||||
core.setOutput('CODEOWNERS', Array.from(codeowners).join(','));
|
||||
|
||||
function trimSpace(res) {
|
||||
return res.split('\n').map((l) => l.trim()).join('\n');
|
||||
}
|
||||
|
||||
// failed message
|
||||
let lastProject;
|
||||
let result = `
|
||||
\`\`\`
|
||||
| Failed project | PM | OS | Node |
|
||||
|--------------------------------|------|-------|------|`;
|
||||
failedProjects.forEach(matrix => {
|
||||
const project = matrix.project !== lastProject ? matrix.project : '...';
|
||||
result += `\n| ${project.padEnd(30)} | ${matrix.package_manager.padEnd(4)} | ${matrix.os_name} | v${matrix.node_version} |`
|
||||
lastProject = matrix.project;
|
||||
});
|
||||
result += `\`\`\``;
|
||||
core.setOutput('SLACK_MESSAGE', trimSpace(result));
|
||||
|
||||
function humanizeDuration(num) {
|
||||
let res = '';
|
||||
const hours = Math.floor(num / 3600);
|
||||
if (hours) {
|
||||
res += `${hours}h `;
|
||||
}
|
||||
const mins = Math.floor((num % 3600) / 60);
|
||||
if (mins) {
|
||||
res += `${mins}m `;
|
||||
}
|
||||
const sec = num % 60;
|
||||
if (sec) {
|
||||
res += `${sec}s`
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// duration message
|
||||
const timeReport = {};
|
||||
const pmReport = {
|
||||
npm: 0,
|
||||
yarn: 0,
|
||||
pnpm: 0
|
||||
};
|
||||
const macosProjects = ['e2e-detox', 'e2e-expo', 'e2e-react-native'];
|
||||
combined.forEach((matrix) => {
|
||||
if (matrix.os_name === 'Linux' && matrix.node_version === 18) {
|
||||
pmReport[matrix.package_manager] += matrix.duration;
|
||||
}
|
||||
if (matrix.os_name === 'Linux' || macosProjects.includes(matrix.project)) {
|
||||
if (timeReport[matrix.project]) {
|
||||
if (matrix.duration > timeReport[matrix.project].max) {
|
||||
timeReport[matrix.project].max = matrix.duration;
|
||||
timeReport[
|
||||
matrix.project
|
||||
].maxEnv = `${matrix.os_name}, ${matrix.package_manager}`;
|
||||
}
|
||||
if (matrix.duration < timeReport[matrix.project].min) {
|
||||
timeReport[matrix.project].min = matrix.duration;
|
||||
timeReport[
|
||||
matrix.project
|
||||
].minEnv = `${matrix.os_name}, ${matrix.package_manager}`;
|
||||
}
|
||||
} else {
|
||||
timeReport[matrix.project] = {
|
||||
min: matrix.duration,
|
||||
max: matrix.duration,
|
||||
minEnv: `${matrix.os_name}, ${matrix.package_manager}`,
|
||||
maxEnv: `${matrix.os_name}, ${matrix.package_manager}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// project time report
|
||||
let resultPkg = `
|
||||
\`\`\`
|
||||
| Project | Time |
|
||||
|--------------------------------|---------------------------|`;
|
||||
function mapProjectTime(proj, section) {
|
||||
let res = '';
|
||||
res += `${humanizeDuration(timeReport[proj][section])}`;
|
||||
res += ` (${timeReport[proj][section + 'Env']})`
|
||||
return res;
|
||||
}
|
||||
function durationIcon(proj, section) {
|
||||
if (timeReport[proj][section] < 12 * 60) {
|
||||
return `${section} ✅`;
|
||||
}
|
||||
if (timeReport[proj][section] < 15 * 60) {
|
||||
return `${section} ❗`;
|
||||
}
|
||||
return `${section} ❌`;
|
||||
}
|
||||
Object.keys(timeReport).forEach(proj => {
|
||||
resultPkg += `\n| ${proj.padEnd(30)} | |`;
|
||||
resultPkg += `\n| ${durationIcon(proj, 'min').padStart(29)} | ${mapProjectTime(proj, 'min').padEnd(25)} |`;
|
||||
resultPkg += `\n| ${durationIcon(proj, 'max').padStart(29)} | ${mapProjectTime(proj, 'max').padEnd(25)} |`;
|
||||
});
|
||||
resultPkg += `\`\`\``;
|
||||
core.setOutput('SLACK_PROJ_DURATION', trimSpace(resultPkg));
|
||||
|
||||
// Print project duration report inline to allow reviewing on manual runs (when no slack message will be sent)
|
||||
console.log(trimSpace(resultPkg));
|
||||
|
||||
let resultPm = `
|
||||
\`\`\`
|
||||
| PM | Total time |
|
||||
|------|-------------|`;
|
||||
Object.keys(pmReport).forEach(pm => {
|
||||
resultPm += `\n| ${pm.padEnd(4)} | ${humanizeDuration(pmReport[pm]).padEnd(11)} |`
|
||||
});
|
||||
resultPm += `\`\`\``;
|
||||
core.setOutput('SLACK_PM_DURATION', trimSpace(resultPm));
|
||||
|
||||
// Print package manager duration report inline to allow reviewing on manual runs (when no slack message will be sent)
|
||||
console.log(trimSpace(resultPm));
|
||||
|
||||
report-failure:
|
||||
if: ${{ always() && needs.process-result.outputs.has_golden_failures == 'true' && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
if: ${{ failure() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: process-result
|
||||
runs-on: ubuntu-latest
|
||||
name: Report failure
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: 'failure'
|
||||
message_format: '${{ needs.process-result.outputs.message }}'
|
||||
notification_title: 'Golden Test Failure'
|
||||
message_format: '{emoji} Workflow has {status_message} ${{ needs.process-result.outputs.message }}'
|
||||
notification_title: '{workflow}'
|
||||
footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
|
||||
mention_groups: ${{ needs.process-result.outputs.codeowners }}
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
|
||||
report-success:
|
||||
if: ${{ always() && needs.process-result.outputs.has_golden_failures == 'false' && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: process-result
|
||||
if: ${{ success() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: e2e
|
||||
runs-on: ubuntu-latest
|
||||
name: Report status
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: 'success'
|
||||
message_format: '${{ needs.process-result.outputs.message }}'
|
||||
notification_title: '✅ Golden Tests: All Passed!'
|
||||
status: ${{ needs.e2e.result }}
|
||||
message_format: '{emoji} Workflow has {status_message}'
|
||||
notification_title: '{workflow}'
|
||||
footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
@@ -484,15 +599,14 @@ jobs:
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: process-result
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
name: Report duration per package manager
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: 'skipped'
|
||||
message_format: '${{ needs.process-result.outputs.pm_duration }}'
|
||||
notification_title: '⌛ Total duration per package manager (ubuntu only)'
|
||||
message_format: '${{ needs.process-result.outputs.pm-duration }}'
|
||||
notification_title: 'Total duration per package manager (ubuntu only)'
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
|
||||
@@ -500,14 +614,13 @@ jobs:
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: process-result
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
name: Report duration per project
|
||||
name: Report duration per package manager
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: 'skipped'
|
||||
message_format: '${{ needs.process-result.outputs.proj_duration }}'
|
||||
notification_title: '⌛ E2E Project duration stats'
|
||||
message_format: '${{ needs.process-result.outputs.proj-duration }}'
|
||||
notification_title: 'E2E Project duration stats'
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
|
||||
@@ -0,0 +1,388 @@
|
||||
name: E2E matrix (Windows)
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 5 * * *"
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
debug_enabled:
|
||||
type: boolean
|
||||
description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
|
||||
required: false
|
||||
default: false
|
||||
|
||||
env:
|
||||
CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/.cypress
|
||||
|
||||
permissions: { }
|
||||
jobs:
|
||||
preinstall:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
runs-on: windows-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node_version:
|
||||
- 20
|
||||
- 18
|
||||
|
||||
name: Cache install (node v${{ matrix.node_version }})
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 8
|
||||
run_install: false
|
||||
|
||||
- name: Set node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache node_modules
|
||||
id: cache-modules
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
lookup-only: true
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
|
||||
|
||||
- name: Install packages
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Cache Cypress
|
||||
id: cache-cypress
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
lookup-only: true
|
||||
path: '${{ github.workspace }}/.cypress'
|
||||
key: windows-cypress
|
||||
|
||||
- name: Install Cypress
|
||||
if: steps.cache-cypress.outputs.cache-hit != 'true'
|
||||
run: pnpm cypress install
|
||||
|
||||
e2e:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
needs: preinstall
|
||||
permissions:
|
||||
contents: read
|
||||
runs-on: windows-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node_version:
|
||||
- 20
|
||||
- 18
|
||||
package_manager:
|
||||
- npm
|
||||
project:
|
||||
- e2e-angular
|
||||
- e2e-cypress
|
||||
- e2e-esbuild
|
||||
- e2e-eslint
|
||||
- e2e-jest
|
||||
- e2e-js
|
||||
- e2e-lerna-smoke-tests
|
||||
- e2e-next
|
||||
- e2e-node
|
||||
- e2e-nuxt
|
||||
- e2e-nx-init
|
||||
- e2e-nx
|
||||
- e2e-playwright
|
||||
- e2e-plugin
|
||||
- e2e-react
|
||||
- e2e-release
|
||||
- e2e-remix
|
||||
- e2e-rollup
|
||||
- e2e-storybook
|
||||
- e2e-vite
|
||||
- e2e-vue
|
||||
- e2e-web
|
||||
- e2e-webpack
|
||||
- e2e-workspace-create
|
||||
include:
|
||||
# codeowner groups
|
||||
- project: e2e-angular
|
||||
codeowners: 'S04SS457V38'
|
||||
- project: e2e-cypress
|
||||
codeowners: 'S04T16BTJJY'
|
||||
- project: e2e-detox
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-esbuild
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-expo
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-gradle
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-jest
|
||||
codeowners: 'S04T16BTJJY'
|
||||
- project: e2e-js
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-lerna-smoke-tests
|
||||
codeowners: 'S04TNCVEETS'
|
||||
- project: e2e-eslint
|
||||
codeowners: 'S04SYJGKSCT'
|
||||
- project: e2e-next
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-node
|
||||
codeowners: 'S04SJ6HHP0X'
|
||||
- project: e2e-nx-init
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-nx
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-plugin
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-release
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
- project: e2e-react
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-react-native
|
||||
codeowners: 'S04TNCNJG5N'
|
||||
- project: e2e-web
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-rollup
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-storybook
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-playwright
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-remix
|
||||
codeowners: 'S04SVQ8H0G5'
|
||||
- project: e2e-vite
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-vue
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-nuxt
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-webpack
|
||||
codeowners: 'S04SJ6PL98X'
|
||||
- project: e2e-workspace-create
|
||||
codeowners: 'S04SYHYKGNP'
|
||||
exclude:
|
||||
# exclude non-CNW/Lerna tests from non-LTS node versions
|
||||
- node_version: 18
|
||||
project: e2e-angular
|
||||
- node_version: 18
|
||||
project: e2e-cypress
|
||||
- node_version: 18
|
||||
project: e2e-esbuild
|
||||
- node_version: 18
|
||||
project: e2e-jest
|
||||
- node_version: 18
|
||||
project: e2e-js
|
||||
- node_version: 18
|
||||
project: e2e-eslint
|
||||
- node_version: 18
|
||||
project: e2e-next
|
||||
- node_version: 18
|
||||
project: e2e-node
|
||||
- node_version: 18
|
||||
project: e2e-nuxt
|
||||
- node_version: 18
|
||||
project: e2e-nx-init
|
||||
- node_version: 18
|
||||
project: e2e-nx
|
||||
- node_version: 18
|
||||
project: e2e-plugin
|
||||
- node_version: 18
|
||||
project: e2e-playwright
|
||||
- node_version: 18
|
||||
project: e2e-react
|
||||
- node_version: 18
|
||||
project: e2e-web
|
||||
- node_version: 18
|
||||
project: e2e-remix
|
||||
- node_version: 18
|
||||
project: e2e-rollup
|
||||
- node_version: 18
|
||||
project: e2e-storybook
|
||||
- node_version: 18
|
||||
project: e2e-vite
|
||||
- node_version: 18
|
||||
project: e2e-vue
|
||||
- node_version: 18
|
||||
project: e2e-webpack
|
||||
fail-fast: false
|
||||
|
||||
name: ${{ matrix.project }} (v${{ matrix.node_version }})
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Prepare dir for output
|
||||
run: mkdir -p outputs
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 8.7.4
|
||||
run_install: false
|
||||
|
||||
- name: Use Node.js ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache node_modules
|
||||
id: cache-modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
|
||||
|
||||
- name: Install packages
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Cache Cypress
|
||||
id: cache-cypress
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: '${{ github.workspace }}/.cypress'
|
||||
key: ${{ runner.os }}-cypress
|
||||
|
||||
- name: Install Cypress
|
||||
if: steps.cache-cypress.outputs.cache-hit != 'true'
|
||||
run: npx cypress install
|
||||
|
||||
- name: Configure git metadata (needed for lerna smoke tests)
|
||||
run: |
|
||||
git config --global user.email test@test.com
|
||||
git config --global user.name "Test Test"
|
||||
|
||||
- name: Run e2e tests
|
||||
id: e2e-run
|
||||
run: pnpm nx run ${{ matrix.project }}:e2e-local
|
||||
shell: bash
|
||||
timeout-minutes: 180
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
NX_E2E_CI_CACHE_KEY: e2e-gha-windows-${{ matrix.node_version }}-${{ matrix.package_manager }}
|
||||
NODE_OPTIONS: --max_old_space_size=8192
|
||||
SELECTED_PM: ${{ matrix.package_manager }}
|
||||
npm_config_registry: http://localhost:4872
|
||||
NX_CACHE_DIRECTORY: 'tmp'
|
||||
NX_E2E_SKIP_CLEANUP: 'true'
|
||||
NX_E2E_RUN_E2E: 'true'
|
||||
NX_E2E_VERBOSE_LOGGING: 'true'
|
||||
NX_PERF_LOGGING: 'false'
|
||||
NX_DAEMON: 'true'
|
||||
NX_SKIP_LOG_GROUPING: 'true'
|
||||
|
||||
- name: Save matrix config in file
|
||||
if: ${{ always() }}
|
||||
id: save-matrix
|
||||
shell: bash
|
||||
run: |
|
||||
matrix=$((
|
||||
echo '${{ toJSON(matrix) }}'
|
||||
) | jq -c '. + { "status": "${{ steps.e2e-run.outcome}}" }')
|
||||
echo "$matrix" > matrix
|
||||
path=outputs/windows-${{ matrix.node_version}}-${{ matrix.package_manager}}-${{ matrix.project }}
|
||||
echo "path=$path" >> $GITHUB_OUTPUT
|
||||
echo "$matrix" > $path
|
||||
|
||||
- name: Upload matrix config
|
||||
uses: actions/upload-artifact@v3
|
||||
if: ${{ always() }}
|
||||
with:
|
||||
name: outputs
|
||||
path: ${{ steps.save-matrix.outputs.path }}
|
||||
|
||||
- name: Setup tmate session
|
||||
if: ${{ github.event_name == 'workflow_dispatch' && inputs.debug_enabled && failure() }}
|
||||
uses: mxschmitt/action-tmate@v3.8
|
||||
timeout-minutes: 15
|
||||
with:
|
||||
sudo: false # disable sudo for windows debugging
|
||||
|
||||
process-result:
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: e2e
|
||||
outputs:
|
||||
message: ${{ steps.process-json.outputs.SLACK_MESSAGE }}
|
||||
codeowners: ${{ steps.process-json.outputs.CODEOWNERS }}
|
||||
steps:
|
||||
- name: Load outputs
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: outputs
|
||||
path: outputs
|
||||
|
||||
- name: Join and stringify matrix configs
|
||||
id: combine-json
|
||||
shell: bash
|
||||
run: |
|
||||
combined=$((jq -s . outputs/*) | jq tostring)
|
||||
echo "combined=$combined" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Make slack outputs
|
||||
id: process-json
|
||||
uses: actions/github-script@v6
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
with:
|
||||
script: |
|
||||
const combined = JSON.parse(${{ steps.combine-json.outputs.combined }});
|
||||
const failedProjects = combined.filter(c => c.status === 'failure').sort((a, b) => a.project.localeCompare(b.project));
|
||||
|
||||
// codeowners
|
||||
const codeowners = new Set();
|
||||
failedProjects.forEach(c => {
|
||||
codeowners.add(c.codeowners);
|
||||
});
|
||||
core.setOutput('CODEOWNERS', Array.from(codeowners).join(','));
|
||||
|
||||
// message
|
||||
let result = `
|
||||
*OS* Windows
|
||||
*Package manager* npm
|
||||
\`\`\`
|
||||
| Failed project | Node |
|
||||
|--------------------------------|------|`;
|
||||
failedProjects.forEach(matrix => {
|
||||
result += `\n| ${matrix.project.padEnd(30)} | v${matrix.node_version} |`
|
||||
});
|
||||
result += `\`\`\``;
|
||||
const message = result.split('\n').map(l => l.trim()).join('\n');
|
||||
core.setOutput('SLACK_MESSAGE', message);
|
||||
|
||||
report-failure:
|
||||
if: ${{ failure() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: process-result
|
||||
runs-on: ubuntu-latest
|
||||
name: Report failure
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: 'failure'
|
||||
message_format: '{emoji} Workflow has {status_message} ${{ needs.process-result.outputs.message }}'
|
||||
notification_title: '{workflow}'
|
||||
footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
|
||||
mention_groups: ${{ needs.process-result.outputs.codeowners }}
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
|
||||
report-success:
|
||||
if: ${{ success() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: e2e
|
||||
runs-on: ubuntu-latest
|
||||
name: Report success
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
with:
|
||||
status: ${{ needs.e2e.result }}
|
||||
message_format: '{emoji} Workflow has {status_message}'
|
||||
notification_title: '{workflow}'
|
||||
footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
|
||||
env:
|
||||
SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
|
||||
@@ -10,7 +10,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: ['20.19.0']
|
||||
node-version: [18]
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
@@ -19,13 +19,13 @@ jobs:
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '20.19.0'
|
||||
node-version: 18
|
||||
|
||||
- name: Install pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
uses: pnpm/action-setup@v2
|
||||
id: pnpm-install
|
||||
with:
|
||||
version: 10.11.1
|
||||
version: 8
|
||||
run_install: false
|
||||
|
||||
- name: Get pnpm store directory
|
||||
|
||||
@@ -18,14 +18,14 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 10.11.1
|
||||
version: 8
|
||||
|
||||
- name: Use Node.js ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '20.19.0'
|
||||
node-version: '18'
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Cache node_modules
|
||||
@@ -50,11 +50,11 @@ jobs:
|
||||
|
||||
- name: Collect Issue Data
|
||||
id: collect
|
||||
run: npx tsx ./scripts/issues-scraper/index.ts
|
||||
run: npx ts-node ./scripts/issues-scraper/index.ts
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
|
||||
- uses: actions/upload-artifact@v4
|
||||
- uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: cached-issue-data
|
||||
path: ./scripts/issues-scraper/cached/data.json
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
type MatrixDataProject = {
|
||||
name: string,
|
||||
codeowners: string,
|
||||
is_golden?: boolean, // true if this is a golden project, false otherwise
|
||||
};
|
||||
|
||||
type MatrixDataOS = {
|
||||
os: string, // GH runner machine name: e.g. ubuntu-latest
|
||||
os_name: string, // short name that will be printed in the report and on the action
|
||||
os_timeout: number, // 60
|
||||
package_managers: string[], // package managers to run on this OS
|
||||
node_versions: Array<number | string>, // node versions to run on this OS
|
||||
excluded?: string[], // projects to exclude from running on this OS
|
||||
};
|
||||
|
||||
type MatrixData = {
|
||||
coreProjects: MatrixDataProject[],
|
||||
projects: MatrixDataProject[],
|
||||
nodeTLS: number,
|
||||
setup: MatrixDataOS[],
|
||||
}
|
||||
|
||||
export type MatrixItem = {
|
||||
project: string,
|
||||
codeowners: string,
|
||||
node_version: number | string,
|
||||
package_manager: string,
|
||||
os: string,
|
||||
os_name: string,
|
||||
os_timeout: number,
|
||||
is_golden?: boolean,
|
||||
};
|
||||
|
||||
// TODO: Extract Slack groups into named groups for easier maintenance
|
||||
const matrixData: MatrixData = {
|
||||
coreProjects: [
|
||||
{ name: 'e2e-lerna-smoke-tests', codeowners: 'S04TNCVEETS', is_golden: true },
|
||||
{ name: 'e2e-js', codeowners: 'S04SJ6HHP0X', is_golden: true },
|
||||
{ name: 'e2e-nx-init', codeowners: 'S04SYHYKGNP', is_golden: true },
|
||||
{ name: 'e2e-nx', codeowners: 'S04SYHYKGNP' },
|
||||
{ name: 'e2e-release', codeowners: 'S04SYHYKGNP'},
|
||||
{ name: 'e2e-workspace-create', codeowners: 'S04SYHYKGNP' },
|
||||
],
|
||||
projects: [
|
||||
{ name: 'e2e-cypress', codeowners: 'S04T16BTJJY', is_golden: true },
|
||||
{ name: 'e2e-detox', codeowners: 'S04TNCNJG5N' , is_golden: true},
|
||||
{ name: 'e2e-esbuild', codeowners: 'S04SJ6HHP0X' , is_golden: true},
|
||||
{ name: 'e2e-gradle', codeowners: 'S04TNCNJG5N' , is_golden: true},
|
||||
{ name: 'e2e-eslint', codeowners: 'S04SYJGKSCT', is_golden: true },
|
||||
{ name: 'e2e-node', codeowners: 'S04SJ6HHP0X', is_golden: true },
|
||||
{ name: 'e2e-playwright', codeowners: 'S04SVQ8H0G5', is_golden: true },
|
||||
{ name: 'e2e-remix', codeowners: 'S04SVQ8H0G5' , is_golden: true},
|
||||
{ name: 'e2e-rspack', codeowners: 'S04SJ6HHP0X', is_golden: true },
|
||||
{ name: 'e2e-vite', codeowners: 'S04SJ6PL98X' , is_golden: true},
|
||||
{ name: 'e2e-vue', codeowners: 'S04SJ6PL98X' , is_golden: true},
|
||||
{ name: 'e2e-web', codeowners: 'S04SJ6PL98X', is_golden: true },
|
||||
{ name: 'e2e-webpack', codeowners: 'S04SJ6PL98X', is_golden: true },
|
||||
{ name: 'e2e-jest', codeowners: 'S04T16BTJJY', is_golden: true },
|
||||
{ name: 'e2e-angular', codeowners: 'S04SS457V38' },
|
||||
{ name: 'e2e-expo', codeowners: 'S04TNCNJG5N' },
|
||||
{ name: 'e2e-next', codeowners: 'S04TNCNJG5N' },
|
||||
{ name: 'e2e-plugin', codeowners: 'S04SYHYKGNP' },
|
||||
{ name: 'e2e-react', codeowners: 'S04TNCNJG5N' },
|
||||
{ name: 'e2e-react-native', codeowners: 'S04TNCNJG5N' },
|
||||
{ name: 'e2e-rollup', codeowners: 'S04SJ6PL98X' },
|
||||
{ name: 'e2e-storybook', codeowners: 'S04SVQ8H0G5' },
|
||||
{ name: 'e2e-nuxt', codeowners: 'S04SJ6PL98X' }
|
||||
],
|
||||
nodeTLS: 20,
|
||||
setup: [
|
||||
{ os: 'ubuntu-latest', os_name: 'Linux', os_timeout: 60, package_managers: ['npm', 'pnpm', 'yarn'], node_versions: ['20.19.0', "22.12.0"], excluded: ['e2e-detox', 'e2e-react-native', 'e2e-expo'] },
|
||||
{ os: 'macos-latest', os_name: 'MacOS', os_timeout: 90, package_managers: ['npm'], node_versions: ['20.19.0'] },
|
||||
// TODO (emily): Fix Windows support as gradle fails when running nx build https://staging.nx.app/runs/LgD4vxGn8w?utm_source=pull-request&utm_medium=comment
|
||||
// { os: 'windows-latest', os_name: 'WinOS', os_timeout: 180, package_managers: ['npm'], node_versions: ['20.19.0'], excluded: ['e2e-detox', 'e2e-react-native', 'e2e-expo'] }
|
||||
]
|
||||
};
|
||||
|
||||
const matrix: Array<MatrixItem> = [];
|
||||
|
||||
function addMatrixCombo(project: MatrixDataProject, nodeVersion: number | string, pm: number, os: number) {
|
||||
matrix.push({
|
||||
project: project.name,
|
||||
codeowners: project.codeowners,
|
||||
node_version: nodeVersion,
|
||||
package_manager: matrixData.setup[os].package_managers[pm],
|
||||
os: matrixData.setup[os].os,
|
||||
os_name: matrixData.setup[os].os_name,
|
||||
os_timeout: matrixData.setup[os].os_timeout,
|
||||
is_golden: !!project.is_golden, // Mark golden projects as true, others as false
|
||||
});
|
||||
}
|
||||
|
||||
function processProject(project: MatrixDataProject, nodeVersion?: number) {
|
||||
for (let os = 0; os < matrixData.setup.length; os++) {
|
||||
for (let pm = 0; pm < matrixData.setup[os].package_managers.length; pm++) {
|
||||
if (!matrixData.setup[os].excluded || !matrixData.setup[os].excluded?.includes(project.name)) {
|
||||
if (nodeVersion) {
|
||||
addMatrixCombo(project, nodeVersion, pm, os);
|
||||
} else {
|
||||
for (let n = 0; n < matrixData.setup[os].node_versions.length; n++) {
|
||||
addMatrixCombo(project, matrixData.setup[os].node_versions[n], pm, os);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// process core projects
|
||||
for (let p = 0; p < matrixData.coreProjects.length; p++) {
|
||||
processProject(matrixData.coreProjects[p]);
|
||||
}
|
||||
// process other projects
|
||||
for (let p = 0; p < matrixData.projects.length; p++) {
|
||||
processProject(matrixData.projects[p], matrixData.nodeTLS);
|
||||
}
|
||||
|
||||
if (matrix.length > 256) {
|
||||
throw new Error('You have exceeded the size of the matrix. GitHub allows only 256 jobs in a matrix. Found ${matrix.length} jobs.');
|
||||
}
|
||||
|
||||
// print result to stdout for pipeline to consume
|
||||
process.stdout.write(JSON.stringify({ include: matrix }, null, 0));
|
||||
@@ -1,197 +0,0 @@
|
||||
import * as fs from 'fs';
|
||||
import { MatrixItem } from './process-matrix';
|
||||
|
||||
interface MatrixResult extends MatrixItem {
|
||||
status: 'success' | 'failure' | 'cancelled';
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface ProcessedResults {
|
||||
codeowners: string;
|
||||
slack_message: string;
|
||||
slack_proj_duration: string;
|
||||
slack_pm_duration: string;
|
||||
has_golden_failures: string;
|
||||
}
|
||||
|
||||
function trimSpace(res: string): string {
|
||||
return res.split('\n').map((l) => l.trim()).join('\n');
|
||||
}
|
||||
|
||||
function humanizeDuration(num: number): string {
|
||||
let res = '';
|
||||
const hours = Math.floor(num / 3600);
|
||||
if (hours) res += `${hours}h `;
|
||||
const mins = Math.floor((num % 3600) / 60);
|
||||
if (mins) res += `${mins}m `;
|
||||
const sec = num % 60;
|
||||
if (sec) res += `${sec}s`;
|
||||
return res;
|
||||
}
|
||||
|
||||
function processResults(combined: MatrixResult[]): ProcessedResults {
|
||||
const failedProjects = combined.filter(c => c.status === 'failure' || c.status === 'cancelled').sort((a, b) => a.project.localeCompare(b.project));
|
||||
const failedGoldenProjects = failedProjects.filter(c => c.is_golden);
|
||||
const hasGoldenFailures = failedGoldenProjects.length > 0;
|
||||
const codeowners = new Set<string>();
|
||||
failedGoldenProjects.forEach(c => codeowners.add(c.codeowners));
|
||||
|
||||
let result = '';
|
||||
|
||||
const allGoldenProjects = combined.filter(c => c.is_golden);
|
||||
const uniqueGoldenProjects = new Set(allGoldenProjects.map(c => c.project));
|
||||
const uniqueFailedGoldenProjects = new Set(failedGoldenProjects.map(c => c.project));
|
||||
const goldenPassingCount = uniqueGoldenProjects.size - uniqueFailedGoldenProjects.size;
|
||||
const goldenFailingCount = uniqueFailedGoldenProjects.size;
|
||||
|
||||
const allOtherProjects = combined.filter(c => !c.is_golden);
|
||||
const uniqueOtherProjects = new Set(allOtherProjects.map(c => c.project));
|
||||
const failedRegularProjects = failedProjects.filter(c => !c.is_golden);
|
||||
const uniqueFailedOtherProjects = new Set(failedRegularProjects.map(c => c.project));
|
||||
const otherPassingCount = uniqueOtherProjects.size - uniqueFailedOtherProjects.size;
|
||||
const otherFailingCount = uniqueFailedOtherProjects.size;
|
||||
|
||||
result += `\n🌟 *Golden Projects*`;
|
||||
result += `\n✅ Passing: ${goldenPassingCount}`;
|
||||
result += `\n❌ Failing: ${goldenFailingCount}`;
|
||||
|
||||
if (failedGoldenProjects.length > 0) {
|
||||
result += `\n\n🚨 *Failed Golden Projects*\n\`\`\``;
|
||||
result += `\n| Failed project |`;
|
||||
result += `\n|--------------------------------|`;
|
||||
let lastProject: string | undefined;
|
||||
failedGoldenProjects.forEach(matrix => {
|
||||
const project = matrix.project !== lastProject ? matrix.project : '';
|
||||
if (project) {
|
||||
result += `\n| ${project.padEnd(30)} |`;
|
||||
lastProject = matrix.project;
|
||||
}
|
||||
});
|
||||
result += `\n\`\`\``;
|
||||
}
|
||||
|
||||
result += `\n\n🔧 *Other Projects*`;
|
||||
result += `\n✅ Passing: ${otherPassingCount}`;
|
||||
result += `\n❌ Failing: ${otherFailingCount}`;
|
||||
|
||||
// Failed Other Projects Table (if any)
|
||||
if (failedRegularProjects.length > 0) {
|
||||
result += `\n\n⚠️ *Failed Other Projects*\n\`\`\``;
|
||||
result += `\n| Failed project |`;
|
||||
result += `\n|--------------------------------|`;
|
||||
let lastProject: string | undefined;
|
||||
failedRegularProjects.forEach(matrix => {
|
||||
const project = matrix.project !== lastProject ? matrix.project : '';
|
||||
if (project) {
|
||||
result += `\n| ${project.padEnd(30)} |`;
|
||||
lastProject = matrix.project;
|
||||
}
|
||||
});
|
||||
result += `\n\`\`\``;
|
||||
}
|
||||
|
||||
if (failedProjects.length === 0) {
|
||||
result = '🎉 *No test failures detected!* All systems green! 🟢';
|
||||
}
|
||||
|
||||
const timeReport: Record<string, { min: number; max: number; minEnv: string; maxEnv: string }> = {};
|
||||
const pmReport = { npm: 0, yarn: 0, pnpm: 0 };
|
||||
const macosProjects = ['e2e-detox', 'e2e-expo', 'e2e-react-native'];
|
||||
|
||||
combined.forEach(matrix => {
|
||||
const nodeVersion = parseInt(matrix.node_version.toString());
|
||||
if (matrix.os_name === 'Linux' && nodeVersion === 20 && matrix.package_manager in pmReport) {
|
||||
pmReport[matrix.package_manager as keyof typeof pmReport] += matrix.duration;
|
||||
}
|
||||
if (matrix.os_name === 'Linux' || macosProjects.includes(matrix.project)) {
|
||||
if (timeReport[matrix.project]) {
|
||||
if (matrix.duration > timeReport[matrix.project].max) {
|
||||
timeReport[matrix.project].max = matrix.duration;
|
||||
timeReport[matrix.project].maxEnv = `${matrix.os_name}, ${matrix.package_manager}`;
|
||||
}
|
||||
if (matrix.duration < timeReport[matrix.project].min) {
|
||||
timeReport[matrix.project].min = matrix.duration;
|
||||
timeReport[matrix.project].minEnv = `${matrix.os_name}, ${matrix.package_manager}`;
|
||||
}
|
||||
} else {
|
||||
timeReport[matrix.project] = {
|
||||
min: matrix.duration,
|
||||
max: matrix.duration,
|
||||
minEnv: `${matrix.os_name}, ${matrix.package_manager}`,
|
||||
maxEnv: `${matrix.os_name}, ${matrix.package_manager}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let resultPkg = `
|
||||
\`\`\`
|
||||
| Project | Time |
|
||||
|--------------------------------|---------------------------|`;
|
||||
|
||||
function mapProjectTime(proj: string, section: 'min' | 'max'): string {
|
||||
return `${humanizeDuration(timeReport[proj][section])} (${timeReport[proj][`${section}Env`]})`;
|
||||
}
|
||||
|
||||
function durationIcon(proj: string, section: 'min' | 'max'): string {
|
||||
const duration = timeReport[proj][section];
|
||||
if (duration < 12 * 60) return `${section} ✅`;
|
||||
if (duration < 15 * 60) return `${section} ❗`;
|
||||
return `${section} ❌`;
|
||||
}
|
||||
|
||||
Object.keys(timeReport).forEach(proj => {
|
||||
resultPkg += `\n| ${proj.padEnd(30)} | |`;
|
||||
resultPkg += `\n| ${durationIcon(proj, 'min').padStart(29)} | ${mapProjectTime(proj, 'min').padEnd(25)} |`;
|
||||
resultPkg += `\n| ${durationIcon(proj, 'max').padStart(29)} | ${mapProjectTime(proj, 'max').padEnd(25)} |`;
|
||||
});
|
||||
resultPkg += `\`\`\``;
|
||||
|
||||
let resultPm = `
|
||||
\`\`\`
|
||||
| PM | Total time |
|
||||
|------|-------------|`;
|
||||
Object.keys(pmReport).forEach(pm => {
|
||||
resultPm += `\n| ${pm.padEnd(4)} | ${humanizeDuration(pmReport[pm as keyof typeof pmReport]).padEnd(11)} |`;
|
||||
});
|
||||
resultPm += `\`\`\``;
|
||||
|
||||
return {
|
||||
codeowners: Array.from(codeowners).join(','),
|
||||
slack_message: trimSpace(result),
|
||||
slack_proj_duration: trimSpace(resultPkg),
|
||||
slack_pm_duration: trimSpace(resultPm),
|
||||
has_golden_failures: hasGoldenFailures.toString(),
|
||||
};
|
||||
}
|
||||
|
||||
function setOutput(key: string, value: string) {
|
||||
const outputPath = process.env.GITHUB_OUTPUT;
|
||||
if (!outputPath) {
|
||||
console.warn(`GITHUB_OUTPUT not set. Skipping output for "${key}".`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (value.includes('\n')) {
|
||||
const delimiter = `EOF_${key}_${Date.now()}`;
|
||||
fs.appendFileSync(outputPath, `${key}<<${delimiter}\n${value}\n${delimiter}\n`);
|
||||
} else {
|
||||
fs.appendFileSync(outputPath, `${key}=${value}\n`);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const combinedInput = process.argv[2]
|
||||
? process.argv[2]
|
||||
: fs.readFileSync(0, 'utf-8').trim();
|
||||
|
||||
const combined: MatrixResult[] = JSON.parse(combinedInput);
|
||||
const results = processResults(combined);
|
||||
|
||||
Object.entries(results).forEach(([key, value]) => {
|
||||
setOutput(key, value);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error processing results:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
@@ -8,21 +8,25 @@ on:
|
||||
permissions: {}
|
||||
jobs:
|
||||
audit:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
permissions:
|
||||
contents: read # to fetch code (actions/checkout)
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 10.11.1 # Aligned with root package.json (pnpm/action-setup will helpfully error if out of sync)
|
||||
- name: Install PNPM
|
||||
run: |
|
||||
npm install -g @pnpm/exe@8
|
||||
|
||||
- name: Run a security audit
|
||||
run: pnpm dlx audit-ci --critical --report-type summary
|
||||
|
||||
# - name: Run Dependency confusion supply chain check
|
||||
# run: npx snync -d .
|
||||
|
||||
report:
|
||||
if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
|
||||
needs: audit
|
||||
|
||||
+46
-115
@@ -21,8 +21,8 @@ env:
|
||||
DEBUG: napi:*
|
||||
NX_RUN_GROUP: ${{ github.run_id }}-${{ github.run_attempt }}
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
NODE_VERSION: 22.16.0
|
||||
PNPM_VERSION: 10.11.1 # Aligned with root package.json (pnpm/action-setup will helpfully error if out of sync)
|
||||
NODE_VERSION: 18
|
||||
PNPM_VERSION: 8.15.7 # Aligned with root package.json (pnpm/action-setup will helpfully error if out of sync)
|
||||
|
||||
jobs:
|
||||
# We first need to determine the version we are releasing, and if we need a custom repo or ref to use for the git checkout in subsequent steps.
|
||||
@@ -115,7 +115,7 @@ jobs:
|
||||
fi
|
||||
|
||||
build:
|
||||
needs: [ resolve-required-data ]
|
||||
needs: [resolve-required-data]
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
strategy:
|
||||
fail-fast: false
|
||||
@@ -123,13 +123,9 @@ jobs:
|
||||
settings:
|
||||
- host: macos-13
|
||||
target: x86_64-apple-darwin
|
||||
setup: |-
|
||||
rustup target add aarch64-apple-darwin
|
||||
build: |
|
||||
pnpm nx run-many --target=build-native -- --target=x86_64-apple-darwin
|
||||
- host: windows-latest
|
||||
setup: |-
|
||||
rustup target add aarch64-pc-windows-msvc
|
||||
build: pnpm nx run-many --target=build-native -- --target=x86_64-pc-windows-msvc
|
||||
target: x86_64-pc-windows-msvc
|
||||
# Windows 32bit (not needed)
|
||||
@@ -140,54 +136,23 @@ jobs:
|
||||
- host: ubuntu-latest
|
||||
target: x86_64-unknown-linux-gnu
|
||||
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
|
||||
build: |
|
||||
set -e
|
||||
apt-get update
|
||||
|
||||
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
|
||||
apt-get install -y nodejs=22.16.0-1nodesource1
|
||||
|
||||
export PATH="/usr/local/bin:$PATH"
|
||||
node --version
|
||||
npm --version
|
||||
|
||||
npm i -g pnpm@${PNPM_VERSION} --force
|
||||
pnpm --version
|
||||
|
||||
pnpm install --frozen-lockfile
|
||||
rustup target add x86_64-unknown-linux-gnu
|
||||
build: |-
|
||||
set -e &&
|
||||
npm i -g pnpm@8.15.7 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=x86_64-unknown-linux-gnu
|
||||
- host: ubuntu-latest
|
||||
target: x86_64-unknown-linux-musl
|
||||
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
|
||||
build: |
|
||||
bash -c "
|
||||
set -e
|
||||
echo 'https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories
|
||||
apk add --no-cache curl xz
|
||||
|
||||
curl -fsSL https://unofficial-builds.nodejs.org/download/release/v22.16.0/node-v22.16.0-linux-x64-musl.tar.xz -o node.tar.xz
|
||||
tar -xJf node.tar.xz
|
||||
mv node-v22.16.0-linux-x64-musl /usr/local/node
|
||||
|
||||
export PATH=\"/usr/local/node/bin:\$PATH\"
|
||||
|
||||
echo Node: \$(node -v)
|
||||
echo NPM: \$(npm -v)
|
||||
|
||||
# Install PNPM
|
||||
npm i -g pnpm@${PNPM_VERSION} --force
|
||||
pnpm --version
|
||||
|
||||
# Install deps and run native build
|
||||
pnpm install --frozen-lockfile
|
||||
rustup target add x86_64-unknown-linux-musl
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=x86_64-unknown-linux-musl
|
||||
"
|
||||
build: |-
|
||||
set -e &&
|
||||
npm i -g pnpm@8.15.7 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=x86_64-unknown-linux-musl
|
||||
- host: macos-13
|
||||
target: aarch64-apple-darwin
|
||||
setup: |-
|
||||
rustup target add aarch64-apple-darwin
|
||||
build: |
|
||||
sudo rm -Rf /Library/Developer/CommandLineTools/SDKs/*;
|
||||
export CC=$(xcrun -f clang);
|
||||
@@ -198,31 +163,19 @@ jobs:
|
||||
- host: ubuntu-latest
|
||||
target: aarch64-unknown-linux-gnu
|
||||
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
|
||||
build: |
|
||||
set -e
|
||||
apt-get update
|
||||
|
||||
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
|
||||
apt-get install -y nodejs=22.16.0-1nodesource1
|
||||
|
||||
export PATH="/usr/local/bin:$PATH"
|
||||
node --version
|
||||
npm --version
|
||||
|
||||
npm i -g pnpm@${PNPM_VERSION} --force
|
||||
pnpm --version
|
||||
|
||||
pnpm install --frozen-lockfile
|
||||
rustup target add aarch64-unknown-linux-gnu
|
||||
build: |-
|
||||
set -e &&
|
||||
npm i -g pnpm@8.15.7 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=aarch64-unknown-linux-gnu
|
||||
- host: ubuntu-latest
|
||||
target: armv7-unknown-linux-gnueabihf
|
||||
setup: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install gcc-arm-linux-gnueabihf -y
|
||||
rustup target add armv7-unknown-linux-gnueabihf
|
||||
build: |
|
||||
CARGO_TARGET_ARMV7_UNKNOWN_LINUX_GNUEABIHF_LINKER=/usr/bin/arm-linux-gnueabihf-gcc pnpm nx run-many --target=build-native -- --target=armv7-unknown-linux-gnueabihf
|
||||
pnpm nx run-many --target=build-native -- --target=armv7-unknown-linux-gnueabihf
|
||||
# Android (not needed)
|
||||
# - host: ubuntu-latest
|
||||
# target: aarch64-linux-android
|
||||
@@ -235,41 +188,22 @@ jobs:
|
||||
- host: ubuntu-latest
|
||||
target: aarch64-unknown-linux-musl
|
||||
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
|
||||
build: |
|
||||
bash -c "
|
||||
set -e
|
||||
echo 'https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories
|
||||
apk add --no-cache curl xz
|
||||
|
||||
curl -fsSL https://unofficial-builds.nodejs.org/download/release/v22.16.0/node-v22.16.0-linux-x64-musl.tar.xz -o node.tar.xz
|
||||
tar -xJf node.tar.xz
|
||||
mv node-v22.16.0-linux-x64-musl /usr/local/node
|
||||
|
||||
export PATH=\"/usr/local/node/bin:\$PATH\"
|
||||
|
||||
echo Node: \$(node -v)
|
||||
echo NPM: \$(npm -v)
|
||||
|
||||
# Install PNPM
|
||||
npm i -g pnpm@${PNPM_VERSION} --force
|
||||
pnpm --version
|
||||
|
||||
# Install deps and run native build
|
||||
pnpm install --frozen-lockfile
|
||||
rustup target add aarch64-unknown-linux-musl
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=aarch64-unknown-linux-musl
|
||||
"
|
||||
build: |-
|
||||
set -e &&
|
||||
rustup target add aarch64-unknown-linux-musl &&
|
||||
npm i -g pnpm@8.15.7 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=aarch64-unknown-linux-musl
|
||||
- host: windows-latest
|
||||
target: aarch64-pc-windows-msvc
|
||||
setup: |-
|
||||
rustup target add aarch64-pc-windows-msvc
|
||||
build: pnpm nx run-many --target=build-native -- --target=aarch64-pc-windows-msvc
|
||||
name: stable - ${{ matrix.settings.target }} - node@22.16.0
|
||||
name: stable - ${{ matrix.settings.target }} - node@18
|
||||
runs-on: ${{ matrix.settings.host }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
repository: ${{ needs.resolve-required-data.outputs.repo }}
|
||||
repository: ${{ needs.resolve-required-data.outputs.repo }}
|
||||
ref: ${{ needs.resolve-required-data.outputs.ref }}
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
@@ -347,43 +281,42 @@ jobs:
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: bindings-${{ matrix.settings.target }}
|
||||
path: |
|
||||
packages/**/*.node
|
||||
packages/**/*.wasm
|
||||
path: packages/**/*.node
|
||||
if-no-files-found: error
|
||||
|
||||
build-freebsd:
|
||||
needs: [ resolve-required-data ]
|
||||
needs: [resolve-required-data]
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
runs-on: ubuntu-latest
|
||||
runs-on: macos-13-large
|
||||
name: Build FreeBSD
|
||||
timeout-minutes: 45
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
if: ${{ github.event_name != 'schedule' && !github.event.inputs.pr }}
|
||||
with:
|
||||
repository: ${{ needs.resolve-required-data.outputs.repo }}
|
||||
repository: ${{ needs.resolve-required-data.outputs.repo }}
|
||||
ref: ${{ needs.resolve-required-data.outputs.ref }}
|
||||
|
||||
- name: Build
|
||||
id: build
|
||||
uses: cross-platform-actions/action@v0.25.0
|
||||
if: ${{ github.event_name != 'schedule' && !github.event.inputs.pr }}
|
||||
uses: cross-platform-actions/action@v0.22.0
|
||||
env:
|
||||
DEBUG: napi:*
|
||||
RUSTUP_IO_THREADS: 1
|
||||
NX_PREFER_TS_NODE: true
|
||||
PLAYWRIGHT_BROWSERS_PATH: 0
|
||||
NODE_VERSION: 22.16.0
|
||||
with:
|
||||
operating_system: freebsd
|
||||
version: '14.0'
|
||||
version: '13.2'
|
||||
architecture: x86-64
|
||||
environment_variables: DEBUG RUSTUP_IO_THREADS CI NX_PREFER_TS_NODE PLAYWRIGHT_BROWSERS_PATH NODE_VERSION
|
||||
environment_variables: DEBUG RUSTUP_IO_THREADS CI NX_PREFER_TS_NODE PLAYWRIGHT_BROWSERS_PATH
|
||||
shell: bash
|
||||
run: |
|
||||
env
|
||||
whoami
|
||||
sudo pkg install -y -f node libnghttp2 www/npm git
|
||||
sudo npm install --location=global --ignore-scripts pnpm@10.11.1
|
||||
sudo pkg install -y -f node libnghttp2 npm git
|
||||
sudo npm install --location=global --ignore-scripts pnpm@8.15.7
|
||||
curl https://sh.rustup.rs -sSf --output rustup.sh
|
||||
sh rustup.sh -y --profile minimal --default-toolchain stable
|
||||
source "$HOME/.cargo/env"
|
||||
@@ -398,6 +331,8 @@ jobs:
|
||||
whoami
|
||||
env
|
||||
freebsd-version
|
||||
mkdir -p /Users/runner/work/_temp/_github_workflow
|
||||
echo "{}" > /Users/runner/work/_temp/_github_workflow/event.json
|
||||
pnpm install --frozen-lockfile --ignore-scripts
|
||||
pnpm nx run-many --verbose --outputStyle stream --target=build-native -- --target=x86_64-unknown-freebsd
|
||||
pnpm nx reset
|
||||
@@ -408,6 +343,7 @@ jobs:
|
||||
echo "COMPLETE"
|
||||
|
||||
- name: Upload artifact
|
||||
if: ${{ github.event_name != 'schedule' && !github.event.inputs.pr }}
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: bindings-freebsd
|
||||
@@ -460,17 +396,12 @@ jobs:
|
||||
- name: List artifacts
|
||||
run: ls -R artifacts
|
||||
shell: bash
|
||||
- name: Build Wasm
|
||||
run: |
|
||||
wget https://github.com/WebAssembly/wasi-sdk/releases/download/wasi-sdk-23/wasi-sdk-23.0-x86_64-linux.tar.gz
|
||||
tar -xvf wasi-sdk-23.0-x86_64-linux.tar.gz
|
||||
pnpm build:wasm
|
||||
|
||||
- name: Publish
|
||||
env:
|
||||
VERSION: ${{ needs.resolve-required-data.outputs.version }}
|
||||
DRY_RUN: ${{ needs.resolve-required-data.outputs.dry_run_flag }}
|
||||
PUBLISH_BRANCH: ${{ needs.resolve-required-data.outputs.publish_branch }}
|
||||
NX_VERBOSE_LOGGING: true
|
||||
run: |
|
||||
echo ""
|
||||
# Create and check out the publish branch
|
||||
@@ -484,7 +415,7 @@ jobs:
|
||||
- name: (Stable Release Only) Trigger Docs Release
|
||||
# Publish docs only on a full release
|
||||
if: ${{ !github.event.release.prerelease && github.event_name == 'release' }}
|
||||
run: npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/release-docs.ts
|
||||
run: npx ts-node ./scripts/release-docs.ts
|
||||
|
||||
- name: (PR Release Only) Create comment for successful PR release
|
||||
if: success() && github.event.inputs.pr
|
||||
@@ -505,7 +436,7 @@ jobs:
|
||||
pr_failure_comment:
|
||||
# Run this job if it is a PR release, running on the nrwl origin, and any of the required jobs failed
|
||||
if: ${{ github.repository_owner == 'nrwl' && github.event.inputs.pr && always() && contains(needs.*.result, 'failure') }}
|
||||
needs: [ resolve-required-data, build, build-freebsd, publish ]
|
||||
needs: [resolve-required-data, build, build-freebsd, publish]
|
||||
name: (PR Release Failure Only) Create comment for failed PR release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
+3
-54
@@ -21,9 +21,7 @@ jest.debug.config.js
|
||||
/graph/client/src/assets/generated-task-inputs
|
||||
/graph/client/src/assets/generated-source-maps
|
||||
/nx-dev/nx-dev/public/documentation
|
||||
/nx-dev/nx-dev/public/tutorials
|
||||
/nx-dev/nx-dev/public/images/open-graph
|
||||
**/tests/temp-db
|
||||
|
||||
# Issues scraper creates these files, stored by github's cache
|
||||
/scripts/issues-scraper/cached
|
||||
@@ -38,19 +36,17 @@ out
|
||||
# Angular Cache
|
||||
.angular
|
||||
|
||||
# Astro Cache
|
||||
.astro
|
||||
|
||||
# Local dev files
|
||||
.env.local
|
||||
.bashrc
|
||||
.nx
|
||||
|
||||
*.node
|
||||
|
||||
# Fix for issue when working on the repo in a dev container
|
||||
.pnpm-store
|
||||
.nx
|
||||
!.nx/workflows
|
||||
.nx/cache
|
||||
.nx/workspace-data
|
||||
|
||||
.cargo/.package-cache
|
||||
.cargo/bin/
|
||||
@@ -60,50 +56,3 @@ out
|
||||
.npm/
|
||||
.profile
|
||||
.rustup/
|
||||
target
|
||||
*.wasm
|
||||
/wasi-sdk*
|
||||
|
||||
vite.config.*.timestamp*
|
||||
|
||||
storybook-static
|
||||
|
||||
# Ignore Gradle project-specific cache directory
|
||||
.gradle
|
||||
.kotlin
|
||||
|
||||
.claude/settings.local.json
|
||||
|
||||
.cursor/rules/nx-rules.mdc
|
||||
.cursor/mcp.json
|
||||
.github/instructions/nx.instructions.md
|
||||
|
||||
# Added by Claude Task Master
|
||||
# Logs
|
||||
logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
dev-debug.log
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
# Environment variables
|
||||
.env
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.specstory/**
|
||||
.cursorindexingignore
|
||||
# OS specific
|
||||
# Task files
|
||||
tasks.json
|
||||
tasks/
|
||||
|
||||
# Upstream docs local configuration (machine-specific)
|
||||
.upstreamdocs.local.json
|
||||
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
#!/bin/sh
|
||||
changedFiles="$(git diff-tree -r --name-only --no-commit-id $1 $2)"
|
||||
node ./scripts/notify-lockfile-changes.js $changedFiles
|
||||
node ./scripts/notify-lockfile-changes.js $changedFiles
|
||||
+2
-1
@@ -1,2 +1,3 @@
|
||||
#!/bin/sh
|
||||
changedFiles="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
|
||||
node ./scripts/notify-lockfile-changes.js $changedFiles
|
||||
node ./scripts/notify-lockfile-changes.js $changedFiles
|
||||
+6
-1
@@ -1 +1,6 @@
|
||||
pnpm nx prepush --parallel 8 --tuiAutoExit 0
|
||||
#!/usr/bin/env sh
|
||||
|
||||
pnpm check-lock-files &&
|
||||
pnpm check-commit &&
|
||||
pnpm documentation &&
|
||||
pnpm pretty-quick --check
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"nx": {
|
||||
"command": "pnpm",
|
||||
"args": ["nx-mcp"],
|
||||
"env": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
+17
-110
@@ -1,55 +1,43 @@
|
||||
launch-templates:
|
||||
linux-medium:
|
||||
resource-class: 'docker_linux_amd64/medium+'
|
||||
image: 'us-east1-docker.pkg.dev/nxcloudoperations/nx-cloud/nx-agents-base-images:ubuntu22.04-node20.19-v1'
|
||||
image: 'ubuntu22.04-node20.11-v3'
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
SELECTED_PM: 'pnpm'
|
||||
|
||||
NX_NATIVE_LOGGING: 'nx::native::db'
|
||||
NPM_CONFIG_PREFIX: '/home/workflows/.npm-global'
|
||||
init-steps:
|
||||
- name: Checkout
|
||||
uses: 'nrwl/nx-cloud-workflows/v5/workflow-steps/checkout/main.yaml'
|
||||
|
||||
- name: Check Node Version
|
||||
script: node --version
|
||||
|
||||
uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/checkout/main.yaml'
|
||||
- name: Cache restore
|
||||
uses: 'nrwl/nx-cloud-workflows/v5/workflow-steps/cache/main.yaml'
|
||||
inputs:
|
||||
key: 'pnpm-lock.yaml'
|
||||
paths: .pnpm-store
|
||||
base-branch: 'master'
|
||||
|
||||
- name: Install zip and unzip
|
||||
script: sudo apt-get -yqq install zip unzip
|
||||
|
||||
- name: Install bun
|
||||
script: |
|
||||
curl -fsSL https://bun.sh/install | bash
|
||||
echo "BUN_INSTALL=$HOME/.bun" >> $NX_CLOUD_ENV
|
||||
echo "PATH=$HOME/.bun/bin:$PATH" >> $NX_CLOUD_ENV
|
||||
|
||||
- name: Check bun
|
||||
script: |
|
||||
bun --version
|
||||
|
||||
uses: 'nrwl/nx-cloud-workflows/v3.6/workflow-steps/cache/main.yaml'
|
||||
env:
|
||||
KEY: 'pnpm-lock.yaml'
|
||||
PATHS: |
|
||||
node_modules
|
||||
~/.cache/Cypress
|
||||
~/.cache/ms-playwright
|
||||
~/.pnpm-store
|
||||
BASE_BRANCH: 'master'
|
||||
- name: Install e2e deps
|
||||
script: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates lsof libvips-dev libglib2.0-dev libgirepository1.0-dev
|
||||
- name: Install Pnpm
|
||||
script: |
|
||||
npm install -g pnpm@8
|
||||
|
||||
- name: Pnpm Install from lockfile
|
||||
- name: Pnpm Install
|
||||
script: |
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
- name: Install Browsers
|
||||
script: |
|
||||
pnpm exec cypress install
|
||||
pnpm exec playwright install --with-deps
|
||||
pnpm exec playwright install
|
||||
|
||||
- name: Install Rust
|
||||
script: |
|
||||
@@ -65,86 +53,5 @@ launch-templates:
|
||||
- name: Load Cargo Env
|
||||
script: echo "PATH=$HOME/.cargo/bin:$PATH" >> $NX_CLOUD_ENV
|
||||
|
||||
- name: Setup Java 17
|
||||
script: |
|
||||
sudo apt update
|
||||
sudo apt install -y openjdk-17-jdk
|
||||
sudo update-alternatives --set java /usr/lib/jvm/java-17-openjdk-amd64/bin/java
|
||||
java -version
|
||||
|
||||
- name: Setup Gradle
|
||||
script: |
|
||||
./gradlew wrapper
|
||||
./gradlew --version
|
||||
|
||||
linux-extra-large:
|
||||
resource-class: 'docker_linux_amd64/extra_large'
|
||||
image: 'us-east1-docker.pkg.dev/nxcloudoperations/nx-cloud/nx-agents-base-images:ubuntu22.04-node20.19-v1'
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
SELECTED_PM: 'pnpm'
|
||||
NX_NATIVE_LOGGING: 'nx::native::db'
|
||||
init-steps:
|
||||
- name: Checkout
|
||||
uses: 'nrwl/nx-cloud-workflows/v5/workflow-steps/checkout/main.yaml'
|
||||
|
||||
- name: Check Node Version
|
||||
script: node --version
|
||||
|
||||
- name: Cache restore
|
||||
uses: 'nrwl/nx-cloud-workflows/v5/workflow-steps/cache/main.yaml'
|
||||
inputs:
|
||||
key: 'pnpm-lock.yaml'
|
||||
paths: .pnpm-store
|
||||
base-branch: 'master'
|
||||
|
||||
- name: Install zip and unzip
|
||||
script: sudo apt-get -yqq install zip unzip
|
||||
|
||||
- name: Install bun
|
||||
script: |
|
||||
curl -fsSL https://bun.sh/install | bash
|
||||
echo "BUN_INSTALL=$HOME/.bun" >> $NX_CLOUD_ENV
|
||||
echo "PATH=$HOME/.bun/bin:$PATH" >> $NX_CLOUD_ENV
|
||||
|
||||
- name: Check bun
|
||||
script: |
|
||||
bun --version
|
||||
|
||||
- name: Install e2e deps
|
||||
script: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates lsof libvips-dev libglib2.0-dev libgirepository1.0-dev
|
||||
|
||||
- name: Pnpm Install from lockfile
|
||||
script: |
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
- name: Install Browsers
|
||||
script: |
|
||||
pnpm exec cypress install
|
||||
pnpm exec playwright install --with-deps
|
||||
|
||||
- name: Install Rust
|
||||
script: |
|
||||
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh -s -- -y
|
||||
source "$HOME/.cargo/env"
|
||||
rustup toolchain install 1.70.0
|
||||
|
||||
- name: Configure git metadata (needed for lerna smoke tests)
|
||||
script: |
|
||||
git config --global user.email test@test.com
|
||||
git config --global user.name "Test Test"
|
||||
|
||||
- name: Load Cargo Env
|
||||
script: echo "PATH=$HOME/.cargo/bin:$PATH" >> $NX_CLOUD_ENV
|
||||
|
||||
- name: Setup Java 21
|
||||
script: |
|
||||
sudo apt update
|
||||
sudo apt install -y openjdk-21-jdk
|
||||
sudo update-alternatives --set java /usr/lib/jvm/java-21-openjdk-amd64/bin/java
|
||||
java -version
|
||||
|
||||
@@ -1,32 +1,4 @@
|
||||
distribute-on:
|
||||
default: auto linux-medium, 1 linux-extra-large
|
||||
assignment-rules:
|
||||
- targets:
|
||||
- e2e-ci**
|
||||
run-on:
|
||||
- agent: linux-medium
|
||||
parallelism: 1
|
||||
- agent: linux-extra-large
|
||||
parallelism: 1
|
||||
|
||||
- projects:
|
||||
- nx-dev
|
||||
targets:
|
||||
- build*
|
||||
run-on:
|
||||
- agent: linux-extra-large
|
||||
parallelism: 1
|
||||
|
||||
- targets:
|
||||
- lint
|
||||
run-on:
|
||||
- agent: linux-medium
|
||||
parallelism: 6
|
||||
|
||||
- targets:
|
||||
- '*'
|
||||
run-on:
|
||||
- agent: linux-medium
|
||||
parallelism: 3
|
||||
- agent: linux-extra-large
|
||||
parallelism: 3
|
||||
small-changeset: 8 linux-medium
|
||||
medium-changeset: 10 linux-medium
|
||||
large-changeset: 12 linux-medium
|
||||
|
||||
@@ -1,5 +1,2 @@
|
||||
nx-dev/**/jest.config.js
|
||||
.next
|
||||
_files
|
||||
_solution
|
||||
nx-dev/tutorial/**/templates
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
# Enable pre/post-install which are disabled by default. Installing peer deps which is also disabled by default
|
||||
auto-install-peers=true
|
||||
enable-pre-post-scripts=true
|
||||
|
||||
# Enable lifecycle scripts for specific packages that require them (like post-install)
|
||||
enable-scripts=@napi-rs/canvas,sharp,@swc/core,@swc/cli,@swc-node/register,esbuild
|
||||
|
||||
# Compatibility
|
||||
strict-peer-dependencies=false
|
||||
lockfile-version-strict=false
|
||||
|
||||
# Consistency across environments
|
||||
use-node-version=20.19.0
|
||||
+1
-13
@@ -13,16 +13,10 @@ packages/express/src/schematics/**/files/**/*.json
|
||||
packages/nest/src/schematics/**/files/**/*.json
|
||||
packages/react/src/schematics/**/files/**/*.json
|
||||
packages/jest/src/schematics/**/files/**/*.json
|
||||
packages/gradle/project-graph/build/**/*.*
|
||||
packages/nx/src/plugins/js/lock-file/__fixtures__/**/*.*
|
||||
packages/**/schematics/**/files/**/*.html
|
||||
packages/**/generators/**/files/**/*.html
|
||||
packages/nx/src/native/**/*.rs
|
||||
packages/nx/src/native/browser.js
|
||||
packages/nx/src/native/nx.wasi-browser.js
|
||||
packages/nx/src/native/nx.wasi.cjs
|
||||
packages/nx/src/native/wasi-worker-browser.mjs
|
||||
packages/nx/src/native/wasi-worker.mjs
|
||||
packages/nx/src/native/native-bindings.js
|
||||
packages/nx/src/native/index.d.ts
|
||||
nx-dev/nx-dev/.next/
|
||||
@@ -47,10 +41,4 @@ CODEOWNERS
|
||||
|
||||
.pnpm-store
|
||||
|
||||
/.nx/workspace-data
|
||||
/.nx/workflows/dynamic-changesets.yaml
|
||||
_files
|
||||
_solution
|
||||
|
||||
# this file uses TS import attributes which the current prettier version does not support
|
||||
tools/documentation/create-embeddings/src/main.mts
|
||||
/.nx/workspace-data
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"include": ["apps/**/*", "libs/**/*", "packages/**/*"],
|
||||
"exclude": [
|
||||
"**/*.spec.*",
|
||||
"**/test/**/*",
|
||||
"**/__tests__/**/*",
|
||||
"**/*.test.*",
|
||||
"node_modules/**/*"
|
||||
]
|
||||
}
|
||||
@@ -5,8 +5,6 @@ auth:
|
||||
htpasswd:
|
||||
file: ./htpasswd
|
||||
|
||||
max_body_size: 20mb
|
||||
|
||||
# a list of other known repositories we can talk to
|
||||
uplinks:
|
||||
npmjs:
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
When responding to queries about this repository:
|
||||
|
||||
1. Use the `nx_workspace` mcp tool for understanding the workspace architecture when appropriate
|
||||
2. When working in projects, use the `nx_project` mcp tool to analyze and understand the specific project structure and
|
||||
dependencies
|
||||
3. Suggest relevant commands from the "Essential Commands" section when applicable
|
||||
4. Highlight Nx's focus on monorepos and its key features like smart task execution, code generation, and project graph
|
||||
analysis
|
||||
5. Mention the plugin ecosystem and support for various frameworks when relevant
|
||||
6. Emphasize the importance of running the full validation suite before committing changes
|
||||
|
||||
Always strive to provide accurate, helpful responses that align with the best practices and workflows described in this
|
||||
file.
|
||||
|
||||
## GitHub Issue Response Mode
|
||||
|
||||
When responding to GitHub issues, determine your approach based on how the request is phrased:
|
||||
|
||||
### Plan-First Mode (Default)
|
||||
|
||||
Use this approach when users ask you to:
|
||||
|
||||
- "analyze", "investigate", "assess", "review", "examine", or "plan"
|
||||
- Or when the request is ambiguous
|
||||
|
||||
In this mode:
|
||||
|
||||
1. Provide a detailed analysis of the issue
|
||||
2. Create a comprehensive implementation plan
|
||||
3. Break down the solution into clear steps
|
||||
4. Then please post the plan as a comment on the issue
|
||||
|
||||
### Immediate Implementation Mode
|
||||
|
||||
Use this approach when users ask you to:
|
||||
|
||||
- "fix", "implement", "solve", "build", "create", "update", or "add"
|
||||
- Or when they explicitly request immediate action
|
||||
|
||||
In this mode:
|
||||
|
||||
1. Analyze the issue quickly
|
||||
2. Implement the complete solution immediately
|
||||
3. Make all necessary code changes. Please make multiple commits so that the changes are easier to review.
|
||||
4. Run appropriate tests and validation
|
||||
5. If the tests, are not passing, please fix the issues and continue doing this up to 3 more times until the tests pass
|
||||
6. Once the tests pass, push a branch and then suggest opening a PR which has a description of the changes made, and
|
||||
that
|
||||
it make sure that it explicitly says "Fixes #ISSUE_NUMBER" to automatically close the issue when the PR is merged.
|
||||
|
||||
## Avoid making changes to generated files
|
||||
|
||||
Files under `generated` directories are generated based on a different source file and should not be modified directly.
|
||||
Find the underlying source and modify that instead.
|
||||
|
||||
## Essential Commands
|
||||
|
||||
### Code Formatting
|
||||
|
||||
After code changes are made, please make sure to format the files with prettier via `npx prettier -- FILE_NAME`
|
||||
|
||||
### Pre-push Validation
|
||||
|
||||
```bash
|
||||
# Full validation suite - run before committing
|
||||
nx prepush
|
||||
```
|
||||
|
||||
If the prepush validation suite fails, please fix the issues before proceeding with your work. This ensures that all
|
||||
code adheres to the project's standards and passes all tests. DO NOT make a new commit to fix these issues. Instead,
|
||||
amend the current commit.
|
||||
|
||||
### Testing Changes
|
||||
|
||||
After code changes are made, first test the specific project where the changes were made:
|
||||
|
||||
```bash
|
||||
nx run-many -t test,build,lint -p PROJECT_NAME
|
||||
```
|
||||
|
||||
After verifying the individual project, validate that the changes in projects which have been affected:
|
||||
|
||||
```bash
|
||||
# Test only affected projects (recommended for development)
|
||||
nx affected -t build,test,lint
|
||||
```
|
||||
|
||||
As the last step, run the e2e tests to fully ensure that changes are valid:
|
||||
|
||||
```bash
|
||||
# Run affected e2e tests (recommended for development)
|
||||
nx affected -t e2e-local
|
||||
```
|
||||
|
||||
## Fixing GitHub Issues
|
||||
|
||||
When working on a GitHub issue, follow this systematic approach:
|
||||
|
||||
### 1. Get Issue Details
|
||||
|
||||
```bash
|
||||
# Get issue details using GitHub CLI (replace ISSUE_NUMBER with actual number)
|
||||
gh issue view ISSUE_NUMBER
|
||||
|
||||
# View multiple issues efficiently in one command
|
||||
gh issue list --limit 50 --json number,title,state,labels,assignees,updatedAt,body --jq '.[] | select(.number == 123 or .number == 456 or .number == 789)'
|
||||
|
||||
# Or filter by specific criteria to get multiple related issues
|
||||
gh issue list --label "bug" --state "open" --json number,title,body,labels --jq '.[]'
|
||||
gh issue list --assignee "@me" --json number,title,body,state --jq '.[]'
|
||||
```
|
||||
|
||||
**Tip**: Instead of running `gh issue view` multiple times, use `gh issue list` with JSON output and filtering to gather
|
||||
information about multiple issues in a single command. This is much more efficient than viewing issues one at a time.
|
||||
|
||||
**Always provide clickable links**: When discussing GitHub issues or PRs, always include the full GitHub URL so the user
|
||||
can easily open them in their browser. For example:
|
||||
|
||||
- Issue #12345: https://github.com/nrwl/nx/issues/12345
|
||||
- PR #67890: https://github.com/nrwl/nx/pull/67890
|
||||
|
||||
When cloning reproduction repos, please clone within `./tmp/claude/repro-ISSUE_NUMBER`
|
||||
|
||||
### 2. Analyze the Plan
|
||||
|
||||
- Look for a plan or implementation details in the issue description
|
||||
- Check comments for additional context or clarification
|
||||
- Identify affected projects and components
|
||||
|
||||
### 3. Implement the Solution
|
||||
|
||||
- Follow the plan outlined in the issue
|
||||
- Make focused changes that address the specific problem
|
||||
- Ensure code follows existing patterns and conventions
|
||||
|
||||
### 4. Run Full Validation
|
||||
|
||||
Use the testing workflow from the "Essential Commands" section.
|
||||
|
||||
### 5. Submit Pull Request
|
||||
|
||||
- Create a descriptive PR title that references the issue
|
||||
- **Always fill in the PR template** - don't leave it empty
|
||||
- Include "Fixes #ISSUE_NUMBER" in the PR description
|
||||
- Provide a clear summary of changes made
|
||||
- Request appropriate reviewers
|
||||
|
||||
## Pull Request Template
|
||||
|
||||
**IMPORTANT**: When creating a pull request, you MUST fill in the template found in `.github/PULL_REQUEST_TEMPLATE.md`.
|
||||
Do not leave the template sections empty. The template includes:
|
||||
|
||||
### Required Sections
|
||||
|
||||
1. **Current Behavior**: Describe the behavior we have today
|
||||
2. **Expected Behavior**: Describe the behavior we should expect with the changes in this PR
|
||||
3. **Related Issue(s)**: Link the issue being fixed so it gets closed when the PR is merged
|
||||
|
||||
### Template Format
|
||||
|
||||
```markdown
|
||||
## Current Behavior
|
||||
|
||||
<!-- This is the behavior we have today -->
|
||||
|
||||
## Expected Behavior
|
||||
|
||||
<!-- This is the behavior we should expect with the changes in this PR -->
|
||||
|
||||
## Related Issue(s)
|
||||
|
||||
<!-- Please link the issue being fixed so it gets closed when this is merged. -->
|
||||
|
||||
Fixes #ISSUE_NUMBER
|
||||
```
|
||||
|
||||
### Guidelines
|
||||
|
||||
- Ensure your commit message follows the conventional commit format (use `pnpm commit`)
|
||||
- Use `fix:`, `feat:`, `chore:`, etc. as appropriate types.
|
||||
- Scope is **required** for all commits. Possible scopes are listed in `scripts/commitizen.js`.
|
||||
- Read the submission guidelines in CONTRIBUTING.md before posting
|
||||
- For complex changes, you can request a dedicated Nx release by mentioning the Nx team
|
||||
- Always link the related issue using "Fixes #ISSUE_NUMBER" to automatically close it when merged
|
||||
+6
-18
@@ -6,11 +6,11 @@
|
||||
/tools/**/* @FrozenPandaz @vsavkin @AgentEnder @jaysoo @JamesHenry
|
||||
package.json @nrwl/nx-core-reviewers
|
||||
pnpm-lock.yaml @nrwl/nx-core-reviewers
|
||||
rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
rust-toolchain @nrwl/nx-native-reviewers
|
||||
|
||||
# Docs Site + Graph
|
||||
/docs @nrwl/nx-docs-reviewers
|
||||
/docs/nx-cloud @StalkAltan @rarmatei @nixallover @nrwl/nx-docs-reviewers
|
||||
/docs/nx-cloud @StalkAltan @rarmatei @nrwl/nx-docs-reviewers
|
||||
/graph/** @philipjfulcher @FrozenPandaz @bcabanes @MaxKless @xiongemi
|
||||
/images @nrwl/nx-docs-reviewers
|
||||
/nx-dev/** @nrwl/nx-docs-reviewers
|
||||
@@ -79,14 +79,12 @@ rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
/docs/generated/packages/js/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/web/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/webpack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/rspack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/esbuild/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/rollup/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/generated/packages/vite/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/js/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/web/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/webpack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/rspack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/esbuild/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/vite/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
|
||||
/packages/js/** @nrwl/nx-js-reviewers
|
||||
@@ -94,10 +92,8 @@ rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
/packages/web/** @nrwl/nx-js-reviewers
|
||||
/e2e/web/** @nrwl/nx-js-reviewers
|
||||
/packages/webpack/** @nrwl/nx-js-reviewers
|
||||
/packages/webpack/src/utils/module-federation @jaysoo @Coly010
|
||||
/e2e/webpack/** @nrwl/nx-js-reviewers
|
||||
/packages/rspack/** @nrwl/nx-js-reviewers
|
||||
/e2e/rspack/** @nrwl/nx-js-reviewers
|
||||
/packages/rsbuild/** @nrwl/nx-js-reviewers
|
||||
/packages/esbuild/** @nrwl/nx-js-reviewers
|
||||
/e2e/esbuild/** @nrwl/nx-js-reviewers
|
||||
/packages/rollup/** @nrwl/nx-js-reviewers
|
||||
@@ -105,9 +101,6 @@ rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
/packages/vite/** @nrwl/nx-js-reviewers
|
||||
/e2e/vite/** @nrwl/nx-js-reviewers
|
||||
|
||||
## Module Federation
|
||||
/packages/module-federation/** @nrwl/nx-js-reviewers
|
||||
|
||||
## Tools
|
||||
/docs/generated/packages/cypress/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
|
||||
/docs/shared/packages/cypress/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
|
||||
@@ -145,8 +138,8 @@ rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
/packages/devkit/public-api.ts @FrozenPandaz @vsavkin
|
||||
|
||||
# Gradle
|
||||
/packages/gradle/** @FrozenPandaz @MaxKless @xiongemi
|
||||
/e2e/gradle/** @FrozenPandaz @MaxKless @xiongemi
|
||||
/packages/gradle/** @FrozenPandaz @xiongemi
|
||||
/e2e/gradle/** @FrozenPandaz @xiongemi
|
||||
|
||||
# Nx-Plugin
|
||||
/docs/generated/packages/plugin/** @nrwl/nx-devkit-reviewers @nrwl/nx-docs-reviewers
|
||||
@@ -179,23 +172,18 @@ rust-toolchain.toml @nrwl/nx-native-reviewers
|
||||
/CONTRIBUTING.md @FrozenPandaz @isaacplmann
|
||||
/CODE_OF_CONDUCT.md @FrozenPandaz @isaacplmann
|
||||
/CODEOWNERS @FrozenPandaz @AgentEnder
|
||||
/packages/nx/src/nx-cloud/utilities/url-shorten.ts @MaxKless
|
||||
|
||||
# Scripts
|
||||
/scripts/documentation @nrwl/nx-docs-reviewers
|
||||
/scripts/angular-support-upgrades @nrwl/nx-angular-reviewers
|
||||
|
||||
# CI
|
||||
/.circleci/** @nrwl/nx-pipelines-reviewers
|
||||
/.nx/workflows/** @nrwl/nx-pipelines-reviewers
|
||||
/.github/** @nrwl/nx-pipelines-reviewers
|
||||
/.husky/** @nrwl/nx-pipelines-reviewers
|
||||
/packages/workspace/src/generators/ci-workflow/** @nrwl/nx-pipelines-reviewers
|
||||
|
||||
# Claude AI Integration
|
||||
CLAUDE.md @FrozenPandaz
|
||||
.claude/** @FrozenPandaz
|
||||
.mcp.json @FrozenPandaz
|
||||
|
||||
# Global Files
|
||||
project.json @FrozenPandaz @vsavkin
|
||||
jest.config.ts @nrwl/nx-testing-tools-reviewers @FrozenPandaz
|
||||
|
||||
+7
-87
@@ -27,25 +27,14 @@ can [submit a Pull Request](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.
|
||||
|
||||
Source code and documentation are included in the top-level folders listed below.
|
||||
|
||||
- `packages` - Source code for Nx packages such as Angular, React, Web, NestJS, Next and others including generators and
|
||||
executors (or builders).
|
||||
- `e2e` - E2E tests for the Nx packages
|
||||
- `graph` - Source code for the Nx Graph application which shows the project graph, task graph, project details, and more in the browser.
|
||||
- `docs` - Markdown and configuration files for documentation including tutorials, guides for each supported platform,
|
||||
and API docs.
|
||||
- `nx-dev` - Source code for the Nx documentation site which displays the markdown in `docs` and more.
|
||||
- `tools` - Workspace-specific tooling and plugins
|
||||
- `e2e` - E2E tests.
|
||||
- `packages` - Source code for Nx packages such as Angular, React, Web, NestJS, Next and others including generators and
|
||||
executors (or builders).
|
||||
- `scripts` - Miscellaneous scripts for project tasks such as building documentation, testing, and code formatting.
|
||||
- `tmp` - Folder used by e2e tests. If you are a WebStorm user, make sure to mark this folder as excluded.
|
||||
|
||||
## Technologies
|
||||
|
||||
This repo contains a mix of different technologies, including:
|
||||
|
||||
- **Rust**: The core of Nx is written in Rust, which provides performance and safety.
|
||||
- **TypeScript**: The primary language for Nx packages and the Nx DevKit.
|
||||
- **Kotlin**: Used for the Gradle and Java plugins.
|
||||
|
||||
## Development Workstation Setup
|
||||
|
||||
If you are using `VSCode`, and provided you have [Docker](https://docker.com) installed on your machine, then you can leverage [Dev Containers](https://containers.dev) through this [VSCode extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers), to easily setup your development environment, with everything needed to contribute to Nx, already installed (namely `NodeJS`, `Yarn`, `Rust`, `Cargo`, plus some useful extensions like `Nx Console`).
|
||||
@@ -60,33 +49,15 @@ The repo comes with a preconfigured `devcontainer.json` file (located in `.devco
|
||||
|
||||
If you open the repo in [Github Codespace](https://github.com/features/codespaces), it will also leverage this config file, to setup the codespace, with the same required tools.
|
||||
|
||||
> 💡 **Troubleshooting**
|
||||
>
|
||||
> If you are having issues when running Nx commands like `build`, `test`... related to the version of `GLIBC`,
|
||||
> it probably means the version that is installed on the devcontainer, **is outdated** compare to the minimum version required by Nx tools.
|
||||
>
|
||||
> You can check currently installed version by running the following command, in a terminal within the container:
|
||||
>
|
||||
> `ldd --version`
|
||||
>
|
||||
> Then, try updating the base image used in [devcontainer.json](.devcontainer/devcontainer.json) and rebuild it, to see if it solved the issue.
|
||||
>
|
||||
> Current base image is `"mcr.microsoft.com/devcontainers/typescript-node:20-bookworm"` which is based on `Debian-12 (bookworm)`,
|
||||
> which comes with `GLIBC v2.36` pre-installed (Nx tools currenlty requires `GLIBC v2.33` or higher).
|
||||
|
||||
## Building the Project
|
||||
|
||||
> 💡 Nx uses `Rust` to build native bindings for Node. Please make sure that you have Rust installed via [rustup.rs](https://rustup.rs)
|
||||
> If you have `VSCode` + `Docker`, this can be automated for you, see [section](#development-workstation-setup) above
|
||||
> Nx uses Rust to build native bindings for Node. Please make sure that you have Rust installed via [rustup.rs](https://rustup.rs)
|
||||
> If you have VSCode + Docker, this can be automated for you, see [section](#development-workstation-setup) above
|
||||
|
||||
After cloning the project to your machine, to install the dependencies, run:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
|
||||
// or prefer...
|
||||
|
||||
pnpm install --frozen-lockfile // if you haven't changed any dependency
|
||||
pnpm i
|
||||
```
|
||||
|
||||
To build all the packages, run:
|
||||
@@ -374,7 +345,7 @@ Including the issue number that the PR relates to also helps with tracking.
|
||||
```plain
|
||||
feat(angular): add an option to generate lazy-loadable modules
|
||||
|
||||
`nx generate lib libs/mylib --lazy` provisions the mylib project in .eslintrc.json
|
||||
`nx generate lib mylib --lazy` provisions the mylib project in .eslintrc.json
|
||||
|
||||
Closes #157
|
||||
```
|
||||
@@ -385,57 +356,6 @@ To simplify and automate the process of committing with this format,
|
||||
**Nx is a [Commitizen](https://github.com/commitizen/cz-cli) friendly repository**, just do `git add` and
|
||||
execute `pnpm commit`.
|
||||
|
||||
##### Using the Interactive Commit Tool
|
||||
|
||||
Instead of `git commit`, use:
|
||||
|
||||
```bash
|
||||
pnpm commit
|
||||
```
|
||||
|
||||
This will launch an interactive prompt that will:
|
||||
|
||||
1. Ask you to select the type of change (feat, fix, docs, cleanup, chore)
|
||||
2. Let you choose the appropriate scope from the predefined list
|
||||
3. Guide you through writing a clear, descriptive commit message
|
||||
4. Ensure your commit follows the conventional commit format
|
||||
|
||||
##### Available Commit Types
|
||||
|
||||
- **feat**: A new feature
|
||||
- **fix**: A bug fix
|
||||
- **docs**: Documentation only changes
|
||||
- **cleanup**: A code change that neither fixes a bug nor adds a feature
|
||||
- **chore**: Other changes that don't modify src or test files
|
||||
|
||||
##### Available Scopes
|
||||
|
||||
The repository includes many predefined scopes. Use the one which is most specific to the changes being committed
|
||||
|
||||
- **core**: anything Nx core specific
|
||||
- **angular**: anything Angular specific
|
||||
- **react**: anything React specific
|
||||
- **nextjs**: anything Next specific
|
||||
- **node**: anything Node specific
|
||||
- **devkit**: devkit-related changes
|
||||
- **graph**: anything graph app specific
|
||||
- **testing**: anything testing specific (e.g. jest or cypress)
|
||||
- **misc**: misc stuff
|
||||
- **repo**: anything related to managing the repo itself
|
||||
- **nx-dev**: anything related to docs infrastructure
|
||||
|
||||
For the complete list of available scopes, see `/scripts/commitizen.js`.
|
||||
|
||||
##### Example Commits
|
||||
|
||||
```bash
|
||||
feat(core): add new project graph visualization
|
||||
fix(angular): resolve build issues with standalone components
|
||||
docs(misc): update contributing guidelines
|
||||
chore(repo): bump dependencies
|
||||
cleanup(devkit): refactor utility functions for better readability
|
||||
```
|
||||
|
||||
#### PR releases
|
||||
|
||||
If you are working on a particularly complex change or feature addition, you can request a dedicated Nx release for the associated pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate.
|
||||
|
||||
Generated
+633
-2703
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
(The MIT License)
|
||||
|
||||
Copyright (c) 2017-2025 Narwhal Technologies Inc.
|
||||
Copyright (c) 2017-2024 Narwhal Technologies Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<p style="text-align: center;">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
|
||||
<img alt="Nx - Smart Repos · Fast Builds" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
|
||||
<img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
|
||||
</picture>
|
||||
</p>
|
||||
|
||||
@@ -19,46 +19,27 @@
|
||||
|
||||
<hr>
|
||||
|
||||
# Smart Repos · Fast Builds
|
||||
# Smart Monorepos · Fast CI
|
||||
|
||||
An AI-first build platform that connects everything from your editor to CI. Helping you deliver fast, without breaking things.
|
||||
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.
|
||||
|
||||
Create a new Nx workspace with
|
||||
A few links to help you get started:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace
|
||||
```
|
||||
- [Nx.Dev: Documentation, Guides, Interactive Tutorials](https://nx.dev)
|
||||
- [Nx.Dev: Core Tutorials](https://nx.dev/getting-started/intro)
|
||||
- [Recipe: Adding Nx to an Existing Monorepo](https://nx.dev/recipes/adopting-nx/adding-to-monorepo)
|
||||
- [Official Nx YouTube Channel](https://www.youtube.com/@NxDevtools)
|
||||
- [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
|
||||
|
||||
...or run
|
||||
<p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="./images/nx-courses-and-videos.svg"
|
||||
width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
|
||||
|
||||
```
|
||||
npx nx init
|
||||
```
|
||||
# Engage with the Core Team and the Community
|
||||
|
||||
to add Nx to your existing workspace to get faster task scheduling, caching and more. More [in the docs](https://nx.dev/getting-started/intro).
|
||||
|
||||
## Learn about CI with Nx Cloud
|
||||
|
||||
[Nx Cloud](https://nx.dev/nx-cloud) connects directly to your existing CI setup, helping you scale your monorepos on CI by leveraging [remote caching](https://nx.dev/ci/features/remote-cache?utm_source=nxrepo&utm_medium=readme&utm_campaign=nxrepo), [task distribution across multiple machines](https://nx.dev/ci/features/distribute-task-execution?utm_source=nxrepo&utm_medium=readme&utm_campaign=nxrepo), [automated e2e test splitting](https://nx.dev/ci/features/split-e2e-tasks?utm_source=nxrepo&utm_medium=readme&utm_campaign=nxrepo) and [automated task flakiness detection](https://nx.dev/ci/features/flaky-tasks?utm_source=nxrepo&utm_medium=readme&utm_campaign=nxrepo)
|
||||
|
||||
Connect your existing Nx workspace with
|
||||
|
||||
```
|
||||
npx nx connect
|
||||
```
|
||||
|
||||
Learn more in the [Nx CI docs »](https://nx.dev/ci/intro?utm_source=nxrepo&utm_medium=readme&utm_campaign=nxrepo)
|
||||
|
||||
## Useful links
|
||||
|
||||
- [Our docs](https://nx.dev/docs)
|
||||
- [Our blog](https://nx.dev/blog)
|
||||
- [Our community discord, live stream,...](https://nx.dev/community)
|
||||
- [Our YouTube channel](https://www.youtube.com/@NxDevtools)
|
||||
- [Our Twitter/X](https://x.com/nxdevtools)
|
||||
|
||||
<p style="text-align: center;"><a href="https://www.youtube.com/@nxdevtools/videos" target="_blank" rel="noreferrer"><img src="./images/nx-courses-and-videos.svg"
|
||||
width="100%" alt="Nx - Smart Repos · Fast Builds"></a></p>
|
||||
- [Nx.Dev Community Page: Community Discord Channel, Newsletter, etc.](https://nx.dev/community)
|
||||
- [The Nx Show Playlist on YouTube](https://www.youtube.com/playlist?list=PLakNactNC1dE8KLQ5zd3fQwu_yQHjTmR5). It's a
|
||||
regular YouTube stream where we talk all things Nx. Join the stream, ask questions, etc.
|
||||
- [Follow Nx on Twitter](https://twitter.com/NxDevTools)
|
||||
|
||||
## Want to help?
|
||||
|
||||
@@ -77,22 +58,22 @@ help you get started.
|
||||
|  |  |  |  |
|
||||
| [vsavkin](https://github.com/vsavkin) | [FrozenPandaz](https://github.com/FrozenPandaz) | [bcabanes](https://github.com/bcabanes) | [jaysoo](https://github.com/jaysoo) |
|
||||
|
||||
| James Henry | Jon Cammisuli | Isaac Mann | Juri Strumpflohner |
|
||||
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | -------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [JamesHenry](https://github.com/JamesHenry) | [cammisuli](https://github.com/cammisuli) | [isaacplmann](https://github.com/isaacplmann) | [juristr](https://github.com/juristr) |
|
||||
| Jo Hanna Pearce | Jon Cammisuli | Isaac Mann | Juri Strumpflohner |
|
||||
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [jdpearce](https://github.com/jdpearce) | [cammisuli](https://github.com/cammisuli) | [isaacplmann](https://github.com/isaacplmann) | [juristr](https://github.com/juristr) |
|
||||
|
||||
| Philip Fulcher | Caleb Ukle | Colum Ferry | Emily Xiong |
|
||||
| ------------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [philipjfulcher](https://github.com/philipjfulcher) | [barbados-clemens](https://github.com/barbados-clemens) | [Coly010](https://github.com/Coly010) | [xiongemi](https://github.com/xiongemi) |
|
||||
| Philip Fulcher | Caleb Ukle | Katerina Skroumpelou | Colum Ferry |
|
||||
| ------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [philipjfulcher](https://github.com/philipjfulcher) | [barbados-clemens](https://github.com/barbados-clemens) | [mandarini](https://github.com/mandarini) | [Coly010](https://github.com/Coly010) |
|
||||
|
||||
| Miroslav Jonaš | Leosvel Pérez Espinosa | Zachary DeRose | Craigory Coppola |
|
||||
| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [meeroslav](https://github.com/meeroslav) | [leosvelperez](https://github.com/leosvelperez) | [ZackDeRose](https://github.com/ZackDeRose) | [AgentEnder](https://github.com/AgentEnder) |
|
||||
| Emily Xiong | Miroslav Jonaš | Leosvel Pérez Espinosa | Zachary DeRose |
|
||||
| ---------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
|  |  |  |  |
|
||||
| [xiongemi](https://github.com/xiongemi) | [meeroslav](https://github.com/meeroslav) | [leosvelperez](https://github.com/leosvelperez) | [ZackDeRose](https://github.com/ZackDeRose) |
|
||||
|
||||
| Chau Tran | Nicholas Cunningham | Max Kless |
|
||||
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------- |
|
||||
|  |  |  |
|
||||
| [nartc](https://github.com/nartc) | [ndcunningham](https://github.com/ndcunningham) | [MaxKless](https://github.com/MaxKless) |
|
||||
| Craigory Coppola | Chau Tran | Nicholas Cunningham | Max Kless |
|
||||
| -------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------- |
|
||||
|  |  |  |  |
|
||||
| [AgentEnder](https://github.com/AgentEnder) | [nartc](https://github.com/nartc) | [ndcunningham](https://github.com/ndcunningham) | [MaxKless](https://github.com/MaxKless) |
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
plugins {
|
||||
id("dev.nx.gradle.project-graph") version("0.1.0")
|
||||
id("com.ncorti.ktfmt.gradle") version("+")
|
||||
}
|
||||
|
||||
group = "dev.nx"
|
||||
@@ -1,4 +0,0 @@
|
||||
disallowed-types = [
|
||||
# We need to ensure adjustments for light and dark themes are applied appropriately
|
||||
{ path = "ratatui::style::Color", reason = "Use our utils from crate::native::tui::colors instead to ensure appropriate light/dark theme support" },
|
||||
]
|
||||
@@ -4,11 +4,6 @@
|
||||
"description": "Nx plugin add vitepress project to your workspace",
|
||||
"url": "https://github.com/Ahryman40k/nx-vitepress/tree/main/packages/nx-vitepress"
|
||||
},
|
||||
{
|
||||
"name": "@klerick/nx-angular-mf",
|
||||
"description": "Custom Angular Builder for Microfrontend Architecture",
|
||||
"url": "https://github.com/klerick/nx-angular-mf"
|
||||
},
|
||||
{
|
||||
"name": "@nightwatch/nx",
|
||||
"description": "The NightwatchJS plugin allows your workspace to use the power of NightwatchJS for E2E and Component Testing on Desktop and Mobile",
|
||||
@@ -384,15 +379,10 @@
|
||||
"description": "Nx plugin that applies betterer standards on a per-project basis.",
|
||||
"url": "https://github.com/spaceribs/spaceribs/tree/main/packages/nx-betterer"
|
||||
},
|
||||
{
|
||||
"name": "@nx-extensions/helm",
|
||||
"description": "Nx plugin providing comprehensive support for Helm charts, including generation, packaging, and publishing capabilities.",
|
||||
"url": "https://github.com/marcolongol/nx-extensions/tree/main/packages/helm"
|
||||
},
|
||||
{
|
||||
"name": "@nx-tools/nx-container",
|
||||
"description": "Nx plugin to build OCI containers with Docker, Podman or Kaniko.",
|
||||
"url": "https://github.com/gperdomor/nx-tools/tree/main/plugins/nx-container"
|
||||
"url": "https://github.com/gperdomor/nx-tools/tree/main/packages/nx-container"
|
||||
},
|
||||
{
|
||||
"name": "@nxrocks/nx-melos",
|
||||
@@ -462,12 +452,7 @@
|
||||
{
|
||||
"name": "@naxodev/nx-cloudflare",
|
||||
"description": "Nx plugin for Cloudflare, in particular Cloudflare workers. It allows to generate build and run Cloudflare workers in your Nx workspace.",
|
||||
"url": "https://github.com/naxodev/oss/tree/main/packages/nx-cloudflare"
|
||||
},
|
||||
{
|
||||
"name": "@naxodev/gonx",
|
||||
"description": "Modern Nx plugin to use Go in a Nx workspace. Forked from @nx-go/nx-go",
|
||||
"url": "https://github.com/naxodev/oss/tree/main/packages/gonx"
|
||||
"url": "https://github.com/naxodev/oss/tree/main/packages/plugins/nx-cloudflare"
|
||||
},
|
||||
{
|
||||
"name": "@ziacik/azure-func",
|
||||
@@ -499,39 +484,9 @@
|
||||
"description": "Plugin to deploy and promote Nx apps on Heroku",
|
||||
"url": "https://github.com/getlarge/nx-heroku"
|
||||
},
|
||||
{
|
||||
"name": "@getlarge/nx-node-sea",
|
||||
"description": "Plugin that provides integration with Node.js Single Executable Applications (SEA).",
|
||||
"url": "https://github.com/getlarge/nx-node-sea"
|
||||
},
|
||||
{
|
||||
"name": "@huge-nx/conventions",
|
||||
"description": "Plugin to generate and manage Nx workspaces by adhering to established workspace conventions.",
|
||||
"url": "https://github.com/jogelin/huge-nx"
|
||||
},
|
||||
{
|
||||
"name": "nx-github-pages",
|
||||
"description": "A small Nx plugin to make deploying static projects to GitHub Pages easy.",
|
||||
"url": "https://github.com/agentender/nx-github-pages"
|
||||
},
|
||||
{
|
||||
"name": "nx-solhint",
|
||||
"description": "Solhint generators and inferred tasks for Nx",
|
||||
"url": "https://github.com/juliangsibecas/nx-solhint"
|
||||
},
|
||||
{
|
||||
"name": "nx-foundry",
|
||||
"description": "Foundry generators and inferred tasks for Nx",
|
||||
"url": "https://github.com/juliangsibecas/nx-foundry"
|
||||
},
|
||||
{
|
||||
"name": "@robby-rabbitman/nx-plus-web-test-runner",
|
||||
"description": "Web Test Runner plugin for Nx workspaces.",
|
||||
"url": "https://github.com/RobbyRabbitman/nx-plus/tree/main/libs/web-test-runner"
|
||||
},
|
||||
{
|
||||
"name": "@aws/nx-plugin",
|
||||
"description": "Nx Plugin for AWS: Accelerate building cloud-native applications with AWS",
|
||||
"url": "https://github.com/awslabs/nx-plugin-for-aws"
|
||||
}
|
||||
]
|
||||
|
||||
+11
-48
@@ -32,6 +32,7 @@ We also have different audiences in mind when writing docs:
|
||||
👦 Intermediate User
|
||||
|
||||
- They know how to create an Nx repo or add Nx to an existing repo
|
||||
- They have heard the terms integrated and package-based
|
||||
- They know what a project is and how to make one
|
||||
- They understand how to run a task and the basics of caching
|
||||
- They can launch the graph
|
||||
@@ -88,19 +89,19 @@ The documentation website [nx.dev](https://nx.dev) is using custom Markdown synt
|
||||
Callouts are available to get the attention of the reader on some specific type of information.
|
||||
|
||||
```markdown
|
||||
{% callout type="announcement|caution|check|note|warning" title="string" %}
|
||||
{% callout type="caution|check|note|warning" title="string" %}
|
||||
Your content goes here.
|
||||
{% /callout %}
|
||||
```
|
||||
|
||||
#### Deep Dives
|
||||
#### Disclosure
|
||||
|
||||
These are special callouts that are collapsed with the intention of containing more deep-dive information about the topic which isn't required to understand right away.
|
||||
A disclosure can be used for less important information that is initially collapsed.
|
||||
|
||||
```markdown
|
||||
{% callout type="deepdive" title="string" %}
|
||||
Your deep-dive content goes here.
|
||||
{% /callout %}
|
||||
{% disclosure title="string" %}
|
||||
Your content goes here.
|
||||
{% /disclosure %}
|
||||
```
|
||||
|
||||
#### Cards
|
||||
@@ -182,14 +183,6 @@ To display a terminal command, use:
|
||||
```
|
||||
````
|
||||
|
||||
You can also add a title to the shell as follows:
|
||||
|
||||
````
|
||||
```shell {% title="Build the app" %}
|
||||
npx nx build
|
||||
```
|
||||
````
|
||||
|
||||
#### Terminal Output
|
||||
|
||||
You can display your terminal output with a dedicated component the same way you would show code.
|
||||
@@ -208,12 +201,12 @@ You can optionally also pass a `path` like
|
||||
```
|
||||
````
|
||||
|
||||
#### Table of Contents
|
||||
#### Terminal Video Output
|
||||
|
||||
You can add a table of contents to your document by using the following component. This is mostly useful for blog posts.
|
||||
You can have a more dynamic visualization of a terminal output by using the following component:
|
||||
|
||||
```markdown
|
||||
{% toc /%}
|
||||
```
|
||||
{% terminal-video src="/documentation/shared/images/caching/cache-terminal-animation.mp4" /%}
|
||||
```
|
||||
|
||||
#### Custom iframes
|
||||
@@ -299,14 +292,6 @@ Have a more decent button-like widget that you can place below sections of a tut
|
||||
{% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=64" /%}
|
||||
```
|
||||
|
||||
#### Course video embed
|
||||
|
||||
This is for embedding a video just like with the Youtube component, but in addition to have a link to a Nx Course (nx.dev/courses) video to improve the discoverability of these courses.
|
||||
|
||||
```markdown
|
||||
{% course-video src="https://youtu.be/3hW53b1IJ84" courseTitle="From PNPM Workspaces to Distributed CI" courseUrl="/courses/pnpm-nx-next/lessons-01-nx-init" title="Initialize Nx in Your Project with nx init" /%}
|
||||
```
|
||||
|
||||
#### Project Details View
|
||||
|
||||
Embed a Project Details View that is identical what is shown in Nx Console or `nx show project myproject --web`
|
||||
@@ -424,28 +409,6 @@ Embed an Nx Graph visualization that can be panned by the user.
|
||||
{% /graph %}
|
||||
````
|
||||
|
||||
## Generating API Documentation
|
||||
|
||||
To generate API documentation for the codebase and update the menu for the docs on nx.dev, you can run:
|
||||
|
||||
```
|
||||
nx documentation
|
||||
```
|
||||
|
||||
This will happen automatically in a `git push` hook, so you'll be reminded if you forget.
|
||||
|
||||
### Generate API Documentation for Ocean Plugins
|
||||
|
||||
To generate API documentation for plugins in the ocean repository, run the `nx documentation` command with the `NX_OCEAN_RELATIVE_PATH` environment variable set to the relative path to your checked out copy of the ocean repo.
|
||||
|
||||
```
|
||||
NX_OCEAN_RELATIVE_PATH=../ocean nx documentation
|
||||
```
|
||||
|
||||
This will create generated API documentation in the `docs/external-generated` folder. This API will be merged into the normal `docs/generated` documentation when the docs site is built.
|
||||
|
||||
Because there are two separate output folders, if someone runs `nx documentation` without the `NX_OCEAN_RELATIVE_PATH` environment variable, the ocean documentation will not be overwritten. The ocean documentation will only be updated or deleted when someone explicitly chooses to do so.
|
||||
|
||||
## Publishing Process
|
||||
|
||||
There are multiple versions of the `nx.dev` site.
|
||||
|
||||
@@ -1,174 +0,0 @@
|
||||
---
|
||||
title: 'Distributing CI: Binning and Distributed Task Execution'
|
||||
slug: 'distributing-ci-binning-and-distributed-task-execution'
|
||||
authors: ['Victor Savkin']
|
||||
cover_image: '/blog/images/2021-06-15/jFVfKEglfQIM9QsP.avif'
|
||||
tags: [nx]
|
||||
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.**
|
||||
|
||||
In this post we look at two ways to do that.
|
||||
|
||||
## Approach 1: Binning
|
||||
|
||||
Binning is an approach to distribution where the planning job divides the work into equally-weighted bins, one for each worker job. Then every worker executes the work prepared for it.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
We at Nrwl helped many large companies distribute CI using different variations of binning. It works reasonably well for simple cases, but not without issues.
|
||||
|
||||
## Issues with Binning
|
||||
|
||||
### 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.
|
||||
|
||||
Second, when using binning you split tasks of the same type: some agents run tests, some agents run lints. If you have a fixed set of agents, you often have a situation where one group of agents (say executing lints) finishes before the other group (say executing tests). **You cannot balance them well.**
|
||||
|
||||
Additionally, you have to clone the repo and restore installed dependencies three times, consequently: once for planning, once for testing, and once for deployment. If this step takes 3 minutes, you have a 9-minute setup cost.
|
||||
|
||||
### Binning splits semantic commands into many chunks.
|
||||
|
||||
If you partition your tests into five bins, you have five agents with separate log files. When some of them fail, you have to go through all the logs to see what has happened. Even though this is not a deal-breaker, in a large workspace with dozens of agents executing every CI run, this becomes a real issue.
|
||||
|
||||
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.
|
||||
|
||||
Any time you run a command in a monorepo, Nx creates a task graph, which it then executes.
|
||||
|
||||
**The biggest limitation of binning is that it only works when the task graph is a list.** The moment you have dependencies between tasks, you have to distribute tasks dynamically using some sort of coordinator, move the needed files between agents and so forth.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
## How Does Distributed Task Execution Work?
|
||||
|
||||
This is an example CircleCI configuration that runs all commands on a single agent.
|
||||
|
||||
```yaml
|
||||
jobs:
|
||||
main:
|
||||
environment:
|
||||
steps:
|
||||
- setup # clones the repo and runs npm install
|
||||
- run: npx nx affected --target=test --parallel --maxParallel=3
|
||||
- run: npx nx affected --target=lint --parallel --maxParallel=3
|
||||
- run: npx nx affected --target=e2e
|
||||
- run: npx nx affected --target=build
|
||||
workflows:
|
||||
PR:
|
||||
jobs:
|
||||
- main
|
||||
```
|
||||
|
||||
Now use DTE to run the commands using 3 separate agents.
|
||||
|
||||
```yaml
|
||||
jobs:
|
||||
main:
|
||||
environment:
|
||||
NX_CLOUD_DISTRIBUTED_EXECUTION: "true"
|
||||
steps:
|
||||
- setup
|
||||
- run: npx nx affected --target=test --parallel --maxParallel=3
|
||||
- run: npx nx affected --target=lint --parallel --maxParallel=3
|
||||
- run: npx nx affected --target=e2e
|
||||
- run: npx nx affected --target=build
|
||||
- run: npx nx-cloud stop-all-agents
|
||||
agent:
|
||||
steps:
|
||||
- setup
|
||||
- run:
|
||||
name: Agent
|
||||
command: npx nx-cloud start-agent
|
||||
workflows:
|
||||
PR:
|
||||
jobs:
|
||||
- agent
|
||||
name: agent1
|
||||
- agent
|
||||
name: agent2
|
||||
- agent
|
||||
name: agent3
|
||||
- main
|
||||
```
|
||||
|
||||
As you can see there is not much that changed. We added the agent job, registered it 3 times, added the `NX_CLOUD_DISTRIBUTED_EXECUTION` env variable, and added an extra step to stop all the agents. That is it.
|
||||
|
||||
**What happens when it runs `nx affected --build`?**
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### 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.
|
||||
|
||||
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.
|
||||
|
||||
To stress one more time the main job contains all the terminal outputs and all the files from all the tasks that ran on the agents, as if it ran locally. There is one place to look for errors. The created Nx Cloud run will contain all the information from all the agents.
|
||||
|
||||
|
||||
|
||||
**Finally, because all the files are copied into the main job, you can combine any outputs in post-processing steps, in exactly the same way you did it before enabling distribution.**
|
||||
|
||||
### Nx Cloud distributes builds.
|
||||
|
||||
**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.
|
||||
|
||||
### Nx Cloud does not require you to rewrite the CI setup.
|
||||
|
||||
As you saw above, the CI setup, by and large, remained the same. And nothing had to change in the workspace itself. For instance, the `npx nx affected --target=test --parallel --maxParallel=3` command looks exactly the same. The meaning of `--max-parallel` changes its meaning from run up to 3 test tasks on the main job to run up to 3 test tasks on each agent.
|
||||
|
||||
If you want to change this command without distribution, add `NX_CLOUD_DISTRIBUTED_EXECUTION` as follows: `NX_CLOUD_DISTRIBUTED_EXECUTION=false npx nx affected --target=test --parallel --maxParallel=3`.
|
||||
|
||||
### Works With any CI System
|
||||
|
||||
When using distributed task execution all the communication is done from your agents to Nx Cloud. This means that it works with any CI system, including your private Jenkins installations. See some examples [here](/ci/recipes/set-up). And even works locally if you create a docker image from the state of repo and push it to say ECS. It also works with Nx Private Cloud.
|
||||
|
||||
## Summary
|
||||
|
||||
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.
|
||||
|
||||
Nx Cloud distributed task execution addresses the drawbacks.
|
||||
|
||||
[Learn more about Nx Cloud 2.0 and its support for distributed task execution](/nx-cloud).
|
||||
-1343
File diff suppressed because it is too large
Load Diff
@@ -1,330 +0,0 @@
|
||||
---
|
||||
title: 'Taming Code Organization with Module Boundaries in Nx'
|
||||
slug: 'mastering-the-project-boundaries-in-nx'
|
||||
authors: ['Miroslav Jonaš']
|
||||
cover_image: '/blog/images/2021-12-17/PIUl1QGk7mOpSFdEwFQ8OA.avif'
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
But the code organization is just one piece of the puzzle. The physical organization does not prevent developers from consuming the domains or parts of those domains, that should otherwise be outside of their reach. Nx ships with `enforce-module-boundaries` ESLint rule that helps restrict that possibility.
|
||||
|
||||
## Understanding the default configuration
|
||||
|
||||
When you generate the first project in your workspace using one of our generators, one of the things you get for free is the full linter setup. The linter is preconfigured with a default ruleset that includes a set of best practices. Alongside the standard set of rules, the initial generated configuration includes a setup for `enforce-module-boundaries` rule.
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... default ESLint config here
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
|
||||
rules: {
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
allow: [],
|
||||
depConstraints: [
|
||||
{
|
||||
sourceTag: '*',
|
||||
onlyDependOnLibsWithTags: ['*'],
|
||||
},
|
||||
],
|
||||
enforceBuildableLibDependency: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// ... more ESLint overrides here
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
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](/technologies/angular/recipes/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.
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
// ... more ESLint config here
|
||||
|
||||
"@nrwl/nx/enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
"allowCircularSelfDependency": true,
|
||||
"depConstraints": [
|
||||
// ...list of constraints
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// ... more ESLint config here
|
||||
```
|
||||
|
||||
Finally, the flag `enforceBuildableLibDependency` prevents us from importing a non-buildable library into a buildable one. You can read more on what buildable libraries are used for in [our docs](/concepts/buildable-and-publishable-libraries).
|
||||
|
||||
## Using tags to enforce boundaries
|
||||
|
||||
To best express the need for the boundaries and assist us through the explanation, we will be using the repository represented by the following graph:
|
||||
|
||||
|
||||
_The graph representation of the repository_
|
||||
|
||||
Our repository consists of two applications — Store and Admin. Each of them is composed of several feature libraries — Products (for Store), Sales, and Invoices (for Admin). Also, both of these applications depend on the Core library, and every project in our repo depends on our Shared library. Using common sense, we would like to enforce certain boundaries:
|
||||
|
||||
- A shared or core library should not be able to depend on a feature library
|
||||
- A feature library can depend on another feature library or a shared library
|
||||
|
||||
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:
|
||||
|
||||
- `type:app` for application
|
||||
- `type:feature` for feature library
|
||||
- `type:util` for utility library
|
||||
|
||||
Your changed project configuration should now have the tags section defined.
|
||||
|
||||
```json5 {% fileName="project.json" %}
|
||||
{
|
||||
// ... more project configuration here
|
||||
|
||||
tags: ['type:app'],
|
||||
}
|
||||
```
|
||||
|
||||
Your enhanced graph will now look similar to this:
|
||||
|
||||
|
||||
_Graph with type tags set_
|
||||
|
||||
The above list of library types is not complete. You might add specific ones for E2E projects or UI component libraries. Using the naming format `type:*` is just a suggestion. Consider this being a hashtag on your favorite social app. You can use any prefix or format you feel fitting. The important thing is that it's readable and intuitive to all the members of your team.
|
||||
|
||||
Now, that we have marked all of our projects, we can continue to define the rules in the root `.eslintrc.json.`
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... more ESLint config here
|
||||
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
// update depConstraints based on your tags
|
||||
depConstraints: [
|
||||
{
|
||||
sourceTag: 'type:app',
|
||||
onlyDependOnLibsWithTags: ['type:feature', 'type:util'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'type:feature',
|
||||
onlyDependOnLibsWithTags: ['type:feature', 'type:util'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'type:util',
|
||||
onlyDependOnLibsWithTags: ['type:util'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
_Project graph with type tags and technology badges_
|
||||
|
||||
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
|
||||
- `scope:shared` for shared projects
|
||||
- `scope:core` for core projects
|
||||
|
||||
Our diagram should now look like this:
|
||||
|
||||
|
||||
_Full project graph with two-dimensional tags_
|
||||
|
||||
Let us now define our missing rules!
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... more ESLint config here
|
||||
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
// update depConstraints based on your tags
|
||||
depConstraints: [
|
||||
// ...previous project type related rules
|
||||
{
|
||||
sourceTag: 'scope:store',
|
||||
onlyDependOnLibsWithTags: [
|
||||
'scope:store',
|
||||
'scope:shared',
|
||||
'scope:core',
|
||||
],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:admin',
|
||||
onlyDependOnLibsWithTags: [
|
||||
'scope:admin',
|
||||
'scope:shared',
|
||||
'scope:core',
|
||||
],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:core',
|
||||
onlyDependOnLibsWithTags: ['scope:shared'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:shared',
|
||||
onlyDependOnLibsWithTags: ['scope:shared'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
## Fine-grained external dependencies
|
||||
|
||||
You may want to constrain what external packages a project may import. In our example above, we want to make sure projects in the `scope:store` does not import any angular packages, and projects from the `scope:admin` do not import any react library. You can ban these imports using `bannedExternalImports` property in your dependency constraints configuration.
|
||||
|
||||
We can now enhance our rule configuration by providing additional information.
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... more ESLint config here
|
||||
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
// update depConstraints based on your tags
|
||||
depConstraints: [
|
||||
// ...previous project type related rules
|
||||
{
|
||||
sourceTag: 'scope:store',
|
||||
onlyDependOnLibsWithTags: [
|
||||
'scope:store',
|
||||
'scope:shared',
|
||||
'scope:core',
|
||||
],
|
||||
// this covers all @angular pacakges
|
||||
bannedExternalImports: ['@angular/*'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:admin',
|
||||
onlyDependOnLibsWithTags: [
|
||||
'scope:admin',
|
||||
'scope:shared',
|
||||
'scope:core',
|
||||
],
|
||||
// this covers react, but also react-router-dom or react-helmet
|
||||
bannedExternalImports: ['react*'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:core',
|
||||
onlyDependOnLibsWithTags: ['scope:shared'],
|
||||
bannedExternalImports: ['@angular/*', 'react*'],
|
||||
},
|
||||
{
|
||||
sourceTag: 'scope:shared',
|
||||
onlyDependOnLibsWithTags: ['scope:shared'],
|
||||
bannedExternalImports: ['@angular/*', 'react*'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
Using the wildcard `*` to match multiple projects e.g. `react*` we can save ourselves the effort of manually specifying every single project we want to ban.
|
||||
|
||||
## 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.
|
||||
|
||||
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" %}
|
||||
{
|
||||
// ... more ESLint config here
|
||||
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
// ... more rule config here
|
||||
banTransitiveDependencies: true,
|
||||
},
|
||||
],
|
||||
|
||||
// ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
If you now try to import a transitive dependency, your linter responds with an error. This flag is disabled by default for now, but we highly recommend you enable it.
|
||||
|
||||
## Overriding the overrides
|
||||
|
||||
Sometimes, we just need to override this configuration for a given project. The scenario for this might be testing or during the development, if we are unsure yet how a certain project will be tagged. While we strongly encourage you to plan your architecture carefully and never override the boundaries configuration, you still have an option to bale out and override it.
|
||||
|
||||
```json5 {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... default ESLint config here
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
|
||||
rules: {
|
||||
'@nrwl/nx/enforce-module-boundaries': [
|
||||
'error',
|
||||
{
|
||||
// ignore any checks for these projects for now
|
||||
allow: ['a-wip-project', 'this-one-is-broken-so-ignore-it'],
|
||||
depConstraints: [
|
||||
// ...dependency constraints here
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// ... more ESLint overrides here
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
Monorepos are often viewed only from the technical side, but they also bring a shift in human resources organization. Teams that were once isolated, now have to work together on the same solution.
|
||||
|
||||
Having a clean separation of concerns and well-defined cohesive units helps us scale our organization more easily and gives us more confidence in our architecture. not only does Nx provide tools to speed up the overall performance, but it provides tooling to enforce the organizational constraints in an automated way.
|
||||
|
||||
In this post, we listed several strategies which you can use to restrict your packages from being misused or use unplanned external resources. Use them thoroughly and on time, before things go out of hand.
|
||||
|
||||
> Prefer a visual presentation over text? Then check out this talk recording by Juri Strumpflohner: [https://www.youtube.com/watch?v=pER_Ak1yUaA&t=687s](https://www.youtube.com/watch?v=pER_Ak1yUaA&t=687s)
|
||||
-98
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: 'Single File Monorepo Config, Custom Workspace Presets, Improved Tailwind Support, and more in Nx 13.4!'
|
||||
slug: 'single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13'
|
||||
authors: ['Brandon Roberts']
|
||||
cover_image: '/blog/images/2021-12-23/4u3Fw49H5U-sqgyBoGsqw.avif'
|
||||
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.
|
||||
|
||||
## One Million Weekly Downloads 🎉
|
||||
|
||||
Nx reached a major milestone this week of one million weekly downloads. Nx has been working to push monorepos forward for a long time, and this milestone is a reflection of work between us and the Nx community to grow and expand in this space.
|
||||
|
||||
|
||||
_One million weekly downloads_
|
||||
|
||||
## Single File Monorepo Configuration ☝️
|
||||
|
||||
When operating with a monorepo, some level of configuration is needed to provide context about the tools and structure for inferring information about projects. Nx has traditionally done this with 2 files, the **nx.json** that contains global configuration for the Nx CLI, and the **workspace.json** that contains references to projects within your workspace.
|
||||
|
||||
With the latest release of Nx and add-nx-to-monorepo 2.0, there is only the **nx.json** configuration file added to your existing monorepo, with the project information done through analyzing your workspace for existing projects. This allows you to **incrementally adopt** Nx into your monorepo to run tasks, cache computations, and more.
|
||||
|
||||
```shell
|
||||
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)
|
||||
|
||||
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.
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace --preset=your-npm-package-name
|
||||
```
|
||||
|
||||
Nicholas Cunningham just joined Nrwl and already implemented this new Nx feature! In the following video, [Juri Strumpflohner](https://twitter.com/juristr) walks you through the process of creating a new Nx Plugin with a custom preset.
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=yGUrF0-uqaU" /%}
|
||||
|
||||
This allows you to enhance the initial experience for new workspaces directly for your organization, and allows the Nx Plugin community to offer more tailored experiences. Please try out the new feature and [let us know](https://github.com/nrwl/nx) how we can improve it!
|
||||
|
||||
## Dedicated TypeScript and JavaScript support with @nrwl/js
|
||||
|
||||
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.
|
||||
|
||||
Read all the details on [our new TypeScript guide](/getting-started/intro) or check out the video walkthrough below.
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=-OmQ-PaSY5M" /%}
|
||||
|
||||
## Improved Tailwind support for Angular 💅
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
```shell
|
||||
nx g @nrwl/angular:app my-app --addTailwind
|
||||
```
|
||||
|
||||
Read more about Angular and Tailwind in our [docs](/technologies/angular/api/generators/setup-tailwind).
|
||||
|
||||
### Other Highlights 🗒
|
||||
|
||||
- Added SWC support for compiling JavaScript libraries and React apps/libs when building projects
|
||||
- Added migration support Create React App version 5
|
||||
- Updated the Angular framework to version 13.1
|
||||
- Update support for Cypress to version 9
|
||||
- Added additional SCAM generators for Angular for pipes and directives.
|
||||
- Improved developer experience for using Module Federation with Angular v13
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Explore More
|
||||
|
||||
- Get our [free basic Nx workspaces course on YouTube](https://youtu.be/2mYLe9Kp9VM)!
|
||||
- Purchase our premium video course on advanced practices for Nx workspaces: [here](https://nxplaybook.com/p/advanced-nx-workspaces)!
|
||||
|
||||
Follow 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!
|
||||
@@ -1,111 +0,0 @@
|
||||
---
|
||||
title: 'New Terminal Output & Performance Improvements in Nx 13.5'
|
||||
slug: 'new-terminal-output-performance-improvements-in-nx-13-5'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-01-25/PIUl1QGk7mOpSFdEwFQ8OA.avif'
|
||||
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.
|
||||
|
||||
|
||||
_New dynamic terminal output in Nx 13.5_
|
||||
|
||||
It clearly separates the terminal output into an upper part where all the completed tasks and their corresponding execution time are listed and a lower part where the currently running tasks show up. Of course, errors are always shown immediately and therefore easy to spot.
|
||||
|
||||
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.
|
||||
- **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
|
||||
|
||||
- 1.8x — 2.3x faster in the [Interstellar repo](https://github.com/vsavkin/interstellar)
|
||||
- about 2x faster on some large client repositories
|
||||
|
||||
And we will not rest 😉.
|
||||
|
||||
### Performance Profiling with Nx 🧐
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
Use the `NX_PROFILE=<filename>` environment variable attached to your Nx CLI command:
|
||||
|
||||
```shell
|
||||
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).
|
||||
|
||||
Thanks [Jason](https://twitter.com/FrozenPandaz) for working on this feature!
|
||||
|
||||
### React Native now supports Environment Variables
|
||||
|
||||
Whenever you set up React Native support within an Nx workspace, it should now automatically come with the [react-native-config](https://github.com/luggit/react-native-config) package installed. That allows you to have a `.env` file in the React Native app folder which can then be loaded from within your React Native application.
|
||||
You can find all the details on the [Nx docs](/technologies/react/recipes/react-native).
|
||||
|
||||
Thanks [Emily Xiong](https://twitter.com/xiongemily) for implementing this!
|
||||
|
||||
### Improvements to the Project Graph Visualization
|
||||
|
||||
The project graph is always a nice feature to show off in videos, talks, and blog posts. But if done naively, it just remains that. We always wanted it to be more than that. As your workspace grows, your project graph visualization should become more useful, rather than a mess to look at. This is why we kept adding features for filtering, zooming, highlighting, focusing on specific nodes, incrementally expanding the view by using the proximity feature and more.
|
||||
|
||||
In v13.5 we now also store the current filter status in the URL. That makes it easy to pinpoint a certain view and share it with a co-worker. Actually, this could just be the beginning of some more interesting features when we think about CI and visualizations 🤔.
|
||||
|
||||
|
||||
_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)
|
||||
|
||||
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
|
||||
|
||||
```shell
|
||||
nx graph
|
||||
```
|
||||
|
||||
`nx dep-graph` is registered as an alias and will continue to work 🙂.
|
||||
|
||||
### New improvements to our Angular plugin
|
||||
|
||||
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` )
|
||||
- Lots of improvements to the Angular SCAM generator
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Explore More
|
||||
|
||||
- Get our [free basic Nx workspaces course on YouTube](https://youtu.be/2mYLe9Kp9VM)!
|
||||
- Purchase our premium video course on advanced practices for Nx workspaces: [here](https://nxplaybook.com/p/advanced-nx-workspaces)!
|
||||
|
||||
Follow 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!
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,474 +0,0 @@
|
||||
---
|
||||
title: 'Share code between React Web & React Native Mobile with Nx'
|
||||
slug: 'share-code-between-react-web-react-native-mobile-with-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2022-02-01/lL-fGNaIGYBC_eOBwSvdBw.avif'
|
||||
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:
|
||||
|
||||
|
||||
_Screenshot of web app_
|
||||
|
||||
Example Repo: [xiongemi/studio-ghibli-search-engine](https://github.com/xiongemi/studio-ghibli-search-engine)
|
||||
|
||||
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.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- Monorepo: Nx
|
||||
- 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:
|
||||
|
||||
|
||||
_Dependency graph_
|
||||
|
||||
## React Native Setup
|
||||
|
||||
To get started we need to add React Native support to our Nx workspace:
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install @nrwl/react-native --save-dev# yarn
|
||||
yarn add @nrwl/react-native --dev
|
||||
```
|
||||
|
||||
Next, we can generate a new React Native app by running:
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
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`
|
||||
|
||||
|
||||
_studio-ghibli-search-engine-mobile created under apps_
|
||||
|
||||
If we now run `nx dep-graph` again, the dependency graph looks like this:
|
||||
|
||||
|
||||
_Dependency graph_
|
||||
|
||||
Note that there is no code shared between `studio-ghibli-search-engine-mobile` and `studio-ghibli-search-engine-web`. However, our goal is to reuse some of the functionality that we have previously written for the web version on our new React native version of the app.
|
||||
|
||||
## Code that Could NOT be Shared
|
||||
|
||||
Even though our goal is to share as much as possible between our React web app and the React Native app, there are parts that simply cannot be shared.
|
||||
|
||||
### UI
|
||||
|
||||
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.
|
||||
|
||||
**Routing**
|
||||
|
||||
- [react-router-dom](https://reactrouter.com/docs/en/v6/getting-started/overview) for web
|
||||
- [@react-navigation/native](https://reactnavigation.org/) for mobile
|
||||
|
||||
**Material Design Library**
|
||||
|
||||
- [@mui/material](https://mui.com/) for web
|
||||
- [react-native-paper](https://callstack.github.io/react-native-paper/) for mobile
|
||||
|
||||
Besides the above React Native libraries, there are some core utility libraries that need to be installed:
|
||||
|
||||
- react-native-reanimated
|
||||
- react-native-gesture-handler
|
||||
- react-native-screens
|
||||
- react-native-safe-area-context
|
||||
- @react-native-community/masked-view
|
||||
- react-native-vector-icons
|
||||
|
||||
The corresponding install command would be:
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install @react-navigation/native @react-navigation/native-stack react-native-paper react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save# yarn
|
||||
yarn add @react-navigation/native @react-navigation/native-stack react-native-paper react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
|
||||
```
|
||||
|
||||
### Storage
|
||||
|
||||
For the React Web app, we use [redux-persist](https://github.com/rt2zz/redux-persist), which persists the redux store in [`localstorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). However, `localstorage` is not supported by React Native.
|
||||
|
||||
For the web, the variable `persistConfig` passed to persistStore from redux-persist is:
|
||||
|
||||
```typescript
|
||||
import storage from 'redux-persist/lib/storage';
|
||||
const persistConfig = {
|
||||
key: 'root',
|
||||
storage: storage,
|
||||
whitelist: ['search', 'films', 'people'],
|
||||
transforms: [transformEntityStateToPersist],
|
||||
};
|
||||
```
|
||||
|
||||
However, for the mobile, we need to install the library [`@react-native-async-storage/async-storage`](https://github.com/react-native-async-storage/async-storage):
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install @react-native-async-storage/async-storage --save-dev# yarn
|
||||
yarn add @react-native-async-storage/async-storage --dev
|
||||
```
|
||||
|
||||
As a result, the `persistConfig` passed to persistStore from redux-persist becomes:
|
||||
|
||||
```typescript
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
const persistConfig = {
|
||||
key: 'root',
|
||||
storage: AsyncStorage,
|
||||
whitelist: ['search', 'films', 'people'],
|
||||
transforms: [transformEntityStateToPersist],
|
||||
};
|
||||
```
|
||||
|
||||
### History
|
||||
|
||||
On the React web app, we use [connected-react-router](https://github.com/supasate/connected-react-router) to put the router state into the Redux store. However, the [History API (windows.history)](https://developer.mozilla.org/en-US/docs/Web/API/History_API) is not supported by React Native. As an alternative, we can use `createMemoryHistory`.
|
||||
|
||||
For the web app, the history is:
|
||||
|
||||
```typescript
|
||||
import { createHashHistory, History } from 'history';
|
||||
const history: History = createHashHistory();
|
||||
```
|
||||
|
||||
For the mobile app, the history is:
|
||||
|
||||
```typescript
|
||||
import { createMemoryHistory, History } from 'history';
|
||||
const history: History = createMemoryHistory();
|
||||
```
|
||||
|
||||
To make our code more re-usable we could slightly refactor the creation of the root reducer with [connected-react-router](https://github.com/supasate/connected-react-router), such that it takes the `history` object as an argument:
|
||||
|
||||
```typescript
|
||||
import { combineReducers } from '@reduxjs/toolkit';
|
||||
import { connectRouter } from 'connected-react-router';
|
||||
import { History } from 'history';
|
||||
import { filmsSlice } from '../films/films.slice';
|
||||
import { peopleSlice } from '../people/people.slice';
|
||||
import { searchSlice } from '../search/search.slice';
|
||||
import { RootState } from './root-state.interface';
|
||||
export const createRootReducer = (history: History) =>
|
||||
combineReducers<RootState>({
|
||||
films: filmsSlice.reducer,
|
||||
router: connectRouter(history) as any,
|
||||
search: searchSlice.reducer,
|
||||
people: peopleSlice.reducer,
|
||||
});
|
||||
```
|
||||
|
||||
### Query Parameters
|
||||
|
||||
When you develop on the web, the easiest way to pass ahead state or information, in general, is to leverage the URL query parameters. In our search app example, we can simply have something like `?search=searchText`.
|
||||
|
||||
We can use [react-router-dom](https://v5.reactrouter.com/web/guides/quick-start) to push a new history entry.
|
||||
|
||||
```typescript
|
||||
import { useHistory } from 'react-router-dom';
|
||||
const history = useHistory();
|
||||
const submitSearchForm = (text: string) => {
|
||||
history.push(`${AppRoutes.results}?search=${text}`);
|
||||
};
|
||||
```
|
||||
|
||||
To read and parse the current query parameter `search`:
|
||||
|
||||
```typescript
|
||||
import { useLocation } from 'react-router-dom';
|
||||
const params = new URLSearchParams(useLocation().search);
|
||||
const searchParam = params.get('search');
|
||||
```
|
||||
|
||||
Although the mobile app URLs are not visible, we can still pass parameters. Note that we have to use a different package `@react-navigation/native` though.
|
||||
|
||||
```typescript
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
const navigation = useNavigation();
|
||||
const submitSearchForm = () => {
|
||||
navigation.navigate(AppRoutes.results, { search: text });
|
||||
};
|
||||
```
|
||||
|
||||
To read and parse the parameter:
|
||||
|
||||
```typescript
|
||||
import { RouteProp, useRoute } from '@react-navigation/native';
|
||||
const route = useRoute<RouteProp<{ params: { search: string } }>>();
|
||||
const searchParam = route.params?.search;
|
||||
```
|
||||
|
||||
To type checking with typescript for react-navigation, we need to create a type `RootStackParamList` for mappings of route name to the params of the route:
|
||||
|
||||
```typescript
|
||||
export type RootStackParamList = {
|
||||
[AppRoutes.search]: undefined;
|
||||
[AppRoutes.results]: { search: string };
|
||||
};
|
||||
```
|
||||
|
||||
We also need to specify a global type for your root navigator:
|
||||
|
||||
```typescript
|
||||
declare global {
|
||||
// eslint-disable-next-line @typescript-eslint/no-namespace
|
||||
namespace ReactNavigation {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface RootParamList extends RootStackParamList {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
So we create the stack navigator, we need to pass the above `RootStackParamList` type:
|
||||
|
||||
```typescript
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
const Stack = createNativeStackNavigator<**RootStackParamList**>();
|
||||
```
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Nx comes with a set of different options for [handling environment variables](/reference/environment-variables). In our workspace, we have a simple `.env` file at the workspace root:
|
||||
|
||||
```text
|
||||
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`.
|
||||
|
||||
To solve this, we can use the [react-native-config](https://github.com/luggit/react-native-config) library
|
||||
|
||||
```shell
|
||||
# npm
|
||||
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).
|
||||
|
||||
After that, we can have a simple utility function to retrieve the environment variables in our app.
|
||||
|
||||
```typescript
|
||||
import Config from 'react-native-config';
|
||||
export function getEnv(envName: string) {
|
||||
return process.env[envName] || Config[envName];
|
||||
}
|
||||
```
|
||||
|
||||
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`.
|
||||
|
||||
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).
|
||||
|
||||
To fix this, for iOS, open `apps/studio-ghibli-search-engine-mobile/ios/StudioGhibliSearchEngineApp/Info.plist` and add the request URL to `NSExceptionDomains` under `NSAppTransportSecurity`:
|
||||
|
||||
```xml
|
||||
<key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSExceptionDomains</key>
|
||||
<dict>
|
||||
<key>localhost</key>
|
||||
<dict>
|
||||
<key>NSExceptionAllowsInsecureHTTPLoads</key>
|
||||
<true/>
|
||||
</dict>
|
||||
<key>ghibliapi.herokuapp.com</key>
|
||||
<dict>
|
||||
<key>NSExceptionAllowsInsecureHTTPLoads</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</dict>
|
||||
</dict>
|
||||
```
|
||||
|
||||
Similarly, for Android, open `apps/studio-ghibli-search-engine-mobile/android/app/src/main/res/xml/network_security_config.xml`, and add the request URL to this config file:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<network-security-config>
|
||||
<domain-config cleartextTrafficPermitted="true">
|
||||
<domain includeSubdomains="true">10.0.2.2</domain>
|
||||
<domain includeSubdomains="true">localhost</domain>
|
||||
<domain includeSubdomains="true">herokuapp.com</domain>
|
||||
</domain-config>
|
||||
</network-security-config>
|
||||
```
|
||||
|
||||
This should get rid of the network error.
|
||||
|
||||
It seems like there are quite a few customizations that need to be done for React Native apps. However, the majority of non-UI code could be reused.
|
||||
|
||||
## Code that Could be Shared
|
||||
|
||||
All the business logic code that is not UI could be shared. For this example, I got 3 libraries in my monorepo and all of them could be shared:
|
||||
|
||||
- models: types and interface definitions
|
||||
- services: services that interact with API
|
||||
- store: redux store
|
||||
|
||||
With Nx, it requires zero configuration to share the above library code. Even though when I created these libraries for a web app, I used commands like `nx generate @nrwl/react:lib store`, I could still use them directly in my react native mobile app.
|
||||
|
||||
For example, I need to create a film page to display film details with film id passed in as a parameter:
|
||||
|
||||
|
||||
_Screenshot of Film Page on Mobile (left: iOS, right: Android)_
|
||||
|
||||
I would do import from the store library directly:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
filmsActions,
|
||||
filmsSelectors,
|
||||
RootState,
|
||||
} from '@studio-ghibli-search-engine/store';
|
||||
```
|
||||
|
||||
The film component would become:
|
||||
|
||||
```typescript {% fileName="film.props.ts" %}
|
||||
import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit';
|
||||
import {
|
||||
filmsActions,
|
||||
filmsSelectors,
|
||||
RootState,
|
||||
} from '@studio-ghibli-search-engine/store';
|
||||
|
||||
const mapStateToProps = (state: RootState) => {
|
||||
return {
|
||||
getFilm: (id: string) => filmsSelectors.selectFilmById(id)(state),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (
|
||||
dispatch: ThunkDispatch<RootState, void, AnyAction>
|
||||
) => {
|
||||
return {
|
||||
fetchFilms() {
|
||||
dispatch(filmsActions.fetchFilms());
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
type mapStateToPropsType = ReturnType<typeof mapStateToProps>;
|
||||
type mapDispatchToPropsType = ReturnType<typeof mapDispatchToProps>;
|
||||
|
||||
type FilmProps = mapStateToPropsType & mapDispatchToPropsType;
|
||||
|
||||
export { mapStateToProps, mapDispatchToProps };
|
||||
export type { FilmProps };
|
||||
```
|
||||
|
||||
```tsx {% fileName="film.tsx" %}
|
||||
import { RouteProp, useRoute } from '@react-navigation/native';
|
||||
import { FilmEntity } from '@studio-ghibli-search-engine/models';
|
||||
import { getEnv } from '@studio-ghibli-search-engine/services';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { SafeAreaView, ScrollView, Image, View } from 'react-native';
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Headline,
|
||||
Paragraph,
|
||||
Subheading,
|
||||
Title,
|
||||
} from 'react-native-paper';
|
||||
import { styles } from 'react-native-style-tachyons';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Loading from '../shared/loading/loading';
|
||||
import { useLink } from '../shared/open-link/open-link';
|
||||
|
||||
import { FilmProps, mapDispatchToProps, mapStateToProps } from './film.props';
|
||||
|
||||
export function Film({ getFilm, fetchFilms }: FilmProps) {
|
||||
const [film, setFilm] = useState<FilmEntity>();
|
||||
|
||||
const route = useRoute<RouteProp<{ params: { id: string } }>>();
|
||||
const id = route.params?.id;
|
||||
|
||||
const openHboMax = useLink(getEnv('NX_HBO_STREAMING_URL'), 'HBO Max');
|
||||
const openNetflix = useLink(getEnv('NX_NETFLIX_STREAMING_URL'), 'Netflix');
|
||||
|
||||
useEffect(() => {
|
||||
fetchFilms();
|
||||
}, [fetchFilms]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilm(getFilm(id));
|
||||
}, [id, getFilm]);
|
||||
|
||||
return film ? (
|
||||
<SafeAreaView>
|
||||
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
||||
<View style={[styles.pa3]}>
|
||||
<Image
|
||||
style={{ height: 200, width: '100%', resizeMode: 'contain' }}
|
||||
source={{ uri: film.movieBanner }}
|
||||
/>
|
||||
<Headline>{film.title}</Headline>
|
||||
<Subheading>
|
||||
{film.originalTitle} / {film.originalTitleRomanised}
|
||||
</Subheading>
|
||||
<Paragraph>Release: {film.releaseDate}</Paragraph>
|
||||
<Paragraph>Director: {film.director}</Paragraph>
|
||||
<Paragraph>Producer: {film.producer}</Paragraph>
|
||||
<Paragraph>Running Time: {film.runningTime} minutes</Paragraph>
|
||||
<Paragraph>Rotten Tomatoes Score: {film.rtScore}</Paragraph>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Title>Plot</Title>
|
||||
<Paragraph>{film.description}</Paragraph>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Button onPress={openHboMax}>Watch on HBO Max</Button>
|
||||
<Button onPress={openNetflix}>Watch on Netflix</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
) : (
|
||||
<Loading />
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Film);
|
||||
```
|
||||
|
||||
Note I could import from `@studio-ghibli-search-engine/models`, `@studio-ghibli-search-engine/services` and `@studio-ghibli-search-engine/store` directly.
|
||||
|
||||
Now when I run `nx dep-graph`, it shows the dependency graph below where all these 3 libraries are shared between web and mobile:
|
||||
|
||||
|
||||
_Dependency graph_
|
||||
|
||||
For this example project, to create the mobile app, it took me some time to rewrite the entire UI. However, I do not need to make any changes to the above libraries.
|
||||
|
||||
|
||||
_Screenshots of Mobile App (left: iOS, right: Android)_
|
||||
|
||||
## Conclusion
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
_(Note, the repository with the code for this article is linked at the very top)_
|
||||
@@ -1,308 +0,0 @@
|
||||
---
|
||||
title: 'Introducing Expo Support for Nx'
|
||||
slug: 'introducing-expo-support-for-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2022-03-23/yYc8g4ifk9RApSjAhQysag.avif'
|
||||
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.
|
||||
|
||||
This blog will show you how to create a one-page app to display a poem:
|
||||
|
||||
|
||||
_Page Screenshot (left: Android, right: iOS)_
|
||||
|
||||
Github Repo: [xiongemi/nx-expo-poetry](https://github.com/xiongemi/nx-expo-poetry)
|
||||
|
||||
## 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).
|
||||
|
||||
Now I have created an app with Expo, to me, the most significant differences are developer experience and the build process.
|
||||
|
||||
|
||||
_Left: managed Expo project folder, right: React Native project folder_
|
||||
|
||||
For a managed Expo project, notice that it only has a `src` folder; whereas for a React Native project, besides the `src` folder, it also contains the `android` and `ios` folder. For a managed Expo project, developers do not need to worry about maintaining code for iOS and Android. However, you can still write customized native code for Expo, you can use Expo with [bare workflow](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow) after running the command `expo eject`.
|
||||
|
||||
Moreover, Expo provides [Expo Application Services(EAS)](https://docs.expo.dev/eas/) to build and distribute your app. React Native developers can bundle and build locally using Android Studio or Xcode. However, with EAS Build, it will build on a hosted service. Of course, there is potentially a fee involved: [https://expo.dev/pricing](https://expo.dev/pricing).
|
||||
|
||||
**Something to note:** [@nrwl/expo](https://www.npmjs.com/package/@nrwl/expo) and [@nrwl/react-native](https://www.npmjs.com/package/@nrwl/react-native) cannot exist in the same monorepo due to dependency version conflicts. Expo usually tails the latest React Native by a few versions, whereas [@nrwl/react-native](https://www.npmjs.com/package/@nrwl/react-native) tries to align with the latest React Native version.
|
||||
|
||||
## Setup
|
||||
|
||||
First, let's create an Nx workspace:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace nx-expo-poetry --preset=empty
|
||||
```
|
||||
|
||||
Then you need to install @nrwl/expo package:
|
||||
|
||||
```shell
|
||||
cd nx-expo-poetry
|
||||
# npm
|
||||
npm install @nrwl/expo --save-dev
|
||||
|
||||
# yarn
|
||||
yarn add @nrwl/expo --dev
|
||||
```
|
||||
|
||||
Then you need to generate an expo app:
|
||||
|
||||
```shell
|
||||
nx generate @nrwl/expo:app poetry-app
|
||||
```
|
||||
|
||||
Now you should notice that under the apps folder, there are 2 folders generated: `peotry-app` and `poetry-app-e2e:`
|
||||
|
||||
|
||||
_apps folder_
|
||||
|
||||
Now run the command to serve up the Expo Development Server:
|
||||
|
||||
```shell
|
||||
nx start poetry-app
|
||||
```
|
||||
|
||||
You should see the starter app in the simulator:
|
||||
|
||||
|
||||
_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:
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install react-native-paper --save
|
||||
|
||||
# yarn
|
||||
yarn add react-native-paper
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
nx g @nrwl/expo:component poem-of-the-day --directory=components
|
||||
```
|
||||
|
||||
Now you should see the components under apps/components:
|
||||
|
||||
|
||||
|
||||
Then paste the below code to the `App.tsx` and `poem-of-the-day.tsx`:
|
||||
|
||||
```tsx {% fileName="App.tsx" %}
|
||||
import React from 'react';
|
||||
import { SafeAreaView, ScrollView } from 'react-native';
|
||||
import { Provider as PaperProvider } from 'react-native-paper';
|
||||
|
||||
import PoemOfTheDay from '../components/poem-of-the-day/poem-of-the-day';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<PaperProvider>
|
||||
<SafeAreaView>
|
||||
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
||||
<PoemOfTheDay></PoemOfTheDay>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</PaperProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```tsx {% fileName="poem-of-the-day.tsx" %}
|
||||
import React from 'react';
|
||||
import { Card, Title, Paragraph, Subheading } from 'react-native-paper';
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
export interface PoemOfTheDayProps {}
|
||||
|
||||
export function PoemOfTheDay(props: PoemOfTheDayProps) {
|
||||
return (
|
||||
<Card>
|
||||
<Card.Cover source={{ uri: `https://picsum.photos/300/200` }} />
|
||||
<Card.Content>
|
||||
<Title>Ozymandias</Title>
|
||||
<Subheading>Percy Bysshe Shelley</Subheading>
|
||||
<Paragraph>
|
||||
I met a traveller from an antique land {'\n'}
|
||||
Who said: Two vast and trunkless legs of stone {'\n'}
|
||||
Stand in the desert...Near them, on the sand, {'\n'}
|
||||
Half sunk, a shattered visage lies, whose frown,{'\n'}
|
||||
And wrinkled lip, and sneer of cold command, {'\n'}
|
||||
Tell that its sculptor well those passions read {'\n'}
|
||||
Which yet survive, stamped on these lifeless things, {'\n'}
|
||||
The hand that mocked them, and the heart that fed: {'\n'}
|
||||
And on the pedestal these words appear: {'\n'}
|
||||
'My name is Ozymandias, king of kings: {'\n'}
|
||||
Look on my works, ye Mighty, and despair!' {'\n'}
|
||||
Nothing beside remains. Round the decay{'\n'}
|
||||
Of that colossal wreck, boundless and bare{'\n'}
|
||||
The lone and level sands stretch far away.
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default PoemOfTheDay;
|
||||
```
|
||||
|
||||
Now, if you run command `nx start poetry-app` and then run the app on the simulator, you should see:
|
||||
|
||||
|
||||
_Page Screenshot (left: Android, right: iOS)_
|
||||
|
||||
To see it in the real device, run `nx publish poetry-app`.
|
||||
|
||||
Awesome! Now you have built your first page. However, notice this page only displays a static poem. The next step is to integrate with the API. In this example. We are going to use PoetryDB: [https://github.com/thundercomb/poetrydb](https://github.com/thundercomb/poetrydb).
|
||||
|
||||
## Create a Workspace Library
|
||||
|
||||
To create a library that gets a random poem from the API, run the command:
|
||||
|
||||
```shell
|
||||
nx generate @nrwl/expo:library services
|
||||
```
|
||||
|
||||
This should generate a services folder under libs:
|
||||
|
||||
|
||||
|
||||
Create a `poetry.service.ts` file to call the PoetryDB API and get a random poem:
|
||||
|
||||
```typescript {% fileName="poem-response.interfacve.ts %}
|
||||
// at libs/services/src/models/poem-response.interface.ts
|
||||
export interface PoemResponse {
|
||||
title: string;
|
||||
author: string;
|
||||
lines: string[];
|
||||
linecount: string;
|
||||
}
|
||||
```
|
||||
|
||||
```typescript {% fileName="poetry.service.ts" %}
|
||||
// at libs/services/src/poetry/poetry.service.ts
|
||||
import { PoemResponse } from '../models/poem-response.interface';
|
||||
|
||||
const POETRY_BASE_URL = 'https://poetrydb.org/';
|
||||
|
||||
export async function getPoemOfTheDay(): Promise<PoemResponse[]> {
|
||||
const response: Response = await fetch(POETRY_BASE_URL + 'random', {
|
||||
method: 'GET',
|
||||
});
|
||||
if (response.ok) {
|
||||
return await response.json();
|
||||
}
|
||||
throw response;
|
||||
}
|
||||
|
||||
export const poetryService = { getPoemOfTheDay };
|
||||
```
|
||||
|
||||
For the service we created above, we can import it in the app directly like:
|
||||
|
||||
```shell
|
||||
import { PoemResponse, poetryService } from '@nx-expo-poetry/services';
|
||||
```
|
||||
|
||||
Then the `apps/poetry-app/src/components/poem-of-the-day/poem-of-the-day.tsx` would become:
|
||||
|
||||
If you now run the app using `nx start poetry-app`, you should see the poem loaded from API:
|
||||
|
||||
|
||||
_Page Screenshot (left: Android, right: iOS)_
|
||||
|
||||
## Using Expo Build
|
||||
|
||||
Now you want to build and possibly publish your app. To build the standalone app, you can use the Expo build. First, you need to create an Expo account. You can do it at [https://expo.dev/signup](https://expo.dev/signup) or using the command line:
|
||||
|
||||
```shell
|
||||
npx expo login
|
||||
```
|
||||
|
||||
Then you can run the build command:
|
||||
|
||||
```shell
|
||||
# iOS
|
||||
nx build-ios poetry-app
|
||||
|
||||
# Android
|
||||
nx build-android poetry-app
|
||||
```
|
||||
|
||||
You can monitor your builds after logging in at [https://expo.dev/](https://expo.dev/):
|
||||
|
||||
|
||||
_Builds page at https://expo.dev/_
|
||||
|
||||
You can read more at [https://docs.expo.dev/classic/building-standalone-apps/](https://docs.expo.dev/classic/building-standalone-apps/) to debug.
|
||||
|
||||
## Using EAS Build
|
||||
|
||||
Before you start to use EAS build, you need to install EAS CLI:
|
||||
|
||||
```shell
|
||||
npm install -g eas-cli
|
||||
```
|
||||
|
||||
Then, you can sign up and log in to your Expo:
|
||||
|
||||
```shell
|
||||
npx expo login
|
||||
```
|
||||
|
||||
Then go to the app folder using `cd apps/poetry-app` and simply run:
|
||||
|
||||
```shell
|
||||
eas build
|
||||
```
|
||||
|
||||
You can monitor your builds after logging in at [https://expo.dev/](https://expo.dev/):
|
||||
|
||||
|
||||
_Builds page at https://expo.dev/_
|
||||
|
||||
To submit to the app store, run:
|
||||
|
||||
```shell
|
||||
eas submit
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
In this article, we have:
|
||||
|
||||
- successfully built an expo app using Nx
|
||||
- add UI in the app
|
||||
- create a separate library to handle services
|
||||
- use EAS to build the app
|
||||
|
||||
With Nx, we can create as many libraries as we want to handle different concerns. It would be very handy to share and reuse libraries or have multiple apps in the same monorepo.
|
||||
|
||||
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)**.**
|
||||
|
||||
_(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":
|
||||
|
||||
Android:
|
||||
|
||||
[Poem of the Day](https://play.google.com/store/apps/details?id=com.exiong.poetryapp)
|
||||
|
||||
iOS:
|
||||
|
||||
|
||||
_Screenshot in iOS app store_
|
||||
@@ -1,452 +0,0 @@
|
||||
---
|
||||
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.avif'
|
||||
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._
|
||||
|
||||
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.
|
||||
|
||||
**Prefer the video version?**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=QghilgRe-pw" /%}
|
||||
|
||||
## 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 the standalone tutorial (including video).
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
- 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.
|
||||
|
||||
## Using Nx
|
||||
|
||||
Let me give you an overview of the most used functionality that Nx gives you such that you get a good understanding of whether it might suit your needs.
|
||||
|
||||
## Creating a new Nx React project
|
||||
|
||||
Open your favorite terminal window and type:
|
||||
|
||||
```shell
|
||||
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_`
|
||||
|
||||
`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.
|
||||
|
||||
|
||||
_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 🙂.
|
||||
|
||||
You should end up with a new Nx workspace and our `happynrwl` React app in the `apps/` folder.
|
||||
|
||||
|
||||
_Layout of a Nx workspace in VSCode_
|
||||
|
||||
## Serving our React app
|
||||
|
||||
To serve our React app, run
|
||||
|
||||
```shell
|
||||
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_`_._
|
||||
|
||||
Going to [http://localhost:4200](http://localhost:4200/) should show the running React app located in `apps/happynrwl`.
|
||||
|
||||
|
||||
_Welcome screen when launching the React application with Nx_
|
||||
|
||||
## Build our React app
|
||||
|
||||
Similarly, to build our React application, run
|
||||
|
||||
```shell
|
||||
npx nx build happynrwl
|
||||
```
|
||||
|
||||
This should build the app into `dist/apps/happynrwl`, which we can then take and deploy to wherever we want to deploy it.
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
## 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.
|
||||
|
||||
Let's for instance generate a new component for our React application:
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/react:component HelloWorld
|
||||
```
|
||||
|
||||
This generates a new component in our `happynrwl` application
|
||||
|
||||
|
||||
_Example of a React component generated by Nx_
|
||||
|
||||
> _Note, you can also use_ `_nx g @nrwl/react..._` _as a shorthand for_ `_generate_`_. Also, if you attach_ `_--dry-run_` _to the end of the command it will just simulate the run without touching the file system._
|
||||
|
||||
Many of these generators come with a rich set of flags. For example, passing `--routing` to our component generator from before, generates a component with routes already set up, adds `react-router-dom` to the `package.json` and executes a `npm install`.
|
||||
|
||||
**How do we find all these generators though?** There are different options:
|
||||
|
||||
- **Nx documentation** — use the search function there or just navigate the docs. All the reference pages are structured like `nx.dev/packages/<packagename>`. As an example for React that would look like: [/technologies/react/api](/technologies/react/api).
|
||||
- `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.
|
||||
|
||||
## 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
|
||||
|
||||
- TypeScript
|
||||
- ESLint
|
||||
- Jest
|
||||
- Cypress
|
||||
- Prettier
|
||||
|
||||
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.
|
||||
|
||||
## TypeScript as a first-class citizen!
|
||||
|
||||
The Nx core team strongly believes in the benefits of TypeScript (in fact, check out the [new Nx and TypeScript setup](/getting-started/intro)). As such, by default every project is automatically set up and configured to use TypeScript, making sure builds, as well as IDEs, are able to properly pick up TypeScript definitions. All without you having to worry about it.
|
||||
|
||||
Now, if you really want to use pure JavaScript you totally can. Just pass the `--js` when running a generator. Read [more on the docs](/technologies/typescript/recipes/js-and-ts).
|
||||
|
||||
## ESLint preconfigured!
|
||||
|
||||
Every new Nx workspace comes with [ESLint](https://eslint.org/) already preconfigured. Having proper linting in place is a great way to help contribute to overall better code quality by statically analyzing your source code and finding potential issues early in the process.
|
||||
|
||||
Every project generated by Nx comes with a `.eslintrc.json` file. That configuration extends from an ESLint plugin `@nrwl/nx/react` , containing a set of best practices rules, and at the same time allows you to add further rules that are specific to your needs.
|
||||
|
||||
|
||||
_ESLint configuration in an Nx workspace_
|
||||
|
||||
Linting can be run similarly to the other commands:
|
||||
|
||||
```shell
|
||||
npx nx lint happynrwl
|
||||
```
|
||||
|
||||
## Jest preconfigured!
|
||||
|
||||
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.
|
||||
|
||||
|
||||
_Jest configuration in an Nx workspace_
|
||||
|
||||
Running Jest tests is as easy as
|
||||
|
||||
```shell
|
||||
npx nx test happynrwl
|
||||
```
|
||||
|
||||
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
|
||||
- ...
|
||||
|
||||
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:
|
||||
|
||||
|
||||
_Using VSCode extensions to run Jest tests directly via Code Lens support_
|
||||
|
||||
## Cypress preconfigured!
|
||||
|
||||
[Cypress](https://www.cypress.io/) has revolutionized e2e testing by making it more developer-friendly. Who likes to write tests after all. That just gets even worse if the DX sucks. Cypress successfully tackled that by listening and addressing the pain of existing e2e testing solutions.
|
||||
|
||||
Whenever you generate a new project in an Nx workspace, you have the option to automatically also create a Cypress-based e2e project alongside it. In our case, it is called `happynrwl-e2e`.
|
||||
|
||||
|
||||
_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
|
||||
|
||||
- make sure TypeScript runs smoothly with Cypress
|
||||
- set up linting for our e2e project (yes writing good quality test code is just as important)
|
||||
- spinning up our development server manually first that serves our React app such that we are able to load it in our Cypress tests environment
|
||||
|
||||
Just execute
|
||||
|
||||
```shell
|
||||
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!
|
||||
|
||||
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.
|
||||
|
||||
When you set up a new Nx workspace, it has Prettier already preconfigured. The best way is to integrate it with your code editor such that formatting is run on every save of a file. Alternatively, you can also run
|
||||
|
||||
```shell
|
||||
npx nx format
|
||||
```
|
||||
|
||||
## Nx Console — A dedicated VSCode extension for Nx
|
||||
|
||||
|
||||
|
||||
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)_._
|
||||
|
||||
Once you have the extension installed, you can click its icon in the VSCode Activity Bar (1) which reveals the Nx Console UI.
|
||||
|
||||
|
||||
_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.
|
||||
- (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:
|
||||
|
||||
|
||||
_Actions to generate a new React component with Nx Console_
|
||||
|
||||
Once you click the entry in the dropdown list, the Nx Console generate form opens, showing all the options the Nx generator supports:
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
As you can see this approach is also really powerful for exploring different commands and their corresponding options.
|
||||
|
||||
Besides running generators, Nx Console also adds [VSCode Code Lens](https://code.visualstudio.com/blogs/2017/02/12/code-lens-roundup) abilities to the configuration files that help you navigate more quickly across the workspace. This is particularly useful if you happen to add more [apps and libraries](/concepts/decisions/project-size) to the workspace at some point.
|
||||
|
||||
|
||||
_Nx Console Code Lens support to navigate easily among config files_
|
||||
|
||||
## Evergreen Workspace Setup
|
||||
|
||||
One of the advantages of using Nx over — say CRA or a custom starter template — is that your **Nx workspace is evergreen**. What do I mean by that: by now we all know how fast the frontend space is moving, and so are the corresponding devtools. Today you might be using [Rollup](https://rollupjs.org/) to build your libraries, tomorrow you use [swc](https://swc.rs/), [vite](https://vitejs.dev/) or [esbuild](https://esbuild.github.io/). Same with [Webpack](https://webpack.js.org/). Webpack 5 has been around for a while already, and still, a lot of projects are stuck at v4.
|
||||
|
||||
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](/reference/core-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
|
||||
```
|
||||
|
||||
Running this command, Nx
|
||||
|
||||
- analyzes the current packages
|
||||
- fetches the latest Nx packages and plugins (or whatever version was specified in the migration command)
|
||||
- creates a `migrations.json` file containing all migration scripts that need to be executed
|
||||
- updates the `package.json` to the new package versions
|
||||
|
||||
The `migrations.json` file can be inspected and potentially modified. Once it is ready, running the following command executes the migration:
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations=migrations.json
|
||||
```
|
||||
|
||||
These migrations not only update the `package.json` version. They also update corresponding configuration files and even source code by leveraging ASTs to query and manipulate files.
|
||||
|
||||
It is not even only about upgrading the frameworks such as React or Angular themselves, though. A common pain point is their integration with other tools, such as Jest, Storybook, ESLint etc. The Nx core team closely collaborates with these communities to make sure that a particular combination of versions works and is tested before migrating your workspace.
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=Ss6MfcXi0jE" /%}
|
||||
|
||||
## Common Questions
|
||||
|
||||
Here are some common questions developers have. Have some more? Feel free to ping me on Twitter ([@juristr](https://twitter.com/juristr)), the official Nx account ([@NxDevtools](https://twitter.com/nxdevtools)) or in the [Nx community Discord](https://go.nx.dev/community).
|
||||
|
||||
## Q: How can I customize how my project is built and served?
|
||||
|
||||
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:
|
||||
|
||||
```json5
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nrwl/web:webpack",
|
||||
...
|
||||
"options": {
|
||||
"compiler": "babel",
|
||||
"outputPath": "dist/apps/happynrwl",
|
||||
"index": "apps/happynrwl/src/index.html",
|
||||
"baseHref": "/",
|
||||
"main": "apps/happynrwl/src/main.tsx",
|
||||
"polyfills": "apps/happynrwl/src/polyfills.ts",
|
||||
"tsConfig": "apps/happynrwl/tsconfig.app.json",
|
||||
"assets": [
|
||||
"apps/happynrwl/src/favicon.ico",
|
||||
"apps/happynrwl/src/assets"
|
||||
],
|
||||
"styles": ["apps/happynrwl/src/styles.css"],
|
||||
"scripts": [],
|
||||
"webpackConfig": "@nrwl/react/plugins/webpack"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
...
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
```
|
||||
|
||||
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](/technologies/build-tools/webpack/api/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)
|
||||
|
||||
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)
|
||||
- [Create Nx plugins](/reference/core-api/plugin)
|
||||
- Control the entire workspace setup with [custom presets](/reference/core-api/plugin)
|
||||
|
||||
## 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.
|
||||
|
||||
If the available `options` are not enough, you can further customize the Webpack configuration using the `webpackConfig` property:
|
||||
|
||||
```json5
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nrwl/web:webpack",
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
"webpackConfig": "@nrwl/react/plugins/webpack"
|
||||
},
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
```
|
||||
|
||||
By default it links to `@nrwl/react/plugins/webpack`, but you can point to your own custom file in the Nx workspace. The file needs to look like the following:
|
||||
|
||||
```javascript {% fileName="apps/my-app/webpack.config.js" %}
|
||||
const fromNrwlReact = require('@nrwl/react/plugins/webpack');
|
||||
function getWebpackConfig(config) {
|
||||
// invoke the Nrwl specific config to preserve the original
|
||||
// behavior
|
||||
config = fromNrwlReact(config); // add your own customizations HERE return config;
|
||||
}
|
||||
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?
|
||||
|
||||
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](/concepts/decisions/project-size).
|
||||
|
||||
You can change this setup in `nx.json` by adjustijng the `workspaceLayout` property which has an `appsDir` and `libsDir` configuration.
|
||||
|
||||
```json5
|
||||
{
|
||||
...
|
||||
"workspaceLayout": {
|
||||
"appsDir": "apps",
|
||||
"libsDir": "libs"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Q: Is there a way to migrate from CRA?
|
||||
|
||||
Absolutely. Check out this guide on the Nx docs that has all the details (including a video walkthrough): [/recipes/adopting-nx/adding-to-existing-project](/recipes/adopting-nx/adding-to-existing-project)
|
||||
|
||||
## Q: This looks like a lot 🤯. Do I really need it from the get go?
|
||||
|
||||
Agreed. Luckily Nx is plugin based, so you can start with the bare minimum (see using [Nx without plugins](/getting-started/intro)) and then slowly add them as you need them. Similarly you can add Nx to an existing workspace (say a Yarn workspace) by using the [add-nx-to-monorepo](https://www.npmjs.com/package/add-nx-to-monorepo) package.
|
||||
|
||||
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?
|
||||
|
||||
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.
|
||||
|
||||
> _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?
|
||||
|
||||
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.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Congrats, you made it to the end of this article. By now you should have gotten a pretty good overview of what Nx is about, its strengths and how it can be useful in your next React project. If you still got questions or are hesitant to adopt Nx, [reach out to me on Twitter](https://twitter.com/juristr)!
|
||||
|
||||
Where to go from here?
|
||||
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [follow me on Twitter](https://twitter.com/juristr)
|
||||
- [follow Nx on Twitter](https://twitter.com/nxdevtools)
|
||||
- subscribe on the [Nx Youtube channel](https://youtube.com/c/Nrwl_io)
|
||||
- join more than 200+ developers and [take the free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038) on how to scale React development with Nx.
|
||||
@@ -1,271 +0,0 @@
|
||||
---
|
||||
title: 'What is new in Nx 13.10?'
|
||||
slug: 'what-is-new-in-nx-13-10'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-04-08/PJ3SRAadq0DxGiC9mCIWsA.avif'
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
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_
|
||||
|
||||
## Build and run Nx Plugins locally in your Nx workspace
|
||||
|
||||
Nx can be used in a wide range of scenarios, from small open source projects, startup environments to massive enterprise monorepos. This is thanks to its modular plugin based architecture consisting of
|
||||
|
||||
- Nx core which provides the fundamental features such as the dependency graph calculation, computation caching and task execution
|
||||
- `@nrwl/*` plugins which are those actively maintained by the Nx core team
|
||||
- [Community plugins](/community)
|
||||
|
||||
This illustration should give you a rough idea. obviously some of the plugins may be built on top of others, leveraging common functionality. An example is the [@nrwl/js](/technologies/typescript/introduction) plugin which not only can be used as a standalone plugin but also builds the basis for of many others by providing core JavaScript/TypeScript features.
|
||||
|
||||
|
||||
|
||||
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).
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/nx-plugin:plugin --name=workspace-extensions
|
||||
```
|
||||
|
||||
This creates a new library with a pre-configured setup to develop a Nx plugin. Similarly to other libraries you can now use those in your local Nx target configurations.
|
||||
|
||||
```json5
|
||||
{
|
||||
root: 'apps/demo',
|
||||
sourceRoot: 'apps/demo/src',
|
||||
projectType: 'application',
|
||||
targets: {
|
||||
mybuild: {
|
||||
executor: '@myorg/workspace-extensions:build',
|
||||
outputs: ['{options.outputPath}'],
|
||||
options: {
|
||||
outputPath: 'dist/apps/someoutput',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
```shell
|
||||
npx nx g @myorg/workspace-extensions:<generator-name>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Project Graph Visualization
|
||||
|
||||
We keep improving our project graph and make it more and more useful for visually exploring your Nx workspace. You can now click on an edge and list the files that cause it which can be extremely valuable during debugging.
|
||||
|
||||
|
||||
_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!
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
_Tagging Nx projects_
|
||||
|
||||
By assigning tags to your projects you can then configure which relationships among libraries and applications are allowed, and which are forbidden.
|
||||
|
||||
```json5
|
||||
{
|
||||
// ... more ESLint config here "@nrwl/nx/enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
// update depConstraints based on your tags
|
||||
"depConstraints": [
|
||||
{
|
||||
"sourceTag": "type:app",
|
||||
"onlyDependOnLibsWithTags": ["type:feature", "type:util"]
|
||||
},
|
||||
{
|
||||
"sourceTag": "type:feature",
|
||||
"onlyDependOnLibsWithTags": ["type:feature", "type:util"]
|
||||
},
|
||||
{
|
||||
"sourceTag": "type:util",
|
||||
"onlyDependOnLibsWithTags": ["type:util"]
|
||||
}
|
||||
]
|
||||
}
|
||||
] // ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
Read more about it in this article: [blog/mastering-the-project-boundaries-in-nx)
|
||||
|
||||
So far you have only been able to specify which tags a library is allowed to depend on using the `onlyDepndOnLibsWithTags` property. This made it cumbersome to define in some situations. Now you have a brand new property `notDependOnLibsWithTags`
|
||||
|
||||
```json5
|
||||
{
|
||||
// ... more ESLint config here "@nrwl/nx/enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
// update depConstraints based on your tags
|
||||
"depConstraints": [
|
||||
{
|
||||
"sourceTag": "type:util",
|
||||
"notDependOnLibsWithTags": ["type:feature"]
|
||||
}
|
||||
]
|
||||
}
|
||||
] // ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
||||
_Self circular dependency issue within a Nx based library_
|
||||
|
||||
Adjusting these circular self references is easy, but can be cumbersome to find the correct imports and time consuming if you have hundreds of libs that might be affected by this. In the latest version of Nx we shipped a fix implementation for these lint rules, such that you can now conveniently add `--fix` to auto-adjust the imports:
|
||||
|
||||
```shell
|
||||
npx nx lint tslib-c --fix
|
||||
```
|
||||
|
||||
This will analyze your imports, find the correct file and adjust them accordingly:
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
|
||||
_Lint error about relative import across library boundaries_
|
||||
|
||||
Such imports will also be adjusted by applying the `--fix` to your linting command:
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
## React Native gets Storybook support
|
||||
|
||||
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)
|
||||
|
||||
We are happy to announce that in addition to the before mentioned improvements, the React Native integration in Nx now also supports Storybook. Just use
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/react-native:storybook-configuration
|
||||
```
|
||||
|
||||
or use Nx Console to get some more help in generating the Storybook setup.
|
||||
|
||||
## Ability to show all prompts when creating a new Nx workspace
|
||||
|
||||
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 🙂
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace@next myorg --allPrompts
|
||||
```
|
||||
|
||||
Alternatively you can browse the [API docs on the Nx website](/reference/core-api/nx/documents/create-nx-workspace) to find out more.
|
||||
|
||||
## Deliver the best possible TypeScript experience with `@nrwl/js`
|
||||
|
||||
You might have noticed our new `@nrwl/js` package we released a couple of months ago.
|
||||
|
||||
[We have big plans with this one](https://github.com/nrwl/nx/discussions/9716), not only making it the foundation for many of our other packages that need TypeScript compilation and support, but also the goto package for the best possible TypeScript experience.
|
||||
|
||||
## Nx Console Improvements
|
||||
|
||||
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.
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
|
||||
_Nx Console dynamically reads Nx targets from your Nx workspace now_
|
||||
|
||||
## Prompts for Angular CLI users
|
||||
|
||||
Nx Console has out of the box support to also be used on plain Angular CLI projects. With the latest version of Nx Console, Angular CLI users will receive a prompt about decorating their CLI setup with Nx to benefit from the improved performance brought by computation caching and Nx Cloud.
|
||||
|
||||
Learn more in this short video walkthrough:
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=vRj9SNVYKrE" /%}
|
||||
|
||||
## 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/<package-name>` such as [/technologies/react/api](/technologies/react/api) 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:
|
||||
|
||||
{% tweet url="https://x.com/bencabanes/status/1509641445086535687" /%}
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Exciting?
|
||||
|
||||
Then wait for Nx v14 to land 😉.
|
||||
|
||||
- Check out the [release changelog](https://github.com/nrwl/nx/releases/tag/13.10.0)
|
||||
- Follow 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!
|
||||
@@ -1,310 +0,0 @@
|
||||
---
|
||||
title: 'Use Storybook with Nx React Native'
|
||||
slug: 'use-storybook-with-nx-react-native'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2022-04-25/64nWVfUBihlYTLGWOvnc1g.avif'
|
||||
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.
|
||||
|
||||
Example Repo: [xiongemi/studio-ghibli-search-engine](https://github.com/xiongemi/studio-ghibli-search-engine)
|
||||
|
||||
Storybook:
|
||||
|
||||
|
||||
_Storybook View (left: Android, right: iOS)_
|
||||
|
||||
## Setup
|
||||
|
||||
First, you need to add `@nrwl/storybook` to your existing Nx React Native workspace:
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install @nrwl/storybook --save-dev
|
||||
|
||||
# yarn
|
||||
yarn add --dev @nrwl/storybook
|
||||
```
|
||||
|
||||
Then you need to generate the storybook configuration for your app or lib:
|
||||
|
||||
```shell
|
||||
nx g @nrwl/react-native:storybook-configuration **<your app or lib>**
|
||||
```
|
||||
|
||||
As shown in the example below, 3 folders got generated:
|
||||
|
||||
- `.storybook` at workspace root
|
||||
- `.storybook` in your app or lib
|
||||
- `storybook` in your app (Note: this folder is for creating the Storybook UI component. It will only be created for the app, you will not see this for lib.)
|
||||
|
||||
|
||||
|
||||
If you choose to automatically generate `*.stories` file, you should see the default story looks like below:
|
||||
|
||||
```tsx {% fileName="loading.stories.tsx" %}
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import React from 'react';
|
||||
|
||||
import { Loading } from './loading';
|
||||
|
||||
const props = {};
|
||||
|
||||
storiesOf('Loading', module).add('Primary', () => <Loading {...props} />);
|
||||
```
|
||||
|
||||
To gather the stories you created, run the command:
|
||||
|
||||
```shell
|
||||
nx storybook **<your app or lib>**
|
||||
```
|
||||
|
||||
You should see in the terminal saying:
|
||||
|
||||
```shell
|
||||
Writing to <your workspace>/.storybook/story-loader.js
|
||||
```
|
||||
|
||||
In your `<your workspace>/.storybook/story-loader.js`, it should list your stories created under your app or lib similar to the below example:
|
||||
|
||||
```javascript {% fileName="story-loader.js" %}
|
||||
// Auto-generated file created by react-native-storybook-loader
|
||||
// Do not edit.
|
||||
//
|
||||
// https://github.com/elderfo/react-native-storybook-loader.git
|
||||
|
||||
function loadStories() {
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/App.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/film/film.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/results/film-list-item/film-list-item.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/results/people-list-item/people-list-item.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/results/result-list-item/result-list-item.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/search/search.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/shared/film-card/film-card.stories');
|
||||
require('../apps/studio-ghibli-search-engine-mobile/src/app/shared/loading/loading.stories');
|
||||
}
|
||||
|
||||
const stories = [
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/App.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/film/film.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/results/film-list-item/film-list-item.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/results/people-list-item/people-list-item.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/results/result-list-item/result-list-item.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/search/search.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/shared/film-card/film-card.stories',
|
||||
'../apps/studio-ghibli-search-engine-mobile/src/app/shared/loading/loading.stories',
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
loadStories,
|
||||
stories,
|
||||
};
|
||||
```
|
||||
|
||||
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';
|
||||
```
|
||||
|
||||
### View Storybook for App
|
||||
|
||||
To view the storybook on the simulator/emulator/device, start the app like you usually do:
|
||||
|
||||
```shell
|
||||
# iOS
|
||||
nx run-ios <your app>
|
||||
|
||||
# Android
|
||||
nx run-android <your app>
|
||||
```
|
||||
|
||||
In your simulator/emulator/device, open the Debug Menu by entering `d` in terminal. You should see the menu option Toggle Storybook in the Debug Menu:
|
||||
|
||||
|
||||
_Screenshot of Debug menu (left: Android, right: iOS)_
|
||||
|
||||
When switching on the toggle, you should see the list of your component stories:
|
||||
|
||||
|
||||
_Storybook View (left: Android, right: iOS)_
|
||||
|
||||
### View Storybook for Lib
|
||||
|
||||
Note: the storybook can only be viewed inside an app. To view the storybook for lib in the workspace, you need to first set up the storybook for an app in the workspace.
|
||||
|
||||
Then run the command:
|
||||
|
||||
```shell
|
||||
nx storybook **<your lib>**
|
||||
```
|
||||
|
||||
This should update the `.storybook/story-loader.js` with stories in your lib.
|
||||
|
||||
Then just run the command to start your app, you should see the storybook for your lib.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### 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_
|
||||
|
||||
The easiest way is just to mock this library and create a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) for it:
|
||||
|
||||
```typescript {% fileName="src/storybook/mocks/navigation.tsx" %}
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import React from 'react';
|
||||
|
||||
export const NavigationDecorator = (story) => {
|
||||
return (
|
||||
<NavigationContainer independent={true}>{story()}</NavigationContainer>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
_Mock Navigation Decorator_
|
||||
|
||||
Then in your story, you just need to add the above `NavigationDecorator`:
|
||||
|
||||
```tsx
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { mockFilmEntity } from '@studio-ghibli-search-engine/models';
|
||||
import React from 'react';
|
||||
|
||||
import { NavigationDecorator } from '../../../storybook/mocks/navigation';
|
||||
|
||||
import FilmListItem from './film-list-item';
|
||||
|
||||
storiesOf('FilmListItem', module)
|
||||
.addDecorator(NavigationDecorator)
|
||||
.add('Primary', () => <FilmListItem film={mockFilmEntity} />);
|
||||
```
|
||||
|
||||
_Add NavigationDecoration to the story_
|
||||
|
||||
Now, this error should go away and you should see your component in your storybook.
|
||||
|
||||
If your component is using the `useRoute` hook and expecting certain routing parameters, then you need to customize the mock `NavigationDecorator` for your component. For example, below is a component that is expecting an id from the route parameters:
|
||||
|
||||
```typescript
|
||||
const route = useRoute<RouteProp<{ params: { id: string } }>>();
|
||||
const id = route.params?.id;
|
||||
```
|
||||
|
||||
The mock `NavigationDecorator` will become:
|
||||
|
||||
```tsx
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import React from 'react';
|
||||
|
||||
const NavigationDecorator = (story) => {
|
||||
const Stack = createNativeStackNavigator();
|
||||
return (
|
||||
<NavigationContainer independent={true}>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="MyStorybookScreen"
|
||||
component={story}
|
||||
initialParams={{ id: 123 }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 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"_
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
# npm
|
||||
npm install redux-mock-store @types/redux-mock-store --save-dev# yarn
|
||||
yarn add redux-mock-store @types/redux-mock-store --dev
|
||||
```
|
||||
|
||||
Similarly, like how you mock up the navigation, you need to mock up the store. The below example mocks the store with the initial root state:
|
||||
|
||||
```typescript {% fileName="src/storybook/mocks/store.tsx" %}
|
||||
import {
|
||||
initialRootState,
|
||||
RootState,
|
||||
} from '@studio-ghibli-search-engine/store';
|
||||
import React from 'react';
|
||||
import { Provider as StoreProvider } from 'react-redux';
|
||||
import configureStore from 'redux-mock-store';
|
||||
|
||||
export const StoreDecorator = (story) => {
|
||||
const mockStore = configureStore<RootState>([]);
|
||||
const store = mockStore(initialRootState);
|
||||
return <StoreProvider store={store}>{story()}</StoreProvider>;
|
||||
};
|
||||
```
|
||||
|
||||
You can add this store decorator to your story:
|
||||
|
||||
```tsx {% fileName="people-list-item.stories.tsx" %}
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { mockPeopleEntity } from '@studio-ghibli-search-engine/models';
|
||||
import React from 'react';
|
||||
|
||||
import { NavigationDecorator, StoreDecorator } from '../../../storybook/mocks';
|
||||
|
||||
import PeopleListItem from './people-list-item';
|
||||
|
||||
storiesOf('PeopleListItem', module)
|
||||
.addDecorator(StoreDecorator)
|
||||
.addDecorator(NavigationDecorator)
|
||||
.add('Primary', () => <PeopleListItem people={mockPeopleEntity} />);
|
||||
```
|
||||
|
||||
### Error: Actions must be plain objects
|
||||
|
||||
If you use an async action (for example, an action created using `createAsyncThunk` from `@reduxjs/toolkit`), you would likely run into the below error: Actions must be plain objects.
|
||||
|
||||
|
||||
_Render Error for Actions must be plain objects_
|
||||
|
||||
Now to resolve this, add thunk to mock store middleware:
|
||||
|
||||
```tsx {% fileName="store.tsx" %}
|
||||
import {
|
||||
initialRootState,
|
||||
RootState,
|
||||
} from '@studio-ghibli-search-engine/store';
|
||||
import React from 'react';
|
||||
import { Provider as StoreProvider } from 'react-redux';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
|
||||
export const StoreDecorator = (story) => {
|
||||
const mockStore = configureStore<RootState>([thunk]);
|
||||
const store = mockStore({ ...initialRootState });
|
||||
return <StoreProvider store={store}>{story()}</StoreProvider>;
|
||||
};
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here are how to use Storybook with Nx React Native and some common errors you may run into. With Nx React Native, you can quickly view Storybook with a toggle option in Debug Menu. It allows developers to interact and test with components during development.
|
||||
|
||||
### Where to go from here?
|
||||
|
||||
- [Step by Step Guide on Creating a Monorepo for React Native Apps using Nx](/blog/step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx)
|
||||
- [Share code between React Web & React Native Mobile with Nx](/blog/share-code-between-react-web-react-native-mobile-with-nx)
|
||||
- [join the Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [follow Nx on Twitter](https://twitter.com/nxdevtools)
|
||||
- subscribe to the [Nx Youtube channel](https://youtube.com/c/Nrwl_io)
|
||||
@@ -1,308 +0,0 @@
|
||||
---
|
||||
title: 'Nx v14 is out — Here is all you need to know!'
|
||||
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.avif'
|
||||
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**.
|
||||
|
||||
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.
|
||||
|
||||
> _Nx is open source, so feel free to browse the_ [_repo_](https://github.com/nrwl/nx) _and_ [_changelog_](https://github.com/nrwl/nx/releases/tag/14.0.0) _by yourself 🙂_
|
||||
|
||||
**💡Did you have a chance to watch Nx Conf Lite 2022 last Friday?** Many of the new features have been discussed there, and more. You can watch the [entire stream on Youtube](https://youtu.be/iIZOfV0GFmU). All the single talk videos will be released over the next weeks too, so make sure you subscribe and switch on notifications 🙂: [https://youtube.com/nrwl_io](https://youtube.com/nrwl_io)
|
||||
|
||||
## 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!
|
||||
|
||||
{% tweet url="https://x.com/victorsavkin/status/1504465520640278533" /%}
|
||||
|
||||
Nx also outgrew Lerna in February in weekly downloads. Up until that point, [Lerna](https://lerna.js.org/) was considered the go-to choice when it comes to JS-based monorepos. But just recently, they made it [even more evident](https://github.com/lerna/lerna/pull/3092) that Lerna has been and is [largely unmaintained](https://github.com/lerna/lerna/issues/2703).
|
||||
|
||||
|
||||
|
||||
We saw that coming and made it easy for people to migrate to Nx.
|
||||
|
||||
```shell
|
||||
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/)
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## Nx Console reaches 1 million installs
|
||||
|
||||
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
|
||||
|
||||
## Making Nx even faster!
|
||||
|
||||
Being as fast as possible is a key design principle in Nx. Back in December we [tweeted about our speed benchmarks](https://twitter.com/victorsavkin/status/1471582667212738562?s=20&t=fZQ82vUXMztNXFRMmuYQTw) and we keep running them against our releases to see how we compare.
|
||||
|
||||
Turns out the latest Nx v14 release is considerably faster than Nx v13:
|
||||
|
||||
- Nx v13: 1.587 seconds
|
||||
- Nx v14: 0.259 seconds
|
||||
|
||||
You can check and run the benchmarks by yourself: [https://github.com/vsavkin/large-monorepo](https://github.com/vsavkin/large-monorepo)
|
||||
|
||||
How can Nx be so fast? One thing we did introduce after v13 and [recently enabled by default](/blog/what-is-new-in-nx-13-10) is the **Nx Daemon**. There is a fixed amount of computation that needs to happen in every workspace and which increases as the workspace grows. In order to still keep operations fast, we can now use the Nx Daemon to precompute a lot of the operations in the background. Then whenever some Nx operation is triggered, they can directly benefit from that.
|
||||
|
||||
> **_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.
|
||||
|
||||
|
||||
|
||||
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._
|
||||
|
||||
Also see this example repository with some more information: [https://github.com/vsavkin/interstellar](https://github.com/vsavkin/interstellar)
|
||||
|
||||
## Simplifying Nx
|
||||
|
||||
Nx follows a modular plugin architecture. There is the core part of Nx which has the main logic around managing the project graph, computation caching, hashing and more. On top of that we have a series of Nx provided plugins for some of the most common frameworks and libraries out there, like [TypeScript/Javascript](/technologies/typescript/introduction), [Angular](/technologies/angular/introduction), [React](/technologies/react/introduction) & [React Native](/technologies/react/react-native/introduction), [Next.js](/technologies/react/next/introduction), [Nest.js](/technologies/node/nest/introduction), [Node](/technologies/node/introduction) and many more, not to forget about [all the community plugins](/community). We also have a [labs project section](https://github.com/nrwl/nx-labs) which is our incubator for potentially new, natively supported Nx plugins.
|
||||
|
||||
This modular structure allows you to just use [Nx core without plugins](/getting-started/intro). An ideal approach if you want to add Nx to an [existing Lerna/Yarn/NPM/PNPM workspace](/recipes/adopting-nx/adding-to-monorepo). With v14 we made it even simpler s.t. now you only have a single `nx` package in your dependencies with the core setup.
|
||||
|
||||
From there you can go ahead and add new plugins as you need them, thus gradually enhancing the capabilities of your Nx workspace.
|
||||
|
||||
Nx is also able now to directly pick up your `package.json` scripts which are common in NPM/Yarn workspaces. Read more here: [/reference/project-configuration](/reference/project-configuration)
|
||||
|
||||
## 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
|
||||
|
||||
_(here executed by skipping the cache to show some progress running_ 🙂*)*
|
||||
|
||||
|
||||
|
||||
We now even filter out the build of dependent projects. Say you build the `react` project in your workspace which depends on 11 other projects. Nx needs to first incrementally build those 11 dependent projects, which it does now in a very subtle way by just reporting the overall progress at the top of the terminal output, while the main `react` project build output is printed just as normal.
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[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:
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/nx-plugin:plugin --name=workspace-extensions
|
||||
```
|
||||
|
||||
Now normally you would develop it there, and then publish it to npm s.t. others can install it into their Nx workspaces. Since one of our recent versions of Nx, we now also allow you to directly use them in the same Nx workspace, without the need to pre-compile or publish your plugin.
|
||||
|
||||
```json
|
||||
{
|
||||
"root": "apps/demo",
|
||||
"sourceRoot": "apps/demo/src",
|
||||
"projectType": "application",
|
||||
"targets": {
|
||||
"mybuild": {
|
||||
"executor": "@myorg/workspace-extensions:build",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/apps/someoutput"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This can be a game changer for automating your Nx workspace.
|
||||
|
||||
## Automating CI Setup
|
||||
|
||||
Ever struggled with setting up CI? Especially in a large monorepo? We got your back now, with the new `--ci` generator that we introduced in Nx v14.
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/workspace:ci-workflow --ci=github
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
Once you click them, you get a nicely formatted and structured page within Nx Cloud.
|
||||
|
||||
|
||||
|
||||
Until now, you had to have a task that is being executed through Nx Cloud. But what about those workspace utility scripts, like checking the commit format etc. You can now use `nx-cloud record` for those, like
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
We added dedicated generators to create a new module federation setup for Angular and React:
|
||||
|
||||
```shell
|
||||
# React
|
||||
nx g @nrwl/react:host shell --remotes=shop,cart,about
|
||||
|
||||
#a Angular
|
||||
nx g @nrwl/angular:host shell --remotes=shop,cart,about
|
||||
```
|
||||
|
||||
By specifying the `implicitDependencies` in Nx ([see docs](/reference/project-configuration)) Nx knows what the relation between the various apps is, even though there are not direct imports
|
||||
|
||||
|
||||
|
||||
Combining this with the power of Nx Cloud distributed caching, you can now serve your shell project
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
```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.
|
||||
|
||||
We recommend this approach if you want to speed up local serve and build times, but you still deploy the application as a whole.
|
||||
|
||||
Read more in our docs: [/technologies/module-federation/concepts/faster-builds-with-module-federation](/technologies/module-federation/concepts/faster-builds-with-module-federation)
|
||||
|
||||
## Micro Frontend Architecture with Nx
|
||||
|
||||
As mentioned in the previous section, Nx v14 comes with out-of-the-box for Webpack Module Federation. The Micro Frontend architecture builds on top of that and adds the ability for independent deployability. While Module Federation enables faster builds by vertically slicing your application into smaller ones, the MFE architecture layers _independent deployments_
|
||||
on top of federation. Teams should only choose MFEs if they want to deploy their host and remotes on different cadences.
|
||||
|
||||
Read more in our docs: [/technologies/module-federation/concepts/micro-frontend-architecture](/technologies/module-federation/concepts/micro-frontend-architecture)
|
||||
|
||||
## Dark mode for Project Graph as well as path tracking
|
||||
|
||||
You asked for it, the community responded. [Luís Carvalho](https://github.com/Lcarv20) - a first time contributor - worked together with Nx core team members Philip and Ben to deliver dark mode for the project graph visualization!!
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
Then click the target node you're interested in and hit "End".
|
||||
|
||||
|
||||
|
||||
The project graph now renders the path between those nodes.
|
||||
|
||||
|
||||
|
||||
And by clicking on the edges you can even get a more detailed output of why the connection exists in the first place 🤯
|
||||
|
||||
|
||||
|
||||
Oh wait, you didn't want the shortest path? There's a button for showing all possible paths too 😉
|
||||
|
||||
|
||||
|
||||
## JavaScript & TypeScript library support
|
||||
|
||||
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.
|
||||
|
||||
Read all the details in our docs: [/getting-started/intro](/getting-started/intro)
|
||||
|
||||
## React
|
||||
|
||||
Nx v14 ships with React 18 support for React DOM and React Native. The latter has seen some drastic improvements since Nx v13, adding [guides on how to create a monorepo for React Native](/blog/step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx) apps with Nx as well as how to [share code between a React Web and React Native app](/blog/share-code-between-react-web-react-native-mobile-with-nx). We also added Storybook support to React Native. Read all about that in [our recent blog post](/blog/use-storybook-with-nx-react-native).
|
||||
|
||||
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: [/technologies/react/api](/technologies/react/api)
|
||||
|
||||
## Angular
|
||||
|
||||
There have been a lot of highlights for the Nx Angular plugin since v13. Here are some:
|
||||
|
||||
- Support and migrations for Angular 13 (Angular v14 coming soon. We will release that as a minor upgrade in Nx once the Angular team releases v14)
|
||||
- Tailwind CSS support (generators, added support to library executors). Read [our blog detailed post](/blog/set-up-tailwind-css-with-angular-in-an-nx-workspace).
|
||||
- Single Component Application Modules (SCAM) generators for components, directives and pipes ([see our docs](/technologies/angular/api))
|
||||
- Improved Angular CLI to Nx migration support. We invested quite some time refactoring our current migration support from the Angular CLI which not only will allow us to implement more migration scenarios in the future but it also provides better error messages and hints during the migration process. This also allowed us to add support for multi-project Angular CLI workspaces which can now be seamlessly migrated. Multi-application Angular CLI workspace support will be added soon.
|
||||
|
||||
Finally, similar to React also Angular gets built-in support for Webpack Module federation and hence also Microfrontends within Nx. See the sections about Module Federation and Microservices for more info and links to the docs.
|
||||
|
||||
## Improved docs
|
||||
|
||||
Docs are hard! But we keep investing and a lot of work has gone into making docs more organized and even more interactive.
|
||||
|
||||
{% tweet url="https://twitter.com/bencabanes/status/1509641445086535687" /%}
|
||||
|
||||
## 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)
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Exciting?
|
||||
|
||||
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
|
||||
- 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
|
||||
|
||||
- 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!
|
||||
- Subscribing to [our newsletter](https://go.nx.dev/nx-newsletter)!
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
title: 'Lerna is dead — Long Live Lerna'
|
||||
slug: 'lerna-is-dead-long-live-lerna'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-05-11/gtsrJ-tMDZf9bvDLVSjQ.avif'
|
||||
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:**
|
||||
|
||||
> _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?
|
||||
|
||||
We (Nrwl) are the company behind Nx ([GitHub](https://github.com/nrwl/nx)) and we have been founded by two ex-Googlers and Angular core team members [Jeff Cross](https://twitter.com/jeffbcross) and [Victor Savkin](https://twitter.com/victorsavkin). Experiencing a large-scale monorepo in action at Google, gave them a lot of insights into the advantages and productivity gains for software teams as well as the features and tooling support that is required to make monorepos work, especially at a large scale. When they left Google, they decided to bring such a tool to the masses, but with a clear goal of
|
||||
|
||||
- building it in the open as an open-source product and
|
||||
- making it approachable and easy to use by focusing on great DX
|
||||
|
||||
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.
|
||||
|
||||
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?
|
||||
|
||||
_(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.
|
||||
- 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.
|
||||
|
||||
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.
|
||||
|
||||
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!
|
||||
|
||||
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)
|
||||
- Subscribing to [our newsletter](https://go.nx.dev/nx-newsletter)!
|
||||
|
||||
✌️
|
||||
@@ -1,102 +0,0 @@
|
||||
---
|
||||
title: 'How Lerna just got 10x faster!'
|
||||
slug: 'lerna-used-to-walk-now-it-can-fly'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-05-25/WPGHapKqT3IguWjeN5UgWg.avif'
|
||||
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._
|
||||
|
||||
> _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.
|
||||
|
||||
And it got fast, like really fast!!
|
||||
|
||||
## Want the video walkthrough of Lerna 5?
|
||||
|
||||
Here you go
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=WgO5iG57jeQ" /%}
|
||||
|
||||
## How fast is it?
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
**Lerna+Nx is 5.3 times faster** than Turborepo 🚀.
|
||||
|
||||
As always, you can reproduce the benchmark by yourself by going to the [benchmark repo](https://github.com/vsavkin/large-monorepo). The readme includes all the details on how to run it on your own machine. We verified it in detail, but if for some reason we got something wrong, please reach out!
|
||||
|
||||
## What do I need to do to upgrade?
|
||||
|
||||
First of all, upgrade to Lerna v5.1. That release comes with the ability to delegate task running to Nx. Next you need to add Nx as a dependency: `npm i nx --save-dev`
|
||||
|
||||
Finally, add the following to your `lerna.json`.
|
||||
|
||||
```json5 {% fileName="lerna.json" %}
|
||||
{
|
||||
...
|
||||
"useNx": true
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```json5 {% fileName="nx.json" %}
|
||||
{
|
||||
extends: 'nx/presets/npm.json',
|
||||
tasksRunnerOptions: {
|
||||
default: {
|
||||
runner: 'nx/tasks-runners/default',
|
||||
options: {
|
||||
cacheableOperations: ['build'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Note that `useNx` is opt-in and set to `false` by default. Also, if someone is worried about the license, Nx has been open source from the very beginning, using the MIT license.
|
||||
|
||||
## How does this work under the hood?
|
||||
|
||||
So how does this work on a technical level. So far Lerna (`lerna run` to be more specific) has been delegating the task scheduling to `p-map` or `p-queue`. Meanwhile though, the industry has advanced and tools like Nx are much more powerful and efficient in their task orchestration and in addition also support caching.
|
||||
|
||||
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?
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
**Distributed caching** — Right now when you enable `useNx` in your existing Lerna repo, you will get local caching, meaning the cache sits in a local folder on your machine. You get much more value out of it when you start distributing and sharing it with your teammates but especially in CI. This can be done by adding Nx Cloud, which comes with a no-credit card, 500 hours free / month offer which is more than what most workspaces need. Adding that is easy and can be done by adding `@nrwl/nx-cloud` to your root-level `package.json` and then by running:
|
||||
|
||||
```shell
|
||||
npx nx connect-to-nx-cloud
|
||||
```
|
||||
|
||||
**Distributed task execution** — Distribution of the cache is one thing, but the real speed improvements come from also [distributing the task execution](/ci/features/distribute-task-execution) to speed up your CI. Having the Nx project graph and as well as the cache and historical data about previous runs, Nx Cloud DTE is able to maximize the CI agent utilization by evenly distributing tasks based on their (historical) duration as well as based on their topological order. In addition, the DTE process makes sure to properly move cached assets between the agents. Setting up DTE is straightforward, read more on our [Nx Cloud docs](/ci/features/distribute-task-execution). Hint: we also have a CI generator in Nx (you need the `@nrwl/workspace` package) that allows you to generate your CI setup using a single command: `npx nx generate @nrwl/workspace:ci-workflow --ci=github`
|
||||
|
||||
**Lerna roadmap** — We also just published a roadmap of the next steps for the Lerna repository. Check it out here: [https://github.com/lerna/lerna/discussions/3140](https://github.com/lerna/lerna/discussions/3140)
|
||||
|
||||
## 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.
|
||||
|
||||
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 😃.
|
||||
@@ -1,163 +0,0 @@
|
||||
---
|
||||
title: 'Nx 14.2 — Angular v14, Storybook update, lightweight Nx and more!'
|
||||
slug: 'nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-06-09/uScdSDGP4NgCKFrPdznbhw.avif'
|
||||
tags: [nx, release]
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
## TypeScript 4.7 and Prettier 2.6
|
||||
|
||||
With this release we also automatically update:
|
||||
|
||||
- TypeScript to version v4.7 ([announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/))
|
||||
- Prettier to v2.6 ([announcement](https://prettier.io/blog/2022/03/16/2.6.0.html))
|
||||
|
||||
## Storybook 6.5
|
||||
|
||||
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:
|
||||
|
||||
```json
|
||||
"storybook": {
|
||||
"executor": "@storybook/angular:start-storybook",
|
||||
...
|
||||
},
|
||||
```
|
||||
|
||||
This avoids any potential downsides of options being different or not available and lowers the maintenance burden on our side going forward.
|
||||
|
||||
Storybook 6.5 also comes with support for using TS based Storybook configurations files, such as `main.ts` , `preview.ts` etc. We added support for that to our Storybook configuration generators.
|
||||
|
||||
For all the other cool Storybook features, please refer to their release [announcement](https://storybook.js.org/releases/6.5).
|
||||
|
||||
## Easy migration from Angular CLI to Nx
|
||||
|
||||
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
|
||||
- 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.
|
||||
|
||||
All you need to do is to run the following command on your existing Angular CLI setup.
|
||||
|
||||
```
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
npx nx init
|
||||
```
|
||||
|
||||
## Run Nx graph on any monorepo!
|
||||
|
||||
Speaking about lightweight Nx. With Nx v14.2.3 you can now just run
|
||||
|
||||
```shell
|
||||
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!
|
||||
|
||||
{% 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.
|
||||
|
||||
The result: Nx itself got faster as well 😃.
|
||||
|
||||
Here's the result of running our benchmark using the latest version of Nx 14.2:
|
||||
|
||||
```plaintext
|
||||
* average lage time is: 10203.6
|
||||
* average turbo time is: 1532.3
|
||||
* average lerna (powered by nx) time is: 272.2
|
||||
* average nx time is: 194.8
|
||||
* nx is 52.379876796714576x faster than lage
|
||||
* nx is 7.866016427104722x faster than turbo
|
||||
* nx is 1.3973305954825461x faster than lerna (powered by nx)
|
||||
```
|
||||
|
||||
(as always, feel free to [reproduce it here](https://github.com/vsavkin/large-monorepo))
|
||||
|
||||
## Dedicated Linting support for Nx Plugins
|
||||
|
||||
Only the possibility of being able to tailor and customize the processes and behavior of your monorepo tooling to your own needs, makes working with it pleasant and allows you to get most out of it. Whether it is to customize the code generation aspect to your company coding styleguide and best practices, to automate the setup of new projects or even add support for languages such as Go, .Net or Flutter. [Nx Plugins](/community) enable such support and really help you make Nx work in the best possible way for your current scenario.
|
||||
|
||||
Nx plugin support has been around for a while. Just have a look at our [Nx community plugins page](/community). And we keep improving it. We added support for [Nx Plugin presets](https://www.youtube.com/watch?v=yGUrF0-uqaU) and [lately also the ability for local plugins](/blog/nx-v14-is-out-here-is-all-you-need-to-know). In this release, we add proper **linting support for Nx Plugin development**.
|
||||
|
||||
Ever happened to you that you mistyped the implementation file in your `generators.json` configuration file of your plugin? Well guess what, now the linting process would warn you about:
|
||||
|
||||
|
||||
|
||||
When you generate a new Nx plugin, you should now have a `@nrwl/nx/nx-plugin-checks` configuration in your `.eslintrc.json` file.
|
||||
|
||||
```json
|
||||
{
|
||||
"files": ["./package.json", "./generators.json", "./executors.json"],
|
||||
"parser": "jsonc-eslint-parser",
|
||||
"rules": {
|
||||
"@nrwl/nx/nx-plugin-checks": "error"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you have an existing plugin, you can run the following generator to add the new lint rules:
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/nx-plugin:plugin-lint-checks --projectName=awesomeplugin
|
||||
```
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
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!
|
||||
- Subscribing to [our newsletter](https://go.nx.dev/nx-newsletter)!
|
||||
-200
@@ -1,200 +0,0 @@
|
||||
---
|
||||
title: 'Nx 14.4 — Inputs, optional npm scope, project graph cache directory and more!'
|
||||
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.avif'
|
||||
tags: [nx, release]
|
||||
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.
|
||||
|
||||
## targetDependencies -> targetDefaults
|
||||
|
||||
To get things started, `targetDependencies` got renamed to `targetDefaults`. We originally named them `targetDependencies` because you were able to define dependencies among project targets (e.g. to run the `build` target of dependent projects). See the next section for some more info about that.
|
||||
|
||||
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._
|
||||
|
||||
## 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`.
|
||||
|
||||
These target defaults can be defined
|
||||
|
||||
- globally at the `nx.json` level for all the projects in the workspace
|
||||
- per project level in the `project.json`/`package.json` depending whether you use the [project.json config option](/reference/project-configuration) or [package.json](/reference/project-configuration)
|
||||
|
||||
You can still use the same notation as you did until now:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": [
|
||||
{
|
||||
"target": "build",
|
||||
"projects": "dependencies"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
With this release we introduce another, much more concise and elegant way of expressing the same:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"]
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Similarly, if you don't specify the `^` it would be the same as writing the following:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": [
|
||||
{
|
||||
"target": "prebuild",
|
||||
"projects": "self"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
In that case target `prebuild` on the project itself is invoked before running its `build` target.
|
||||
|
||||
## Inputs, Named Inputs, ENV and runtime variables
|
||||
|
||||
In order to improve cache hits we added the possibility to define `inputs`. For example on the `build` target, you could define the following input glob pattern to avoid cache invalidation when only spec files got changed.
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["!{projectRoot}/**/*.spec.ts"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can have as many inputs as you like. Also, in order to avoid ambiguity when specifying the path, you need to use either `{projectRoot}` or `{workspaceRoot}` in the glob pattern.
|
||||
|
||||
Since you might want to **reuse certain patterns across multiple targets**, we also introduced `namedInputs`, which allows you to define a set of patterns that can then be referenced in the various `targetDefaults`:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"namedInputs": {
|
||||
"prodFiles": ["!{projectRoot}/**/*.spec.ts"]
|
||||
},
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["prodFiles", "^prodFiles"]
|
||||
},
|
||||
"publish": {
|
||||
"inputs": ["prodFiles", "^prodFiles"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note, by also adding `^` in front of the named input pattern, it also gets applied to all dependent projects, just like with the `dependsOn` definition.
|
||||
|
||||
**Inputs can not only just be file globs, but also runtime or environment variables**. This makes the `inputs` even more powerful and helps improve cache hits. In the following example, the environment variable "SELECTED_CLI", as well as the runtime output of running `node -v` would be included in the computation of the hash used for storing the cached result.
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"e2e": {
|
||||
"inputs": [
|
||||
{
|
||||
"env": "SELECTED_CLI"
|
||||
},
|
||||
{
|
||||
"runtime": "node -v"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> _Note that `targetDefaults` is just a way to specify project-specific settings in a central place within the `nx.json`. All of these can directly also be added to the `package.json` or `project.json` (depending on which approach you use for configuring your projects)._
|
||||
|
||||
Check out the following video which goes into some of the details on the example of a [Lerna](https://lerna.js.org/) monorepo that uses the new Nx inputs configuration.
|
||||
|
||||
{% youtube src="https://youtu.be/u91YHPwddEM" /%}
|
||||
|
||||
## Optional npmScope
|
||||
|
||||
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" %}
|
||||
{
|
||||
"npmScope": "myorg",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Although most of the time you might want to use one, it is not mandatory any more. This contributes to our mission of simplifying Nx and making it more flexible.
|
||||
|
||||
## Speeding up workspace config computation
|
||||
|
||||
Project configuration calculations can take up quite some time in large workspaces. Starting with v14.4 we offloaded that part to the [Nx Daemon](/concepts/nx-daemon), optimizing the overall command execution time in particular for large workspaces.
|
||||
|
||||
## New NX_PROJECT_GRAPH_CACHE_DIRECTORY
|
||||
|
||||
When using shared volumes on CI, different consumers of the cache can write a different project graph to the cache, thus overwriting one that may be in use by other consumers. Up until now, there was no way to specify a different cache directory just for the project graph.
|
||||
|
||||
With this release, we introduce a new `NX_PROJECT_GRAPH_CACHE_DIRECTORY` environment variable to dictate where Nx (and the Nx Daemon) should store the project graph cache.
|
||||
|
||||
## Angular updates
|
||||
|
||||
In Nx v14.2 we [also shipped the Angular v14 migrations](/blog/nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more) which went smoothly. We keep improving our support. In this release in particular we
|
||||
|
||||
- added support to generate Storybook stories also for Angular standalone components
|
||||
- upgraded `@angular-eslint/*` to version 14
|
||||
- added support for `ngrx` version 14
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
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!
|
||||
- Subscribing to [our newsletter](https://go.nx.dev/nx-newsletter)!
|
||||
-757
@@ -1,757 +0,0 @@
|
||||
---
|
||||
title: 'Setup a Monorepo with PNPM workspaces and speed it up with Nx!'
|
||||
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.avif'
|
||||
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.
|
||||
|
||||
{% callout type="warning" title="Updated video!" %}
|
||||
|
||||
We made a lot of improvements since we last wrote this article. Here's our **updated content**:
|
||||
|
||||
- [the full all-in-one video on Youtube](https://youtu.be/zX-1tpqUG5c)
|
||||
- [our free course: From PNPM Workspaces to Distributed CI](/courses/pnpm-nx-next)
|
||||
|
||||
{% /callout %}
|
||||
|
||||
**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.
|
||||
|
||||
**Prefer a video walkthrough?**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=ngdoUQBvAjo" /%}
|
||||
|
||||
### Table of Contents
|
||||
|
||||
· [Initialize a new PNPM workspace](#initialize-a-new-pnpm-workspace)
|
||||
· [Setting up the Monorepo structure](#setting-up-the-monorepo-structure)
|
||||
· [Adding a Remix application](#adding-a-remix-application)
|
||||
· [Create a Shared UI library](#create-a-shared-ui-library)
|
||||
· [Consuming our shared-ui package from the Remix app](#consuming-our-sharedui-package-from-the-remix-app)
|
||||
· [Running commands with PNPM](#running-commands-with-pnpm)
|
||||
· [Speeding up with Nx](#speeding-up-with-nx)
|
||||
· [Installing Nx](#installing-nx)
|
||||
· [Running tasks with Nx](#running-tasks-with-nx)
|
||||
· [Configure Caching](#configure-caching)
|
||||
· [Fine-tuning the caching](#finetuning-the-caching)
|
||||
· [Reusing Cache Input Globs](#reusing-cache-input-globs)
|
||||
· [Defining task dependencies (aka build pipeline)](#defining-task-dependencies-aka-build-pipeline)
|
||||
· [Running just what changed](#running-just-what-changed)
|
||||
· [Additional features](#additional-features)
|
||||
· [Dynamic Terminal Output](#dynamic-terminal-output)
|
||||
· [Project Graph Visualization](#project-graph-visualization)
|
||||
· [Conclusion](#conclusion)
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
❯ cd pnpm-mono
|
||||
❯ pnpm init
|
||||
```
|
||||
|
||||
It is probably also handy to initialize a new Git repository such that we can commit and backup things as we progress in the setup:
|
||||
|
||||
```shell
|
||||
git init
|
||||
```
|
||||
|
||||
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
|
||||
dist
|
||||
build
|
||||
```
|
||||
|
||||
## Setting up the Monorepo structure
|
||||
|
||||
The structure of a monorepo might vary depending on what you plan to use it for. There are generally two kinds of monorepo:
|
||||
|
||||
- **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.
|
||||
|
||||
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:
|
||||
|
||||
```yaml {% fileName="pnpm-workspace.yaml" %}
|
||||
packages:
|
||||
# executable/launchable applications
|
||||
- 'apps/*'
|
||||
# all packages in subdirs of packages/ and components/
|
||||
- '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.
|
||||
|
||||
> _Info: We use the normal_ [_Remix installation & setup procedure_](https://remix.run/docs/en/v1) _here which you can find on their docs page._
|
||||
|
||||
Since we want to have the app within the `apps` folder, we need to `cd` into it:
|
||||
|
||||
```shell
|
||||
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 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:
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "remix build",
|
||||
"dev": "remix dev",
|
||||
"start": "remix-serve build"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Usually, in a monorepo you want to run commands from the root of the repository to not have to constantly switch between folders. PNPM workspaces have a way to do that, by passing a `filter` argument, like:
|
||||
|
||||
```shell
|
||||
pnpm --filter <package-name> <command>
|
||||
```
|
||||
|
||||
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
|
||||
{
|
||||
"name": "my-remix-app",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
You should now be able to serve your Remix app in dev-mode by using:
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
```shell
|
||||
|
||||
cd packages
|
||||
mkdir shared-ui
|
||||
|
||||
```
|
||||
|
||||
Next, let's create a `package.json` with the following content (you can also use `pnpm init` and adjust it):
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true,
|
||||
"name": "shared-ui",
|
||||
"description": "Shared UI components",
|
||||
"scripts": {},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {},
|
||||
"devDependencies": {}
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
pnpm add --filter shared-ui react
|
||||
pnpm add --filter shared-ui typescript -D
|
||||
```
|
||||
|
||||
By passing `--filter shared-ui` to the installation command, we install these NPM packages locally to the `shared-ui` library.
|
||||
|
||||
> _Info: Be aware that this might potentially cause version conflicts if the React/TypeScript version used by the library package and the consumer (e.g. our app) differs. Adopting a_ [_single version policy_](https://opensource.google/documentation/reference/thirdparty/oneversion)_, where you move the packages to the root of the monoreopo, is a possible solution for that._
|
||||
|
||||
Our first component will be a very simple `Button` component. So let's create one:
|
||||
|
||||
```tsx {% fileName="packages/shared-ui/Button.tsx" %}
|
||||
export function Button(props: any) {
|
||||
return <button onClick={() => props.onClick()}>{props.children}</button>;
|
||||
}
|
||||
export default Button;
|
||||
```
|
||||
|
||||
We also want to have a public API where we export components to be used outside of our `shared-ui` package:
|
||||
|
||||
```tsx {% fileName="packages/shared-ui/index.tsx" %}
|
||||
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.
|
||||
|
||||
To create the desired compilation output create a `packages/shared-ui/tsconfig.json` file with the following configuration.
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"module": "commonjs",
|
||||
"outDir": "./dist"
|
||||
},
|
||||
"include": ["."],
|
||||
"exclude": ["dist", "node_modules", "**/*.spec.ts"]
|
||||
}
|
||||
```
|
||||
|
||||
> _In a monorepo it is good practice to extract the common config part into a higher-level config (e.g. at the root) and then extend it here in the various projects. This to avoid a lot of duplication across the various monorepo packages. For the sake of simplicity I kept it all in one place here._
|
||||
|
||||
As you can see the `outDir` points to a package-local `dist` folder. So we should add a main entry point in the `shared-ui` package's `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true,
|
||||
"name": "shared-ui",
|
||||
"main": "dist/index.js"
|
||||
}
|
||||
```
|
||||
|
||||
Finally, the actual build consists of deleting some residual folders from the previous output and then invoking the TypeScript compiler (`tsc`). Here's the complete `packages/shared-ui/package.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true,
|
||||
"name": "shared-ui",
|
||||
"description": "Shared UI components",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"build": "rm -rf dist && tsc"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"react": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^4.6.4"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Use the following command to run the build from the root of the PNPM workspace:
|
||||
|
||||
```shell
|
||||
pnpm --filter shared-ui build
|
||||
```
|
||||
|
||||
If the build succeeds, you should see the compiled output in the `packages/shared-ui/dist` folder.
|
||||
|
||||
## Consuming our shared-ui package from the Remix app
|
||||
|
||||
Our `shared-ui` library is ready so we can use it in the Remix application hosted within the `apps` folder of our repository. We can either manually add the dependency to Remix's `package.json` or use PNPM to add it:
|
||||
|
||||
```shell
|
||||
pnpm add shared-ui --filter my-remix-app --workspace
|
||||
```
|
||||
|
||||
This adds it to the dependency in the `apps/my-remix-app/package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-remix-app",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
...
|
||||
"dependencies": {
|
||||
...
|
||||
"shared-ui": "workspace:*"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
`workspace:*` denotes that the package is resolved locally in the workspace, rather than from some remote registry (such as [NPM](https://npmjs.com/)). The `*` simply indicates that we want to depend on the latest version of it, rather than a specific one. Using a specific version really just makes sense if you're using external NPM packages.
|
||||
|
||||
To use our `Button` component we now import it from some Remix route. Replace the content of `apps/my-remix-app/app/routes/index.tsx` with the following:
|
||||
|
||||
```tsx {% fileName="apps/my-remix-app/app/routes/index.tsx" %}
|
||||
import { Button } from 'shared-ui';
|
||||
export default function Index() {
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => console.log('clicked')}>Click me</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
If you now run the Remix app again you should see the button being rendered.
|
||||
|
||||
```shell
|
||||
pnpm --filter my-remix-app dev
|
||||
```
|
||||
|
||||
If you happen to get the following error, then it is because you need to build `shared-ui` first
|
||||
|
||||
```shell
|
||||
Error: Cannot find module '/Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app/node_modules/shared-ui/dist/index.js'. Please verify that the package.json has a valid "main" entry
|
||||
at tryPackage (node:internal/modules/cjs/loader:353:19)
|
||||
at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
|
||||
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
|
||||
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
|
||||
at Module.require (node:internal/modules/cjs/loader:1005:19)
|
||||
at require (node:internal/modules/cjs/helpers:102:18)
|
||||
at Object.<anonymous> (/Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app/app/routes/index.tsx:1:24)
|
||||
at Module._compile (node:internal/modules/cjs/loader:1105:14)
|
||||
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
|
||||
at Module.load (node:internal/modules/cjs/loader:981:32)
|
||||
```
|
||||
|
||||
To build that, run
|
||||
|
||||
```shell
|
||||
pnpm --filter shared-ui build
|
||||
```
|
||||
|
||||
Why? This is due to the symlinks PNPM creates in order to be able to reference and resolve local dependencies. By adding `shared-ui: "workspace:*"` to Remix's `package.json` you instruct PNPM to add a symlink to Remix's `node_modules` folder.
|
||||
|
||||
|
||||
_PNPM creates a symlink in the local node_modules folder to be able to import local packages_
|
||||
|
||||
## Running commands with PNPM
|
||||
|
||||
PNPM comes with handy features to run commands across the monorepo workspace. We have already seen how to scope commands on single packages using the `--filter` :
|
||||
|
||||
```shell
|
||||
pnpm --filter my-remix-app dev
|
||||
```
|
||||
|
||||
You can also run a command recursively on all the packages in the workspace using the `-r` flag. Imagine for instance running the build for all projects.
|
||||
|
||||
```shell
|
||||
pnpm run -r buildScope: 2 of 3 workspace projects
|
||||
packages/shared-ui build$ rm -rf dist && tsc
|
||||
└─ Done in 603ms
|
||||
apps/my-remix-app build$ remix build
|
||||
│ Building Remix app in production mode...
|
||||
│ The path "shared-ui" is imported in app/routes/index.tsx but shared-ui is not listed in your package.json
|
||||
│ Built in 156ms
|
||||
└─ Done in 547ms
|
||||
```
|
||||
|
||||
Similarly you can parallelize the run by using `--parallel`
|
||||
|
||||
```shell
|
||||
pnpm run --parallel -r buildScope: 2 of 3 workspace projects
|
||||
apps/my-remix-app build$ remix build
|
||||
packages/shared-ui build$ rm -rf dist && tsc
|
||||
apps/my-remix-app build: Building Remix app in production mode...
|
||||
apps/my-remix-app build: The path "shared-ui" is imported in app/routes/index.tsx but shared-ui is not listed in your package.json dependencies. Did you forget to install it?
|
||||
apps/my-remix-app build: Built in 176ms
|
||||
apps/my-remix-app build: Done
|
||||
packages/shared-ui build: Done
|
||||
```
|
||||
|
||||
## Speeding up with Nx
|
||||
|
||||
PNPM workspaces come with some basic facilities for running tasks on the monorepo packages, even in parallel. As the monorepo grows, you might want to have a more sophisticated approach that allows to
|
||||
|
||||
- run tasks on only the packages that changed
|
||||
- advanced caching based on file contents to not run anything that has already been computed previously
|
||||
- remote distributed caching to speed up your CI
|
||||
|
||||
This is exactly where Nx can help. It is optimized for monorepo scenarios and comes with an advanced task scheduling mechanism. We still rely on the package installation and package linking mechanism that PNPM workspaces provide us, but use Nx instead to run our tasks in the most efficient way.
|
||||
|
||||
## 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`.
|
||||
|
||||
```shell
|
||||
pnpm add nx -D -w
|
||||
```
|
||||
|
||||
That's it.
|
||||
|
||||
## Running tasks with Nx
|
||||
|
||||
Nx uses the following form to run your commands:
|
||||
|
||||
```shell
|
||||
npx nx <target> <project>
|
||||
```
|
||||
|
||||
`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:
|
||||
|
||||
```shell
|
||||
npx nx build shared-ui
|
||||
```
|
||||
|
||||
This produces the following output
|
||||
|
||||
```shell
|
||||
nx run shared-ui:build
|
||||
shared-ui@ build /Users/juri/nrwl/content/pnpm-demos/pnpm-mono/packages/shared-ui
|
||||
rm -rf dist && tsc
|
||||
NX Successfully ran target build for project shared-ui (1s)
|
||||
```
|
||||
|
||||
Nx automatically finds `shared-ui` and runs the `build` script defined in `packages/shared-ui/package.json`.
|
||||
|
||||
Similarly, to launch our Remix app, run `npx nx dev my-remix-app`.
|
||||
|
||||
We can also run commands in parallel across the projects with:
|
||||
|
||||
```shell
|
||||
npx nx run-many --target=build --all
|
||||
✔ nx run my-remix-app:build (1s)
|
||||
✔ nx run shared-ui:build (1s)
|
||||
NX Successfully ran target build for 2 projects (1s)
|
||||
```
|
||||
|
||||
Or selectively specify projects with
|
||||
|
||||
```shell
|
||||
npx nx run-many --target=build --projects=my-remix-app,shared-ui
|
||||
✔ nx run my-remix-app:build (1s)
|
||||
✔ nx run shared-ui:build (1s)
|
||||
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._
|
||||
|
||||
## 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.
|
||||
|
||||
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" %}
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
"default": {
|
||||
"runner": "nx/tasks-runners/default",
|
||||
"options": {
|
||||
"cacheableOperations": ["build", "test"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
```shell
|
||||
npx nx build my-remix-app
|
||||
nx run my-remix-app:build
|
||||
my-remix-app@ build /Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app
|
||||
remix buildBuilding Remix app in production mode...
|
||||
The path "shared-ui" is imported in app/routes/index.tsx but shared-ui is not listed in your package.json dependencies. Did you forget to install it?
|
||||
Built in 163ms
|
||||
NX Successfully ran target build for project my-remix-app (1s)
|
||||
```
|
||||
|
||||
If you re-run the same command, it will now be pulled out of the cache and take only a few milliseconds.
|
||||
|
||||
```shell
|
||||
npx nx build my-remix-app> nx run my-remix-app:build [existing outputs match the cache, left as is]
|
||||
my-remix-app@ build /Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app
|
||||
remix buildBuilding Remix app in production mode...
|
||||
The path "shared-ui" is imported in app/routes/index.tsx but shared-ui is not listed in your package.json dependencies. Did you forget to install it?
|
||||
Built in 163ms
|
||||
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."
|
||||
|
||||
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.
|
||||
|
||||
## Fine-tuning the caching
|
||||
|
||||
By default the caching mechanism takes [all project-level files as an input](/concepts/how-caching-works). We might want to distinguish though which files are being considered based on the target that we execute. Example: you might not want to invalidate the cache for the `build` task if only spec files for unit testing got changed.
|
||||
|
||||
To illustrate this on our example, run `npx nx build my-remix-app` twice, such that the caching gets activated. Next, change the `README.md` of the Remix project (`apps/my-remix-app/README.md`). If you re-run the Remix app build the cache will be invalidated due to the change of the README file. This might definitely not be a desirable operation.
|
||||
|
||||
We can fine-tune the caching by adding a `targetDefaults` node in the `nx.json` and define that the default `input` for the `build` target should exclude `*.md` files.
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
"default": {
|
||||
"runner": "nx/tasks-runners/default",
|
||||
"options": {
|
||||
"cacheableOperations": ["build", "test"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["!{projectRoot}/**/*.md"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With this change, MD files would not be considered as part of the cache input whenever you run the `build` task.
|
||||
|
||||
> _Note that all path globs are_ **_relative to the root of the workspace_**_. This avoids confusion as the inputs could also be defined at the project level in the_ `_package.json_` _(_[_more here_](/reference/project-configuration)_). You can use the interpolation variables_ `_{projectRoot}_` _and_ `_{workspaceRoot}_` _do distinguish whether the path should be targeting the project specific files or workspace level files._
|
||||
|
||||
## Reusing Cache Input Globs
|
||||
|
||||
You can also go a step further as you might re-use this glob for excluding markdown files also for a hypothetical `test` target. You can do so by extracting the glob into a `namedInputs` property:
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
...
|
||||
},
|
||||
"namedInputs": {
|
||||
"noMarkdown": ["!{projectRoot}/**/*.md"]
|
||||
},
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["noMarkdown", "^noMarkdown"]
|
||||
},
|
||||
"test": {
|
||||
"inputs": ["noMarkdown", "^noMarkdown"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
By adding `^` in front of the `namedInput` we indicate that this should also apply for changes in any dependencies of the project.
|
||||
|
||||
## Defining task dependencies (aka build pipeline)
|
||||
|
||||
We have seen previously that when running our Remix dev server, but not having compiled the dependent `shared-ui` package first, we got an error when running our Remix app.
|
||||
|
||||
```
|
||||
Error: Cannot find module '/Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app/node_modules/shared-ui/dist/index.js'. Please verify that the package.json has a valid "main" entry
|
||||
at tryPackage (node:internal/modules/cjs/loader:353:19)
|
||||
at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
|
||||
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
|
||||
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
|
||||
at Module.require (node:internal/modules/cjs/loader:1005:19)
|
||||
at require (node:internal/modules/cjs/helpers:102:18)
|
||||
at Object.<anonymous> (/Users/juri/nrwl/content/pnpm-demos/pnpm-mono/apps/my-remix-app/app/routes/index.tsx:1:24)
|
||||
at Module._compile (node:internal/modules/cjs/loader:1105:14)
|
||||
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
|
||||
at Module.load (node:internal/modules/cjs/loader:981:32)
|
||||
```
|
||||
|
||||
To fix it, we had to manually build `shared-ui` first. Normally you want to avoid this, which is exactly why Nx comes with a `targetDefaults` definition (often also denoted as the "build pipeline").
|
||||
|
||||
We can define such task dependencies in `nx.json` at the root of the workspace in the `targetDefaults` property.
|
||||
|
||||
As the first dependency we want to define that whenever we run the `build` target on a project, all the `build` targets of its dependent projects should be executed first. We can express that by adding an additional `dependsOn` property to the `build` task definition:
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
...
|
||||
},
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
...
|
||||
"dependsOn": ["^build"]
|
||||
}
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Similar as we have seen in the definition of the `inputs`, the `^` here denotes that the target should be run on all dependent projects. If you remove the `^`, then the target would be invoked on the same project. That can be useful if you have a `prebuild` step that always needs to be invoked.
|
||||
|
||||
Next, we also want to define a targetDefault for our Remix `dev` command, such that first the `build` on all dependent packages (e.g our `shared-ui`) is run.
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
...
|
||||
},
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
...
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"dev": {
|
||||
"dependsOn": ["^build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here's the entire `nx.json` file again as a reference point:
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
"default": {
|
||||
"runner": "nx/tasks-runners/default",
|
||||
"options": {
|
||||
"cacheableOperations": ["build", "test"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"namedInputs": {
|
||||
"noMarkdown": ["!{projectRoot}/**/*.md"]
|
||||
},
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["noMarkdown", "^noMarkdown"],
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"dev": {
|
||||
"dependsOn": ["^build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If we now run `npx nx build my-remix-app` we can see that Nx first runs tasks on dependent projects, and only then runs the command we invoked.
|
||||
|
||||
|
||||
|
||||
_Nx highlights dependent projects being built, but it keeps the main attention to the current task at hand without distracting_
|
||||
|
||||
## 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).
|
||||
|
||||
```shell
|
||||
npx nx affected:<target>
|
||||
```
|
||||
|
||||
You can use any target you have defined in your workspace. For example
|
||||
|
||||
- `npx nx affected:build`
|
||||
- `npx nx affected:test`
|
||||
- `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:
|
||||
|
||||
|
||||
|
||||
_Potential graph of a monorepo workspace_
|
||||
|
||||
Whenever we run the affected commands on a branch, Nx compares all the commits and relative changes with the base branch. By default that is `main`, but you can fine-tune that in the `nx.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
"affected": {
|
||||
"defaultBase": "main"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If `lib2` gets changed in our feature branch, running tests against the workspace using `affected:test` would only run tests for `lib2` and `appB`.
|
||||
|
||||
|
||||
|
||||
_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
|
||||
|
||||
- `lib3`
|
||||
- `lib2`
|
||||
- `appB`
|
||||
|
||||
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:
|
||||
|
||||
## Want to automate the creation of packages?
|
||||
|
||||
Once you have a good setup for a package, you obviously want to replicate that as you create new ones. The usual approach: copy & paste and then remove all stuff that's not needed.
|
||||
|
||||
That's tedious and potentially error prone. Nx has a concept of "generators", basically code scaffolding which allows you to generate new packages in the monorepo rather than copy & pasting old ones.
|
||||
|
||||
If that sounds interesting, here's a walkthrough:
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=myqfGDWC2go" /%}
|
||||
|
||||
## Dynamic Terminal Output
|
||||
|
||||
Running tasks in parallel with PNPM results in quite a messy terminal output. The logs are hard to parse as the messages from the different commands being executed in parallel are interleaved.
|
||||
|
||||
```shell
|
||||
pnpm run --parallel -r buildScope: 2 of 3 workspace projects
|
||||
apps/my-remix-app build$ remix build
|
||||
packages/shared-ui build$ rm -rf dist && tsc
|
||||
apps/my-remix-app build: Building Remix app in production mode...
|
||||
apps/my-remix-app build: The path "shared-ui" is imported in app/routes/index.tsx but shared-ui is not listed in your package.json dependencies. Did you forget to install it?
|
||||
apps/my-remix-app build: Built in 176ms
|
||||
apps/my-remix-app build: Done
|
||||
packages/shared-ui build: Done
|
||||
```
|
||||
|
||||
When using Nx to run tasks you get a dynamic terminal that shows just what is necessary and most relevant to the current command that has been executed. Running the same parallel build task results in the following output when using Nx:
|
||||
|
||||
|
||||
_Terminal output of Nx dynamically showing the parallel tasks being computed as well as the ones that already succeeded_
|
||||
|
||||
## Project Graph Visualization
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
|
||||
_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._
|
||||
|
||||
## Conclusion
|
||||
|
||||
We did it! Here are some of the things we covered:
|
||||
|
||||
- how to setup a PNPM based monorepo workspace
|
||||
- create a Remix and shared React library within a PNPM monorepoe
|
||||
- how to run different commands with PNPM
|
||||
- how to add Nx & incrementally adopt it in the monorepo
|
||||
- benefits and features that come with adding Nx to a PNPM workspace
|
||||
|
||||
You can find an example of such setup on the **Nx Recipe GitHub repository**:
|
||||
[https://github.com/nrwl/nx-recipes/tree/main/pnpm-workspace](https://github.com/nrwl/nx-recipes/tree/main/pnpm-workspace)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
-304
@@ -1,304 +0,0 @@
|
||||
---
|
||||
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.avif'
|
||||
tags: [nx, release]
|
||||
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.
|
||||
|
||||
**TL;DR:** [https://github.com/nrwl/nx/releases/tag/14.5.0](https://github.com/nrwl/nx/releases/tag/14.5.0)
|
||||
|
||||
## Cypress v10 and Component Testing
|
||||
|
||||
Cypress v10 is probably the most significant update since Cypress was released. It comes with a new, exciting [Cypress App](https://docs.cypress.io/guides/core-concepts/cypress-app), component testing beta, a new JS/TS-based configuration file and much more. Read all the details in [their official announcement](https://www.cypress.io/blog/2022/06/01/cypress-10-release/).
|
||||
|
||||
One of the strengths of Nx is to integrate various tools into a cohesive, high-quality experience. Working together with other companies and open source projects is key to making sure we meet this goal. We have had an ongoing relationship with the folks over at Cypress for years already and have been working closely with them since earlier this year to integrate v10 into Nx in the best possible way.
|
||||
|
||||
This includes an upgrade script to automatically migrate Nx users using Cypress v9 seamlessly to v10. By running…
|
||||
|
||||
```shell
|
||||
nx g @nrwl/cypress:migrate-to-cypress-10
|
||||
```
|
||||
|
||||
…your workspace will be automatically upgraded to the latest Cypress version.
|
||||
|
||||
Cypress v10 also comes with a beta version of [Component Testing](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test). Nx v14.5 comes with an integrated generator to add component testing support to React-based project:
|
||||
|
||||
```shell
|
||||
nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests
|
||||
```
|
||||
|
||||
You can also append the `--generate-tests` to automatically generate Cypress component tests for the existing components in the target project (`my-react-project`).
|
||||
|
||||
```shell
|
||||
nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests
|
||||
```
|
||||
|
||||
Check out our [generator docs](/technologies/react/api/generators/cypress-component-configuration) for more info.
|
||||
|
||||
{% youtube src="https://youtu.be/QDWN4C7T-Ck" /%}
|
||||
|
||||
## Globs for Task Outputs
|
||||
|
||||
In v14.4 we [introduced inputs and namedInputs](/blog/nx-14-4-inputs-optional-npm-scope-project-graph-cache-directory-and-more). They allow you to fine-tune how caching works and when it should be invalidated.
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"inputs": ["!{projectRoot}/**/*.spec.ts"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Specifying such inputs can drastically increase the number of cache hits!
|
||||
|
||||
{% tweet url="https://twitter.com/victorsavkin/status/1550187124678205440" /%}
|
||||
|
||||
In this release, we also allow specifying globs for `outputs`. Outputs are optional as Nx comes with reasonable defaults, but you can specify your own if your setup differs from the most commonly used ones:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
...
|
||||
"outputs": ["dist/libs/mylib"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Globs are particularly useful when multiple targets write to the same directory. Say you have a `build-js` and `build-css` command and both write into `dist/libs/mylib`. For reasons of clarity, if possible, our recommendation is to split them up. Like:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"build-js": {
|
||||
"outputs": ["dist/libs/mylib/js"]
|
||||
},
|
||||
"build-css": {
|
||||
"outputs": ["dist/libs/mylib/css"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Sometimes that's not feasible though. In that case, globs come in handy:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"build-js": {
|
||||
"outputs": ["dist/libs/mylib/**/*.js"]
|
||||
},
|
||||
"build-css": {
|
||||
"outputs": ["dist/libs/mylib/**/*.css"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[Read more in our docs](/reference/project-configuration)
|
||||
|
||||
## 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`:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `^` is a short-hand notation for
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": [{ "projects": "dependencies", "target": "build" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
...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)
|
||||
|
||||
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": {
|
||||
// forward params passed to this target to the dependency targets
|
||||
"dependsOn": [
|
||||
{ "projects": "dependencies", "target": "build", "params": "forward" }
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
// ignore params passed to this target, won't be forwarded to the dependency targets
|
||||
"dependsOn": [
|
||||
{ "projects": "self", "target": "build", "params": "ignore" }
|
||||
]
|
||||
}
|
||||
"lint": {
|
||||
// ignore params passed to this target, won't be forwarded to the dependency targets
|
||||
"dependsOn": [
|
||||
{ "projects": "self", "target": "build" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[Read more in our docs](/reference/project-configuration)
|
||||
|
||||
## Linting Performance
|
||||
|
||||
We are obsessed with performance, yes we are! And I have good news: the Nx module boundary lint rule just got an order of magnitude faster 🤯.
|
||||
|
||||
{% tweet url="https://twitter.com/meeroslav/status/1550058325236191232" /%}
|
||||
|
||||
Replacing `Sets`, `foreach`, `reduce` with plain `for` loops can often have quite a significant impact. You won't notice much on smaller projects, but on large Nx workspaces with 500+ projects you should see some huge improvements 🚀.
|
||||
|
||||
## Support for banned external imports lint checks on transitive dependencies
|
||||
|
||||
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:
|
||||
|
||||
```json {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... more ESLint config here // nx-enforce-module-boundaries should already exist at the top-level of your config
|
||||
"nx-enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
"allow": [],
|
||||
// update depConstraints based on your tags
|
||||
"depConstraints": [
|
||||
// projects tagged with "frontend" can't import from "@nestjs/common"
|
||||
{
|
||||
"sourceTag": "frontend",
|
||||
"bannedExternalImports": ["@nestjs/common"]
|
||||
},
|
||||
// projects tagged with "backend" can't import from "@angular/core"
|
||||
{
|
||||
"sourceTag": "backend",
|
||||
"bannedExternalImports": ["@angular/core"]
|
||||
}
|
||||
]
|
||||
}
|
||||
] // ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
Note, the `frontend` and `backend` `sourceTag` definition is something you define. You could have easily named it differently. It is a string that can be attached to a project by adding it to the `tag` property of its `project.json` configuration file. Read more about banned external imports [in our docs](/features/enforce-module-boundaries).
|
||||
|
||||
Starting with 14.5 we now support such checks also on transitive dependencies. Assume we have `project-a` and `project-b`, both of which are tagged as `framework-agnostic` and have `react` in their banned external imports. Also, assume there's a relationship like `project-a -> project-b`. If `project-b` imports `react` and we run linting, it fails correctly. However, if we run linting on `project-a`, it succeeds as `project-a` is not importing `react` at all, thus not breaking the lint rule. In most situations, this is fine because linting happens at a project level, but sometimes you might want to have a "transitive" behavior where linting would also fail for `project-a` because it imports `project-a` which imports `react`.
|
||||
|
||||
You can now enable such behavior by setting `checkNestedExternalImports` to `true`:
|
||||
|
||||
```json {% fileName=".eslintrc.json" %}
|
||||
{
|
||||
// ... more ESLint config here // nx-enforce-module-boundaries should already exist at the top-level of your config
|
||||
"nx-enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
"allow": [],
|
||||
"checkNestedExternalImports": true,
|
||||
// update depConstraints based on your tags
|
||||
"depConstraints": [
|
||||
// projects tagged with "frontend" can't import from "@nestjs/common"
|
||||
{
|
||||
"sourceTag": "framework-agnostic",
|
||||
"bannedExternalImports": ["react"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
// ... more ESLint config here
|
||||
}
|
||||
```
|
||||
|
||||
## Improved automated Module Boundary Lint Rule fixes
|
||||
|
||||
In v13.10 we introduced automated fixes for the Nx Module Boundary rules. Wrong relative imports such as the following can be easily adjusted automatically by providing the `--fix` when running linting on the project.
|
||||
|
||||
|
||||
|
||||
This is a huge time saver, especially on large projects. With Nx v14.5 the automated fixes now also support automated resolution of absolute imports across library boundaries, such as
|
||||
|
||||
```typescript
|
||||
// WRONG
|
||||
import { libSayHi } from 'libs/tslib-a/src/index';
|
||||
|
||||
// automatically fixed to
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## Tailwind Setup Generator for React
|
||||
|
||||
It has never been easier to add [Tailwind](https://tailwindcss.com/) support to your React app or library. Just run the `setup-tailwind` generator:
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/react:setup-tailwind --project=<project-name>
|
||||
```
|
||||
|
||||
|
||||
|
||||
This automatically sets up your project with a PostCSS and Tailwind configuration.
|
||||
|
||||
## React Native: Add Detox config to Expo apps
|
||||
|
||||
We also improved our React Native support by adding the possibility to generate a [Detox](https://wix.github.io/Detox/) config for Expo applications.
|
||||
|
||||
## 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.
|
||||
|
||||
## Other Package updates
|
||||
|
||||
Here are some more package updates that come with this release and will automatically be bumped when you run the Nx migration:
|
||||
|
||||
- Angular v14.1.0
|
||||
- Express 14.18.1
|
||||
- Nest v9
|
||||
- Next.js v12.2.2
|
||||
- React Native 0.69.1
|
||||
- React Native Metro v0.71.3
|
||||
- React 18.0.15
|
||||
- `eslint-plugin-jsx-a11y` v6.6.1
|
||||
|
||||
For an exhaustive list check our release changelog on GitHub: [https://github.com/nrwl/nx/releases/tag/14.5.0](https://github.com/nrwl/nx/releases/tag/14.5.0)
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
-98
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: 'Helping the Environment by Saving Two Centuries of Compute time'
|
||||
slug: 'helping-the-environment-by-saving-two-centuries-of-compute-time'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-08-18/FBQVoC9YXF7wlq3dhxfQMQ.avif'
|
||||
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?**
|
||||
|
||||
## How much time is being saved?
|
||||
|
||||
This is how much got saved so far (data from August 16th, 2022). Pretty crazy!
|
||||
|
||||
|
||||
|
||||
Here are the raw numbers:
|
||||
|
||||
- **Last 7 days:** 5 years 4 months 2 days 2 hours 32 minutes 46 seconds
|
||||
- **Last 30 days:** 23 years 8 months 25 days 8 hours 57 minutes 19 seconds
|
||||
- **Since the beginning of Nx Cloud:** 200 years 10 months 13 days 19 hours 37 minutes 57 seconds
|
||||
|
||||
## The Effect on the Environment
|
||||
|
||||
Calculating the CO2 emissions can be tricky. It really depends on what machines are being used to run the computation saved by Nx Cloud. We gave it a try by using [https://green-algorithms.org/](https://green-algorithms.org/).
|
||||
|
||||
**Last 7-day savings correspond to:**
|
||||
|
||||
|
||||
|
||||
[See all the details](https://green-algorithms.org//?runTime_hour=46752&runTime_min=0&appVersion=v2.2&locationContinent=North+America&locationCountry=United+States+of+America&locationRegion=US&coreType=CPU&numberCPUs=2&CPUmodel=Xeon+E5-2683+v4&memory=4&platformType=cloudComputing&provider=aws)
|
||||
|
||||
**Last 30-day savings correspond to:**
|
||||
|
||||
|
||||
|
||||
[See all the details](https://green-algorithms.org//?runTime_hour=207462&runTime_min=0&appVersion=v2.2&locationContinent=North+America&locationCountry=United+States+of+America&locationRegion=US&coreType=CPU&numberCPUs=2&CPUmodel=Xeon+E5-2683+v4&memory=4&platformType=cloudComputing&provider=aws)
|
||||
|
||||
**Since the beginning of Nx Cloud:**
|
||||
|
||||
|
||||
|
||||
[See all the details](https://green-algorithms.org//?runTime_hour=1760505&runTime_min=0&appVersion=v2.2&locationContinent=North+America&locationCountry=United+States+of+America&locationRegion=US&coreType=CPU&numberCPUs=2&CPUmodel=Xeon+E5-2683+v4&memory=4&platformType=cloudComputing&provider=aws)
|
||||
|
||||
## 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.
|
||||
|
||||
### Affected Commands
|
||||
|
||||
Example: Run tests only for changed projects in a given PR.
|
||||
|
||||
```
|
||||
nx affected:test
|
||||
```
|
||||
|
||||
[Nx affected commands](/ci/features/affected) allow you to only run commands against projects that changed with respect to a baseline. Usually, this is applied in PRs processed by your CI system. Nx analyzes the Git commits and identifies all projects that got changed with respect to a base branch (usually `main` or `master`). It then makes sure to run the given command only for those projects as well as all projects depending on them since they might be affected by the change too.
|
||||
|
||||
This helps save computation by reducing the set of projects that need to be processed.
|
||||
|
||||
### Local Computation Caching
|
||||
|
||||
Nx comes with a so-called [computation caching](/concepts/how-caching-works) feature. For every cacheable operation, Nx takes a set of input parameters, computes a hash and stores the result.
|
||||
|
||||
|
||||
|
||||
Whenever a hash matches, the computation is not run, but rather the previous result is restored. This can dramatically speed up things and avoid running any computation that has already been run previously.
|
||||
|
||||
### Distributed Remote Caching (with Nx Cloud)
|
||||
|
||||
By default, the Nx computation cache is stored locally (usually within the `node_modules/.cache/nx` folder). The real benefits come from sharing it with others, that being your co-workers or CI agents.
|
||||
|
||||
[Nx Cloud](/nx-cloud) allows to distribute the Nx computation cache across machines.
|
||||
|
||||
|
||||
|
||||
Connecting an existing Nx workspace to Nx Cloud can be done with
|
||||
|
||||
```
|
||||
nx connect-to-nx-cloud
|
||||
```
|
||||
|
||||
[More on the docs](/ci/features/remote-cache). Nx Cloud comes with [500 hours of computation time saved per month](/pricing) which is plenty for most workspaces. If you go over, you can buy more, or in the worst case, caching simply stops until the next month.
|
||||
|
||||
## Bonus! Lerna can do this too!!
|
||||
|
||||
[Nrwl](/company), the company behind Nx, recently [took over stewardship of Lerna](/blog/lerna-is-dead-long-live-lerna). Meanwhile, Lerna 5.4 just got released which features a nice integration with Nx, allowing existing Lerna users to keep using the very same commands, but still benefit from the improved task scheduling and caching abilities Nx comes with.
|
||||
|
||||
How to enable it? [Read more on the Lerna docs](https://lerna.js.org/docs/features/cache-tasks)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
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.avif'
|
||||
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!**
|
||||
|
||||
**Table of Contents**
|
||||
|
||||
· [Lerna continues to evolve](#lerna-continues-to-evolve)
|
||||
· [Fast Lerna with caching by default](#fast-lerna-with-caching-by-default)
|
||||
· [Remote caching with Lerna](#remote-caching-with-lerna)
|
||||
· [Defining a task pipeline](#defining-a-task-pipeline)
|
||||
· [Lerna add-caching command](#lerna-addcaching-command)
|
||||
· [PNPM support for Lerna](#pnpm-support-for-lerna)
|
||||
· [Dynamic terminal output](#dynamic-terminal-output)
|
||||
· [VSCode extension for Lerna workspaces](#vscode-extension-for-lerna-workspaces)
|
||||
· [Lerna Repair](#lerna-repair)
|
||||
· [Lerna and Prettier](#lerna-and-prettier)
|
||||
· [Migrating to Lerna v6](#migrating-to-lerna-v6)
|
||||
· [Lerna is using Nx now. Can I keep using my Lerna commands?](#lerna-is-using-nx-now-can-i-keep-using-my-lerna-commands)
|
||||
· [Are you maintaining an OSS repository using Lerna?](#are-you-maintaining-an-oss-repository-using-lerna)
|
||||
|
||||
## 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.
|
||||
|
||||
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!**
|
||||
|
||||
## Fast Lerna with caching by default
|
||||
|
||||
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`:
|
||||
|
||||
```
|
||||
// lerna.json
|
||||
{
|
||||
...
|
||||
"useNx": true
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```json
|
||||
{
|
||||
"tasksRunnerOptions": {
|
||||
"default": {
|
||||
"runner": "nx/tasks-runners/default",
|
||||
"options": {
|
||||
"cacheableOperations": ["build", "test"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that you can also run..
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
@@ -1,260 +0,0 @@
|
||||
---
|
||||
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.avif'
|
||||
tags: [nx, 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.
|
||||
|
||||
{% toc /%}
|
||||
|
||||
## Growing fast!
|
||||
|
||||
Nx is currently at **~2.7 million NPM downloads per week**, which is incredible given we just crossed the 1 million downloads/week at the beginning of this year.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
- **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.
|
||||
|
||||
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
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace
|
||||
```
|
||||
|
||||
...you will now get a new question about whether you want to create a package-based monorepo or integrated style monorepo.
|
||||
|
||||
|
||||
|
||||
There will be more content around choosing which style and even how to mix the two. Go with what works best for you and your current situation, and Nx will be there to handle the rest.
|
||||
|
||||
We also updated our docs to have two super short tutorials that illustrate the two approaches:
|
||||
|
||||
- [/getting-started/tutorials/typescript-packages-tutorial](/getting-started/tutorials/typescript-packages-tutorial)
|
||||
- [/getting-started/tutorials/react-monorepo-tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
||||
|
||||
You can also read more about the concept here: [/deprecated/integrated-vs-package-based](/deprecated/integrated-vs-package-based)
|
||||
|
||||
## 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.
|
||||
|
||||
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:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"targetDefaults": {
|
||||
// run the build of all dependent packages first
|
||||
"build": {
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"dev": {
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
// run a package's build task before running publish
|
||||
"publish": {
|
||||
"dependsOn": ["build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can read more here: [/concepts/task-pipeline-configuration](/concepts/task-pipeline-configuration)
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
...
|
||||
"inputs": [
|
||||
"{projectRoot}/**/*",
|
||||
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
...
|
||||
"namedInputs": {
|
||||
"default": ["{projectRoot}/**/*", "sharedGlobals"],
|
||||
"production": [
|
||||
"default",
|
||||
"!{projectRoot}/.eslintrc.json",
|
||||
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
|
||||
"!{projectRoot}/tsconfig.spec.json",
|
||||
"!{projectRoot}/jest.config.[jt]s"
|
||||
],
|
||||
"sharedGlobals": []
|
||||
},
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"],
|
||||
"inputs": ["production", "^production"]
|
||||
},
|
||||
"lint": {
|
||||
"inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
|
||||
},
|
||||
"test": {
|
||||
"inputs": [
|
||||
"default",
|
||||
"^production",
|
||||
"{workspaceRoot}/jest.preset.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can read more here: [/recipes/running-tasks/configure-inputs](/recipes/running-tasks/configure-inputs)
|
||||
|
||||
## 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!
|
||||
|
||||
The famous, so much loved [Nx Graph](/features/explore-graph) can now also be visualized within VSCode directly:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
{% 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,
|
||||
|
||||
|
||||
|
||||
...followed by "tab-like" navigation
|
||||
|
||||
|
||||
|
||||
We keep improving our docs, and we invest a lot of time to make things easier for you all.
|
||||
|
||||
{% 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
|
||||
|
||||
- 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
|
||||
|
||||
- [/getting-started/tutorials](/getting-started/tutorials)
|
||||
|
||||
Stay tuned for more updates to come.
|
||||
|
||||
## Cleanup for pure JS/TS packages and ESBuild support!
|
||||
|
||||
We streamlined our JavaScript / TypeScript packages to have dedicated ones for our bundlers:
|
||||
|
||||
- `@nrwl/webpack`
|
||||
- `@nrwl/rollup`
|
||||
- `@nrwl/esbuild` (NEW!)
|
||||
|
||||
So you can now generate a new JavaScript / TypeScript based package using the `@nrwl/js:lib` generator, which now allows you to choose between various builders:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
You can run the following command to migrate your existing Cypress to the latest version.
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/cypress:migrate-to-cypress-10
|
||||
```
|
||||
|
||||
Cypress v10 also comes with [Component Testing](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test) (for React and Angular), and we provide generators for that to help you get started. You can add component testing to an existing project with
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/react:cypress-component-configuration --project=your-projectnpx nx g @nrwl/angular:cypress-component-configuration --project=your-project
|
||||
```
|
||||
|
||||
Read more here: [/technologies/test-tools/cypress/recipes/cypress-component-testing](/technologies/test-tools/cypress/recipes/cypress-component-testing)
|
||||
|
||||
## 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:
|
||||
|
||||
{% tweet url="https://twitter.com/NxDevTools/status/1567513106380894215" /%}
|
||||
|
||||
In addition, we improved the migration support for moving projects from the Angular CLI to an Nx workspace. Whether for a single Angular CLI project or to consolidate multiple Angular CLI projects into a single Nx workspace. Please read all about it here: [/technologies/angular/migration/angular](/technologies/angular/migration/angular)
|
||||
|
||||
## Easily add Nx to an existing repository
|
||||
|
||||
You can easily add Nx to an existing repository. This can be done manually by adding the `nx` NPM package or by running the following command:
|
||||
|
||||
```shell
|
||||
npx nx@latest init
|
||||
```
|
||||
|
||||
It is as easy as it looks. The command analyzes the current workspace and then asks you a couple of questions to set up your workspace (including cacheable operations and configuring a task pipeline).
|
||||
|
||||
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: 'From Bootstrapped to Venture-Backed: Nx Raises $8.6M'
|
||||
slug: 'from-bootstrapped-to-venture-backed'
|
||||
authors: ['Jeff Cross']
|
||||
cover_image: '/blog/images/2022-11-17/a3eT-mjLsXTiHU5m.avif'
|
||||
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**.
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
|
||||
|
||||
[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.
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
## 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.
|
||||
|
||||
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'll be sharing more exciting announcements soon, so make sure to follow our journey on [@NxDevTools](https://twitter.com/nxdevtools)!
|
||||
|
||||
Jeff Cross
|
||||
CEO, Nx
|
||||
@@ -1,420 +0,0 @@
|
||||
---
|
||||
title: 'Nx 15.3 — Standalone Projects, Vite, Task Graph and more!'
|
||||
slug: 'nx-15-3-standalone-projects-vite-task-graph-and-more'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2022-12-06/VXYjjWhOUpNuHFGCoF63OQ.avif'
|
||||
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 👇
|
||||
|
||||
**Table of Contents**
|
||||
|
||||
· [Funding — Nx raises $8.6M](#funding-nx-raises-86m)
|
||||
· [3 million downloads per week](#3-million-downloads-per-week)
|
||||
· [New Task Graph Visualization](#new-task-graph-visualization)
|
||||
· [Standalone Projects](#standalone-projects)
|
||||
· [Integrated Vite and Vitest support is here!](#integrated-vite-and-vitest-support-is-here)
|
||||
· [Adopting Nx has never been easier](#adopting-nx-has-never-been-easier)
|
||||
· [Adding Nx to an Existing Standalone Project](#adding-nx-to-an-existing-standalone-project)
|
||||
· [Root-level Scripts](#rootlevel-scripts)
|
||||
· [Simplified Nx run-commands](#simplified-nx-runcommands)
|
||||
· [Coming up](#coming-up)
|
||||
· [How to Update Nx](#how-to-update-nx)
|
||||
|
||||
Prefer **a video version?**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=KBFQZw5ynFs" /%}
|
||||
|
||||
## 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)
|
||||
|
||||
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)
|
||||
|
||||
## 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:
|
||||
|
||||
- January: Nx crosses 1 million downloads per week
|
||||
- June: Nx crosses 2 million downloads per week
|
||||
- November: Nx crosses 3 million downloads per week
|
||||
|
||||
On to 4 million!
|
||||
|
||||
|
||||
|
||||
## New Task Graph Visualization
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=wOE3r4299fs" /%}
|
||||
|
||||
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`
|
||||
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" %}
|
||||
{
|
||||
...
|
||||
"targetDefaults": {
|
||||
"build": {
|
||||
"dependsOn": ["prebuild", "^build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example is pretty straightforward, but such pipelines can become much more involved.
|
||||
|
||||
Therefore, let me introduce you the **task graph**. You might already be used to seeing the project graph after running the `nx graph` command. But there's now a dropdown in the corner that enables you to switch to the task graph. Select a target from the "Target Name dropdown" to filter the list of projects to only those with that target. Click on a project to show that target's task graph.
|
||||
|
||||
You can add another project as well, showing what the task graph looks like for a command that runs tasks for multiple projects like `nx run-many` or `nx affected`. Click on the `Group by project` checkbox to group related tasks by their project, and click on a task to see what executor it uses.
|
||||
|
||||
|
||||
|
||||
## Standalone Projects
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=qEaVzh-oBBc" /%}
|
||||
|
||||
Nx is widely known as [THE developer tool](https://monorepo.tools/) people look at when it comes to implementing monorepos in the frontend space. However, a lot of the unique features that Nx ships (in particular when it comes to implementing [Integrated Monorepos](/deprecated/integrated-vs-package-based)) can be beneficial even outside of the typical monorepo scenario. In particular, Nx plugin features such as code generation, pre-configured build tooling setup, and battle-tested integration with best practices tools (e.g. Cypress, Jest, ESLint, Vite, …).
|
||||
|
||||
But one stands out most prominently: the **ability to easily modularize** your codebase.
|
||||
|
||||
|
||||
|
||||
A lot of our users adopt Nx for precisely this reason. They have a large app and want to break it into smaller pieces while still having the comfort of deploying it as a single one.
|
||||
|
||||
In 15.3 we are therefore making **standalone projects** a first-class feature. Suppose you now create a new workspace with `npx create-nx-workspace` alongside the usual monorepo options. In that case, you will now see two more options for scaffolding a standalone React or Angular application (we will add more in the future).
|
||||
|
||||
|
||||
|
||||
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/
|
||||
src/
|
||||
cypress.config.ts
|
||||
project.json
|
||||
...
|
||||
src/
|
||||
app/
|
||||
main.tsx
|
||||
...
|
||||
public/
|
||||
index.html
|
||||
project.json
|
||||
tsconfig.spec.json
|
||||
tsconfig.app.json
|
||||
tsconfig.json
|
||||
vite.config.ts
|
||||
nx.json
|
||||
package.json
|
||||
```
|
||||
|
||||
The critical part here is that you can still have multiple nodes. Even in this example, we have the app itself at the root of the workspace and a nested `e2e` project for that application (using Cypress).
|
||||
|
||||
To modularize your application, you can add libraries as you would do in a more traditional integrated Nx monorepo setup, but you can now have those alongside your application. Either create them directly at the root-level or group them in one or more root-level folders. In the example below, I have a `features` as well as `utils` folder, both of which can host multiple libraries.
|
||||
|
||||
```text
|
||||
e2e/
|
||||
...
|
||||
src/
|
||||
app/
|
||||
main.tsx
|
||||
...
|
||||
features/
|
||||
feature1/
|
||||
feature2/
|
||||
utils/
|
||||
...
|
||||
index.html
|
||||
...
|
||||
nx.json
|
||||
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.
|
||||
|
||||
## 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!
|
||||
|
||||
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!!
|
||||
|
||||
`@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.
|
||||
|
||||
Similarly, you can add a new Vite-powered React app to an existing Nx workspace using the `vite` bundler option:
|
||||
|
||||
```shell
|
||||
npx nx generate @nrwl/react:application --bundler=vite
|
||||
```
|
||||
|
||||
This new setup gives you an easy jumpstart as it does all the configuration for you:
|
||||
|
||||
- React with Vite
|
||||
- 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:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "viteapp",
|
||||
...
|
||||
"projectType": "application",
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nrwl/vite:build",
|
||||
...
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@nrwl/vite:dev-server",
|
||||
"defaultConfiguration": "development",
|
||||
...
|
||||
},
|
||||
"test": {
|
||||
"executor": "@nrwl/vite:test",
|
||||
"outputs": ["{projectRoot}/coverage"],
|
||||
"options": {
|
||||
"passWithNoTests": true
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/vite:configuration
|
||||
```
|
||||
|
||||
This will adjust the NxExt Vite plugin configuration to match the one provided by our core team. Check out our docs for more info: [/technologies/build-tools/vite/generators/configuration](/technologies/build-tools/vite/api/generators/configuration)
|
||||
|
||||
You can also find all the details about the new Vite package in our docs: [/technologies/build-tools/vite/introduction](/technologies/build-tools/vite/introduction)
|
||||
|
||||
## 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!
|
||||
|
||||
Regardless of whether you have
|
||||
|
||||
- an existing package-based monorepo setup using NPM/Yarn or PNPM workspaces
|
||||
- an existing Lerna workspace (for this you probably want to consult the [Lerna docs](https://lerna.js.org/upgrade) for some awesome feature updates)
|
||||
- a Create-React-App (CRA) application
|
||||
- a Angular CLI standalone application
|
||||
- or really any other form of project
|
||||
|
||||
You can just run
|
||||
|
||||
```shell
|
||||
npx nx@latest init
|
||||
```
|
||||
|
||||
Running this command will install the `nx` package, and then analyze your existing project structure and correctly identify whether it is a monorepo workspace or some standalone project, whether it's a CRA app or whether you're coming from the Angular CLI. Based on that, you'll get a couple of questions asked and then your workspace gets configured to run it with Nx.
|
||||
|
||||
Check out our docs for all the details on
|
||||
|
||||
- [adding Nx to an existing monorepo](/recipes/adopting-nx/adding-to-monorepo)
|
||||
- [adding Nx to any non-monorepo setup](/recipes/adopting-nx/adding-to-existing-project)
|
||||
- [migrating your CRA project to Nx](/recipes/adopting-nx/adding-to-existing-project)
|
||||
- [migrating your Angular CLI app to Nx](/technologies/angular/migration/angular)
|
||||
|
||||
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
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=VmGCZ77ao_I" /%}
|
||||
|
||||
Adding Nx to a single application? Why would that be useful? Well, most apps have multilple scripts in their `package.json`, which includes building, testing, linting your app and potentially much more. Nx can cache these! Obviously it is just app-level caching (since you didn't modularize it with libraries), but imagine your CI setup running these:
|
||||
|
||||
```shell
|
||||
npx nx build
|
||||
npx nx test
|
||||
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.
|
||||
|
||||
To add Nx to an existing standalone project, all you need to run is
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"scripts": {
|
||||
"build": "nx exec -- vite build",
|
||||
"lint": "nx exec -- eslint \"src/**/*.ts*\"",
|
||||
...
|
||||
"dev": "vite",
|
||||
"start": "vite --open",
|
||||
},
|
||||
"devDependencies": {
|
||||
...
|
||||
"nx": "15.3.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Read more in our docs: [/recipes/adopting-nx/adding-to-existing-project](/recipes/adopting-nx/adding-to-existing-project)
|
||||
|
||||
## Root-level Scripts
|
||||
|
||||
{% 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.
|
||||
|
||||
Assume you already have a script called `docs` in your root-level `package.json`.
|
||||
|
||||
```json5
|
||||
// package.json
|
||||
{
|
||||
name: 'myorg',
|
||||
scripts: {
|
||||
docs: 'node ./generateDocsSite.js',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
To allow it to be cached and to be run with Nx, all you need to do is add the follow `nx` property to your `package.json`:
|
||||
|
||||
```json5
|
||||
// package.json
|
||||
{
|
||||
"name": "myorg",
|
||||
"scripts": {
|
||||
"docs": "node ./generateDocsSite.js"
|
||||
}
|
||||
"nx": {}
|
||||
}
|
||||
```
|
||||
|
||||
You can then run it with
|
||||
|
||||
```shell
|
||||
npx nx docs
|
||||
```
|
||||
|
||||
As the next steps you might obviously want to add `docs` to the [cacheable operations](/ci/reference/config) and [fine-tune it's cache inputs](/recipes/running-tasks/configure-inputs).
|
||||
|
||||
Read more about it in our docs: [/recipes/running-tasks/root-level-scripts](/recipes/running-tasks/root-level-scripts)
|
||||
|
||||
## Simplified Nx run-commands
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=iygb-KhAeik" /%}
|
||||
|
||||
Nx can automatically detect your scripts in `package.json`. But if you have an integrated setup using Nx plugins, they usually come with a `project.json` . There you have targets like `build`, `test`, `lint` etc.. and they mostly look as follows:
|
||||
|
||||
```json5 {% fileName="project.json" %}
|
||||
{
|
||||
"name": "demoapp",
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nrwl/vite:build",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"defaultConfiguration": "production",
|
||||
"options": {
|
||||
"outputPath": "dist/demoapp"
|
||||
},
|
||||
...
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@nrwl/vite:dev-server",
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```json5 {% fileName="project.json" %}
|
||||
{
|
||||
"name": "demoapp",
|
||||
...
|
||||
"targets": {
|
||||
"prebuild": {
|
||||
"executor": "nx:run-commands",
|
||||
"options": {
|
||||
"command": "echo 'hi'"
|
||||
}
|
||||
},
|
||||
"build": {
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For simple commands this was a huge overhead, so we simplified it to just this:
|
||||
|
||||
```json5 {% fileName="project.json" %}
|
||||
{
|
||||
"name": "demoapp",
|
||||
...
|
||||
"targets": {
|
||||
"prebuild": {
|
||||
"command": "echo 'hi'"
|
||||
},
|
||||
"build": {
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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 in 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
|
||||
|
||||
- Workspace watching
|
||||
- Lock-file pruning
|
||||
- Nx Cloud integration into Nx Console
|
||||
|
||||
Follow us [on our socials](https://twitter.com/nxdevtools) and on [Youtube](https://www.youtube.com/@nxdevtools) to make sure to see it when we announce them!
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
@@ -1,164 +0,0 @@
|
||||
---
|
||||
title: 'Nx 15.4 — Vite 4 Support, a new Nx Watch Command, and more!'
|
||||
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.avif'
|
||||
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:
|
||||
|
||||
- [Vite 4.0 Support](#vite-40-support)
|
||||
- [Nx Watch](#nx-watch)
|
||||
- [Webpack-less Cypress Support for Our React Standalone preset](#webpackless-cypress-support-for-our-react-standalone-preset)
|
||||
- [Server-Side Rendering support for Module Federation for both Angular and React Applications](#serverside-rendering-support-for-module-federation-for-both-angular-and-react-applications)
|
||||
- [Running Multiple Targets in Parallel for Multiple Projects](#running-multiple-targets-in-parallel-for-multiple-projects)
|
||||
- [Interactive Prompts for Custom Preset](#interactive-prompts-for-custom-preset)
|
||||
|
||||
Prefer a **video version**?
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=G02THNy3PcE" /%}
|
||||
|
||||
## Vite 4.0 Support
|
||||
|
||||
Nx 15.4 brings in the latest Vite major version following the Vite 4 release earlier this month.
|
||||
|
||||
|
||||
|
||||
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](/technologies/build-tools/vite/introduction) 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:
|
||||
|
||||
- the ability to choose which targets you want to convert
|
||||
- enhanced `vite.config.ts` file configuration
|
||||
- better DX with detailed messages during conversion
|
||||
- [better documentation around converting using our generator](/technologies/build-tools/vite/api/generators/configuration)
|
||||
- [adding a guide to our docs for converting manually](/technologies/build-tools/vite/recipes/configure-vite)
|
||||
|
||||
You can check out more details about our Vite plugin including how to add Vite and Vitest to your existing Nx workspace by visiting our docs at [nx.dev/technologies/build-tools/vite/introduction](/technologies/build-tools/vite/introduction)
|
||||
|
||||
## Nx Watch
|
||||
|
||||
{% youtube src="https://youtu.be/0eVplUl1zBE" /%}
|
||||
|
||||
Nx 15.4 includes a new feature to support file-watching with Nx! Here's how it works:
|
||||
|
||||
Syntax:
|
||||
|
||||
```shell
|
||||
nx watch [projects modifier option] -- [command]
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```shell
|
||||
nx watch --all -- nx build $NX_PROJECT_NAME
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Personally, I'm excited to use the following command:
|
||||
|
||||
```shell
|
||||
npx -c 'nx watch –all – npx nx affected --target=test --files=$NX_FILE_CHANGES'
|
||||
```
|
||||
|
||||
To link in `nx watch` with the `nx affected` command to have a single watch command to run all my affected tests on save as they are affected!
|
||||
|
||||
Check out [our docs](/recipes/running-tasks/workspace-watching) for more details.
|
||||
|
||||
## Webpack-less Cypress Support for Our React Standalone preset
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
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.
|
||||
|
||||
## Server-Side Rendering support for Module Federation for both Angular and React Applications
|
||||
|
||||
|
||||
|
||||
Now you can get the benefits of both Server Side Rendering and Module Federation for your applications, which will improve page loads, Search Engine Optimization, and build times!
|
||||
|
||||
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.
|
||||
|
||||
Learn more about this new feature [in our docs](/technologies/react/recipes/module-federation-with-ssr)!
|
||||
|
||||
## Running Multiple Targets in Parallel for Multiple Projects
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=ROTO89i5m_4" /%}
|
||||
|
||||
Nx 15.4 includes updates to the `nx run-many` command, allowing you to add multiple whitespace-separated targets, as well as globs in the `projects` option, for example:
|
||||
|
||||
```shell
|
||||
npx nx run-many --target test build lint
|
||||
```
|
||||
|
||||
^ this would run all `test`, `build`, and `lint` targets in your workspace, and you can now filter this down to select projects via globbing:
|
||||
|
||||
```shell
|
||||
npx nx run-many --target test build lint --projects "domain-products-*"
|
||||
```
|
||||
|
||||
^ this will now run all `test`, `build`, and `lint` targets for all projects in your workspace that start with "domain-products-".
|
||||
|
||||
## Interactive Prompts for Custom Preset
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
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 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.
|
||||
|
||||
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!
|
||||
|
||||
You can find [full changelogs for the release](https://github.com/nrwl/nx/releases/tag/15.4.0) on github.
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Learn more
|
||||
|
||||
- [🧠 Nx Docs](/getting-started/intro)
|
||||
- [👩💻 Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [💬 Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [📹 Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
-128
@@ -1,128 +0,0 @@
|
||||
---
|
||||
title: 'Setting up Module Federation with Server-Side Rendering for Angular'
|
||||
slug: 'setting-up-module-federation-with-server-side-rendering-for-angular'
|
||||
authors: ['Colum Ferry']
|
||||
cover_image: '/blog/images/2023-01-10/kyMChnJ-X6jK9sbuaOdOiw.avif'
|
||||
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.
|
||||
|
||||
This technology has enabled a much cleaner approach to Micro Frontend Architecture but also is employable as a strategy to implement incremental builds for large applications, reducing overall build times. This can lead to faster feedback cycles and less money spent on CI workflows.
|
||||
|
||||
Nx offers great out-of-the-box support and developer experience for Module Federation for Angular and React. You can learn more about it from the resources below:
|
||||
|
||||
📄 [Module Federation Recipes on Nx](/technologies/module-federation/recipes)
|
||||
📺 [Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc)
|
||||
|
||||
However, until now, it has only supported Client-Side Rendering (CSR). Essentially it worked only for Single Page Applications (SPAs). While this is still valuable, it is becoming ever more apparent that Server-Side Rendering (SSR) is becoming the de-facto standard for building web applications, due to the multitude of benefits it provides.
|
||||
|
||||
> [What is server-side rendering: definition, benefits and risks](https://solutionshub.epam.com/blog/post/what-is-server-side-rendering)
|
||||
|
||||
Since [version 15.4](/blog/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more), Nx now offers Module Federation with support for SSR! 🎉
|
||||
|
||||
Now we can get both, the benefits of Module Federation and SSR in our Nx Workspaces!
|
||||
|
||||
## How it works
|
||||
|
||||
A traditional SSR application is rendered on the server. It receives the requested route from the browser, Angular evaluates that route, and the server generates the HTML and sends it back 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.
|
||||
|
||||
|
||||
|
||||
This gives us full power of SSR but also still allowing us to break our build into multiple smaller builds. It also means that we _could_ redeploy the remote server with new changes without having to redeploy the host server, allowing for independent deployability of features within the overall application.
|
||||
|
||||
## 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).
|
||||
|
||||
```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.
|
||||
|
||||
Answer with the following:
|
||||
|
||||
✔ Choose what to create · integrated
|
||||
✔ 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/)_._
|
||||
|
||||
When your workspace is created, run `cd myorg`.
|
||||
|
||||
Next, we will need to install the [Official Nx Angular Plugin](/technologies/angular/introduction):
|
||||
|
||||
```
|
||||
npm install @nrwl/angular
|
||||
```
|
||||
|
||||
Once this is installed, we only need one command to scaffold out our full Module Federation with SSR architecture:
|
||||
|
||||
```shell
|
||||
npx nx g host dashboard --remotes=login --ssr
|
||||
```
|
||||
|
||||
We will see in the terminal that this generates a bunch of files. What it actually creates is:
|
||||
Two applications with Angular Universal (SSR)
|
||||
Webpack Configuration for Browser and Server with Module Federation
|
||||
|
||||
We can serve our dashboard (host) application, along with our login (remote) application, by simply running the command:
|
||||
|
||||
```shell
|
||||
npx nx serve-ssr dashboard
|
||||
```
|
||||
|
||||
This will build the browser and server bundles of our login application, then run the login using node.
|
||||
The login application will be run without any file watchers, meaning that if you make a change to the code for the login application, it will not be reflected automatically. More on this later.
|
||||
|
||||
> Note: Nx will cache the build of the browser and server bundles for the login application. If you were to run the command again, it would simply use the cache rather than actually rebuilding the application! 🔥.
|
||||
|
||||
Once this is complete, it will then build and run the server for the dashboard application, _with_ file watchers, allowing it to pick up changes to the code.
|
||||
|
||||
You should see a success message like this in the terminal:
|
||||
|
||||
```
|
||||
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:
|
||||
|
||||
|
||||
|
||||
The most interesting piece here is the first entry in the network log. Let's look at it more closely:
|
||||
|
||||
|
||||
|
||||
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!
|
||||
|
||||
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!
|
||||
|
||||
## 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::
|
||||
|
||||
```shell
|
||||
npx nx serve-ssr dashboard --devRemotes=login
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
🧠 [Nx Docs](/getting-started/intro)
|
||||
👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
🧐 [Need help with Angular, React, Monorepos, Lerna or Nx? Talk to us 😃](https://nx.app/enterprise)
|
||||
@@ -1,536 +0,0 @@
|
||||
---
|
||||
title: 'React, Vite and TypeScript: Get started in under 2 minutes'
|
||||
slug: 'react-vite-and-typescript-get-started-in-under-2-minutes'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2023-01-12/ucL7YQ2v8aaOy426soLPZA.avif'
|
||||
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.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
· [How do I create a new project setup?](#how-do-i-create-a-new-project-setup)
|
||||
· [Running, building and testing the app](#running-building-and-testing-the-app)
|
||||
· [Building the app](#building-the-app)
|
||||
· [Testing the app](#testing-the-app)
|
||||
· [Running integration tests with Cypress](#running-integration-tests-with-cypress)
|
||||
· [Linting](#linting)
|
||||
· [Customize Vite and Vitest](#customize-vite-and-vitest)
|
||||
· [Hidden gem: Caching](#hidden-gem-caching)
|
||||
· [Hidden gem: Easily modularize your app](#hidden-gem-easily-modularize-your-app)
|
||||
· [Hidden gem: Visualize your architecture](#hidden-gem-visualize-your-architecture)
|
||||
· [Hidden gem: Guard your boundaries](#hidden-gem-guard-your-boundaries)
|
||||
· [Hidden gem: Just run what changed](#hidden-gem-just-run-what-changed)
|
||||
· [Hidden gem: A dedicated Editor extension](#hidden-gem-a-dedicated-editor-extension)
|
||||
· [Hidden gem: Automated Upgrades](#hidden-gem-automated-upgrades)
|
||||
· [Using CRA? Automatically migrate to Vite + Nx](#using-cra-automatically-migrate-to-vite-nx)
|
||||
· [Conclusion](#conclusion)
|
||||
|
||||
{% 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
|
||||
|
||||
- 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
|
||||
- has built-in support for Vite and Vitest (alternatively Webpack & Jest)
|
||||
- caches your scripts to speed up things
|
||||
- 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.
|
||||
|
||||
> **_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**.
|
||||
|
||||
## How do I create a new project setup?
|
||||
|
||||
To set up a new project, just invoke the following command:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace@latest awesomereactapp --preset=react-standalone
|
||||
```
|
||||
|
||||
Note `awesomereactapp` is the name of the app and folder being created, and `--preset=react-standalone` tells Nx which template to use when scaffolding the initial setup. You can also invoke it like:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace@latest awesomereactapp
|
||||
```
|
||||
|
||||
And then choose the option you prefer in the terminal prompt:
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
npm start
|
||||
```
|
||||
|
||||
And in a matter of milliseconds, your app should be served at [http://localhost:4200/](http://localhost:4200/).
|
||||
|
||||
`npm start` just invokes the script defined in the `package.json`:
|
||||
|
||||
```json {% fileName="package.json" %}
|
||||
{
|
||||
"name": "awesomereactapp",
|
||||
...
|
||||
"scripts": {
|
||||
"start": "nx serve",
|
||||
"build": "nx build",
|
||||
"test": "nx test"
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Internally this delegates to `nx serve`, where `serve` is the [Nx target](/reference/glossary#target) to be invoked. You can find those in the `project.json`:
|
||||
|
||||
```json {% fileName="project.json" %}
|
||||
{
|
||||
"name": "awesomereactapp",
|
||||
"$schema": "node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "./src",
|
||||
"projectType": "application",
|
||||
"targets": {
|
||||
"build": {...},
|
||||
"serve": {
|
||||
"executor": "@nrwl/vite:dev-server",
|
||||
"defaultConfiguration": "development",
|
||||
"options": {
|
||||
"buildTarget": "awesomereactapp:build"
|
||||
},
|
||||
"configurations": {
|
||||
"development": {
|
||||
"buildTarget": "awesomereactapp:build:development",
|
||||
"hmr": true
|
||||
},
|
||||
"production": {
|
||||
"buildTarget": "awesomereactapp:build:production",
|
||||
"hmr": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {...},
|
||||
"lint": {...}
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
```
|
||||
|
||||
This is where you can see all the targets available for a given project, and you can [add your own](https://youtu.be/iygb-KhAeik)! In a Nutshell, an Nx target contains
|
||||
|
||||
- `executor` - a function (here `dev-server`) exposed by the plugin (here `@nrwl/vite`) to run the task at hand. Think of it as the wrapper of your usual Npm scripts
|
||||
- `options` - this is where you can pass options to the `executor`
|
||||
- `configurations` - allows you to create different versions of the `options` . You control which configuration is used by passing it via the `--configuration=production` flag to your commands. Also, note the `defaultConfiguration`.
|
||||
|
||||
You can go more in-depth if you want on the [Nx docs](/concepts/executors-and-configurations).
|
||||
|
||||
## Building the app
|
||||
|
||||
Just in the same way as serving our web app, we can build it with
|
||||
|
||||
```shell
|
||||
npx nx build
|
||||
```
|
||||
|
||||
This places an output into a `dist` folder. Now that we've seen the `project.json` targets, you probably guessed that you could customize that output folder directly in those settings.
|
||||
|
||||
## Testing the app
|
||||
|
||||
This setup also comes with testing baked in using [Vitest](https://vitest.dev/). And you probably guessed it, you can just run tests as follows:
|
||||
|
||||
```shell
|
||||
npx nx test
|
||||
```
|
||||
|
||||
## Running integration tests with Cypress
|
||||
|
||||
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
|
||||
|
||||
- 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)
|
||||
- spinning up our development server manually first that serves our React app such that we can load it in our Cypress tests environment
|
||||
|
||||
All we need to do is to use
|
||||
|
||||
```shell
|
||||
npx nx e2e e2e
|
||||
```
|
||||
|
||||
This might look weird initially, but basically, we run the `e2e` target (see `e2e/project.json`) on the `e2e` project.
|
||||
|
||||
```json {% fileName="e2e/project.json"" %}
|
||||
{
|
||||
"name": "e2e",
|
||||
"$schema": "../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "e2e/src",
|
||||
"projectType": "application",
|
||||
"targets": {
|
||||
"e2e": {
|
||||
"executor": "@nrwl/cypress:cypress",
|
||||
"options": {
|
||||
"cypressConfig": "e2e/cypress.config.ts",
|
||||
"devServerTarget": "awesomereactapp:serve:development",
|
||||
"testingType": "e2e"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "awesomereactapp:serve:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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_](/technologies/react/api/generators/cypress-component-configuration)
|
||||
|
||||
## Linting
|
||||
|
||||
And similarly, linting can be triggered by running the following command:
|
||||
|
||||
```shell
|
||||
npx nx lint
|
||||
```
|
||||
|
||||
There's a `.eslintrc.json` file already at the workspace's root that contains some best practices rules.
|
||||
|
||||
## Customize Vite and Vitest
|
||||
|
||||
The project setup is made in a way that you can easily customize your [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/) setup. Just open the pre-generated `vite.config.ts` at the root of your workspace and add custom Vite plugins or fine-tune Vitest.
|
||||
|
||||
```typescript
|
||||
/// <reference types="vitest" />
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import viteTsConfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 4200,
|
||||
host: 'localhost',
|
||||
},
|
||||
plugins: [
|
||||
react(),
|
||||
viteTsConfigPaths({
|
||||
root: './',
|
||||
}),
|
||||
],
|
||||
// vitest config
|
||||
test: {
|
||||
globals: true,
|
||||
cache: {
|
||||
dir: './node_modules/.vitest',
|
||||
},
|
||||
environment: 'jsdom',
|
||||
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## Hidden gem: Caching
|
||||
|
||||
Nx is known for its caching that helps optimize the speed in monorepos. Caching takes the inputs (the command, source files, environment variables…) and computes a hash.
|
||||
|
||||
|
||||
|
||||
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)
|
||||
|
||||
While this obviously makes a lot of sense in a monorepo, it can also help **speed up single-project workspaces**. Most projects have multiple targets, such as `build`, `test`, `lint`. These can be cached! Imagine you have a PR where you change some `*.spec.ts` files because you add a test or fix some. Your CI script probably runs all the targets (`build`, `test`, `lint`) all the time. And it should totally do that. But you could avoid the `build` step because your spec file should not influence that outcome. As such, it could be restored from the cache. `test` needs to run and potentially also `lint` if you run linting also for spec files.
|
||||
|
||||
You can fine-tune what goes into the cache for each command. [More on the Nx docs](/recipes/running-tasks/configure-inputs)
|
||||
|
||||
## Hidden gem: Easily modularize your app
|
||||
|
||||
Imagine a storefront application. You will probably have domain areas like
|
||||
|
||||
- Product list — which would have facilities for listing all currently available products, their ratings, user reviews etc
|
||||
- Orders — for viewing your currently open orders as a user or browsing past orders. Things like placing a new order or triggering a refund on a previously acquired product
|
||||
- Payments — for handling the payment flow, asking for the credit card, triggering the payment, and starting the order placement process once the payment is successful
|
||||
- Authentication — which handles the whole signup/login flow and provides lower-level utilities for other domain areas in the app, like getting access to the current user.
|
||||
- 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:
|
||||
|
||||
```
|
||||
cra-app
|
||||
├─ public/
|
||||
├─ src/
|
||||
│ ├─ authentication/
|
||||
│ │ ├─ current-user/
|
||||
│ │ │ ├─ ...
|
||||
│ │ │ └─ index.ts
|
||||
│ │ ├─ login/
|
||||
│ │ └─ signup/
|
||||
│ ├─ orders/
|
||||
│ │ ├─ checkout/
|
||||
│ │ ├─ place-order/
|
||||
│ │ ├─ refund/
|
||||
│ │ └─ order-list/
|
||||
│ ├─ payments/
|
||||
│ ├─ products/
|
||||
│ ├─ user-profile/
|
||||
│ │ ├─ addresses/
|
||||
│ │ └─ credit-cards/
|
||||
│ ├─ App.css
|
||||
│ ├─ App.tsx
|
||||
│ ...
|
||||
├─ package-lock.json
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```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:
|
||||
|
||||
```
|
||||
awesomereactapp
|
||||
├─ public
|
||||
│ └─ favicon.ico
|
||||
├─ src
|
||||
│ ├─ app
|
||||
│ ├─ ...
|
||||
├─ domains
|
||||
│ └─ orders
|
||||
│ └─ checkout
|
||||
│ ├─ src
|
||||
│ │ ├─ index.ts
|
||||
│ │ └─ lib
|
||||
│ │ ├─ domains-orders-checkout.module.css
|
||||
│ │ ├─ domains-orders-checkout.spec.tsx
|
||||
│ │ └─ domains-orders-checkout.tsx
|
||||
│ ├─ tsconfig.json
|
||||
│ ├─ tsconfig.lib.json
|
||||
│ ├─ tsconfig.spec.json
|
||||
│ └─ vite.config.ts
|
||||
├─ ...
|
||||
├─ index.html
|
||||
├─ package-lock.json
|
||||
├─ package.json
|
||||
├─ ...
|
||||
├─ tsconfig.app.json
|
||||
├─ tsconfig.base.json
|
||||
├─ tsconfig.json
|
||||
├─ tsconfig.spec.json
|
||||
└─ vite.config.ts
|
||||
```
|
||||
|
||||
Notice the `domains/orders/checkout/src/index.ts`: this is the public API of the `checkout` library where you can decide what to export and what should remain private within the library. This conscious process of selecting what to expose and what not leads to a much stronger encapsulation than just a folder structure. It also greatly helps with the maintainability aspect as your app grows.
|
||||
|
||||
When generating the library, a TypeScript path mapping is automatically created in the root-level `tsconfig.base.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
...
|
||||
"paths": {
|
||||
"@awesomereactapp/domains/orders/checkout": [
|
||||
"domains/orders/checkout/src/index.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "tmp"]
|
||||
}
|
||||
```
|
||||
|
||||
In this way, anything that's being exported from the `checkout` library can be consumed like
|
||||
|
||||
```typescript
|
||||
import { SomeComponent } from '@awesomereactapp/domains/orders/checkout';
|
||||
```
|
||||
|
||||
You can also just run linting or testing in isolation for these new libraries:
|
||||
|
||||
```shell
|
||||
npx nx test domains-orders-checkout
|
||||
```
|
||||
|
||||
And obviously, caching (as seen previously) would work on these new libraries as well.
|
||||
|
||||
> _Note,_ `_domains-orders-checkout_` _is the unique name of the project, composed by its file structure. You can change the name in the_ `_domains/orders/checkout/project.json_` _if you'd like._
|
||||
|
||||
## Hidden gem: Visualize your architecture
|
||||
|
||||
Another side-effect of splitting up your codebase into libraries is that your code structure and architecture emerge and becomes visible. Nx comes with a `graph` command built-in, so you can even visualize it:
|
||||
|
||||
```shell
|
||||
npx nx graph
|
||||
```
|
||||
|
||||
|
||||
|
||||
It becomes even more interesting if you select the "Group by folder" checkbox as the domains become visible at that point:
|
||||
|
||||
|
||||
|
||||
> _Note this is a hypothetical app to demo some of the features of the Nx graph visualization. Some of the connections might only make a little sense._
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
{
|
||||
// ... more project configuration here
|
||||
"tags": ["domain:products", "type:domain"]
|
||||
}
|
||||
```
|
||||
|
||||
> _Note that_ `_type:domain_` _or_ `_domain:products_` _are really just strings. You can define them however you want._
|
||||
|
||||
In the `.eslintrc.base.json` you can then define the rules. Here for instance we're stating that a library of `type:utils` can only depend on other utility libraries, while a `type:domain` can depend on both, other domain libraries as well as utility libraries.
|
||||
|
||||
```json {% fileName=".eslintrc.base.json" %}
|
||||
{
|
||||
"overrides": [
|
||||
{
|
||||
"rules": {
|
||||
"@nrwl/nx/enforce-module-boundaries": [
|
||||
"error",
|
||||
{
|
||||
"depConstraints": [
|
||||
{
|
||||
"sourceTag": "type:utils",
|
||||
"onlyDependOnLibsWithTags": ["type:utils"]
|
||||
},
|
||||
{
|
||||
"sourceTag": "type:domain",
|
||||
"onlyDependOnLibsWithTags": ["type: domain", "type:utils"]
|
||||
},
|
||||
{
|
||||
"sourceTag": "domain:products",
|
||||
"onlyDependOnLibsWithTags": ["domain:products", "domain:orders"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
## 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)".
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
|
||||
To run tasks only for the affected areas, use:
|
||||
|
||||
```shell
|
||||
npx nx affected:<target>
|
||||
```
|
||||
|
||||
To make a concrete example, running just tests for those projects:
|
||||
|
||||
```shell
|
||||
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).
|
||||
|
||||
It has a dedicated view within VSCode to trigger common commands, browse the workspace structure and even inline render the graph.
|
||||
|
||||
|
||||
|
||||
It also comes with contextual menus to quickly access most of the commonly used functionality:
|
||||
|
||||
|
||||
|
||||
Here's a walkthrough video showing some of the powerful capabilities of Nx Console:
|
||||
|
||||
{% youtube src="https://youtu.be/ZST_rmhzRXI" /%}
|
||||
|
||||
## Hidden gem: Automated Upgrades
|
||||
|
||||
To keep workspaces evergreen, Nx comes with automated code migrations that
|
||||
|
||||
- upgrade your `package.json` packages to the next version
|
||||
- can automatically update your configuration files if necessary
|
||||
- can automatically update your source files if necessary (in case of breaking changes in the API)
|
||||
|
||||
This allows for smooth transitions even if there are breaking changes. Just run
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
Nx gathers the currently installed packages and updates them to the latest version. If a package comes with Nx migration scripts, Nx collects them in a `migrations.json` file. You can inspect and then run them. This dramatically helps to keep your project tooling up to date.
|
||||
|
||||
Read more about how [Nx migrations work](/features/automate-updating-dependencies) on the docs.
|
||||
|
||||
## 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:
|
||||
|
||||
{% youtube src="https://youtu.be/zvYb7XCLQzU" /%}
|
||||
|
||||
```shell
|
||||
npx nx init
|
||||
```
|
||||
|
||||
Read more on the Nx docs: [/recipes/adopting-nx/adding-to-existing-project](/recipes/adopting-nx/adding-to-existing-project)
|
||||
|
||||
> _If for some reason you cannot migrate to Vite just yet, you can pass_ `_--vite=false_` _to keep a Webpack-based setup for now._
|
||||
|
||||
## Conclusion
|
||||
|
||||
Ready? Give it a try:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace mycoolapp --preset=react-standalone
|
||||
```
|
||||
|
||||
And let us know what you think :)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🧐 [Need help with Angular, React, Monorepos, Lerna or Nx? Talk to us 😃](/enterprise)
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
title: 'Nx Console meets Nx Cloud'
|
||||
slug: 'nx-console-meets-nx-cloud'
|
||||
authors: ['Max Kless']
|
||||
cover_image: '/blog/images/2023-01-18/Mkqkadhkk7DydWvPg5L0bA.avif'
|
||||
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:
|
||||
|
||||
- **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. 😍
|
||||
|
||||
Head over to [http://nx.dev/nx-cloud](/nx-cloud) to learn more.
|
||||
|
||||
**Prefer a video walkthrough? Here we go**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=WfWmK1x52HE" /%}
|
||||
|
||||
## 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.
|
||||
|
||||
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)
|
||||
|
||||
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.
|
||||
|
||||
You will see that some changes happen in your `nx.json`:
|
||||
|
||||
```
|
||||
"default": {
|
||||
- "runner": "nx/tasks-runners/default",
|
||||
+ "runner": "@nrwl/nx-cloud",
|
||||
"options": {
|
||||
+ "accessToken": "NDM2MmU2YmUtNDFl…ifHJlYWQtd3JpdGU=",
|
||||
"cacheableOperations": [
|
||||
"build",
|
||||
"lint",
|
||||
"test",
|
||||
"e2e"
|
||||
],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
To see it in action, push your newly created access token and have a coworker (or CI pipeline) run a task on their machine. If you execute that same task again, it will be pulled from the cache just like it did locally! 🔮
|
||||
|
||||
|
||||
|
||||
To learn more about Nx Cloud access tokens, head over to the docs: [Access Tokens Documentation](/ci/recipes/security/access-tokens).
|
||||
|
||||
## Claiming 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.
|
||||
|
||||
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 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).
|
||||
|
||||
|
||||
|
||||
## 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!
|
||||
|
||||
|
||||
|
||||
To take advantage of this valuable information without changing your development workflow, use the Nx Cloud integration for your favourite platform: Github, GitLab or Bitbucket Cloud. You can see the results of your cloud runs in a PR comment with an overview of failed tasks and links to easily readable outputs. No more scrolling through endless logs until you find what you need!
|
||||
|
||||
|
||||
|
||||
To set it up, just click on the button in the Nx Console cloud view and follow the prompts in your browser. Read more in the [full guide on connecting your workspace to](/ci/recipes/set-up/monorepo-ci-github-actions) VCS.
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 🎮 [Nx Console GitHub](https://github.com/nrwl/nx-console)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
@@ -1,75 +0,0 @@
|
||||
---
|
||||
title: 'Configuration Files and Potholes in Your Codebase'
|
||||
slug: 'configuration-files-and-potholes-in-your-codebase'
|
||||
authors: ['Isaac Mann']
|
||||
cover_image: '/blog/images/2023-01-31/T-xiDccBOxMQpDrG.avif'
|
||||
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?
|
||||
|
||||
## Less Configuration
|
||||
|
||||
There have been many attempts over the years to make it easier to bypass configuration code.
|
||||
|
||||
|
||||
|
||||
Ruby on Rails popularized the philosophy of Convention over Configuration. In this philosophy, the default configuration settings are derived from your folder structure or the way you name your files. These unwritten conventions are used as a way of bypassing writing configuration files that most of the time will follow a set pattern.
|
||||
|
||||
|
||||
|
||||
Parcel advertises itself as a zero configuration bundler. This is mostly a reaction to webpack, which requires a fairly complex config file before it can do anything useful. As application grow more complex, so does the config file. These often become so complicated that developers dread fixing any problems with them, because once it becomes known that they have fixed a problem with webpack, they will be forever saddled with the burden of maintaining that file. In contrast, Parcel does all the tasks required of a typical SPA web app without any config file.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## How much configuration is the right amount of configuration?
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
## Nx Generators and Migration Generators
|
||||
|
||||
|
||||
|
||||
Nx has an elegant solution to this dilemma. There are three key parts.
|
||||
|
||||
1. Use [code generators](/features/generate-code) to create configuration files that you can safely ignore
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
Every Nx plugin provides migration generators that will automatically update the default settings to the latest state of the art. With these generators, Nx can take on the burden of maintaining your infrastructure code, except for the specific portions that your developers have customized.
|
||||
|
||||
## 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.
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
|
||||
- [🧠 Nx Docs](/getting-started/intro)
|
||||
- [👩💻 Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [💬 Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [📹 Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: 'Setup React and Tailwind — The Easy Way'
|
||||
slug: 'setup-react-and-tailwind-the-easy-way'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2023-02-09/TK4Kdj-cc890gQkgUtKNyA.avif'
|
||||
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).
|
||||
|
||||
## Prefer a video? I've got you covered!
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=hHh0xhzSnx8" /%}
|
||||
|
||||
## Configuring Tailwind for React
|
||||
|
||||
Tailwind has good docs around getting started quickly. There are options to set up Tailwind with their Tailwind CLI, PostCSS, and framework-specific guides.
|
||||
|
||||
|
||||
|
||||
These steps mostly involve
|
||||
|
||||
- installing `tailwindcss`, `postcss` and `autoprefixer`
|
||||
- configuring your `tailwind.config.js` to make sure Tailwind can properly "purge" its generated CSS file based on the content files (usually your `html`, `[j|t]sx`, `[t|j]s` )
|
||||
- adjusting your main CSS file to include the Tailwind base classes (in case you want to use Tailwind also in your CSS files, a heated topic)
|
||||
|
||||
**One important thing:** if you use [Create-React-App](https://create-react-app.dev/) you might want to check out [what the Tailwind docs say](https://tailwindcss.com/docs/guides/create-react-app) first.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
## 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 easily using the following command
|
||||
|
||||
```shell
|
||||
$ npx create-nx-workspace reactapp --preset=react-standalone
|
||||
```
|
||||
|
||||
|
||||
|
||||
As you can see, this allows you to choose which bundler to use as well as other options (such as the CSS setup). Again, this is already such a code generator that creates this initial project scaffold.
|
||||
|
||||
Alternatively, **if you happen to use CRA already**, you can easily convert to an Nx and Vite (or also Webpack) based setup by running:
|
||||
|
||||
```shell
|
||||
$ npx nx@latest init
|
||||
```
|
||||
|
||||
You can pass `--vite=false` if you still want to keep the Webpack configuration or pass `--integrated` if you already plan to have a monorepo instead of a single-project setup. The [Nx docs go into more detail here](/recipes/adopting-nx/adding-to-existing-project).
|
||||
|
||||
## Generating a Tailwind Setup
|
||||
|
||||
Once you have a [Nx-based React](/getting-started/tutorials/react-monorepo-tutorial) setup, adding Tailwind is as easy as running:
|
||||
|
||||
```shell
|
||||
$ 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
|
||||
|
||||
- Tailwind, PostCSS, and Autoprefixer installed
|
||||
- Tailwind configured together with PostCSS
|
||||
- your main `styles.css` file updated with the Tailwind base classes
|
||||
|
||||
|
||||
|
||||
## That's it!
|
||||
|
||||
You should be all setup and ready now! Here are some related resources to explore:
|
||||
|
||||
- [Nx docs: React Monorepo tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
||||
- [Youtube: Is CRA Dead](https://youtu.be/fkTz6KJxhhE)
|
||||
- [Nx docs: Migrate CRA to React and Vite](/recipes/adopting-nx/adding-to-existing-project)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
@@ -1,189 +0,0 @@
|
||||
---
|
||||
title: 'Nx 15.7 — Node Support, Angular LTS, Lockfile Pruning'
|
||||
slug: 'nx-15-7-node-support-angular-lts-lockfile-pruning'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2023-02-16/2AAo-mng7QyJP9yC80zNFQ.avif'
|
||||
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.
|
||||
|
||||
### Table of Contents
|
||||
|
||||
· [10k Subscribers on Youtube](#10k-subscribers-on-youtube)
|
||||
· [Updates to our Nx Plugin Guides](#updates-to-our-nx-plugin-guides)
|
||||
· [Nx meets Node — First-Class Support landed](#nx-meets-node-firstclass-support-landed)
|
||||
· [Detaching Angular versions](#detaching-angular-versions)
|
||||
· [Bootstrapping a new Angular app with Standalone API support](#bootstrapping-a-new-angular-app-with-standalone-api-support)
|
||||
· [Lockfile parsing and pruning](#lockfile-parsing-and-pruning)
|
||||
· [Storybook 7.0 beta support](#storybook-70-beta-support)
|
||||
· [More flexible Webpack config](#more-flexible-webpack-config)
|
||||
· [How to Update Nx](#how-to-update-nx)
|
||||
· [Coming up](#coming-up)
|
||||
|
||||
### 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)!!
|
||||
|
||||
|
||||
|
||||
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).
|
||||
|
||||
## 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.
|
||||
|
||||
Please have a look at our updated guide: [/extending-nx/tutorials/organization-specific-plugin](/extending-nx/tutorials/organization-specific-plugin)
|
||||
|
||||
## Nx meets Node — First-Class Support landed
|
||||
|
||||
{% 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".
|
||||
|
||||
|
||||
|
||||
This is when you want a single-project Nx workspace to build out your Node backend.
|
||||
|
||||
All the features Nx is known for also apply to backend development. That includes
|
||||
|
||||
- **code generation support** for all the previously mentioned Node frameworks
|
||||
- avoiding monolithic codebases via **modularizing it with local libraries** (with code generation support)
|
||||
- Ability to **automatically setup a Dockerfile** for packaging your app
|
||||
- **Optionally bundle** your Node app for easy deployment in the case of edge-functions
|
||||
- **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!
|
||||
|
||||
## Detaching Angular versions
|
||||
|
||||
{% youtube src="https://youtu.be/AQV4WFldwlY" /%}
|
||||
|
||||
The Angular CLI supports a single version of Angular and requires the user to upgrade them together with the help of automated upgrade mechanisms like `ng update`. On the other hand, Nx operates on a different release cycle and is independent of Angular versions. However, prior technical limitations resulted in each Nx major version only being compatible with a specific Angular major version. This caused challenges for Angular developers and corporations who were either stuck on an older Angular version or unable to upgrade promptly but still wanted access to the latest and greatest Nx features for increased productivity.
|
||||
|
||||
Starting with v15.7.0, the `@nrwl/angular` plugin will support both Angular v14 and v15, and our goal is to continue supporting the Angular LTS versions from Angular v14 onwards.
|
||||
|
||||
New workspaces will always be created with the latest Angular version, but during migration, you can skip some package updates as defined by Nx plugin authors. For Angular, this means you can skip migrating to newer versions. This feature can be enabled by running the following command in an interactive mode:
|
||||
|
||||
```
|
||||
$ 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.
|
||||
|
||||
If you need to apply an Angular update that you previously skipped, you can collect migrations from an older version of Nx by running:
|
||||
|
||||
```
|
||||
$ nx migrate latest --from=nx@<version>
|
||||
```
|
||||
|
||||
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](/technologies/angular/recipes/angular-nx-version-matrix) for more details.
|
||||
|
||||
## Bootstrapping a new Angular app with Standalone API support
|
||||
|
||||
{% 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.
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace@latest ngapp
|
||||
--preset=angular-standalone
|
||||
--standaloneApi
|
||||
```
|
||||
|
||||
## 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!).
|
||||
|
||||
Why is this useful? Glad you asked! Mostly for three reasons:
|
||||
|
||||
- more **accurately map the nodes and dependencies** in the Nx graph (yep the graph also includes npm packages used by every single project)
|
||||
- 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:
|
||||
|
||||
- `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:
|
||||
|
||||
```
|
||||
import { createPackageJson, createLockFile } from '@nrwl/devkit';
|
||||
|
||||
const projectGraph = await createProjectGraphAsync();
|
||||
const packageJson = createPackageJson(projectName, projectGraph);
|
||||
const lockFile = createLockFile(packageJson);
|
||||
|
||||
// save files using e.g. `fs.writeFileSync`
|
||||
```
|
||||
|
||||
Stay tuned for a more in-depth blog post coming soon to [our blog](/blog).
|
||||
|
||||
## Storybook 7.0 beta support
|
||||
|
||||
Nx provides support for Storybook version 7.0 beta, with generators and executors, so that you can try it out now, either in a new or in your existing Nx workspace. Storybook version 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and enhancements, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and so is the Nx support for it.
|
||||
|
||||
You can try out Storybook 7.0 beta in a new Nx workspace by passing the `--storybook7betaConfiguration` flag when generating the Storybook configuration for your projects.
|
||||
|
||||
## More flexible Webpack config
|
||||
|
||||
{% youtube src="https://youtu.be/CIT4MFMraXg" /%}
|
||||
|
||||
Previously when you created a new React application with the Nx `@nrwl/react` plugin, the actual Webpack config was hidden within the plugin itself.
|
||||
|
||||
|
||||
|
||||
It was for a good reason, but at the same time, it is a thin line to walk between giving more flexibility and ensuring integrity and consistency (not to speak about features such as [automated code migrations](/features/automate-updating-dependencies)). We wrote a [blog post about it last week](/blog/configuration-files-and-potholes-in-your-codebase).
|
||||
|
||||
Inspired by our new [Vite setup](/technologies/build-tools/vite/introduction), which allows for a more modular configuration in the `vite.config.ts`, we wanted to bring some of the same flexibility to our Webpack setup as well. As such, now every Nx Webpack setup (e.g. a new React + Webpack based app) have a `webpack.config.js` in the project root. Old project are automatically migrated to this new setup.
|
||||
|
||||
|
||||
|
||||
If you want to upgrade but still retain the previous behavior, we introduced an `isolatedConfig` mode that can be set to `false`. More details in our docs: [/technologies/build-tools/webpack/recipes/webpack-config-setup](/technologies/build-tools/webpack/recipes/webpack-config-setup)
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Coming up
|
||||
|
||||
We are currently working on some exciting stuff, including
|
||||
|
||||
- Deno support
|
||||
- Improvements to Nx Console, including support for IntelliJ
|
||||
- NestJS
|
||||
- Rust 👀
|
||||
- Nx for non-JS environments
|
||||
- …
|
||||
|
||||
So keep an eye on our [Twitter](https://twitter.com/nxdevtools), [Youtube](https://www.youtube.com/@nxdevtools) and [blog](/blog) to not miss those announcements.
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
@@ -1,182 +0,0 @@
|
||||
---
|
||||
title: 'Using NgRx Standalone APIs with Nx'
|
||||
slug: 'using-ngrx-standalone-apis-with-nx'
|
||||
authors: ['Colum Ferry']
|
||||
cover_image: '/blog/images/2023-02-21/pJHhA04d6jIjOb5vpCDjyw.avif'
|
||||
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!
|
||||
|
||||
**Prefer a video version? We've got you covered!**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=fp9E5G9C61Q" /%}
|
||||
|
||||
## Create a new Nx Workspace
|
||||
|
||||
`npx create-nx-workspace myorg`
|
||||
|
||||
Select:
|
||||
|
||||
- Standalone Angular app
|
||||
- Yes to using Standalone Components
|
||||
- Yes to add routing
|
||||
- Any option for the stylesheet format
|
||||
- Yes to Nx Cloud
|
||||
|
||||
The result should look something like this:
|
||||
|
||||
|
||||
|
||||
Now run `cd myorg` to enter the workspace.
|
||||
|
||||
The `src/main.ts` should look different than you remember with standard NgModule-based Angular applications.
|
||||
|
||||
You should see something similar to
|
||||
|
||||
```
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import {
|
||||
provideRouter,
|
||||
withEnabledBlockingInitialNavigation,
|
||||
} from '@angular/router';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import { appRoutes } from './app/app.routes';
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: \[provideRouter(appRoutes, withEnabledBlockingInitialNavigation())\],
|
||||
}).catch((err) => console.error(err));
|
||||
```
|
||||
|
||||
This is important, as this is the file where your root NgRx providers need to be placed, within the `providers` option of the `bootstrapApplication` function.
|
||||
|
||||
Nx will aid this also!
|
||||
|
||||
## Generate the root state
|
||||
|
||||
`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.
|
||||
|
||||
Say false to Facades also.
|
||||
|
||||
|
||||
|
||||
The generator will now make changes to your `main.ts` file and install the NgRx packages for you!
|
||||
|
||||
Your `main.ts` file should now look like this
|
||||
|
||||
```
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import {
|
||||
provideRouter,
|
||||
withEnabledBlockingInitialNavigation,
|
||||
} from '@angular/router';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import { appRoutes } from './app/app.routes';
|
||||
import { provideStore, provideState } from '@ngrx/store';
|
||||
import { provideEffects } from '@ngrx/effects';
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: \[
|
||||
provideEffects(),
|
||||
provideStore(),
|
||||
provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
|
||||
\],
|
||||
}).catch((err) => console.error(err));
|
||||
```
|
||||
|
||||
Notice the addition of `provideEffects()` and `provideStore()` to the `providers` array.
|
||||
|
||||
## Generate a new feature library
|
||||
|
||||
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.
|
||||
|
||||
`nx g @nrwl/angular:lib feature-users --standalone --routing --lazy --parent=src/app/app.routes.ts`
|
||||
|
||||
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!
|
||||
|
||||
Some files you may want to explore in your own time are:
|
||||
|
||||
`src/app/app.routes.ts`
|
||||
`feature-users/src/lib/lib.routes.ts`
|
||||
|
||||
## 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.
|
||||
|
||||
`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).
|
||||
|
||||
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.
|
||||
|
||||
We can see that if we look at the `lib.routes.ts` file
|
||||
|
||||
```
|
||||
import { Route } from '@angular/router';
|
||||
import { FeatureUsersComponent } from './feature-users/feature-users.component';
|
||||
import { provideStore, provideState } from '@ngrx/store';
|
||||
import { provideEffects } from '@ngrx/effects';
|
||||
import \* as fromUsers from './+state/users.reducer';
|
||||
import { UsersEffects } from './+state/users.effects';
|
||||
|
||||
export const featureUsersRoutes: Route\[\] = \[
|
||||
{
|
||||
path: '',
|
||||
component: FeatureUsersComponent,
|
||||
providers: \[
|
||||
provideState(fromUsers.USERS\_FEATURE\_KEY, fromUsers.usersReducer),
|
||||
provideEffects(UsersEffects),
|
||||
\],
|
||||
},
|
||||
\];
|
||||
```
|
||||
|
||||
The command will also have generated our
|
||||
|
||||
- Actions
|
||||
- Reducers
|
||||
- Selectors
|
||||
- Effects
|
||||
|
||||
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!
|
||||
|
||||
`nx build`
|
||||
|
||||
`nx test`
|
||||
|
||||
`nx test feature-users`
|
||||
|
||||
## Conclusion
|
||||
|
||||
This guide has shown how easy it is to set up NgRx with Nx and how to take advantage of the latest Standalone APIs with your application. All with just 5 Nx commands!
|
||||
|
||||
With the Angular roadmap pointing to Standalone Components becoming the preferred option for developing Angular applications, this support will be crucial in the future, and Nx will help you achieve it with the best possible DX!
|
||||
|
||||
> Btw, did you know you can now scaffold a single-project Angular Nx workspace that fully leverages the Standalone APIs? Check it out here: [https://youtu.be/Hi3aJ0Rlkls](https://youtu.be/Hi3aJ0Rlkls)
|
||||
|
||||
You can check out an example repository that was created following the steps above here: [https://github.com/Coly010/nx-ngrx-standalone](https://github.com/Coly010/nx-ngrx-standalone)
|
||||
|
||||
## Learn More
|
||||
|
||||
🧠 [Nx Docs](/getting-started/intro)
|
||||
👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
🧐 [Need help with Angular, React, Monorepos, Lerna or Nx? Talk to us 😃](https://nx.app/enterprise)
|
||||
@@ -1,127 +0,0 @@
|
||||
---
|
||||
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.avif'
|
||||
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.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Lerna: Brought to You by Nx](#lerna-brought-to-you-by-nx)
|
||||
- [Still On Lerna 4?](#still-on-lerna-4)
|
||||
- [Idempotency Added to the `lerna publish from-git` Command](#idempotency-added-to-the-lerna-publish-fromgit-command)
|
||||
- [`lerna run` Can Run Multiple Scripts In a Single Command](#lerna-run-can-run-multiple-scripts-in-a-single-command)
|
||||
- [New --include-private Option Added To lerna publish](#new-includeprivate-option-added-to-lerna-publish)
|
||||
- [Massive Refactor](#massive-refactor)
|
||||
- [Getting Started With Lerna From The Lerna Team](#getting-started-with-lerna-from-the-lerna-team)
|
||||
- [The Future of Lerna](#the-future-of-lerna)
|
||||
|
||||
## Lerna: Brought to You by Nx
|
||||
|
||||
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).
|
||||
|
||||
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).
|
||||
|
||||
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).
|
||||
|
||||
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!
|
||||
|
||||
|
||||
|
||||
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)
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
- Running `lerna publish` by itself will version and publish all packages in the workspace since your latest release
|
||||
- Running `lerna publish from-git` will publish all projects tagged in the latest commit
|
||||
- Running `lerna publish from-package` will publish all projects whose version does not yet exist in the target registry based on the version listed in their `package.json` file.
|
||||
|
||||
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).
|
||||
|
||||
[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:
|
||||
|
||||
{% youtube src="https://youtu.be/Ey73CEGcVKw" /%}
|
||||
|
||||
Learn more [here](https://github.com/lerna/lerna/pull/3527).
|
||||
|
||||
## New `--include-private` Option Added To `lerna publish`
|
||||
|
||||
[Npm supports a `["private": true]` configuration](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#private) as a way of preventing the publication of a library that is private.
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
{% youtube src=" https://youtu.be/7TgjCk7Diks" /%}
|
||||
|
||||
You can find more information on this change [here](https://github.com/lerna/lerna/pull/3503).
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
|
||||
|
||||
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).
|
||||
|
||||
## Getting Started With Lerna From The Lerna Team
|
||||
|
||||
We recently ran a live stream with [James Henry](https://twitter.com/MrJamesHenry) and [Austin Fahsl](https://twitter.com/AustinFahsl) from our Lerna team to show how to get started with Lerna, all the way through to versioning and publishing our packages to npm!
|
||||
|
||||
{% youtube src="https://youtu.be/HqPOoU35xzA" /%}
|
||||
|
||||
Check out the recap of this session above, and check out [the repo from our session on GitHub](https://github.com/ZackDeRose/for-the-lulz).
|
||||
|
||||
## The Future of Lerna
|
||||
|
||||
Looking to the future, we are targeting Q2 of 2023 for Lerna v7 (including a `--dry-run` option for both `lerna version` and `lerna publish` commands - you can catch a sneak-peak of this in James' talk from Nx Conf 2022 below!)
|
||||
|
||||
{% youtube src="https://youtu.be/CNdDv2MsBuw" /%}
|
||||
|
||||
You can find [a roadmap for all the features we plan to add in Lerna 7](https://github.com/lerna/lerna/discussions/3410) on Github!
|
||||
|
||||
## Lerna More!
|
||||
|
||||
- [🧠 Lerna Docs](https://lerna.js.org/)
|
||||
- [👩💻 Lerna GitHub](https://github.com/lerna/lerna)
|
||||
- [💬 Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [📹 Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
@@ -1,249 +0,0 @@
|
||||
---
|
||||
title: 'Bundling a Node API with Fastify, esbuild, and Nx'
|
||||
slug: 'bundling-a-node-api-with-fastify-esbuild-and-nx'
|
||||
authors: ['Jack Hsu']
|
||||
cover_image: '/blog/images/2023-02-28/PADY_RKrkXj39p4nj79ESw.avif'
|
||||
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.
|
||||
|
||||
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**
|
||||
|
||||
· [Creating the project](#creating-the-project)
|
||||
· [Running tests](#running-tests)
|
||||
· [Building for production using esbuild](#building-for-production-using-esbuild)
|
||||
· [Docker support](#docker-support)
|
||||
· [Deploying the server](#deploying-the-server)
|
||||
· [Summary](#summary)
|
||||
|
||||
**Prefer a video version? We've got you covered!**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=K4f-fMuAoRY" /%}
|
||||
|
||||
## Creating the project
|
||||
|
||||
You can create a new API with a single command.
|
||||
|
||||
```shell
|
||||
$ npx create-nx-workspace@latest \
|
||||
--preset=node-standalone \ # create a Node.js project
|
||||
--framework=fastify \ # other options are express and koa
|
||||
--docker # we'll touch on this later on
|
||||
```
|
||||
|
||||
To run the server in dev-mode, use `npx nx serve` (aliased to `npm start`), and you should see the server starting at port 3000.
|
||||
|
||||
```
|
||||
$ curl <http://localhost:3000>
|
||||
{"message":"Hello API"}
|
||||
```
|
||||
|
||||
A couple of notable files:
|
||||
|
||||
- The `src/main.ts` file is responsible for starting the Fastify server and registering plugins.
|
||||
- The `src/app/app.ts` file is the app plugin that provides an initial endpoint at `/` that replies with `{"message": "Hello API"}`.
|
||||
|
||||
When you edit the source code, the server will reload. You can pass `--no-watch` to disable this behavior.
|
||||
|
||||
## Running tests
|
||||
|
||||
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.
|
||||
|
||||
```
|
||||
// src/app/app.spec.ts
|
||||
// This file is generated by Nx.
|
||||
import Fastify, { FastifyInstance } from 'fastify';
|
||||
import { app } from './app';
|
||||
|
||||
describe('GET /', () => {
|
||||
let server: FastifyInstance; beforeEach(() => {
|
||||
server = Fastify();
|
||||
server.register(app);
|
||||
}); it('should respond with a message', async () => {
|
||||
const response = await server.inject({
|
||||
method: 'GET',
|
||||
url: '/',
|
||||
}); expect(response.json()).toEqual({ message: 'Hello API' });
|
||||
});
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
The E2E tests run against the actual server (with all plugins registered), which gives better real-world guarantees.
|
||||
|
||||
```shell
|
||||
$ npx nx serve & # run server in background
|
||||
$ npx nx e2e e2e # run test suite
|
||||
GET /
|
||||
✓ should return a message (27 ms)
|
||||
|
||||
Test Suites: 1 passed, 1 total
|
||||
Tests: 1 passed, 1 total
|
||||
Snapshots: 0 total
|
||||
Time: 0.429 s
|
||||
Ran all test suites.Tearing down... ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— >
|
||||
|
||||
NX Successfully ran target e2e for project e2e (3s)$ lsof -i:3000 -t | xargs kill # stop server process
|
||||
|
||||
```
|
||||
|
||||
There are trade-offs between speed versus confidence when it comes to unit versus E2E tests, which is a topic that is out of scope for this article. I think you should do both, but this is a discussion be held with your team. Nx supports both cases out of the box.
|
||||
|
||||
## 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/).
|
||||
|
||||
`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.
|
||||
|
||||
When you run the build command, Nx uses `esbuild` to generate a self-contained app bundle, which does not require `node_modules`.
|
||||
|
||||
```shell
|
||||
$ npx nx build # aliased to npm build
|
||||
> nx run api:build
|
||||
|
||||
|
||||
—————————————————————————————————————————————————————
|
||||
|
||||
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.
|
||||
|
||||
```shell
|
||||
$ npx nx build
|
||||
> nx run api:build # existing outputs match the cache, left as is
|
||||
|
||||
|
||||
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— >
|
||||
|
||||
NX Successfully ran target build for project api (16ms) Nx read the output from the cache instead of running the command for 1 out of 1 tasks.
|
||||
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
```
|
||||
|
||||
$ node dist/api
|
||||
{"level":30,"time":1675880059720,"pid":70605,"hostname":"mbp.lan","msg":"Server listening at http://\[::1\]:3000"}
|
||||
{"level":30,"time":1675880059721,"pid":70605,"hostname":"mbp.lan","msg":"Server listening at <http://127.0.0.1:3000>"}
|
||||
[ ready ] <http://localhost:3000>
|
||||
|
||||
```
|
||||
|
||||
You can even run the e2e suite against the production bundle: `npx nx e2e e2e`.
|
||||
|
||||
## Docker support
|
||||
|
||||
Recall that we passed the `--docker` option when creating the API project. WIth this option, Nx will generate a default `Dockerfile` and a `docker-build` target.
|
||||
|
||||
```shell
|
||||
# This file is generated by Nx.
|
||||
#
|
||||
# Build the docker image with `npx nx docker-build api`.
|
||||
# Tip: Modify "docker-build" options in project.json to change docker build args.
|
||||
#
|
||||
# Run the container with `docker run -p 3000:3000 -t api`.
|
||||
FROM docker.io/node:lts-alpine
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
ENV PORT=3000WORKDIR /appRUN addgroup --system api && \
|
||||
adduser --system -G api apiCOPY dist/api api
|
||||
RUN chown -R api:api .CMD [ "node", "api" ]
|
||||
|
||||
```
|
||||
|
||||
To build the image, run `npx nx docker-build`. The image copies only the self-contained bundle, so no `npm install` at all!
|
||||
|
||||
Nx is smart enough to bundle the app before building the Docker image — because of the `dependsOn` configuration in `project.json`. You can visualize this dependency with `npx nx graph`.
|
||||
|
||||
|
||||
|
||||
Now that the image is built, we can run it.
|
||||
|
||||
```
|
||||
|
||||
$ docker run -p 3000:3000 -t api
|
||||
{"level":30,"time":1675880993256,"pid":1,"hostname":"248744de020a","msg":"Server listening at <http://0.0.0.0:3000>"}
|
||||
[ ready ] <http://0.0.0.0:3000>
|
||||
|
||||
```
|
||||
|
||||
**Note:** The server binds to `0.0.0.0` so that it can be access from the host machine. You can run curl to verify that it indeed works, or better yet use the E2E test suite (`npx nx e2e e2e`)!
|
||||
|
||||
## Deploying the server
|
||||
|
||||
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).
|
||||
|
||||
Once you are ready, let's configure our project.
|
||||
|
||||
```
|
||||
|
||||
$ fly launch --generate-name --no-deploy
|
||||
|
||||
```
|
||||
|
||||
Follow the prompts and a `fly.toml` file will be generated, which contains the Fly configuration. We need to update this file with the correct port used by our image.
|
||||
|
||||
```
|
||||
|
||||
[[services]]
|
||||
http_checks = []
|
||||
internal_port = 3000 # Make sure this matches what the app listens on
|
||||
|
||||
```
|
||||
|
||||
Now we can deploy the app.
|
||||
|
||||
```
|
||||
|
||||
$ fly deploy
|
||||
|
||||
```
|
||||
|
||||
Fly will log out the monitoring link when the app is successfully deployed.
|
||||
|
||||
|
||||
|
||||
And you can open the deployed server using `fly open`.
|
||||
|
||||
|
||||
|
||||
That's it! Our server is now deployed for the world to use.
|
||||
|
||||
## Summary
|
||||
|
||||
In this post, we saw how easy it is to go from zero code to a deployed server using Nx. Here is a quick summary of the points.
|
||||
|
||||
1. Use `create-nx-workspace --preset=node-standalone --framework=fastify --docker` to quickly create a Fastify server project.
|
||||
2. Nx provide both unit test and E2E test suites — `npx nx test` and `npx nx e2e e2e`.
|
||||
3. Nx builds the server using esbuild — `npx nx build`.
|
||||
4. Docker support is provided out of the box via the `--docker` option, and Nx understands that Docker build depends on the app to be bundled. Run it via `npx nx docker-build`.
|
||||
5. Deploying to Fly (or other platforms) is easy since we have a Docker image.
|
||||
|
||||
To learn more about Nx and what else it can do, refer to the [intro page](/getting-started/intro) in the docs.
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,235 +0,0 @@
|
||||
---
|
||||
title: 'Expanding Nx Console to JetBrains IDEs'
|
||||
slug: 'expanding-nx-console-to-jetbrains-ides'
|
||||
authors: ['Max Kless']
|
||||
cover_image: '/blog/images/2023-03-02/lEAhfd3d17hGichyT-oGbw.avif'
|
||||
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)
|
||||
|
||||
Nx Console has been on the Visual Studio Code marketplace for years, and with over 1.2 million downloads, we know that a
|
||||
lot of folks enjoy using it for their day to day Nx related tasks.
|
||||
|
||||
That makes it even more **exciting for us to officially announce that Nx Console is now available for JetBrains IDEs**!!
|
||||
Go grab it on the official store.
|
||||
|
||||
👉 **Install link:
|
||||
** [https://plugins.jetbrains.com/plugin/21060-nx-console](https://plugins.jetbrains.com/plugin/21060-nx-console)
|
||||
|
||||
|
||||
|
||||
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,
|
||||
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!
|
||||
|
||||
### Table of Contents
|
||||
|
||||
· [Going from one IDE to two](#going-from-one-ide-to-two)
|
||||
· [Nx Language Server](#nx-language-server)
|
||||
· [Generate UI](#generate-ui)
|
||||
· [Communicating with IntelliJ](#communicating-with-intellij)
|
||||
· [Adapting Styling](#adapting-styling)
|
||||
· [JCEF](#jcef)
|
||||
· [Glueing it together](#glueing-it-together)
|
||||
· [Looking ahead](#looking-ahead)
|
||||
|
||||
**Prefer a video version? We've got you covered!**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=xUTm6GDqwJM" /%}
|
||||
|
||||
## Going from one IDE to two
|
||||
|
||||
Nx Console has a ton of features to improve your development experience while working on Nx and Angular repos, some
|
||||
small and some big.
|
||||
|
||||
To provide the most value from the get-go for JetBrains users, we first focused on integrating two main areas: The Nx
|
||||
Language Server and the Generate UI.
|
||||
|
||||
**The Nx Language Server (nxls)** is based on
|
||||
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
|
||||
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
|
||||
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
|
||||
completely in order to integrate it into JetBrains-based editors!
|
||||
|
||||
## Nx Language Server
|
||||
|
||||
Development of the Nx Language Server (nxls) began as a way to provide autocompletions in Nx specific files. But we came
|
||||
to the realization that the `nxls` could also provide much more information.
|
||||
|
||||
The language server is a separate process that is called by the running IDE (that being VSCode, and now Intellij) that
|
||||
communicates via json rpc.
|
||||
|
||||
With the Language Server Protocol, there are certain methods that are called between the IDE and the language server,
|
||||
such as
|
||||
[`textDocument/completion`](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#textDocument_completion)
|
||||
that must be implemented.
|
||||
|
||||
When the `nxls` does Language Server Protocol related things (like autocomplete), it uses the local workspace copy of Nx
|
||||
to get information about the workspace. Since this workspace information is already loaded in memory, it presented a
|
||||
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
|
||||
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.
|
||||
|
||||
One of these custom requests is
|
||||
[`nx/workspace`](https://github.com/nrwl/nx-console/blob/756fdfb545de413436193227d273d078628d7829/libs/language-server/types/src/index.ts#L18-L23).
|
||||
Calling this endpoint gives us the same information that you can find when you run `nx graph --file=output.json`. (Plus
|
||||
a little more information that is needed for IDEs 🙂)
|
||||
|
||||
There are more custom requests that are implemented that help with IDE integration, some of these include:
|
||||
|
||||
- Nx version
|
||||
- Available generators
|
||||
- Finding projects based on file paths
|
||||
|
||||
You can see all the custom requests
|
||||
on [Github](https://github.com/nrwl/nx-console/blob/756fdfb545de413436193227d273d078628d7829/libs/language-server/types/src/index.ts).
|
||||
|
||||
**VSCode**
|
||||
|
||||
Language Server Protocol support is built into the core of VSCode, so using the language server there was straight
|
||||
forward. Previously the logic to get workspace information was just part of the VSCode extension. This was the logic
|
||||
that moved to the `nxls` .
|
||||
|
||||
**IntelliJ**
|
||||
|
||||
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
|
||||
IntelliJ/Webstorm to boot up `nxls` and start sending requests.
|
||||
|
||||
In future versions of IntelliJ/Webstorm, language server support is going to be fully baked into the core of the IDE
|
||||
using the same lsp4j library. This means that we can remove some of the scaffolding that we had to do to get it working
|
||||
without the core support.
|
||||
|
||||
## Generate UI
|
||||
|
||||
|
||||
_Screenshot of the generate UI in IntelliJ_
|
||||
|
||||
As mentioned, the generate UI is a key feature of Nx Console. It allows users to easily generate code by using a
|
||||
form-based view, rather than having to remember and type a series of CLI commands.
|
||||
|
||||
For VSCode, the only way to add a custom UI like this is to render it from inside
|
||||
a [webview](https://code.visualstudio.com/api/extension-guides/webview) — similar to an iframe. IntelliJ provides the
|
||||
functionality to build more complex native UIs. However, this would mean rewriting everything from scratch: how to
|
||||
process Nx schemas, how to render each kind of field, validation and more. And then, each change to the UI would have to
|
||||
be made in two places, greatly increasing the maintenance overhead and complexity of the codebase. This is why we
|
||||
decided to reuse the existing generate UI for IntelliJ.
|
||||
|
||||
The generate UI is a standalone app written in Angular. It consists of a few components for the different field types
|
||||
and a main component that deals with processing the schema, filtering fields and communicating with the IDE. This entire
|
||||
component was quite tightly coupled with VSCode in two regions: receiving and sending data to the IDE and styling.
|
||||
Naturally, these aspects had to be refactored out in order to accommodate a new host IDE.
|
||||
|
||||
## Communicating with IntelliJ
|
||||
|
||||
First, we ripped out all VSCode-specific code from the main component and moved it to a separate
|
||||
[`ide-communication.service.ts`](https://github.com/nrwl/nx-console/blob/f7de7f9d1f7ae5f59b0605b2e54ef28e6325e839/libs/generate-ui/feature-task-execution-form/src/lib/ide-communication/ide-communication.service.ts#L91).
|
||||
Communication with the host IDE is now done via one of two methods:
|
||||
|
||||
- for VSCode, we continue to use the straightforward (
|
||||
and [fully typed](https://www.npmjs.com/package/@types/vscode-webview)) `acquireVsCodeApi()` method,
|
||||
`window.addEventListener` and `webview.postMessage` .
|
||||
- for IntelliJ, there is no such helper method, so we wrote a custom `window.intellijApi` object. This api will then be
|
||||
called from both the Angular app and from within Kotlin code by injecting it into JCEF (more on that later). This is
|
||||
definitely a more involved solution and less developer-friendly, but it works perfectly fine.
|
||||
|
||||
The service uses whatever API it finds to send and receive messages, with the rest of the app none the wiser. The
|
||||
structure of the messages is identical between VSCode and IntelliJ. The fact that the Typescript-based VSCode extension
|
||||
natively understands JSON is a nice upside, since we can just pass around objects between the browser and extension
|
||||
without having to convert anything. For the Kotlin-based IntelliJ plugin, this needs an additional de-/serialization
|
||||
step, which is easily done with [`kotlinx.serialization`](https://github.com/Kotlin/kotlinx.serialization) or
|
||||
[`gson`](https://github.com/google/gson).
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
separate `generate-ui-styles` library, we map the VSCode styles to our matching variables. For IntelliJ, we extract the
|
||||
the same style variables using `UIUtil` and pass them to the app.
|
||||
|
||||
## JCEF
|
||||
|
||||
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
|
||||
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
|
||||
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!
|
||||
Communication with whatever is running in the browser works by **_injecting_** javascript code to be run into the
|
||||
browser - kind of like running something in the console. This creates a little more overhead than simply posting
|
||||
messages to be consumed from a listener like in VSCode. The upside is that it theoretically gives you a lot more
|
||||
flexibility in what you want to do in the browser - you could talk to multiple, independent APIs and register distinct
|
||||
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
|
||||
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
|
||||
`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,
|
||||
all the Kotlin code resides in a single app. Targets defined in `project.json` are available that wrap different gradle
|
||||
tasks like running a development instance, building or formatting the plugin using the
|
||||
[`nx:run-commands`](/reference/core-api/nx/executors/run-commands) executor.
|
||||
Since the plugin depends on artifacts provided by other Nx apps (namely the `nxls` and `generate-ui`), we have also
|
||||
created gradle tasks that call Nx to build these dependencies under the hood. This roundabout way of calling one tool
|
||||
from the other (and back again) could definitely be improved and we might look into having a more straightforward
|
||||
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.
|
||||
|
||||
## Looking ahead
|
||||
|
||||
In the upcoming releases, we plan to integrate more features that already exist in VSCode like the nx project view as
|
||||
well as add more IntelliJ-native functionality and quality-of-life changes. Our goal is to provide the same experience
|
||||
and level of productivity, regardless of which IDE you prefer to use. You can join the discussion and vote on what you
|
||||
think should be added on [the roadmap issue on GitHub](https://github.com/nrwl/nx-console/issues/1578).
|
||||
|
||||
We are also looking into automatic type generation for both TypeScript and Kotlin. Currently, all return types of the Nx
|
||||
Language Server have to be maintained in both languages, but maybe we could use a tool
|
||||
like [Dukat](https://github.com/Kotlin/dukat). This would help us to save time and reduce the risk of inconsistencies
|
||||
between the TypeScript and Kotlin codebases.
|
||||
|
||||
**Learn more**
|
||||
|
||||
- 🎮 [Nx Console GitHub](https://github.com/nrwl/nx-console)
|
||||
- 🚀 [Nx Console JetBrains plugin](https://plugins.jetbrains.com/plugin/21060-nx-console)
|
||||
- 🤖 [Nx Console VSCode extension](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
-214
@@ -1,214 +0,0 @@
|
||||
---
|
||||
title: 'Nx 15.8 — Rust Hasher, Nx Console for IntelliJ, Deno, Node and Storybook'
|
||||
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.avif'
|
||||
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.
|
||||
|
||||
**Table of Contents**
|
||||
· [Rustifying the Nx Hasher](#rustifying-the-nx-hasher)
|
||||
· [Deno Support](#deno-support)
|
||||
· [Nx Console — IntelliJ Support](#nx-console-intellij-support)
|
||||
· [Nx Console Field Prioritization (x-priority)](#nx-console-field-prioritization-xpriority)
|
||||
· [Modular Node Applications](#modular-node-applications)
|
||||
· [Storybook](#storybook)
|
||||
· [How to Update Nx](#how-to-update-nx)
|
||||
· [Learn more](#learn-more)
|
||||
|
||||
## Prefer a video? We've got you covered!
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=4XdHT5Y7zj4" /%}
|
||||
|
||||
## Heads-up: Release Live stream tomorrow
|
||||
|
||||
We have the Nx live stream on Thursday, March 9th at 7 PM CET, to talk about all the features that went into Nx 15.7 and 15.8. So tune in to ask your questions :)
|
||||
|
||||
Enable notifications here:
|
||||
[https://www.youtube.com/live/P3TinTe3O2g?feature=share](https://www.youtube.com/live/P3TinTe3O2g?feature=share)
|
||||
|
||||
## Rustifying the Nx Hasher
|
||||
|
||||
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).
|
||||
|
||||
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 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.
|
||||
|
||||
**All nice and good, but show me the numbers!**
|
||||
|
||||
So we did run some experiments on a small repo:
|
||||
|
||||
- avg. time for Rust hasher: 17ms
|
||||
- avg. time for Git hasher: 24ms
|
||||
|
||||
We also tried it on the [Nx repository](https://github.com/nrwl/nx) itself:
|
||||
|
||||
- Rust hasher: 50ms
|
||||
- Git hasher: 69ms
|
||||
|
||||
When running these tests on Windows (not WSL), the Nx repo hashing timings turned out to be
|
||||
|
||||
- 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.
|
||||
|
||||
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.
|
||||
|
||||
**Opting out**
|
||||
|
||||
We build the binary for the Rust hasher for:
|
||||
|
||||
- macOS x64
|
||||
- macOS arm
|
||||
- linux arm
|
||||
- linux gnu
|
||||
- linux musl
|
||||
- windows arm64
|
||||
- windows x64
|
||||
|
||||
As such, it should work on most CI and local developer machines. If we missed something, please reach out an [open an issue on GitHub](https://github.com/nrwl/nx)! In case something breaks though, you can also disable the Rust hasher by using the environment variable `NX_NON_NATIVE_HASHER=true`.
|
||||
|
||||
## Deno Support
|
||||
|
||||
{% 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).
|
||||
|
||||
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.
|
||||
|
||||
To use Deno in an existing Nx workspace, just install the `@nrwl/deno` plugin:
|
||||
|
||||
```
|
||||
npm i -D @nrwl/deno
|
||||
```
|
||||
|
||||
Then run the generator to create a new application:
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/deno:app mydenoapp
|
||||
```
|
||||
|
||||
Or generate a new library with:
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
## Nx Console — IntelliJ Support
|
||||
|
||||
{% youtube src="https://youtu.be/xUTm6GDqwJM" /%}
|
||||
|
||||
Developer tool CLIs are known for being, well, command-line interfaces. Nx comes with many such CLI commands for scaffolding projects, running tasks, and more. We wanted to make some of this more approachable, so we introduced Nx Console, an extension to the Visual Studio Code editor. And it turned out to be highly successful. Nx Console now has over 1.2 million downloads on the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console). We kept improving it over the years,
|
||||
|
||||
- adding support for [rendering the Nx graph](https://youtu.be/ZST_rmhzRXI)
|
||||
- [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.
|
||||
|
||||
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)
|
||||
|
||||
Read all the details [on our blog post](/blog/expanding-nx-console-to-jetbrains-ides) or check out our docs page about [integrating with editors](/getting-started/editor-setup).
|
||||
|
||||
## Nx Console Field Prioritization (x-priority)
|
||||
|
||||
{% youtube src="https://youtu.be/JJ12zKedwIs" /%}
|
||||
|
||||
Nx Console has proven a highly valuable tool for exploring Nx generators. Especially if you cannot recall all the various parameters, you can possibly pass. And sure, you could always pass the `--help` or browse [the docs](/technologies/react/api/generators/library), but it is just less convenient.
|
||||
|
||||
|
||||
|
||||
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`:
|
||||
|
||||
```json
|
||||
{
|
||||
"directory": {
|
||||
"description": "The directory of the new application.",
|
||||
"type": "string",
|
||||
"x-priority": "important"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
All required properties and those marked with an `x-priority: important` will be shown at the top of both, the CLI output (when using `--help`) as well as the Nx Console UI.
|
||||
|
||||
|
||||
|
||||
Read all about it [in the doc about Customizing Generator Options](/extending-nx/recipes/generator-options).
|
||||
|
||||
## Modular Node Applications
|
||||
|
||||
Nx has had Node backend support since the beginning, where you could add an [ExpressJS](/technologies/node/express/introduction) or [Nest.js](/technologies/node/nest/introduction) based application to your monorepo. This is a powerful approach as it allows you to colocate your frontend and backend code, which helps share code and, in particular, TypeScript types for your APIs!!
|
||||
|
||||
In [Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning), we then announced [Nx Standalone Projects](https://youtu.be/qEaVzh-oBBc) support for Node. This allows to develop a Node backend in isolation but still leverages all the features from Nx in terms of code generators, automated migrations, and speed features such as [affected commands](/ci/features/affected), [caching](/concepts/how-caching-works), and [optimized CI setups](/ci/features/distribute-task-execution).
|
||||
|
||||
In 15.8, we kept improving our Node support. Our main focus was on
|
||||
|
||||
- allowing to have a non-bundled output, while still being able to modularize the codebase with local libraries
|
||||
- generating a pruned lock file when building in production mode
|
||||
- improving our docker setup to account for non-bundled output and properly install node packages
|
||||
|
||||
Check out the following video walkthrough on using these features for modularizing a Fastify application:
|
||||
|
||||
{% youtube src="https://youtu.be/LHLW0b4fr2w" /%}
|
||||
|
||||
## Storybook
|
||||
|
||||
Nx now generates stories using [Component Storybook Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). If you are using our `@nrwl/react:storybook-configuration`, `@nrwl/angular:storybook-configuration`, `@nrwl/react:stories` and `@nrwl/angular:stories` generators, you will notice that the stories are now generated in the new format. You can check out our documentation for [Storybook and Angular](/technologies/test-tools/storybook/recipes/overview-angular) or [Storybook and React](/technologies/test-tools/storybook/recipes/overview-react) to see the new syntax.
|
||||
|
||||
As the Storybook doc mentions, CSF3 _reduces boilerplate code and improves ergonomics. This makes stories more concise, faster to write and easier to maintain._
|
||||
|
||||
You can migrate your existing stories in your Nx workspace to CSF3 using the Storybook [`csf-2-to-3` migrator](https://storybook.js.org/blog/storybook-csf3-is-here/#upgrade-to-csf3-today):
|
||||
|
||||
```shell
|
||||
npx storybook@next migrate csf-2-to-3 --glob="**/*.stories.ts"`
|
||||
```
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
Updating Nx is done with the following command and will update your Nx workspace dependencies and code to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
After updating your dependencies, run any necessary migrations.
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,83 +0,0 @@
|
||||
---
|
||||
title: 'Rspack — Getting up to speed with Nx'
|
||||
slug: 'rspack-getting-up-to-speed-with-nx'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2023-03-10/fWQ53mw2itEs3SGAOJVonQ.avif'
|
||||
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.
|
||||
|
||||
Almost a year ago [ByteDance](https://www.bytedance.com/) started developing a new, faster Webpack alternative: **Rspack**. [Valor Software](https://valor-software.com/) joined the collaboration and reached out to us about developing a dedicated Nx plugin. The goal: give developers an easy onboarding path to Rspack and React!
|
||||
|
||||
## Faster than Webpack? What is Rspack?
|
||||
|
||||
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 already applied Rspack on some of their internal business applications and has seen between 5 to 10x improvement in compilation performance.
|
||||
|
||||
More on the official Rspack docs: [https://rspack.dev](https://rspack.dev/)
|
||||
|
||||
## Getting up to speed with Rspack & Nx!
|
||||
|
||||
Our goal at Nx is to be the best CLI for your framework of choice. We want to remove friction so developers can easily leverage these new tools and focus on shipping features using a production-ready setup. This is why we developed a dedicated Rspack plugin that lets everyone quickly get up to speed.
|
||||
|
||||
Check out the following video for a complete walkthrough of how Nx and Rspack work together to create production-ready React applications.
|
||||
|
||||
{% youtube src="https://youtu.be/jGTE7xAcg24" /%}
|
||||
|
||||
## React Standalone App with Rspack
|
||||
|
||||
You can create a new Rspack-based React application using the following command:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace myrspackapp --preset=@nrwl/rspack
|
||||
```
|
||||
|
||||
This creates a pre-configured setup with React, TypeScript, ESLint, Jest (optionally Vite), Cypress for e2e testing, and obviously Rspack as the bundler.
|
||||
|
||||
All the usual Nx features, such as
|
||||
|
||||
- [affected commands](/ci/features/affected)
|
||||
- [computation caching](/features/cache-task-results)
|
||||
- remote caching with [Nx Cloud](/nx-cloud)
|
||||
|
||||
..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.
|
||||
|
||||
## Rspack in an Nx Monorepo
|
||||
|
||||
Similarly, you can use Rspack-based applications in existing Nx monorepos. Just install the NPM package:
|
||||
|
||||
```
|
||||
npm i @nrwl/rspack -D
|
||||
```
|
||||
|
||||
Then generate a new application:
|
||||
|
||||
```shell
|
||||
npx nx g @nrwl/rspack:app myrspackapp
|
||||
```
|
||||
|
||||
This creates a new application in your Nx monorepo that uses Rspack as the bundler. You can even import existing React libraries, which can also be an excellent way to experiment with Rspack in an existing production setup.
|
||||
|
||||
## Wrapping up
|
||||
|
||||
Go and learn more on the
|
||||
|
||||
- official Rspack website: [https://rspack.dev](https://rspack.dev/)
|
||||
- learn about the Nx Rspack plugin: [/technologies/build-tools/rspack/introduction](/technologies/build-tools/rspack/introduction)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🦀 [Rspack and Nx docs](/technologies/build-tools/rspack/introduction)
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -2,14 +2,13 @@
|
||||
title: Nx Cloud 3.0 — Faster Cache, More Powerful DTE, Better Ergonomics
|
||||
slug: 'nx-cloud-3-0-faster-more-efficient-modernized'
|
||||
authors: [Juri Strumpflohner]
|
||||
cover_image: '/blog/images/2023-04-19/featured_img.avif'
|
||||
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.
|
||||
It has been almost 2 years since we released [Nx Cloud 2.0](https://nx.app/). 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](https://dev.to/nx/helping-the-environment-by-saving-two-centuries-of-compute-time-4nep), 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**
|
||||
|
||||
@@ -22,13 +21,13 @@ 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" /%}
|
||||
|
||||
## New, Streamlined UI
|
||||
|
||||
This latest release of Nx Cloud comes with a new, streamlined design that offers users a more modern and visually appealing experience. This includes the main [Nx Cloud website](/nx-cloud), where we improved our messaging, including interactive visualizations to better explain some core concepts around remote caching and distributed task execution.
|
||||
This latest release of Nx Cloud comes with a new, streamlined design that offers users a more modern and visually appealing experience. This includes the main [Nx Cloud website](https://nx.app/), where we improved our messaging, including interactive visualizations to better explain some core concepts around remote caching and distributed task execution.
|
||||
|
||||
|
||||
|
||||
@@ -79,7 +78,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.
|
||||
@@ -91,7 +90,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](https://nx.app/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.
|
||||
|
||||
|
||||
|
||||
@@ -101,13 +100,13 @@ Finally, the **Enterprise plan** is for companies that want full control over wh
|
||||
|
||||
All these changes should allow developers to choose the plan that best suits their needs and budget more easily, ensuring a seamless and transparent experience regarding pricing and subscription management.
|
||||
|
||||
Learn more at [/pricing](/pricing).
|
||||
Learn more at [https://nx.app/pricing](https://nx.app/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!
|
||||
|
||||
@@ -120,4 +119,4 @@ In addition, we are actively exploring ways to provide advanced analytics for yo
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
---
|
||||
title: 'Nx 16 is Here!'
|
||||
slug: 'nx-16-is-here'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-05-02/n8JTIcKSYkebBOl8zZuF9w.avif'
|
||||
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!
|
||||
|
||||
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](/technologies/build-tools/vite/introduction) and Vitest for integrated Nx monorepos
|
||||
- We introduced an [official Deno plugin](https://youtu.be/NpH8cFSp51E), including integration for Node and Deno project collocation and project graph support for Deno imports
|
||||
- We added Rust into the Nx codebase to speed up core functionality
|
||||
- We added support for [non-npm workspaces](https://youtu.be/QOhdL02f6BY) to support workspaces focused on other languages like C#, Java, and Kotlin, and saw some of those in action with community plugins for [.NET](https://www.nx-dotnet.com/) and [Java/Kotlin](https://github.com/tinesoft/nxrocks)
|
||||
- Introduced [Nx Console for JetBrains IDEs like IntelliJ and WebStorm](https://youtu.be/xUTm6GDqwJM)
|
||||
- We have [decoupled the Nx version from Angular](https://youtu.be/AQV4WFldwlY) versions allowing you to update Nx without updating Angular
|
||||
|
||||
### Table of Contents
|
||||
|
||||
· [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)
|
||||
· [Task Graph](#task-graph)
|
||||
· [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
|
||||
|
||||
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.
|
||||
|
||||
To update to Nx 16, run
|
||||
|
||||
```
|
||||
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..
|
||||
|
||||
```
|
||||
nx migrate --run-migrations
|
||||
```
|
||||
|
||||
…as prompted in the terminal.
|
||||
|
||||
After the migrations have been run, you should be able to see them in your source control tools. Ensure that everything is still working properly by running any automated testing you have set up.
|
||||
|
||||
Check out this real-world example using the `nx migrate` command for the `Tanstack/query` repo:
|
||||
|
||||
{% youtube src="https://youtu.be/X1I1Aw2sV-Y" /%}
|
||||
|
||||
Also as a reminder to our Angular users — we’ve now **decoupled the Nx version from Angular versions**, so as long as you’re on an LTS version of Angular, you’re clear to migrate to the latest Nx version without having to touch your Angular version! To do so, be sure to use the `interactive` option (e.g. `nx migrate --interactive`). Check out this video for more info:
|
||||
|
||||
{% youtube src="https://youtu.be/AQV4WFldwlY" /%}
|
||||
|
||||
## Rescoping From @nrwl/_ to @nx/_
|
||||
|
||||
{% youtube src="https://youtu.be/HzkvhPKAepA" /%}
|
||||
|
||||
One of the more impactful changes from Nx 16 is that we’ll be changing the npm scope that we publish our packages under from `@nrwl` to `@nx`. In other words, `@nrwl/react` will now be published as `@nx/react`.
|
||||
|
||||
Nx will handle this migration automatically via the `nx migrate` command to update your workspaces!
|
||||
|
||||
To ensure that community plugins are not broken, the `@nrwl/*` versions of these packages are deprecated but will continue to be published until Nx 17 which is scheduled for October 2023.
|
||||
|
||||
## Deno Standalone Apps, Edge Deployment and More
|
||||
|
||||
Nx has had support for developing Node-based backends for a while. It was a popular choice for building your BFF in a monorepo-based setup alongside your React or Angular application. [In Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning) we decided to expand that support and really go deep into improving the overall DX.
|
||||
|
||||
**Deno got quite some love** in this iteration:
|
||||
|
||||
- Standalone App support — You can now scaffold a new single-project Deno workspace with Nx. Just run `npx create-nx-workspace --preset=@nx/deno`. Probably the fastest way to get up and running with Deno
|
||||
- We also added Nx generators to set up Deno with [oak](https://oakserver.github.io/oak/). Just pass the `--framework` option when you set up a new Deno app (or use [Nx Console](/getting-started/editor-setup))
|
||||
|
||||
It’s all about **Edge functions** recently (and, well, serverless in general). Especially when developing with Node it is common that you might want to deploy to the Edge or some serverless environment. Therefore, we..
|
||||
|
||||
- created a brand new `@nx/netlify` package (currently [in labs](https://github.com/nrwl/nx-labs/tree/main/packages/netlify)) which allows you to set up a brand new project for developing and pushing Netlify functions, or you can add serverless deployment support to an existing project, using the `@nx/netlify:setup-serverless` generator. Check out our in-depth recipe on the topic: [/technologies/node/recipes/node-serverless-functions-netlify](/technologies/node/recipes/node-serverless-functions-netlify)
|
||||
- published anew `@nx/aws-lambda` for deploying [Lambda functions](https://aws.amazon.com/lambda/) to AWS. All details in our latest recipe: [/technologies/node/recipes/node-aws-lambda](/technologies/node/recipes/node-aws-lambda)
|
||||
- Improved our existing Deno package to add support for serverless deployment to both Deno Deploy as well as Netlify. Such support can be added to an existing app using the `@nx/deno:setup-serverless` generator and providing the `--platform` flag that either point to `deno-deploy` or `netlify`.
|
||||
|
||||
## Cypress Feature Testing
|
||||
|
||||
{% youtube src="https://youtu.be/d5i9_Y8Ip54" /%}
|
||||
|
||||
Nx sets up e2e tests for apps that tend to collect many features. This ends up as a large atomic suite that Nx isn’t good at separating out. With Nx 16, we’ve made it easier to distribute these tests closer to the actual feature they test. This will make it much easier for `nx affected` to determine which tests are actually necessary.
|
||||
|
||||
I also had the opportunity to have a live stream with Nx’s own Caleb (who lead most of the development for this feature), as well as Cypress’s Jordan Powell who also contributed to this effort — check it out:
|
||||
|
||||
{% youtube src="https://youtu.be/y3gFRSqarEo" /%}
|
||||
|
||||
## Task Graph
|
||||
|
||||
Nx 16.0 also introduces more helpful tools for visualizing your project and task graph as determined by Nx:
|
||||
|
||||
{% youtube src="https://youtu.be/9_Y6Mop-Kac" /%}
|
||||
|
||||
The task graph in particular is helpful for visualizing what actually runs when you run commands, and with Nx 16.0, you can now use the `--graph` option when running most Nx commands to visualize the graph of tasks that would have run - for example:
|
||||
|
||||
```
|
||||
nx build react --graph
|
||||
```
|
||||
|
||||
The task graph was also highlighted in a recent video demonstrating feature parity between our VsCode and JetBrains plugin:
|
||||
|
||||
{% youtube src="https://youtu.be/XCoeNiyM6hw" /%}
|
||||
|
||||
## The Nx Repo Switches to PNPM for its Package Manager
|
||||
|
||||
Internally, the [Nx repo](https://github.com/nrwl/nx) switched to using `pnpm` as its package manager. Since switching we have noted the following advantages:
|
||||
|
||||
- publish is 2x faster
|
||||
- CI times decreased
|
||||
- install times decreased
|
||||
|
||||
While we are using `pnpm` as our package manager, we are not using the `pnpm` workspaces functionality in the Nx repo, but we've found that Nx actually works extremely well with `pnpm` workspace setups. Juri had released [an article on this topic](/blog/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx) previously, and we used this approach to introduce Task Caching and Distributed Caching (via Nx and Nx Cloud) to [the Tanstack/query repo](https://github.com/TanStack/query), which yielded excellent results:
|
||||
|
||||
{% youtube src="https://youtu.be/NvPXK6DVZGE" /%}
|
||||
|
||||
## Wrapping up!
|
||||
|
||||
That’s about it for Nx 16.0 — we’ve really loved the opportunity to bring you all this cool stuff, and we’re eager to start our next iteration with a steady focus on making Nx an awesome tool for increasing your productivity by taking all the repo management tasks out of the equation so you can focus on shipping great stuff.
|
||||
|
||||
### Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
|
||||
### More Nx Release Notes:
|
||||
|
||||
- Nx 15.3: [/blog/nx-15-3-standalone-projects-vite-task-graph-and-more-3ed23f7827ed](/blog/nx-15-3-standalone-projects-vite-task-graph-and-more)
|
||||
- Nx 15.4: [/blog/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more](/blog/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more)
|
||||
- Nx 15.7: [/blog/nx-15-7-node-support-angular-lts-lockfile-pruning](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning)
|
||||
- Nx 15.8: [/blog/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook](/blog/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook)
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: 'Introducing the Nx Champions Program'
|
||||
slug: 'introducing-the-nx-champions-program'
|
||||
authors: ['Isaac Mann']
|
||||
cover_image: '/blog/images/2023-05-16/cVGLh0H-uOpy7-D6.avif'
|
||||
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.
|
||||
|
||||
### What Does Champion Mean?
|
||||
|
||||
Champion is both a noun and a verb and the champion in Nx Champions is intended in both ways. Nx Champions have achieved a champion level of knowledge and expertise in some area of Nx. They also champion Nx to the community through content like blog posts, videos and conference talks or by contributing code through plugins or the Nx repo itself. In addition, they champion the ideas of the community back to the Nx team.
|
||||
|
||||
### Who are the Nx Champions?
|
||||
|
||||
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.
|
||||
|
||||
## Learn more about Nx
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 🐥 [Nx Twitter Handle](https://twitter.com/NxDevTools)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
@@ -1,114 +0,0 @@
|
||||
---
|
||||
title: 'Determine your User Location with Netlify Edge Functions'
|
||||
slug: 'determine-your-user-location-with-netlify-edge-functions'
|
||||
authors: ['Nicholas Cunningham']
|
||||
cover_image: '/blog/images/2023-05-26/G2ynKDm6DIKLcZ2fJlV0dw.avif'
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace user-location --preset=@nx/netlify
|
||||
```
|
||||
|
||||
This should create a default function inside `src/functions/hello/hello.ts`, which can be _safely deleted_ if necessary.
|
||||
|
||||
### Step 2: Create a serverless function
|
||||
|
||||
```
|
||||
mkdir src/functions/user-location
|
||||
touch src/functions/user-location/user-location.ts
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
_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:
|
||||
|
||||
```
|
||||
npm install node-fetch
|
||||
```
|
||||
|
||||
Now, update the `user-location.ts` file with the following code:
|
||||
|
||||
```
|
||||
import { Handler } from "@netlify/functions";
|
||||
import fetch from "node-fetch"; // Can be removed if node >= 18
|
||||
|
||||
export const handler: Handler = async (event, _) => {
|
||||
const ip = event.headers["x-forwarded-for"];
|
||||
const url = `https://ipapi.co/${ip}/json/`;
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
return {
|
||||
statusCode: 200,
|
||||
body: JSON.stringify({
|
||||
location: {
|
||||
city: data.city,
|
||||
region: data.region,
|
||||
country: data.country,
|
||||
},
|
||||
}),
|
||||
};
|
||||
} catch (error) {
|
||||
return { statusCode: 500, body: `Error fetching user location` };
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Step 4: Deploy your serverless function
|
||||
|
||||
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)
|
||||
|
||||
We can start off by creating our site on Netlify by running:
|
||||
|
||||
```shell
|
||||
npx netlify init
|
||||
```
|
||||
|
||||
After you have answered all the prompts your site should be created. A `.netlify` folder should be created with references to your newly created site.
|
||||
|
||||
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!
|
||||
|
||||
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)
|
||||
|
||||
```json
|
||||
{ "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!
|
||||
|
||||
### Wrapping up
|
||||
|
||||
Never used Nx before? Learn more about Nx [here](/getting-started/intro).
|
||||
[Official recipe from Nx](/technologies/node/recipes/node-serverless-functions-netlify)
|
||||
[Github example](https://github.com/ndcunningham/nx-netlify-serverless)
|
||||
|
||||
### Learn more
|
||||
|
||||
🧠 [Nx Docs](/getting-started/intro)
|
||||
👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
📹 [Nrwl Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,183 +0,0 @@
|
||||
---
|
||||
title: 'Introducing Nx Ecosystem CI'
|
||||
slug: 'introducing-nx-ecosystem-ci'
|
||||
authors: ['Katerina Skroumpelou']
|
||||
cover_image: '/blog/images/2023-06-20/EffyLKcVe5gE_x3MT8PJUQ.avif'
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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`)
|
||||
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)
|
||||
in the `#ecosystem-ci` channel.
|
||||
|
||||
The main difference between the Nx Ecosystem CI and the Vite Ecosystem CI is that Nx Ecosystem CI uses the \`next\` version of Nx as published on npm, rather than cloning and building Nx locally, like Vite does in the Vite Ecosystem CI. This approach ensures that the tests run against the same code that developers are most likely to use in their projects. It also makes it easier for the script to migrate to that version.
|
||||
|
||||
At its core, the Nx Ecosystem CI is a set of command-line tools that run tests for a specific or all available suites. Each test suite corresponds to a specific configuration and consists of a set of commands executed in a given repository. The test suite checks for the correct execution of Nx commands, such as build, test, and e2e tests, ensuring that Nx functions as expected in different environments and projects.
|
||||
|
||||
### Adding a new test suite
|
||||
|
||||
To add a new test suite for your project in the Nx Ecosystem CI, you would need to create a new file under the tests directory. The name of this file should reflect the suite it represents, for example, [`nx-rspack.ts`](https://github.com/nrwl/nx-ecosystem-ci/blob/main/tests/nx-rspack.ts) .
|
||||
|
||||
The first step is to import the necessary modules and types from `utils.ts` and `types.ts` at the top of your file:
|
||||
|
||||
```typescript
|
||||
import { runInRepo } from '../utils';
|
||||
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:
|
||||
|
||||
Again, using the example of `nx-rspack`:
|
||||
|
||||
```
|
||||
export async function test(options: RunOptions) {
|
||||
await runInRepo({
|
||||
…options,
|
||||
repo: 'nrwl/nx-labs',
|
||||
branch: 'main',
|
||||
build: ['build rspack'],
|
||||
test: ['test rspack'],
|
||||
e2e: ['e2e rspack-e2e'],
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Here's an example of how scripts might be configured in a package.json file for a repository using Nx:
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
…
|
||||
"build": "nx build",
|
||||
"test": "nx test",
|
||||
"e2e": "nx e2e"
|
||||
…
|
||||
},
|
||||
```
|
||||
|
||||
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`.
|
||||
|
||||
```
|
||||
export async function test(options: RunOptions) {
|
||||
await runInRepo({
|
||||
…options,
|
||||
repo: 'nrwl/nx-labs',
|
||||
branch: 'main',
|
||||
build: ['build'],
|
||||
test: ['test'],
|
||||
e2e: ['e2e'],
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
With this setup, the Nx Ecosystem CI will run these scripts in your repository as part of its CI process, or just when you run `pnpm test <name-of-suite>` locally.
|
||||
|
||||
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:
|
||||
|
||||
- `.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.
|
||||
|
||||
Here's what the strategy section might look like after adding a new suite named `my-new-suite`:
|
||||
|
||||
```
|
||||
strategy:
|
||||
matrix:
|
||||
suite:
|
||||
- ….
|
||||
- nx-remix
|
||||
- nx-rspack
|
||||
- …
|
||||
- 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.
|
||||
|
||||
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`:
|
||||
|
||||
```
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
suite:
|
||||
description: "testsuite to run"
|
||||
required: true
|
||||
type: choice
|
||||
options:
|
||||
- ….
|
||||
- nx-remix
|
||||
- nx-rspack
|
||||
- …
|
||||
- my-new-suite # your new suite
|
||||
```
|
||||
|
||||
Adding your suite name to this file allows it to be manually selected for a test run via the GitHub Actions interface. This manual selection process provides additional flexibility and control over the testing process, allowing you to run individual suites as needed.
|
||||
|
||||
### Reporting the results
|
||||
|
||||
The Nx Ecosystem CI is integrated with GitHub Actions, which helps with its automation process. The CI pipeline is scheduled to run three times a week (on Mondays, Wednesdays, and Fridays) and can also be triggered manually. The workflow uses a matrix strategy to run the suites in parallel. Each suite is given a big amount of memory, and the pipeline is configured with a long timeout, meaning that even if one suite encounters an error, the rest will continue to run. This ensures that we get comprehensive feedback on the health of all the test suites, regardless of individual failures. Once the test suites run, Github sends a message to the [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
`#ecosystem-ci` channel with the status of each suite, enabling the team and the community to view the results. Each result points to the Nx tag that was used, and also the job logs on GitHub.
|
||||
|
||||
Here is an example of a test run:
|
||||
|
||||
[https://github.com/nrwl/nx-ecosystem-ci/actions/runs/5144215568/jobs/9260227337](https://github.com/nrwl/nx-ecosystem-ci/actions/runs/5144215568/jobs/9260227337)
|
||||
|
||||
### Benefits for the Nx Community
|
||||
|
||||
The introduction of the Nx Ecosystem CI is a significant win for both the Nx team and the Nx developer community. For us, it enables us to catch issues early, often before they affect most end-users. By running tests against the \`next\` version of Nx, we can ensure that any changes we make are compatible with the various configurations that our users maintain.
|
||||
|
||||
For developers using Nx, the Nx Ecosystem CI offers reassurance that the tools they rely on are being actively tested and maintained. This provides confidence in the stability of Nx and its plugins.
|
||||
|
||||
### Ecosystem CI as part of the Open Source community
|
||||
|
||||
We are not alone in recognizing the value of an Ecosystem CI approach. Other OSS projects including Nuxt, VueJs, VolarJs, and Rspack, have also adopted this strategy. You can explore their implementations here:
|
||||
|
||||
- Nuxt: [https://github.com/nuxt/ecosystem-ci](https://github.com/nuxt/ecosystem-ci))
|
||||
- VueJs: [https://github.com/vuejs/ecosystem-ci](https://github.com/vuejs/ecosystem-ci)
|
||||
- VolarJs: [https://github.com/volarjs/ecosystem-ci](https://github.com/volarjs/ecosystem-ci)
|
||||
- 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.
|
||||
|
||||
## Learn more
|
||||
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,346 +1,9 @@
|
||||
---
|
||||
title: Nx Console gets Lit
|
||||
slug: 'nx-console-gets-lit'
|
||||
authors: [Max Kless]
|
||||
cover_image: '/blog/images/2023-06-29/featured_img.avif'
|
||||
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`<p>Hello World</p>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html {% fileName="index.html" %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body>
|
||||
<script type="module" src="main.js"></script>
|
||||
<root-element></root-element>
|
||||
</body>
|
||||
</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` <label for="${this.fieldId}">${this.option.name}</label>
|
||||
<p>${this.option.description}</p>
|
||||
${this.renderField()}`;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```ts {% fileName="input-field.ts" %}
|
||||
@customElement('input-field')
|
||||
export class InputField extends FieldWrapper(Field(LitElement)) {
|
||||
renderField() {
|
||||
return html` <input
|
||||
id="${this.fieldId}"
|
||||
@input="${(e) => this.dispatchValue(e.target.value)}"
|
||||
/>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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`<p>I am rendered in ${this.editor}</p>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 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`](/technologies/test-tools/cypress/introduction) 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 ;)
|
||||
@@ -363,11 +26,11 @@ If you’re curious to learn more about the rewrite and the motivations behind i
|
||||
|
||||
### 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:
|
||||
Let’s go back in time: Nx Console has been around for a while. [It first launched in 2018](https://blog.nrwl.io/announcing-the-first-stable-release-of-angular-console-the-ui-for-the-angular-cli-bb19093a92d4?source=friends_link&sk=d955094b2cb872a130b47c8040ec820e) — 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 2019, [it was ported to a VSCode extension](https://blog.nrwl.io/brand-new-ui-custom-vscode-task-support-more-in-angular-console-9-0-5e4d3a109fb9?source=friends_link&sk=47fd72d5700b4cb3de09e559c5524ce5) 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.
|
||||
|
||||
@@ -381,7 +44,7 @@ In addition, we started questioning our usage of Angular. Angular is a great fra
|
||||
|
||||
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.
|
||||
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](https://blog.nrwl.io/nx-console-meets-nx-cloud-d45dc099dc5d?source=friends_link&sk=90215eb316ef332c1324f2d50cd3ad85) 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.
|
||||
|
||||
|
||||
|
||||
@@ -399,7 +62,7 @@ This architecture’s modularity meant we could quickly switch out the Generate
|
||||
|
||||
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)
|
||||
- [In-depth blog post about expanding to JetBrains IDEs](https://blog.nrwl.io/expanding-nx-console-to-jetbrains-ides-8a5b80fff2d7?source=friends_link&sk=967080ea30bdbf9f8132f098a2cdd188)
|
||||
- [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)
|
||||
|
||||
@@ -407,7 +70,7 @@ If you want to dive deeper, there are many more resources on the architecture of
|
||||
|
||||
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`
|
||||
`nx generate @nx/web:app --name 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.
|
||||
|
||||
@@ -468,7 +131,7 @@ If you need to pass information up the DOM, you use normal events and you can se
|
||||
|
||||
### 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:
|
||||
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](https://blog.nrwl.io/expanding-nx-console-to-jetbrains-ides-8a5b80fff2d7?source=friends_link&sk=967080ea30bdbf9f8132f098a2cdd188#d151) 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')
|
||||
@@ -610,7 +273,7 @@ Using it, you get the native look, a11y, and theme-aware styling for free! Thank
|
||||
|
||||
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`](/technologies/test-tools/cypress/introduction) executors did most of the work for us so setup was pretty quick too.
|
||||
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
|
||||
|
||||
@@ -631,7 +294,11 @@ As mentioned earlier, Angular comes with a lot more features out-of-the-box than
|
||||
|
||||
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.
|
||||
> 💡 Because of a misconfiguration from a few Angular versions ago, the bundle size that we reported in:
|
||||
|
||||
{% tweet url="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
|
||||
|
||||
@@ -668,4 +335,4 @@ If the prettier UI and better performance haven’t convinced you, this surely w
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
---
|
||||
title: 'Nx 16.5 Release!!!'
|
||||
slug: 'nx-16-5-release'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-07-06/Gm3s_wLWrAf_uH2AzfJvvQ.avif'
|
||||
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!
|
||||
|
||||
{% 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:
|
||||
|
||||
{% 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.
|
||||
|
||||
With this new feature, you can add the `--tag` option to the [`nx affected`](/reference/core-api/nx/documents/affected) and [`nx run-many`](/reference/core-api/nx/documents/run-many) commands to specify to Nx to only run commands for projects that match the given tags.
|
||||
|
||||
{% youtube src="https://youtu.be/enQDQmFquGU" /%}
|
||||
|
||||
## 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](/technologies/react/next/recipes/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`
|
||||
|
||||
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!
|
||||
|
||||
{% youtube src="https://youtu.be/RupxGAQ3fBY" /%}
|
||||
|
||||
{% youtube src="https://youtu.be/X3WfXAZZH7s" /%}
|
||||
|
||||
## New Nx Recipes!!!
|
||||
|
||||
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:
|
||||
|
||||
- fastify + mongo
|
||||
- fastify + postgres
|
||||
- fastify + redis
|
||||
- nextjs + trpc
|
||||
- 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!
|
||||
|
||||
## Angular 16 Support And Migrations
|
||||
|
||||
Angular is continuing their pattern of releasing new and exciting features — and in Nx 16.1, we added support for Angular 16, including updates to our NgRx generators and cypress support.
|
||||
|
||||
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](/technologies/angular/recipes/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" /%}
|
||||
|
||||
## New `verdaccio` support!
|
||||
|
||||
The `@nx/js` package now includes a new `setup-verdaccio` generator as well as a `verdaccio` executor!
|
||||
|
||||
{% youtube src="https://youtu.be/t1c925TzrzE" /%}
|
||||
|
||||
Running `nx g setup-verdaccio` will now add a new `local-registry` target to your workspace, that will use the new `verdaccio` executor.
|
||||
|
||||
To start your local registry, run the command `nx local-registry` in one terminal, and then you can publish via commands like `npm publish` as you normally would, but rather than publish packages to the npm registry, this will only publish those packages to your locally-running registry!
|
||||
|
||||
While the `local-registry` process is running, you will also be able to install packages published to your local registry as well.
|
||||
|
||||
These tools should help in particular with local testing of publishing packages to help support both manual and automated testing!
|
||||
|
||||
## Create your own CLI with Nx
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
To fulfill this need, in 16.5 we ship with a new `create-package` generator that allows you to add and ship such "CLI package" with your Nx plugin.
|
||||
|
||||
You can either create a new Nx plugin workspace immediately with a CLI package using:
|
||||
|
||||
```shell
|
||||
npx create-nx-plugin my-own-cli --create-package-name=create-my-own-cli-app
|
||||
```
|
||||
|
||||
Or alternatively add it to an existing Nx plugin workspace using:
|
||||
|
||||
```
|
||||
nx g @nx/plugin:create-package <cli name> --project=<existing plugin name> --e2eProject e2e
|
||||
```
|
||||
|
||||
## New `externalDependencies` Input Type
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
For example, if you have a `publish-package` target that is using a `command` of `lerna publish` for your publishing, you can specify that the only external dependency for that specific input is `lerna`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "mylib",
|
||||
// ...
|
||||
"targets": {
|
||||
"publish-package": {
|
||||
"command": "lerna publish",
|
||||
"inputs": [{ "externalDependencies": ["lerna"] }]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "webapp",
|
||||
// ...
|
||||
"targets": {
|
||||
// ...
|
||||
"lint": {
|
||||
"executor": "@nx/linter:eslint",
|
||||
"outputs": ["{options.outputFile}"],
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"apps/webapp/**/*.{ts,tsx,js,jsx}",
|
||||
"apps/webapp/package.json" // here!
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then in "webapp" project's `.eslintrc.json` file you'll want to turn the rule on for your json files:
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"overrides": [
|
||||
// ...
|
||||
{
|
||||
"files": ["*.json"],
|
||||
"parser": "jsonc-eslint-parser",
|
||||
"rules": {
|
||||
"@nx/dependency-checks": "error"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Now you should be able to run the linter via `nx run-many --target=lint` to catch any errors across any of your packages, and you can `nx run-many --target=lint --fix` to automatically fix all errors as well.
|
||||
|
||||
## Nx Goes Brrrrrr
|
||||
|
||||
Nx has continued to get faster!
|
||||
|
||||
Our biggest speed increase has come from moving our task hashing into the Nx Daemon. A daemon process refers to a process that runs continuously in the background.
|
||||
|
||||
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!
|
||||
|
||||
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!!
|
||||
|
||||
You can see our results and the details of the benchmark — and even run the benchmarks for yourself in [this repo](https://github.com/vsavkin/large-monorepo).
|
||||
|
||||
## Nx Console Revamped
|
||||
|
||||
Nx Console got a new coat of paint in both the VsCode and JetBrains (IntelliJ/Webstorm) IDEs!
|
||||
|
||||
|
||||
_New Nx Console Coat of Paint in VsCode_
|
||||
|
||||
_New Nx Console Coat of Paint in IntelliJ_
|
||||
|
||||
As part of the redesign, we also moved our webviews to the Lit framework — checkout all the latest updates in this video:
|
||||
|
||||
{% youtube src="https://youtu.be/p455D4W7330" /%}
|
||||
|
||||
## Nx Changelog Launched
|
||||
|
||||
Last but CERTAINLY not least, we've launched [a new changelog](/changelog) to our docs site!
|
||||
|
||||
|
||||
|
||||
This changelog includes links to all the release notes for all major and minor versions, as well as links to patch versions. We made sure to also include any deprecations or breaking changes brought about by each version as well.
|
||||
|
||||
## 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!
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
|
||||
## More Nx Release Notes:
|
||||
|
||||
- [Nx 16.0](/blog/nx-16-is-here)
|
||||
- [Nx 15.8](/blog/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook)
|
||||
- [Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning)
|
||||
- [Nx 15.4](/blog/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more)
|
||||
- [Nx 15.3](/blog/nx-15-3-standalone-projects-vite-task-graph-and-more)
|
||||
@@ -1,203 +0,0 @@
|
||||
---
|
||||
title: 'Evergreen Tooling — More than Just CodeMods'
|
||||
slug: 'evergreen-tooling-more-than-just-codemods'
|
||||
authors: ['Juri Strumpflohner']
|
||||
cover_image: '/blog/images/2023-07-26/CPiI60mSguYXJzPfAHMbEQ.avif'
|
||||
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:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
**Prefer a video? I've got you covered!**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=Ss6MfcXi0jE" /%}
|
||||
|
||||
## TL;DR
|
||||
|
||||
You can run the following command to automatically upgrade your Nx workspace to the latest version:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
## The Balancing Act: Updating Tooling vs Shipping Features
|
||||
|
||||
If you’re anything like me, you’ve probably found that discussions about updating tooling tend to fall to the bottom of the priority list when talking to your product owner. It’s understandable — their primary goal is to ship features. However, sticking with outdated tooling can impact our ability to deliver these features swiftly (not to speak about potential security concerns due to outdated libraries).
|
||||
|
||||
Don’t get me wrong, I’m not suggesting that we should always be on the bleeding edge of technological innovation — especially in an enterprise environment.
|
||||
|
||||
> _Jason Lengstorf has some opinions there as well:_ [_“The Hidden Danger of Switching Tech Stacks in 2023_](https://youtu.be/u0j-DlsimZ4)_?)._
|
||||
|
||||
It’s wise to let security patches land and initial bugs get fixed before jumping on the upgrade bandwagon. But here’s the catch — don’t wait too long. The **longer you delay upgrading, the more challenging and time-consuming** it becomes. And the more effort it requires, the harder it is to sell the idea to your product owner.
|
||||
|
||||
## The Key: Making Updates Easy(ier)!
|
||||
|
||||
Updating tooling is never easy, but the Nx team aims at making it “easier” at least. We try to embrace the concept of “evergreen tooling”, a strategy that’s been around since Google decided to automatically update Chrome for all users. The Angular team adopted this approach for their Angular CLI, and Nx has followed suit. But what exactly is it, and how does it work?
|
||||
|
||||
> _What if I told you Nx users have been_ **_automatically_** _updating their React applications from Webpack 4 to Webpack 5!_
|
||||
|
||||
The “why” is pretty straightforward. From the perspective of an open-source project, you want users to adopt the latest version as quickly as possible. This minimizes the maintenance work involved in supporting older versions, which can be a real headache. Looking at how Nx manages it, it seems to be successful in this regard ([Source](https://www.craigory.dev/npm-burst/?package=nx)):
|
||||
|
||||
|
||||
|
||||
The distribution of Nx installs by version demonstrates the effectiveness of this approach. For instance, v16.5, which accounts for 19.7% of all versions, has already been adopted by many users, despite [its recent release](/changelog). The latest major accounts for 34.7% already and 41.4% are on the previous v15, a large majority of which is on the latest 15.9 minor. Hence, v16 & v15 make up 3/4 of all Nx installs.
|
||||
|
||||
## How? Database Migration Scripts for Code?
|
||||
|
||||
If you know what “database migration scripts” are, then yes, it’s the same concept but applied at the code level. A series of small functions invoked to bring your workspace from version X to version Y (usually the latest). That includes:
|
||||
|
||||
- update `nx` itself
|
||||
- update all Nx plugins and the technology they are responsible for (for example: `@nx/react` will upgrade React as well, `@nx/webpack` is upgrading Webpack)
|
||||
- automatically adjust relevant config files and source code (e.g., adjusting imports, functions etc..)
|
||||
|
||||
Everything that is required to get you to the latest version and still have a running code, even if there have been breaking changes.
|
||||
|
||||
**How?!** Because the **Nx team (and plugin authors) do the work for you**! Nx has a built-in mechanism where you can define so-called “migrations” for each Nx package. Here’s an excerpt of the `@nx/webpack`'s migration file.
|
||||
|
||||
```json
|
||||
{
|
||||
“generators”: {
|
||||
"add-babel-inputs": {
|
||||
“cli”: “nx”,
|
||||
“version”: “15.0.0-beta.0”,
|
||||
“description”: “Adds babel.config.json to the hash of all tasks”,
|
||||
"factory": "./src/migrations/update-15-0-0/add-babel-inputs"
|
||||
},
|
||||
"remove-es2015-polyfills-option": {
|
||||
“cli”: “nx”,
|
||||
“version”: “15.4.5-beta.0”,
|
||||
“description”: “Removes es2015Polyfills option since legacy browsers are no longer supported.”,
|
||||
"factory": "./src/migrations/update-15-4-5/remove-es2015-polyfills-option"
|
||||
},
|
||||
"webpack-config-setup": {
|
||||
“cli”: “nx”,
|
||||
“version”: “15.6.3-beta.0”,
|
||||
“description”: “Creates or updates webpack.config.js file with the new options for webpack.”,
|
||||
"factory": "./src/migrations/update-15-6-3/webpack-config-setup"
|
||||
},
|
||||
"add-babelUpwardRootMode-flag": {
|
||||
“cli”: “nx”,
|
||||
“version”: “15.7.2-beta.0”,
|
||||
“description”: “Add the babelUpwardRootMode option to the build executor options.”,
|
||||
"factory": "./src/migrations/update-15-7-2/add-babelUpwardRootMode-flag"
|
||||
},
|
||||
"update-16-0-0-add-nx-packages": {
|
||||
“cli”: “nx”,
|
||||
“version”: “16.0.0-beta.1”,
|
||||
"description": "Replace @nrwl/webpack with @nx/webpack",
|
||||
"implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages"
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
They are defined in a `migrations.json` config file within the NPM package. Each entry defines a `version` for which the entry should be run, a `description` (just for humans to read) and a `factory` property which points to a TypeScript file.
|
||||
|
||||
Example: if you’re on Nx 15.5 and you run `nx migrate latest` it would run the corresponding “factory functions” for:
|
||||
|
||||
- `webpack-config-setup`
|
||||
- `add-babelUpwardRootMode-flag`
|
||||
- `update-16-0-0-add-nx-packages`
|
||||
|
||||
Depending on the nature of the update, these functions can be as simple as performing text replacements to more complex AST parsing and TypeScript source file manipulations. Let’s have a look at the `add-babelUpwardRootMode-flag` migration:
|
||||
|
||||
```
|
||||
import {
|
||||
formatFiles,
|
||||
readProjectConfiguration,
|
||||
Tree,
|
||||
updateProjectConfiguration,
|
||||
} from '@nx/devkit';
|
||||
import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils';
|
||||
import { WebpackExecutorOptions } from '../../executors/webpack/schema';
|
||||
|
||||
export default async function (tree: Tree) {
|
||||
forEachExecutorOptions<WebpackExecutorOptions>(
|
||||
tree,
|
||||
‘@nrwl/webpack:webpack’,
|
||||
(
|
||||
options: WebpackExecutorOptions,
|
||||
projectName,
|
||||
targetName,
|
||||
_configurationName
|
||||
) => {
|
||||
if (options.babelUpwardRootMode !== undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
typconst projectConfiguration = readProjectConfiguration(tree, projectName);
|
||||
projectConfiguration.targets[targetName].options.babelUpwardRootMode =
|
||||
true;
|
||||
updateProjectConfiguration(tree, projectName, projectConfiguration);
|
||||
}
|
||||
);
|
||||
|
||||
await formatFiles(tree);
|
||||
}
|
||||
```
|
||||
|
||||
It leverages the utility functions provided by the `@nx/devkit` package to read the various `projects.json` files to adjust the `babelupwardRootMode` property.
|
||||
|
||||
Nx’s modular design helps as each plugin is responsible for a particular area and can thus contribute according migration scripts. To give you some context. There is the [nx package](https://www.npmjs.com/package/nx) at the core — which you can use nicely in combination with a [PNPM workspaces repo](/blog/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx) to speed things up — and then there are plugins built on top.
|
||||
|
||||
|
||||
|
||||
_(Source:_ [_/getting-started/intro_](/getting-started/intro)_)_
|
||||
|
||||
These plugins are usually technology-specific, like a plugin to help you manage React, Next, Remix, or Angular projects and tooling like ESLint, Cypress, Playwright, Vite, Jest, and so on. There are no limits as you can [create your own](/extending-nx/intro/getting-started). They are **optional**, in that you can use Nx and React and set everything up on your own. But it might be worth relying on them for some better DX and automation, such as the update mechanism we’re currently looking at.
|
||||
|
||||
Plugins are helpful here, because each plugin has a clearly defined responsibility. Like the `@nx/webpack` we looked at earlier, handles everything related to Webpack. So it’ll be responsible for updating the `webpack` NPM package and adjusting config Webpack-related files.
|
||||
|
||||
## Performing the Update
|
||||
|
||||
Alright, we’ve learned how these updates work behind the scenes. Let’s look at what the experience looks like as a developer performing the update on your codebase.
|
||||
|
||||
> _Note, it is highly recommended to start with a clean Git workspace s.t. you can quickly revert the update._
|
||||
|
||||
To run the update, use the following command:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
```
|
||||
|
||||
Note `latest` stands for the target version. You can also provide a specific Nx version if you cannot update to the latest one for some reason.
|
||||
|
||||
At this point, Nx
|
||||
|
||||
- analyzes your workspace and finds all the plugins you’re using
|
||||
- downloads the version of the plugins specified in the migrate command above
|
||||
- collects all the `migration.json` files from these plugins
|
||||
- picks out the relevant ones based on your current workspace version
|
||||
- creates a `migrations.json` at the root of your workspace
|
||||
- updates the `package.json` to point to the matching NPM package versions (without performing an install just yet)
|
||||
|
||||
You can now inspect the `migration.json` and the `package.json` before you run the following command to run the migrations on your codebase.
|
||||
|
||||
```shell
|
||||
npx nx migrate —-run-migrations
|
||||
```
|
||||
|
||||
After that, your codebase should have been updated. Run your (ideally automated) sanity checks and fix the remaining issues that couldn’t be adjusted automatically.
|
||||
|
||||
## Wrapping Up
|
||||
|
||||
That’s it! If you want to dive deeper, here are some potentially helpful links:
|
||||
|
||||
- [Watch our YT video about Code Migrations](https://youtu.be/Ss6MfcXi0jE)
|
||||
- [/features/automate-updating-dependencies](/features/automate-updating-dependencies)
|
||||
|
||||
Also, if you haven’t already, give us a ⭐️ on Github: [https://github.com/nrwl/nx](https://github.com/nrwl/nx). We’d appreciate it 😃.
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
title: 'Storybook Interaction Tests in Nx'
|
||||
slug: 'storybook-interaction-tests-in-nx'
|
||||
authors: ['Katerina Skroumpelou']
|
||||
cover_image: '/blog/images/2023-08-03/NfJA7VBZvDwyyZHmV8qsiw.avif'
|
||||
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.
|
||||
|
||||
**Prefer a video walkthrough? We've got you covered**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=SaHoUx-TUs8" /%}
|
||||
|
||||
## Understanding Storybook Interaction Tests
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
## Setting Up Storybook Interaction Tests on Nx
|
||||
|
||||
You can read our detailed guide on how to set up Storybook interaction tests on Nx, here: [/technologies/test-tools/storybook/recipes/storybook-interaction-tests](technologies/test-tools/storybook/recipes/storybook-interaction-tests).
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
## Debugging and Reproducing Errors
|
||||
|
||||
Storybook provides an interactive debugger that displays the step-by-step flow of your interactions, and provides UI controls to pause, resume, rewind, and step through each interaction.
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
## 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.
|
||||
|
||||
## What should I choose? Interaction tests or E2E tests?
|
||||
|
||||
Setting up interaction tests with Nx and Storybook provides an extra layer of confidence in the functionality of your components. It ensures that they not only look right but also behave correctly in response to user interactions.
|
||||
|
||||
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.
|
||||
|
||||
## Screenshare
|
||||
|
||||
{% youtube src="https://www.youtube.com/embed/QvD3hJDa_1Q" /%}
|
||||
|
||||
## Useful Links
|
||||
|
||||
- [https://storybook.js.org/docs/react/writing-tests/interaction-testing](https://storybook.js.org/docs/react/writing-tests/interaction-testing)
|
||||
- [/technologies/test-tools/storybook/recipes/storybook-interaction-tests](technologies/test-tools/storybook/recipes/storybook-interaction-tests)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -1,647 +0,0 @@
|
||||
---
|
||||
title: 'Create Your Own create-react-app CLI'
|
||||
slug: 'create-your-own-create-react-app-cli'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2023-08-10/j2QU-hjxt-1krFST8CGFiA.avif'
|
||||
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:
|
||||
|
||||
- Nx has [create-nx-workspace](/getting-started/installation)
|
||||
- React has, well, had [create-react-app](https://create-react-app.dev/)
|
||||
- Angular has [Angular CLI](https://angular.io/cli)
|
||||
- Vite has [create-vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
|
||||
|
||||
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` .
|
||||
|
||||
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)
|
||||
|
||||
**Prefer a video? We got you covered!**
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=ocllb5KEXZk" /%}
|
||||
|
||||
## What is Nx and what is an Nx plugin?
|
||||
|
||||
But before we jump right into the topic, what is Nx? And more specifically, what are Nx Plugins?
|
||||
|
||||
Nx is an open-source build system that provides tools and techniques to enhance developer productivity. [Check out this 10 min video overview](https://youtu.be/-_4WMl-Fn0w) of Nx if you want to learn more.
|
||||
|
||||
Our example, in particular, uses Nx as a dev tool for creating a CLI and plugin. Nx plugins are npm packages that provide integrations between Nx and other technologies. You can use Nx without them, but they can provide great value if applied properly. `my-own-react` is the plugin to integrate React and Nx.
|
||||
|
||||
## Step 1: Create a CLI workspace
|
||||
|
||||
Create a new Nx workspace that is preconfigured for plugin development, using the below command:
|
||||
|
||||
```shell
|
||||
npx create-nx-plugin my-own-react --create-package-name=create-my-own-react-app
|
||||
```
|
||||
|
||||
Note, if you already have an existing Nx plugin workspace, instead of creating a new workspace, you can simply run the following in your plugin repository to generate the create CLI:
|
||||
|
||||
```
|
||||
nx g @nx/plugin:create-package <cli name> --project=<existing plugin name> --e2eProject e2e
|
||||
```
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
### CLI Package Structure
|
||||
|
||||
Let's focus on the `create-my-own-react-app` project which is our CLI.
|
||||
|
||||
|
||||
|
||||
The `index.ts` file is the key part here. It is the one that gets invoked when someone runs `npx create-my-own-react-app` later once we publish it.
|
||||
|
||||
```
|
||||
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { createWorkspace } from 'create-nx-workspace';
|
||||
|
||||
async function main() {
|
||||
const name = process.argv\[2\]; // TODO: use libraries like yargs or enquirer to set your workspace name
|
||||
if (!name) {
|
||||
throw new Error('Please provide a name for the workspace');
|
||||
}
|
||||
|
||||
console.log(`Creating the workspace: ${name}`);
|
||||
|
||||
// This assumes "my-own-react" and "create-my-own-react-app" are at the same version
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const presetVersion = require('../package.json').version;
|
||||
|
||||
// TODO: update below to customize the workspace
|
||||
const { directory } = await createWorkspace(`my-own-react@${presetVersion}`, {
|
||||
name,
|
||||
nxCloud: false,
|
||||
packageManager: 'npm',
|
||||
});
|
||||
|
||||
console.log(`Successfully created the workspace: ${directory}.`);
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
```
|
||||
|
||||
The main chunk of code is `` createWorkspace(`my-own-react@${presetVersion}`) ``. This function creates an Nx workspace with the `my-own-react` plugin installed.
|
||||
|
||||
2. `createWorkspace` will also generate the preset generator defined by `my-own-react` located at `src/generators/preset/generator.ts`. This is the logic which scaffolds a project which uses your technology.
|
||||
|
||||
## Step 2: Run the CLI Locally
|
||||
|
||||
To properly test your CLI you can either publish it to NPM as a beta version or use a local npm registry like [Verdaccio](https://verdaccio.org/). Luckily our Nx workspace already comes with a feature to make that a seamless process.
|
||||
|
||||
1. First, start a local Verdaccio-based npm registry using the following command:
|
||||
|
||||
```shell
|
||||
npx nx local-registry
|
||||
```
|
||||
|
||||
This will start the local registry on port 4873 and configure npm to use it instead of the real npm registry.
|
||||
|
||||
2\. In the second terminal, run the command to publish all the projects:
|
||||
|
||||
```shell
|
||||
npx nx run-many --targets publish --ver 1.0.0 --tag latest
|
||||
```
|
||||
|
||||
_(Note,_ `_publish_` _is a target defined in the_ `_project.json_` _of our projects.)_
|
||||
|
||||
This command will publish both `my-own-react` and `create-my-own-react-app` packages to your local registry. If open the running Verdaccio registry at [http://localhost:4873](http://localhost:4873) you should see the published packages.
|
||||
|
||||
|
||||
|
||||
3\. Now, you can run `npx create-my-own-react-app` just like a developer using our CLI would. For example, go to the tmp directory and create a `my-own-react` workspace named `test`:
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
{% youtube src="https://youtu.be/myqfGDWC2go" /%}
|
||||
|
||||
To do this, we will fill in the preset generator under `src/generators/preset`
|
||||
|
||||
A generator is a function that makes modifications to a file system representation known as the `Tree`. These modifications will then be applied to the real file system. In our case, the preset generator will create the files for a React app.
|
||||
|
||||
Currently, the file at `src/generators/preset/generator.ts` looks like:
|
||||
|
||||
```
|
||||
import {
|
||||
addProjectConfiguration,
|
||||
formatFiles,
|
||||
generateFiles,
|
||||
Tree,
|
||||
} from '@nx/devkit';
|
||||
import * as path from 'path';
|
||||
import { PresetGeneratorSchema } from './schema';
|
||||
|
||||
export async function presetGenerator(
|
||||
tree: Tree,
|
||||
options: PresetGeneratorSchema
|
||||
) {
|
||||
const projectRoot = `libs/${options.name}`;
|
||||
addProjectConfiguration(tree, options.name, {
|
||||
root: projectRoot,
|
||||
projectType: 'library',
|
||||
sourceRoot: `${projectRoot}/src`,
|
||||
targets: {},
|
||||
});
|
||||
generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
|
||||
await formatFiles(tree);
|
||||
}
|
||||
|
||||
export default presetGenerator;
|
||||
```
|
||||
|
||||
The preset generator does 2 things:
|
||||
|
||||
- Create an Nx project using the `addProjectConfiguration` function. This creates a `project.json` file which allows Nx to run commands on it.
|
||||
- Generates files in the project using the `generateFiles` function. This uses the templates under `src/generators/preset/files` which are interpolated to become the files that are generated for the user.
|
||||
- Format the generated files with `prettier` with the `formatFiles` function
|
||||
|
||||
|
||||
_preset generator_
|
||||
|
||||
The `addProjectConfiguration` and `generateFiles` functions are from [@nx/devkit](/reference/core-api/devkit/documents/nx_devkit), a library that contains utility functions for writing plugins for Nx. For the future, see the [complete list of utility functions](/reference/core-api/devkit/documents/nx_devkit).
|
||||
|
||||
1. Change the project which is created with `addProjectConfiguration`:
|
||||
|
||||
```
|
||||
const projectRoot = '.';
|
||||
addProjectConfiguration(tree, options.name, {
|
||||
root: projectRoot,
|
||||
projectType: 'application',
|
||||
targets: {}
|
||||
});
|
||||
```
|
||||
|
||||
- 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` .
|
||||
|
||||
Rename the existing `index.ts.template` to `src/generators/preset/files/src/index.tsx.template` and add the following content:
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<svg className="App-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
<p>
|
||||
Welcome <%= name %>!
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
</React.StrictMode>
|
||||
);
|
||||
```
|
||||
|
||||
Add another file to generate a CSS template at `src/generators/preset/files/src/index.css.template`:
|
||||
|
||||
```
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And finally, another file to host the actual HTML template: `src/generators/preset/files/public/index.html.template`:
|
||||
|
||||
```shell
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
3\. Our application uses some npm dependencies so add those to the workspace as well with the [addDependenciesToPackageJson](/reference/core-api/devkit/documents/nx_devkit) function to the end of the export default function in `src/generators/preset/generator.ts`:
|
||||
|
||||
```
|
||||
import {
|
||||
addDependenciesToPackageJson,
|
||||
...
|
||||
} from '@nx/devkit';
|
||||
...
|
||||
|
||||
export default async function (tree: Tree, options: PresetGeneratorSchema) {
|
||||
...
|
||||
return addDependenciesToPackageJson(
|
||||
tree,
|
||||
{
|
||||
react: 'latest',
|
||||
'react-dom': 'latest',
|
||||
'react-scripts': 'latest',
|
||||
},
|
||||
{
|
||||
"@types/react": "latest",
|
||||
"@types/react-dom": "latest",
|
||||
}
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
This line will add the latest `react`, `react-dom`, `react-scripts`, and their types to the `package.json` in the generated workspace.
|
||||
|
||||
### Final Preset Generator
|
||||
|
||||
Now `src/generators/preset/generator.ts` should look like this:
|
||||
|
||||
```
|
||||
import {
|
||||
addDependenciesToPackageJson,
|
||||
addProjectConfiguration,
|
||||
formatFiles,
|
||||
generateFiles,
|
||||
Tree,
|
||||
} from '@nx/devkit';
|
||||
import * as path from 'path';
|
||||
import { PresetGeneratorSchema } from './schema';
|
||||
|
||||
export default async function (tree: Tree, options: PresetGeneratorSchema) {
|
||||
const projectRoot = `.`;
|
||||
|
||||
addProjectConfiguration(tree, options.name, {
|
||||
root: projectRoot,
|
||||
projectType: 'application',
|
||||
targets: {},
|
||||
});
|
||||
|
||||
generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
|
||||
await formatFiles(tree);
|
||||
|
||||
return addDependenciesToPackageJson(
|
||||
tree,
|
||||
{
|
||||
react: 'latest',
|
||||
'react-dom': 'latest',
|
||||
'react-scripts': 'latest',
|
||||
},
|
||||
{
|
||||
"@types/react": "latest",
|
||||
"@types/react-dom": "latest",
|
||||
}
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Step 4: Run the New Version that Creates the React App
|
||||
|
||||
Now you can publish a new version of `my-own-react` and `create-my-own-react-app` and run it again:
|
||||
|
||||
```shell
|
||||
cd ..
|
||||
npx nx run-many --targets publish --ver 1.0.1 --tag latest
|
||||
cd tmp
|
||||
npx create-my-own-react-app@1.0.1 test2
|
||||
```
|
||||
|
||||
The CLI now creates a workspace with the dependencies we want and the code for the react application just like `create-react-app`:
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
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 {
|
||||
updateJson,
|
||||
...
|
||||
} from '@nx/devkit';
|
||||
...
|
||||
|
||||
export default async function (tree: Tree, options: PresetGeneratorSchema) {
|
||||
...
|
||||
addProjectConfiguration(...);
|
||||
|
||||
updateJson(tree, 'package.json', (json) => {
|
||||
json.scripts = json.scripts || {};
|
||||
|
||||
// generate a start script into the package.json
|
||||
json.scripts.start = 'npx react-scripts start';
|
||||
return json;
|
||||
});
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
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`
|
||||
|
||||
Alternatively, we could have adjusted the already present `addProjectConfiguration` function to add the `react-scripts` command:
|
||||
|
||||
```shell
|
||||
import {
|
||||
...
|
||||
addProjectConfiguration,
|
||||
...
|
||||
} from '@nx/devkit';
|
||||
...
|
||||
|
||||
export default async function (tree: Tree, options: PresetGeneratorSchema) {
|
||||
...
|
||||
|
||||
addProjectConfiguration(tree, options.name, {
|
||||
root: projectRoot,
|
||||
projectType: 'application',
|
||||
targets: {
|
||||
serve: {
|
||||
command: "npx react-scripts start",
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```shell
|
||||
npx nx run-many --targets publish --ver 1.0.2 --tag latest
|
||||
```
|
||||
|
||||
Once we generate a new workspace with the new preset version (npx create-my-own-react-app@1.0.2 test3), we should now see our `package.json` `start`script being generated.
|
||||
|
||||
|
||||
|
||||
To run the app we either run
|
||||
|
||||
- `npm start`
|
||||
- or `npx nx start` which would automatically pick up the `start` script in the `package.json`
|
||||
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
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.
|
||||
|
||||
1. Install `enquirer` with `npm i enquirer`
|
||||
2. Change `create-my-own-react-package/bin/index.ts` to import `enquirer` and prompt developers to enter the mode option:
|
||||
|
||||
```
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { createWorkspace } from 'create-nx-workspace';
|
||||
import { prompt } from 'enquirer';
|
||||
|
||||
async function main() {
|
||||
let name = process.argv[2];
|
||||
if (!name) {
|
||||
const response = await prompt<{ name: string }>({
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: 'What is the name of the workspace?',
|
||||
});
|
||||
name = response.name;
|
||||
}
|
||||
let mode = process.argv[3];
|
||||
if (!mode) {
|
||||
mode = (
|
||||
await prompt<{ mode: 'light' | 'dark' }>({
|
||||
name: 'mode',
|
||||
message: 'Which mode to use',
|
||||
initial: 'dark' as any,
|
||||
type: 'autocomplete',
|
||||
choices: [
|
||||
{ name: 'light', message: 'light' },
|
||||
{ name: 'dark', message: 'dark' },
|
||||
],
|
||||
})
|
||||
).mode;
|
||||
}
|
||||
|
||||
console.log(`Creating the workspace: ${name}`);
|
||||
|
||||
// This assumes "my-own-react" and "create-my-own-react-app" are at the same version
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const presetVersion = require('../package.json').version;
|
||||
|
||||
// TODO: update below to customize the workspace
|
||||
const { directory } = await createWorkspace(`my-own-react@${presetVersion}`, {
|
||||
name,
|
||||
nxCloud: false,
|
||||
packageManager: 'npm',
|
||||
mode,
|
||||
});
|
||||
|
||||
console.log(`Successfully created the workspace: ${directory}.`);
|
||||
}
|
||||
|
||||
main();
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
In `src/generators/preset/schema.d.ts`, add it to the type for the options:
|
||||
|
||||
```
|
||||
export interface PresetGeneratorSchema {
|
||||
name: string;
|
||||
mode: 'light' | 'dark';
|
||||
}
|
||||
```
|
||||
|
||||
Also, change the CSS for `.App-header` in the CSS template file`src/generators/preset/files/src/index.css.template`:
|
||||
|
||||
```
|
||||
.App-header {
|
||||
background-color: <%= mode === 'dark' ? '#282c34' : 'white' %>;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: <%= mode === 'dark' ? 'white' : '#282c34' %>;
|
||||
}
|
||||
```
|
||||
|
||||
Now if you republish the projects and regenerate an app with the light mode, you should see the background color and text color of the header got changed:
|
||||
|
||||
|
||||
|
||||
_serve output_
|
||||
|
||||
## Step 8: E2E Testing
|
||||
|
||||
This is how users start using your technology so you should write e2e tests to ensure this does not break. This workspace was also generated with a testing file `packages/my-own-react-e2e/tests/create-my-own-react-app.spec.ts`.
|
||||
|
||||
You can modify this e2e test to test your CLI. Then, run it using the command `npx nx e2e my-own-react-e2e`. Before the tests run, as a global setup, a local registry is started and the packages are published.
|
||||
|
||||
The default test works like this:
|
||||
|
||||
1. Creates a test workspace at `tmp/` using the `create-my-own-react-app` CLI
|
||||
2. Runs `npm ls my-own-react` to validate that the plugin is installed in the test workspace
|
||||
3. Cleans up the test workspace
|
||||
|
||||
Make sure `dark` is passed into `create-my-own-react-app` :
|
||||
|
||||
```
|
||||
exec1-app ${projectName} dark`, {
|
||||
cwd: dirname(projectDirectory),
|
||||
stdio: 'inherit',
|
||||
});
|
||||
```
|
||||
|
||||
Add to a test to check `react` and `react-dom` are installed:
|
||||
|
||||
```
|
||||
it('react and react-dom should be installed', () => {
|
||||
projectDirectory = createTestProject('dark');
|
||||
|
||||
// npm ls will fail if the package is not installed properly
|
||||
execSync('npm ls react', {
|
||||
cwd: projectDirectory,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
execSync('npm ls react-dom', {
|
||||
cwd: projectDirectory,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Recap and next steps
|
||||
|
||||
Recap:
|
||||
|
||||
- We learned about what an Nx Plugin is and generated a new plugin workspace
|
||||
- We generated a new CLI package into the workspace: `create-my-own-react-app` . This allows our users to easily scaffold a new workspace
|
||||
- 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:
|
||||
|
||||
- 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
|
||||
- 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-monorepo-tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -2,18 +2,17 @@
|
||||
title: Qwikify your Development with Nx
|
||||
slug: 'qwikify-your-development-with-nx'
|
||||
authors: ['Colum Ferry']
|
||||
cover_image: '/blog/images/2023-08-15/featured_img.avif'
|
||||
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.
|
||||
|
||||
Qwik is a modern web framework that focuses on application performance by reducing the amount of JavaScript that needs to be shipped to the browser. You can learn more about how Qwik achieves this with [Resumability in their docs](https://qwik.dev/docs/concepts/resumable/).
|
||||
|
||||
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/intro).
|
||||
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.
|
||||
@@ -40,7 +39,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
|
||||
@@ -50,7 +49,7 @@ npx create-nx-workspace@latest qwik-todo-app
|
||||
|
||||
> You can also use the `preset` created by the `qwik-nx` plugin by running `npx create-qwik-nx` or `npx -y create-nx-workspace@latest --preset=qwik-nx`. This will skip a few of the next steps by installing the appropriate dependencies and generating your Qwik app.
|
||||
>
|
||||
> The `create-qwik-nx` package is an example of creating an Install Package with Nx. You can learn more here: [/extending-nx/recipes/create-install-package](/extending-nx/recipes/create-install-package)
|
||||
> The `create-qwik-nx` package is an example of creating an Install Package with Nx. You can learn more here: [https://nx.dev/extending-nx/recipes/create-install-package](/extending-nx/recipes/create-install-package)
|
||||
|
||||
Next, navigate into the workspace and install the `qwik-nx` plugin.
|
||||
|
||||
@@ -64,7 +63,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
|
||||
@@ -78,13 +77,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:
|
||||
|
||||
|
||||
|
||||
@@ -98,7 +97,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.
|
||||
|
||||
@@ -106,7 +105,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:
|
||||
|
||||
@@ -133,19 +132,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)
|
||||
>
|
||||
@@ -155,7 +154,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
|
||||
@@ -175,7 +174,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:
|
||||
|
||||
@@ -186,7 +185,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 {
|
||||
@@ -218,11 +217,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';
|
||||
@@ -268,7 +267,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:
|
||||
|
||||
@@ -299,7 +298,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
|
||||
|
||||
@@ -307,11 +306,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 {
|
||||
@@ -349,7 +348,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:
|
||||
|
||||
@@ -407,11 +406,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/)
|
||||
|
||||
@@ -486,7 +485,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
|
||||
|
||||
@@ -528,7 +527,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';
|
||||
@@ -581,7 +580,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!
|
||||
|
||||
@@ -589,7 +588,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!
|
||||
|
||||
@@ -609,4 +608,4 @@ This journey through Qwik and Nx demonstrates how thoughtful architecture and th
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -1,369 +0,0 @@
|
||||
---
|
||||
title: 'Step-by-Step Guide to Creating an Expo Monorepo with Nx'
|
||||
slug: 'step-by-step-guide-to-creating-an-expo-monorepo-with-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2023-08-24/IpM0kZdUNXoDWV4r8J5xXQ.avif'
|
||||
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.
|
||||
|
||||
|
||||
|
||||
_Left: cats, right: dogs_
|
||||
|
||||
As shown in the above screenshots, these two apps have the same branding and reuse all components.
|
||||
|
||||
This blog will go through:
|
||||
|
||||
- How to create a monorepo workspace with Nx
|
||||
- How to share a React Native library
|
||||
- How to build an Expo app
|
||||
- How to submit an Expo app to the app store
|
||||
|
||||
Github repo: [xiongemi/nx-expo-monorepo](https://github.com/xiongemi/nx-expo-monorepo)
|
||||
|
||||
## Creating an Nx Workspace
|
||||
|
||||
To create a new Nx workspace, run the command `npx create-nx-workspace <workspace name>` in the terminal. In this example, let's name it `nx-expo-monorepo`:
|
||||
|
||||
```
|
||||
✔ Where would you like to create your workspace? · create-nx-monorepo
|
||||
✔ Which stack do you want to use? · react
|
||||
✔ What framework would you like to use? · expo
|
||||
✔ Application name · cats
|
||||
✔ Enable distributed caching to make your CI faster · No
|
||||
```
|
||||
|
||||
This will create an [integrated](/deprecated/integrated-vs-package-based) repo. What is an integrated repo?
|
||||
|
||||
> An integrated repo contains projects that depend on each other through standard import statements. There is typically a [single version of every dependency](/concepts/decisions/dependency-management) defined at the root.
|
||||
> [/deprecated/integrated-vs-package-based](/deprecated/integrated-vs-package-based)
|
||||
|
||||
Now, your Nx workspace should have cats and cats-e2e under the `apps` folder and an empty libs folder:
|
||||
|
||||
|
||||
|
||||
### Existing Nx Workspace
|
||||
|
||||
If you already have an Nx workspace, you need to install the @nx/expo package:
|
||||
|
||||
```shell
|
||||
\# npm
|
||||
npm install @nx/expo --save-dev
|
||||
|
||||
\# yarn
|
||||
yarn add @nx/expo --dev
|
||||
|
||||
\# pnpm
|
||||
pnpm add @nx/expo --save-dev
|
||||
```
|
||||
|
||||
To create an Expo app, run:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/expo:app cats
|
||||
```
|
||||
|
||||
Alternatively, if you use Visual Studio Code as your code editor, you can also create apps using [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console):
|
||||
|
||||
|
||||
|
||||
## Install Tech Stacks
|
||||
|
||||
Here are the tech stacks this example is going to use:
|
||||
|
||||
- Material design library: [react-native-paper](https://callstack.github.io/react-native-paper/)
|
||||
|
||||
```shell
|
||||
\# npm
|
||||
npm install react-native-paper react-native-safe-area-context --save
|
||||
|
||||
\# yarn
|
||||
yarn add react-native-paper react-native-safe-area-context
|
||||
|
||||
\# pnpm
|
||||
pnpm add react-native-paper react-native-safe-area-context --save
|
||||
```
|
||||
|
||||
- Routing: [@react-navigation/native](https://reactnavigation.org/)
|
||||
|
||||
```shell
|
||||
\# npm
|
||||
npm install react-native-paper react-native-screens @react-navigation/native-stack --save
|
||||
|
||||
\# yarn
|
||||
yarn add react-native-paper react-native-screens @react-navigation/native-stack
|
||||
|
||||
\# pnpm
|
||||
pnpm add react-native-paper react-native-screens @react-navigation/native-stack --save
|
||||
```
|
||||
|
||||
## Create a Shareable UI Library
|
||||
|
||||
With all the required libraries installed, you need to create a sharable UI library:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/expo:lib ui
|
||||
```
|
||||
|
||||
Now under the `libs` folder, a `ui` folder has been created:
|
||||
|
||||
|
||||
_ui folder_
|
||||
|
||||
To create a component in the `ui` library, run:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/expo:component carousel --project=ui --export
|
||||
```
|
||||
|
||||
You can see that a `carousel` folder has been created in the `libs/ui/src/lib` folder:
|
||||
|
||||
|
||||
_carousel folder_
|
||||
|
||||
Next, modify this component to display the content with props passed in:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Card, Title, Paragraph } from 'react-native-paper';
|
||||
|
||||
export interface CarouselProps {
|
||||
imageUri?: string;
|
||||
title?: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function Carousel({ imageUri, title, content }: CarouselProps) {
|
||||
return (
|
||||
<Card>
|
||||
{imageUri && <Card.Cover source={{ uri: imageUri }} />}
|
||||
<Card.Content>
|
||||
{title && <Title>{title}</Title>}
|
||||
<Paragraph>{content}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Carousel;
|
||||
```
|
||||
|
||||
Now you can use this component in your app directly using an import:
|
||||
|
||||
```
|
||||
import { Carousel } from '@nx-expo-monorepo/ui';
|
||||
```
|
||||
|
||||
## Add Navigation
|
||||
|
||||
This project is going to use the [stack navigator](https://reactnavigation.org/docs/stack-navigator) from [@react-navigation/native](https://reactnavigation.org/). So the app needs to import from @react-navigation/stack. In `apps/cats/src/app/App.tsx`, you can change the UI to have one screen displaying a carousel with mock data:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { Carousel } from '@nx-expo-monorepo/ui';
|
||||
|
||||
const App = () => {
|
||||
const Stack = createNativeStackNavigator();
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="Cat Facts"
|
||||
component={() => (
|
||||
<Carousel
|
||||
title="title"
|
||||
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta leo justo, id posuere urna tempor convallis. Nulla finibus, dolor sit amet facilisis pellentesque, velit nisi tempor ipsum, nec interdum libero felis a risus. Pellentesque bibendum, dolor vel varius pulvinar, tortor leo ultrices nisi, non sodales dui quam vitae nulla. Integer sed rhoncus dui. Vestibulum bibendum diam ut leo tempus, vel vulputate magna iaculis. Suspendisse tempus magna libero, sed facilisis tellus aliquet ac. Morbi at velit ornare, posuere tortor vitae, mollis erat. Donec maximus mollis luctus. Vivamus sodales sodales dui pellentesque imperdiet. Mauris a ultricies nibh. Integer sed vehicula magna."
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Run the app with`nx start cats`, and you should be able to see the app on the simulator:
|
||||
|
||||
|
||||
_Page on the simulator (left: iOS, right: Android)_
|
||||
|
||||
## Add Another App
|
||||
|
||||
In this example, there is already a `Cats` app. To create the `Dogs` app, run the command:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/expo:app dogs
|
||||
```
|
||||
|
||||
Alternatively, if you use Visual Studio Code as your code editor, you can also create apps using [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console):
|
||||
|
||||
|
||||
|
||||
Under the apps folder, there should be `cats/`, `dogs/` and their e2es.
|
||||
|
||||
|
||||
_apps folder_
|
||||
|
||||
You can reuse the UI library in the Dogs app in `apps/dogs/src/app/App.tsx` with the below code:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { Carousel } from '@nx-expo-monorepo/ui';
|
||||
|
||||
const App = () => {
|
||||
const Stack = createNativeStackNavigator();
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="Dog Facts"
|
||||
component={() => (
|
||||
<Carousel
|
||||
title="title"
|
||||
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta leo justo, id posuere urna tempor convallis. Nulla finibus, dolor sit amet facilisis pellentesque, velit nisi tempor ipsum, nec interdum libero felis a risus. Pellentesque bibendum, dolor vel varius pulvinar, tortor leo ultrices nisi, non sodales dui quam vitae nulla. Integer sed rhoncus dui. Vestibulum bibendum diam ut leo tempus, vel vulputate magna iaculis. Suspendisse tempus magna libero, sed facilisis tellus aliquet ac. Morbi at velit ornare, posuere tortor vitae, mollis erat. Donec maximus mollis luctus. Vivamus sodales sodales dui pellentesque imperdiet. Mauris a ultricies nibh. Integer sed vehicula magna."
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
## Build Expo Apps
|
||||
|
||||
[EAS Build](https://docs.expo.dev/build/introduction/) is a hosted service for building app binaries for your Expo and React Native projects. To set up EAS locally:
|
||||
|
||||
### 1. Install EAS CLI
|
||||
|
||||
EAS CLI is the command-line app to interact with EAS services in the terminal. To install it, run the command:
|
||||
|
||||
```
|
||||
npm install -g eas-cli
|
||||
```
|
||||
|
||||
### 2. Login To EAS
|
||||
|
||||
If you are not logged in, run the command:
|
||||
|
||||
```
|
||||
eas login
|
||||
```
|
||||
|
||||
### 3. Build the Apps
|
||||
|
||||
After the EAS setup, you can build apps by running the command:
|
||||
|
||||
```shell
|
||||
npx nx build cats
|
||||
npx nx build dogs
|
||||
```
|
||||
|
||||
There are different options you can specify with the build command. For example, you can specify the platform you want to build:
|
||||
|
||||
```shell
|
||||
npx nx build cats --platform=all
|
||||
npx nx build cats --platform=android
|
||||
npx nx build cats --platform=ios
|
||||
```
|
||||
|
||||
Alternatively, if you want to create a build to run on a simulator/emulator, you can run:
|
||||
|
||||
```shell
|
||||
npx nx build cats --profile=preview
|
||||
```
|
||||
|
||||
You can view your build status at [https://expo.dev/](https://expo.dev/):
|
||||
|
||||
|
||||
|
||||
If you want to create a build locally using your own infrastructure:
|
||||
|
||||
```shell
|
||||
npx nx build cats --local
|
||||
```
|
||||
|
||||
Here is the complete list of flags for the build command: [/technologies/react/expo/executors/build](/technologies/react/expo/api/executors/build).
|
||||
|
||||
## Submit to the App Store
|
||||
|
||||
Before you submit, you need to have paid developer accounts for iOS and Android.
|
||||
|
||||
- iOS: You need to create an Apple Developer account on the Apple [Developer Portal](https://developer.apple.com/account/).
|
||||
- Android: You need to create a Google Play Developer account on the [Google Play Console sign-up page](https://play.google.com/apps/publish/signup/). You also need to manually create an app on [Google Play Console](https://play.google.com/apps/publish/) and upload your app for the first time.
|
||||
|
||||
### 1\. Run the production build
|
||||
|
||||
To submit to the app store, you can build the app by running:
|
||||
|
||||
```shell
|
||||
npx nx build cats --profile=production
|
||||
```
|
||||
|
||||
### 2\. Submit the Build
|
||||
|
||||
You can manually upload the build bundle binary to the app store, or you can submit it through EAS.
|
||||
|
||||
First, in `app.json` under the project `apps/cats/app.json`, you need to make sure`ios.bundleIdentifier` and `android.package` keys are correct:
|
||||
|
||||
|
||||
_app.json_
|
||||
|
||||
To submit your app to the app stores, run:
|
||||
|
||||
```shell
|
||||
npx nx submit cats
|
||||
```
|
||||
|
||||
Nx will prompt you to choose the platform to which you want to submit:
|
||||
|
||||
|
||||
|
||||
Or you can also specify the platform directly in the initial command:
|
||||
|
||||
```shell
|
||||
npx nx submit cats --platform=all
|
||||
npx nx submit cats --platform=android
|
||||
npx nx submit cats --platform=ios
|
||||
```
|
||||
|
||||
It will then ask you to choose which binary to submit from one of the following options:
|
||||
|
||||
- The latest finished Android build for the project on EAS servers.
|
||||
- Specific build ID. It can be found on the [builds dashboard](https://expo.dev/builds).
|
||||
- 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":
|
||||
|
||||
|
||||
|
||||
## Summary
|
||||
|
||||
In this article, you have learned how to:
|
||||
|
||||
- Create multiple apps in a monorepo using @nx/expo
|
||||
- Create a shared library
|
||||
- Build your app using EAS
|
||||
- Submit your app to the App Store
|
||||
|
||||
With Nx, it is easy to create and scale up an Expo app. Even though this app is currently a simple 2-page app, you can easily scale it up with more libraries and components. Furthermore, you can also reuse those libraries in the future if you decide to add another app to the repo.
|
||||
|
||||
## Learn more
|
||||
|
||||
- [Unit Testing Expo Apps With Jest](/blog/unit-testing-expo-apps-with-jest)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](https://nx.app/)
|
||||
@@ -1,377 +0,0 @@
|
||||
---
|
||||
title: 'Nx 16.8 Release!!!'
|
||||
slug: 'nx-16-8-release'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-09-06/16gTRcKon8B4IKYQAY9V8w.avif'
|
||||
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!
|
||||
|
||||
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!
|
||||
|
||||
{% youtube src="https://youtu.be/wj-gb6jqyzA" /%}
|
||||
|
||||
## Nx Community News!
|
||||
|
||||
Before we jump into the features, be sure to get plugged in to get the most out of Nx in [our NEW discord server](https://discord.gg/Pzz9BW62gD)!
|
||||
|
||||
Be sure to checkout our livestream with Jay Bell (Nx Champion, former Nx Community Slack admin, and current Nx Discord Admin) all about the news:
|
||||
|
||||
{% youtube src="https://youtu.be/yBsXB8xuTog" /%}
|
||||
|
||||
Nx is also coming up on 20k Github stars [please help us get there!](https://github.com/nrwl/nx)
|
||||
|
||||
|
||||
|
||||
**Table of Contents**
|
||||
· [NEW PROJECT GENERATOR BEHAVIOR: Project Creation Paths and Names in Nx Generators](#new-project-generator-behavior-project-creation-paths-and-names-in-nx-generators)
|
||||
· [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 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)
|
||||
· [DOCS ENHANCEMENT: Third-Party Plugin Quality Indicators](#docs-enhancement-thirdparty-plugin-quality-indicators)
|
||||
· [DOCS ENHANCEMENT: Redesigned Intro & Examples](#docs-enhancement-redesigned-intro-examples)
|
||||
· [NEW GENERATOR: ESLint Flat Config](#new-generator-eslint-flat-config)
|
||||
· [New Nx Cloud Overview Video](#new-nx-cloud-overview-video)
|
||||
· [Nx Conf Coming Up](#nx-conf-coming-up)
|
||||
|
||||
## NEW PROJECT GENERATOR BEHAVIOR: Project Creation Paths and Names in Nx Generators
|
||||
|
||||
Alright, getting into the newest updates from Nx, the biggest change is coming in the form of Nx project generators.
|
||||
|
||||
Originally, all Nx workspaces had a directory structure where applications were always held in an `apps/` directory, while libraries were held in the `libs/` directory.
|
||||
|
||||
Over the years, we found this to be much too rigid, so we made these locations more configurable. We added a `workspaceLayout` category to the `nx.json` file, where you could set `appDir` and `libDir` options to customize the names of these directories.
|
||||
|
||||
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`.
|
||||
|
||||
|
||||
|
||||
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)
|
||||
- where to put the project in your filesystem
|
||||
|
||||
|
||||
|
||||
You can avoid the extra prompt above by setting the `projectNameAndRootFormat` in the `workspaceLayout` category of your `nx.json` file, or by providing it in in your generate command:
|
||||
|
||||
```
|
||||
> nx g app my-app --projectNameAndRootFormat=as-provided
|
||||
```
|
||||
|
||||
This will change some of the default behaviors of our generators and for new Nx workspaces. By default, new workspaces will be set to `as-provided`, so longtime Nx users might notice that if they create a new workspace and start generating apps or libs, that they will now get generated at the root of the workspace instead of inside the `apps/` or `libs/` directory like they used to.
|
||||
|
||||
To get the legacy behavior, be sure to change the `projectNameAndRootFormat` to `derived` and/or use the `name` option to set the name of the project, and the `directory` option to set the full path of the target directory for your new projects:
|
||||
|
||||
```
|
||||
> nx g app --name=my-app --directory=apps/my-app
|
||||
```
|
||||
|
||||
## Packaging TypeScript Libraries — Secondary Entrypoints, ESM, CJS
|
||||
|
||||
{% 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.
|
||||
|
||||
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.
|
||||
|
||||
```json
|
||||
{
|
||||
"exports": {
|
||||
"./package.json": "./package.json",
|
||||
".": "./src/index.js",
|
||||
"./foo": "./src/foo.js",
|
||||
"./bar": "./src/bar.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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
|
||||
{
|
||||
"name": "my-awesome-lib",
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/js:tsc",
|
||||
...
|
||||
"options": {
|
||||
"main": "packages/my-awesome-lib/src/index.ts",
|
||||
...
|
||||
"additionalEntryPoints": ["packages/my-awesome-lib/src/foo.ts"],
|
||||
"generateExportsField": true
|
||||
},
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
When building the library, the `@nx/js:tsc` executor automatically adds the correct `exports` definition to the resulting `package.json`.
|
||||
|
||||
This makes it easy to maintain the `exports` field, something that becomes even more relevant if we **want to add add multiple formats**. By switching to the `@nx/rollup:rollup` executor, we can also add the `format` option and define `esm` and `cjs` as the target formats we want to have. Note we still keep the `additionalEntryPoints` and `generateExportsField`.
|
||||
|
||||
```
|
||||
// packages/my-awesome-lib/project.json
|
||||
{
|
||||
"name": "my-awesome-lib",
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/rollup:rollup",
|
||||
...
|
||||
"options": {
|
||||
"main": "packages/my-awesome-lib/src/index.ts",
|
||||
...
|
||||
"format": ["esm", "cjs"],
|
||||
"additionalEntryPoints": ["packages/my-awesome-lib/src/foo.ts"],
|
||||
"generateExportsField": true
|
||||
},
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
After compiling our package using `nx build my-awesome-lib` we'll get the following output in our `dist` folder.
|
||||
|
||||
```
|
||||
my-awesome-lib
|
||||
└─ .
|
||||
├─ README.md
|
||||
├─ foo.cjs.d.ts
|
||||
├─ foo.cjs.js
|
||||
├─ foo.esm.js
|
||||
├─ index.cjs.d.ts
|
||||
├─ index.cjs.js
|
||||
├─ index.esm.js
|
||||
├─ package.json
|
||||
└─ src
|
||||
├─ foo.d.ts
|
||||
├─ index.d.ts
|
||||
└─ lib
|
||||
└─ my-awesome-lib.d.ts
|
||||
```
|
||||
|
||||
And our `package.json` will look as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-awesome-lib",
|
||||
"version": "0.0.1",
|
||||
...
|
||||
"type": "commonjs",
|
||||
"main": "./index.cjs.js",
|
||||
"typings": "./src/index.d.ts",
|
||||
"exports": {
|
||||
"./package.json": "./package.json",
|
||||
".": {
|
||||
"import": "./index.esm.js",
|
||||
"default": "./index.cjs.js"
|
||||
},
|
||||
"./foo": {
|
||||
"import": "./foo.esm.js",
|
||||
"default": "./foo.cjs.js"
|
||||
}
|
||||
},
|
||||
"module": "./index.esm.js"
|
||||
}
|
||||
```
|
||||
|
||||
## High Performance TypeScript Compilation: Introducing Batch Mode & Rust-based Dependency Resolution
|
||||
|
||||
Speed is in our DNA! And TypeScript compilation can be slow which is mostly due to `tsc` being a costly operation. You feel this in particular in a monorepo where you have multiple projects that are being compiled independently, thus launching dozens of processes of the `tsc` compiler.
|
||||
|
||||
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`:
|
||||
|
||||
```
|
||||
> NX_BATCH_MODE=true nx run-many --target=build
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
In addition to batch mode, the processing of Typescript dependencies is **now using a faster and more accurate Rust implementation**. This should be transparent to most users — aside from your monorepo becoming even faster!
|
||||
|
||||
## NEW Nx PLUGIN: Playwright
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
If you want to add playwright to an existing project in your workspace you can also do that now by installing the plugin (here using `npm`):
|
||||
|
||||
```
|
||||
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`):
|
||||
|
||||
```
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
{% 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.
|
||||
|
||||
## 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).
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
and task graph
|
||||
|
||||
|
||||
|
||||
within your IDE!
|
||||
|
||||
As of our latest release, Nx Console has added the new feature of adding buttons inside the project graph to take you directly to the selected project in the project graph:
|
||||
|
||||
|
||||
|
||||
And gives you a "play button" to run any task within your task graph:
|
||||
|
||||
|
||||
|
||||
## ENHANCEMENT: Storybook Support for Interaction Testing
|
||||
|
||||
Storybook 7 introduces new [Interaction Testing](https://storybook.js.org/getting-started/intro/react/writing-tests/interaction-testing) to their platform!
|
||||
|
||||
|
||||
|
||||
The Nx Storybook plugin has now been enhanced with a new `interactionTests` option on the `storybook-configuration` generator, that will automate setting up these interaction tests for you when you use Nx to generate stories for your components!
|
||||
|
||||
You can checkout everything about Storybook Interaction tests and our Nx support for it in this video:
|
||||
|
||||
{% youtube src="https://youtu.be/SaHoUx-TUs8" /%}
|
||||
|
||||
Nx has always provided similar functionality via our Storybook + Cypress integrations, where you can setup cypress tests to test your storybook showcases, and while you can use interaction testing to replace this integration, we will continue to support our Storybook + Cypress integrations going forward!
|
||||
|
||||
## 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.
|
||||
|
||||
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](/reference/core-api/workspace/generators/convert-to-monorepo) comes into play!
|
||||
|
||||
```shell
|
||||
nx g convert-to-monorepo
|
||||
```
|
||||
|
||||
This will identify all library projects in currently in your repo and place them in the `libs/` directory that you might expect of a typical Nx monorepo. It will also hoist your application project from the root of your workspace into the `apps/` directory.
|
||||
|
||||
When all is said and done, you should be able to now add additional applications to your repo now!
|
||||
|
||||
## DOCS ENHANCEMENT: Third-Party Plugin Quality Indicators
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
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!
|
||||
|
||||
|
||||
|
||||
Go [check it out now](/plugin-registry) live in our docs site!
|
||||
|
||||
## DOCS ENHANCEMENT: Redesigned Intro & Examples
|
||||
|
||||
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 🐐
|
||||
|
||||
{% 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.
|
||||
|
||||
|
||||
|
||||
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!
|
||||
|
||||
|
||||
|
||||
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/).
|
||||
|
||||
As part of our continued support for ESLint, we've introduced [a new generator](/technologies/eslint/api/generators/convert-to-flat-config) to convert your Nx monorepo to this new system:
|
||||
|
||||
```
|
||||
> nx g convert-to-flat-config
|
||||
```
|
||||
|
||||
Flat config is still experimental, so you can use this as a way of easily previewing the new config system now. Just be sure not to mix the original configuration with this new configuration system!
|
||||
|
||||
## 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!
|
||||
|
||||
{% youtube src="https://youtu.be/NZF0ZJpgaJM" /%}
|
||||
|
||||
Be sure to checkout the [Nx Cloud landing site](/nx-cloud) for more details on all the additional features you unlock with the power of the cloud!
|
||||
|
||||
## 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!
|
||||
|
||||
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!
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
|
||||
## More Nx Release Notes:
|
||||
|
||||
- [Nx 16.5](/blog/nx-16-5-release)
|
||||
- [Nx 16.0](/blog/nx-16-is-here)
|
||||
- [Nx 15.8](/blog/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook)
|
||||
- [Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning)
|
||||
- [Nx 15.4](/blog/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more)
|
||||
- [Nx 15.3](/blog/nx-15-3-standalone-projects-vite-task-graph-and-more)
|
||||
@@ -1,311 +0,0 @@
|
||||
---
|
||||
title: 'Introducing Playwright Support for Nx'
|
||||
slug: 'introducing-playwright-support-for-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2023-09-18/589bVpPTJ4D4IACBePXWQ.avif'
|
||||
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`.
|
||||
|
||||
This blog will show you:
|
||||
|
||||
- What is Playwright
|
||||
- How to create a new Nx workspace with Playwright support
|
||||
- How to add Playwright to an existing Nx workspace
|
||||
|
||||
{% youtube src="https://youtu.be/k1U3PuBrZFQ?si=AVyXfyMJz4q6OJ70" /%}
|
||||
|
||||
## What is Playwright?
|
||||
|
||||
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?
|
||||
|
||||
### Multiple Browsers
|
||||
|
||||
It is easy to run e2e test suites across multiple browsers. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. It also supports branded browsers and mobile viewports. For example, we can simply add the below code to the playwright configuration file to run the same test across these browsers:
|
||||
|
||||
```
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
projects: [
|
||||
/* Test against desktop browsers */
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
/* Test against mobile viewports. */
|
||||
{
|
||||
name: 'Mobile Chrome',
|
||||
use: { ...devices['Pixel 5'] },
|
||||
},
|
||||
/* Test against branded browsers. */
|
||||
{
|
||||
name: 'Google Chrome',
|
||||
use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 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:
|
||||
|
||||
- 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:
|
||||
|
||||
```
|
||||
await page.getByTestId('submit-button').click();
|
||||
```
|
||||
|
||||
### HTML Test Report
|
||||
|
||||
Playwright creates a nice HTML test report that allows filtering tests by browsers, passed tests, failed tests, skipped tests, and flaky tests.
|
||||
|
||||
|
||||
_HTML Test Report_
|
||||
|
||||
Clicking on the individual test shows more detailed errors along with each step of the test:
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
## Create a new Nx Workspace with Playwright
|
||||
|
||||
In this example, we will create a React app using Playwright as its end-to-end testing framework. In the terminal, run the below command:
|
||||
|
||||
```shell
|
||||
npx create-nx-workspace
|
||||
|
||||
✔ Where would you like to create your workspace? · nx-react-playwright
|
||||
✔ Which stack do you want to use? · react
|
||||
✔ What framework would you like to use? · none
|
||||
✔ Integrated monorepo, or standalone project? · standalone
|
||||
✔ Which bundler would you like to use? · vite
|
||||
✔ Test runner to use for end to end (E2E) tests · playwright
|
||||
✔ Default stylesheet format · css
|
||||
✔ Enable distributed caching to make your CI faster · No
|
||||
```
|
||||
|
||||
We get a standalone Nx React app named `nx-react-playwright`:
|
||||
|
||||
|
||||
_nx repo created_
|
||||
|
||||
What is a [standalone application](/deprecated/integrated-vs-package-based)? It is like an integrated monorepo setup but with just a single, root-level application. The repo has the same file structure as an app created from Create-React-App, but we can still leverage all the generators and executors and structure your application into libraries or submodules.
|
||||
|
||||
### Run E2E
|
||||
|
||||
The default e2e test is located in `e2e/src/example.spec.ts`:
|
||||
|
||||
```
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('has title', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
// Expect h1 to contain a substring.
|
||||
expect(await page.locator('h1').innerText()).toContain('Welcome');
|
||||
});
|
||||
```
|
||||
|
||||
The test verifies the `h1` header contains the text `Welcome`:
|
||||
|
||||
|
||||
_Page served up_
|
||||
|
||||
To run the e2e tests, run the below command:
|
||||
|
||||
```shell
|
||||
npx nx e2e e2e
|
||||
```
|
||||
|
||||
In the terminal, it shows the following log:
|
||||
|
||||
```shell
|
||||
nx run nx-react-playwright:serve:development
|
||||
➜ Local: http://localhost:4200/
|
||||
3 passed (11.8s)
|
||||
To open last HTML report run:
|
||||
|
||||
npx playwright show-report dist/.playwright/e2e/playwright-report
|
||||
```
|
||||
|
||||
So the test passed and it also generated a report at `dist/.playwright/e2e/playwright-report/index.html`:
|
||||
|
||||
|
||||
|
||||
### Add Another Test
|
||||
|
||||
Let's add another test to check the Documentation button works:
|
||||
|
||||
|
||||
_Documentation_
|
||||
|
||||
In `src/app/nx-welcome.tsx`, we need to add a test id to the link:
|
||||
|
||||
```
|
||||
<a
|
||||
href="/getting-started/intro?utm_source=nx-project"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="list-item-link"
|
||||
data-testid="documentation-link"
|
||||
>
|
||||
```
|
||||
|
||||
Then in `e2e/src/example.spec.ts`, the test file will become:
|
||||
|
||||
```
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('navigation', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Go to the starting url before each test.
|
||||
await page.goto('/');
|
||||
});
|
||||
|
||||
test('has title', async ({ page }) => {
|
||||
// Expect h1 to contain a substring.
|
||||
expect(await page.locator('h1').innerText()).toContain('Welcome');
|
||||
});
|
||||
|
||||
test('should go to documentation site', async ({ page, context }) => {
|
||||
await page.getByTestId('documentation-link').click();
|
||||
// Opening a new tab and waiting for the page to render
|
||||
const pagePromise = context.waitForEvent('page');
|
||||
const newPage = await pagePromise;
|
||||
await newPage.waitForLoadState();
|
||||
expect(await newPage.title()).toContain('Intro to Nx');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Now run `npx nx e2e e2e`, the test would still pass:
|
||||
|
||||
```shell
|
||||
nx run nx-react-playwright:serve:development
|
||||
➜ Local: http://localhost:4200/
|
||||
6 passed (3.1s)
|
||||
To open last HTML report run:
|
||||
|
||||
npx playwright show-report dist/.playwright/e2e/playwright-report
|
||||
```
|
||||
|
||||
Now we have created a new Nx workspace with Playwright. However, if you already have an Nx repo, how do you add Playwright E2E configuration to an existing app?
|
||||
|
||||
## How to add Playwright to an existing Nx workspace
|
||||
|
||||
For this example, I am going to add Playwright e2e tests to this repo: [nrwl/nx-examples](https://github.com/nrwl/nx-examples)
|
||||
|
||||
We are going to focus on the cart app in this example. In the terminal, run `npx nx serve cart` and it should serve up the app at [http://localhost:4200/cart](http://localhost:4200/cart).
|
||||
|
||||
|
||||
_Cart App_
|
||||
|
||||
### Install @nx/playwright
|
||||
|
||||
To install, run:
|
||||
|
||||
```shell
|
||||
#npm
|
||||
npm install @nx/playwright --save-dev
|
||||
|
||||
#yarn
|
||||
yarn add @nx/playwright --dev
|
||||
|
||||
#pnpm
|
||||
pnpm i -D @nx/playwright
|
||||
```
|
||||
|
||||
### Apply Playwright Configuration
|
||||
|
||||
There are 2 ways to apply the E2E Playwright configuration.
|
||||
|
||||
1. **Apply directly on the cart app**
|
||||
|
||||
We can set up Playwright directly on the cart app:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/playwright:configuration --project=cart ---webServerCommand="npx nx serve cart" --webServerAddress="http://localhost:4200"
|
||||
```
|
||||
|
||||
It adds:
|
||||
|
||||
- an e2e target in `apps/cart/project.json`
|
||||
- an e2e folder at `apps/cart/e2e` containing e2e tests
|
||||
- `playwright.config.ts` containing Playwright configuration
|
||||
|
||||
|
||||
_new cart folder_
|
||||
|
||||
Let's update the default test `apps/cart/e2e/example.spec.ts` to check whether the header exists:
|
||||
|
||||
```
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('has title', async ({ page }) => {
|
||||
await page.goto('/cart');
|
||||
|
||||
await expect(page.locator('nx-example-header')).toBeVisible()
|
||||
});
|
||||
```
|
||||
|
||||
Now we can run `npx nx e2e cart` and it should pass.
|
||||
|
||||
**2\. Add a separate E2E Project**
|
||||
|
||||
The second way is to create a separate E2E project folder and apply configuration there.
|
||||
|
||||
Create a folder e2e at the workspace root and a project.json file inside it:
|
||||
|
||||
|
||||
|
||||
Add name in `e2e/project.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "e2e"
|
||||
}
|
||||
```
|
||||
|
||||
Now apply the Playwright configuration to the e2e project:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/playwright:configuration --project=e2e ---webServerCommand="npx nx serve cart" --webServerAddress="http://localhost:4200"
|
||||
```
|
||||
|
||||
Now I created an e2e folder at the workspace root:
|
||||
|
||||
|
||||
_e2e folder_
|
||||
|
||||
Now we can run `npx nx e2e e2e` to run the Playwright e2e tests.
|
||||
|
||||
## Summary
|
||||
|
||||
In this blog, we have:
|
||||
|
||||
- Created a new Nx react repo with Playwright
|
||||
- Written our own Playwright tests
|
||||
- Used Nx to run Playwright tests
|
||||
- Set up a Playwright configuration for an existing Nx app
|
||||
|
||||
Hopefully, this gives you good insight into how to get started with Playwright. The Playwright configuration in this example is pretty simple, to learn more about `@nx/playwright` plugin, check out the Nx documentation: [/technologies/test-tools/playwright/introduction](/technologies/test-tools/playwright/introduction).
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- 🚀 [Speed up your CI](/nx-cloud)
|
||||
@@ -3,12 +3,11 @@ 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" /%}
|
||||
{% youtube src="https://www.youtube.com/embed/KuyYhC4ClW8?si=qoZL6i6X1E7wjChD" %}
|
||||
|
||||
---
|
||||
|
||||
@@ -19,4 +18,4 @@ Victor and I are excited to announce that Nx has raised another $16M in a Series
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
title: Nx Conf 2023 — Recap
|
||||
slug: 'nx-conf-2023-recap'
|
||||
authors: [Juri Strumpflohner]
|
||||
cover_image: '/blog/images/2023-10-13/featured_img.avif'
|
||||
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" /%}
|
||||
|
||||
@@ -17,11 +16,11 @@ The 3rd edition of [Nx Conf](/conf), this year live from New York City. If you m
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=WSqivWlEDFw" /%}
|
||||
|
||||
Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/intro) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc.
|
||||
Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/why-nx) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -30,11 +29,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**:
|
||||
@@ -42,15 +41,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.
|
||||
|
||||
|
||||
|
||||
@@ -60,7 +59,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:
|
||||
|
||||
@@ -104,7 +103,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.
|
||||
|
||||
|
||||
|
||||
@@ -133,17 +132,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.
|
||||
|
||||
|
||||
|
||||
@@ -169,7 +168,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
|
||||
@@ -184,7 +183,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:
|
||||
@@ -200,12 +199,16 @@ The training program is there to tackle the bottleneck of missing knowledge, rig
|
||||
|
||||
Finally the impact measurement; Nx Cloud already has graphs to measure how much time got saved in CI due to the improvements made. Michael mentions they go further, also measuring communication and productivity.
|
||||
|
||||
An interesting part is also how they perform the repository syncing (from polyrepo to monorepo). They leverage an Nx plugin that
|
||||
An interesting part is also how they perform the repository synching (from polyrepo to monorepo). They leverage an Nx plugin that
|
||||
|
||||
- contains shared build logic
|
||||
- has rules to run that produce actionable feedback about what is needed to sync/align the polyrepo repository s.t. it can be merged into the monorepo
|
||||
- it also allows to track progress and produce according reporting of where the company is at
|
||||
|
||||
Sounds interesting? Watch the full talk below:
|
||||
|
||||
{% youtube src="https://www.youtube.com/watch?v=i0UdoImryJQ" /%}
|
||||
|
||||
## Redefining Projects with Nx: A Dive into the New Inference API
|
||||
|
||||
**Speaker:** [Craigory Coppola](https://twitter.com/enderagent)
|
||||
@@ -216,7 +219,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:
|
||||
|
||||
@@ -240,7 +243,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:
|
||||
|
||||
@@ -286,7 +289,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.
|
||||
|
||||
@@ -299,7 +302,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)
|
||||
@@ -323,7 +326,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.
|
||||
@@ -336,7 +339,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.
|
||||
|
||||
@@ -345,7 +348,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?
|
||||
@@ -492,4 +495,4 @@ If you enjoyed these, [subscribe to our YouTube channel](https://www.youtube.com
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -2,31 +2,28 @@
|
||||
title: 'Nx 17 has Landed'
|
||||
slug: 'nx-17-release'
|
||||
authors: ['Juri Strumpflohner', 'Zack DeRose']
|
||||
cover_image: '/blog/images/2023-10-20/featured_img.avif'
|
||||
tags: [nx, release]
|
||||
description: Nx 17 released with Vue.js support, Module Federation enhancements, generator path improvements, AI chatbot integration, and more.
|
||||
cover_image: '/blog/images/2023-10-20/featured_img.png'
|
||||
tags: [nx, design]
|
||||
---
|
||||
|
||||
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)
|
||||
- [More Consistent Generator Paths](#more-consistent-generator-paths)
|
||||
- [The NEW Nx AI Chatbot](#the-new-nx-ai-chatbot)
|
||||
- [More Seamless Integration With Nx Cloud](#more-seamless-integration-with-nx-cloud)
|
||||
- [`nx.json` Simplification](#nxjson-simplification)
|
||||
- [`nx.json` Simplification](#simplification)
|
||||
- [Nx Repo Begins Dog-Fooding Nx Workflows](#nx-repo-dogfooding-nx-workflows)
|
||||
- [Task Graphing Improvements](#task-graphing-improvements)
|
||||
- [`@nx/linter` Renames to `@nx/eslint`](#renamed-to)
|
||||
- [New Experimental Feature: Nx Release](#new-experimental-feature-nx-release)
|
||||
- [Experimental: Nx Project Inference API v2](#experimental-nx-project-inference-api-v2)
|
||||
- [20k Github Stars!!](#20k-github-stars)
|
||||
- [How to update Nx](#how-to-update-nx)
|
||||
- [Wrapping up](#wrapping-up)
|
||||
|
||||
**Prefer a video?**
|
||||
|
||||
@@ -34,7 +31,7 @@ Here's a Table of Contents so you can skip straight to the updates you care abou
|
||||
|
||||
---
|
||||
|
||||
## 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 🤫)
|
||||
|
||||
@@ -45,14 +42,16 @@ The first place you might notice this new support is in the `create-nx-workspace
|
||||
This option will create a new Nx workspace with a fresh Vue application, all set up and ready to develop! To add new Vue projects to your existing Nx workspaces, add our new @nx/vue package as a dev dependency to your workspace, e.g.:
|
||||
|
||||
```shell
|
||||
npm add -D @nx/vue
|
||||
> 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).
|
||||
|
||||
## Enhancements to Module Federation Support
|
||||
|
||||
@@ -60,7 +59,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
|
||||
|
||||
@@ -75,7 +74,7 @@ The `@nx/react` and `@nx/angular` now include a `federate-module` generator. Thi
|
||||
To run this generator, use the command:
|
||||
|
||||
```shell
|
||||
> nx g federate-module <path to module to be exposed> --name=<module name> --remote=<name of remote exposing module>
|
||||
> nx g federate-module <module name> --path=<path to module to be exposed> --remote=<name of remote exposing module>
|
||||
```
|
||||
|
||||
This will add a new module to the `exposes` map in the specified `remote` application, such that it can be consumed by a `host` application.
|
||||
@@ -118,30 +117,36 @@ 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 Home --directory=apps/my-app/src/app
|
||||
```
|
||||
|
||||
And a `Home.tsx` file will be added in the `apps/my-app/src/app` directory.
|
||||
|
||||
You can now also build your directory path right into the generator command. For example, the same “Home” component would be created via:
|
||||
|
||||
```shell
|
||||
> nx g component apps/my-app/src/app/Home
|
||||
```
|
||||
|
||||
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
|
||||
nx g component Home
|
||||
> cd apps/my-app/src/app
|
||||
> 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 [https://nx.dev/ai-chat](/ai-chat).
|
||||
|
||||
|
||||
|
||||
@@ -155,9 +160,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" %}
|
||||
{
|
||||
@@ -172,39 +177,39 @@ We've also removed the need to specify `cacheableOperations` at the task-runner
|
||||
|
||||
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
|
||||
|
||||
At Nx Conf in New York City, we unveiled the next big step for Nx: **Nx Workflows**.
|
||||
|
||||
If you missed it, Simon Critchley walks you through in his [Nx Conf](/blog/nx-conf-2023-recap) talk:
|
||||
If you missed it, Simon Critchley walks you through in his [Nx Conf](https://dev.to/nx/nx-conf-2023-recap-53ep) talk:
|
||||
|
||||
{% 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:
|
||||
|
||||
|
||||
|
||||
You can open this graph using the command:
|
||||
|
||||
```shell
|
||||
nx graph
|
||||
> 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:
|
||||
|
||||
|
||||
|
||||
@@ -226,22 +231,22 @@ 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](/reference/core-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](https://dev.to/nx/nx-conf-2023-recap-53ep):
|
||||
|
||||
{% 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](/technologies/vue/introduction).
|
||||
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 <project_name>
|
||||
> nx show project <project_name>
|
||||
```
|
||||
|
||||
For plugin authors, check out the [v2 documentation](/extending-nx/recipes/project-graph-plugins) to see how you can take advantage of the new API to deliver a better experience to your users.
|
||||
@@ -257,18 +262,18 @@ Nx is SOOO CLOSE to 20,000 stars on github! If Nx has been helpful to you, [plea
|
||||
Nx is known to [help you automatically migrate](/features/automate-updating-dependencies) to the new version (including potentially breaking changes). To update simply run:
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
> npx nx migrate latest
|
||||
```
|
||||
|
||||
This will update your Nx workspace dependencies, configuration and code to the latest version. After updating your dependencies, run any necessary migrations:
|
||||
|
||||
```shell
|
||||
npx nx migrate --run-migrations
|
||||
> 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!
|
||||
|
||||
---
|
||||
|
||||
@@ -279,4 +284,4 @@ That's all for now folks! We're just starting up a new iteration of development
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
title: State Management Nx React Native/Expo Apps with TanStack Query and Redux
|
||||
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.avif'
|
||||
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.
|
||||
@@ -89,7 +88,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' && <ReactQueryDevtools />}.`
|
||||
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’ && <ReactQueryDevtools />}.`
|
||||
|
||||
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.
|
||||
|
||||
@@ -97,22 +96,22 @@ If you open my Expo app on the web by running `nx start cats` and choose the opt
|
||||
|
||||
|
||||
|
||||
Or you can run `npx nx serve cats` to launch the app in a web browser and debug from there.
|
||||
Or you can run npx nx serve cats to launch the app in a web browser and debug from there.
|
||||
|
||||
### Create a Query
|
||||
|
||||
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
|
||||
npx nx generate @nx/expo:lib libs/queries/use-cat-fact
|
||||
npx nx generate @nx/expo:lib use-cat-fact --directory=queries
|
||||
|
||||
# react-native workspace
|
||||
npx nx generate @nx/react-native:lib libs/queries/use-cat-fact
|
||||
npx nx generate @nx/react-native:lib use-cat-fact --directory=queries
|
||||
```
|
||||
|
||||
Or use [Nx Console](/recipes/nx-console):
|
||||
@@ -125,7 +124,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';
|
||||
@@ -161,7 +160,7 @@ Invalid hook call. Hooks can only be called inside of the body of a function com
|
||||
|
||||
To solve this, you need to wrap your component inside the renderHook function from `@testing-library/react-native` library:
|
||||
|
||||
**1\. Install Library to Mock Fetch**
|
||||
1. **Install Library to Mock Fetch**
|
||||
|
||||
Depending on which library you use to make HTTP requests. (e.g. fetch, axios), you need to install a library to mock the response.
|
||||
|
||||
@@ -186,26 +185,26 @@ import fetchMock from 'jest-fetch-mock';
|
||||
fetchMock.enableMocks();
|
||||
```
|
||||
|
||||
**2\. Create Mock Query Provider**
|
||||
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
|
||||
npx nx generate @nx/expo:library libs/queries/test-wrapper
|
||||
npx nx generate @nx/expo:library test-wrapper --directory=queries
|
||||
|
||||
# react native library
|
||||
npx nx generate @nx/react-native:library libs/queries/test-wrapper
|
||||
npx nx generate @nx/react-native:library test-wrapper --directory=queries
|
||||
```
|
||||
|
||||
Then a component inside this library:
|
||||
|
||||
```shell
|
||||
# expo library
|
||||
npx nx generate @nx/expo:component libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper
|
||||
npx nx generate @nx/expo:component test-wrapper --project=queries-test-wrapper
|
||||
|
||||
# react native library
|
||||
npx nx generate @nx/react-native:component libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper
|
||||
npx nx generate @nx/react-native:component test-wrapper --project=queries-test-wrapper
|
||||
```
|
||||
|
||||
Add the mock `QueryClientProvider` in `libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper.tsx`:
|
||||
@@ -228,7 +227,7 @@ export function TestWrapper({ children }: TestWrapperProps) {
|
||||
export default TestWrapper;
|
||||
```
|
||||
|
||||
**3\. Use Mock Responses in Unit Test**
|
||||
3. **Use Mock Responses in Unit Test**
|
||||
|
||||
Then this is what the unit test for my query would look like:
|
||||
|
||||
@@ -417,10 +416,10 @@ First, you need to create a library for redux:
|
||||
|
||||
```shell
|
||||
# expo library
|
||||
npx nx generate @nx/expo:lib libs/states/cat
|
||||
npx nx generate @nx/expo:lib cat --directory=states
|
||||
|
||||
# react native library
|
||||
npx nx generate @nx/react-native:lib libs/states/cat
|
||||
npx nx generate @nx/react-native:lib cat --directory=states
|
||||
```
|
||||
|
||||
This should create a folder under libs:
|
||||
@@ -440,7 +439,7 @@ You can use the [Nx Console](/recipes/nx-console) to create a redux slice:
|
||||
Or run this command:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/react:redux libs/states/cat/src/lib/likes/likes
|
||||
npx nx generate @nx/react:redux likes --project=states-cat --directory=likes
|
||||
```
|
||||
|
||||
Then update the redux slice at `libs/states/cat/src/lib/likes/likes.slice.ts`:
|
||||
@@ -517,104 +516,8 @@ This state has 3 actions:
|
||||
|
||||
Then you have to add the root store and create a transform function to stringify the redux state:
|
||||
|
||||
```typescript {% fileName="persist-transform.ts" %}
|
||||
import { EntityState } from '@reduxjs/toolkit';
|
||||
import { createTransform } from 'redux-persist';
|
||||
import { LIKES_FEATURE_KEY } from '../likes/likes.slice';
|
||||
|
||||
const transformEntityStateToPersist = createTransform(
|
||||
// transform state on its way to being serialized and persisted.
|
||||
(
|
||||
entityState: EntityState<any>
|
||||
): {
|
||||
ids: string;
|
||||
entities: any;
|
||||
} => {
|
||||
return {
|
||||
...entityState,
|
||||
ids: JSON.stringify(entityState.ids),
|
||||
entities: JSON.stringify(entityState.entities),
|
||||
};
|
||||
},
|
||||
// transform state being rehydrated
|
||||
(entityState: { ids: string; entities: string }): EntityState<any> => {
|
||||
return {
|
||||
...entityState,
|
||||
ids: JSON.parse(entityState.ids),
|
||||
entities: JSON.parse(entityState.entities),
|
||||
};
|
||||
},
|
||||
// define which reducers this transform gets called for.
|
||||
{ whitelist: [LIKES_FEATURE_KEY] }
|
||||
);
|
||||
|
||||
export { transformEntityStateToPersist };
|
||||
```
|
||||
|
||||
```typescript {% fileName="root-state.initial.ts" %}
|
||||
import { initialLikesState } from '../likes/likes.slice';
|
||||
|
||||
import { RootState } from './root-state.interface';
|
||||
|
||||
export const initialRootState: RootState = {
|
||||
likes: initialLikesState,
|
||||
};
|
||||
```
|
||||
|
||||
```typescript {% fileName="root-state.interface.ts" %}
|
||||
import { LikesState } from '../likes/likes.slice';
|
||||
|
||||
export interface RootState {
|
||||
likes: LikesState;
|
||||
}
|
||||
```
|
||||
|
||||
```typescript {% fileName="root-reducer.ts" %}
|
||||
import { combineReducers } from '@reduxjs/toolkit';
|
||||
|
||||
import { likesReducer } from '../likes/likes.slice';
|
||||
import { RootState } from './root-state.interface';
|
||||
|
||||
export const createRootReducer = combineReducers<RootState>({
|
||||
likes: likesReducer,
|
||||
});
|
||||
```
|
||||
|
||||
```typescript {% fileName="root.store.ts" %}
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import logger from 'redux-logger';
|
||||
import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
|
||||
|
||||
import { initialRootState } from './root-state.initial';
|
||||
import { RootState } from './root-state.interface';
|
||||
import { createRootReducer } from './root.reducer';
|
||||
|
||||
declare const process: any;
|
||||
|
||||
export const createRootStore = (persistConfig: PersistConfig<RootState>) => {
|
||||
const isDevelopment = process.env.NODE_ENV === 'development';
|
||||
|
||||
const rootReducer = createRootReducer;
|
||||
const persistedReducer = persistReducer(persistConfig, rootReducer);
|
||||
|
||||
const store = configureStore({
|
||||
reducer: persistedReducer,
|
||||
middleware: (getDefaultMiddleware) => {
|
||||
const defaultMiddleware = getDefaultMiddleware({
|
||||
serializableCheck: false,
|
||||
});
|
||||
return isDevelopment
|
||||
? defaultMiddleware.concat(logger)
|
||||
: defaultMiddleware;
|
||||
},
|
||||
devTools: isDevelopment,
|
||||
preloadedState: initialRootState,
|
||||
});
|
||||
|
||||
const persistor = persistStore(store);
|
||||
|
||||
return { store, persistor };
|
||||
};
|
||||
```html
|
||||
<script src="https://gist.github.com/xiongemi/5f364d84f89b647dcaaf7e5437ea789c.js"></script>
|
||||
```
|
||||
|
||||
### Connect Redux State with UI
|
||||
@@ -706,8 +609,8 @@ Here is a simple app that uses TanStack Query and Redux for state management. Th
|
||||
Nx is a powerful monorepo tool. Together with Nx and these 2 state management tools, it will be very easy to scale up any app.
|
||||
|
||||
- TanStack Query site: [https://tanstack.com/query/latest](https://tanstack.com/query/latest)
|
||||
- Official @nx/expo plugin: [/technologies/react/expo/introduction](/technologies/react/expo/introduction)
|
||||
- Official @nx/react-native plugin: [/technologies/react/react-native/introduction](/technologies/react/react-native/introduction)
|
||||
- Official @nx/expo plugin: [/nx-api/expo](/nx-api/expo)
|
||||
- Official @nx/react-native plugin: [/nx-api/react-native](/nx-api/react-native)
|
||||
|
||||
---
|
||||
|
||||
@@ -718,4 +621,4 @@ Nx is a powerful monorepo tool. Together with Nx and these 2 state management to
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
title: Nx Docs AI Assistant
|
||||
slug: 'nx-docs-ai-assistant'
|
||||
authors: [Katerina Skroumpelou]
|
||||
cover_image: '/blog/images/2023-11-21/featured_img.avif'
|
||||
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
|
||||
@@ -35,7 +34,7 @@ In a nutshell, the Nx Docs AI Assistant works in the following way:
|
||||
|
||||
This is based on the Web Q&A Tutorial from OpenAI [(https://platform.openai.com/docs/tutorials/web-qa-embeddings)](https://platform.openai.com/docs/tutorials/web-qa-embeddings) and Supabase’s Vector Search example [(https://supabase.com/docs/guides/ai/examples/nextjs-vector-search)](https://supabase.com/docs/guides/ai/examples/nextjs-vector-search).
|
||||
|
||||
It’s important to note here that we are not “training the model in our docs”. The model is pretrained. We are just giving the model parts of our docs which are relevant to the user’s question, and the model creates a coherent answer to the question. It’s basically like pasting in ChatGPT a docs page and asking it “how do I do that?”. Except in this case, we’re first searching our documentation and giving GPT only the relevant parts (more about how we do that later in this article), which it can “read” and extract information from.
|
||||
It’s important to note here that we are not “training the model on our docs”. The model is pretrained. We are just giving the model parts of our docs which are relevant to the user’s question, and the model creates a coherent answer to the question. It’s basically like pasting in ChatGPT a docs page and asking it “how do I do that?”. Except in this case, we’re first searching our documentation and giving GPT only the relevant parts (more about how we do that later in this article), which it can “read” and extract information from.
|
||||
|
||||
## Step 1: Preprocessing our docs
|
||||
|
||||
@@ -313,4 +312,4 @@ This role, in the context of OpenAI’s chat models, is the response of the AI.
|
||||
- [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- [Nx Official Discord Server](/community)
|
||||
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Speed up your CI](/nx-cloud)
|
||||
- [Speed up your CI](https://nx.app/)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user