Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c86b654022 | |||
| 25dd46eb70 | |||
| 123b908211 | |||
| f7adc5f29a | |||
| f6644b4462 | |||
| 872d197b3c | |||
| f3870a019f | |||
| cee72ad540 | |||
| 540321dad9 | |||
| b9ec5592e5 | |||
| f067b0d826 | |||
| 0ab10ae59e | |||
| 95c92db114 | |||
| d1767de440 | |||
| a1d99dbacf | |||
| 377bc2f8d0 | |||
| deac1bd335 | |||
| 77e97fb3a9 | |||
| f36b010cec | |||
| 28e9999044 | |||
| b29172fb08 |
@@ -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"
|
||||
}
|
||||
}
|
||||
+14
-74
@@ -4,14 +4,12 @@ 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:
|
||||
@@ -25,9 +23,6 @@ jobs:
|
||||
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
|
||||
@@ -59,44 +54,17 @@ jobs:
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 9.9.0
|
||||
version: 9.8.0
|
||||
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: Install Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
|
||||
- name: Check Documentation
|
||||
run: pnpm nx documentation
|
||||
timeout-minutes: 20
|
||||
@@ -111,10 +79,13 @@ jobs:
|
||||
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 --skip-nx-cache --targets=lint,test,build,e2e,e2e-ci,format-native,lint-native &
|
||||
pnpm nx affected --targets=lint,test,build,e2e,e2e-ci &
|
||||
pids+=($!)
|
||||
|
||||
for pid in "${pids[@]}"; do
|
||||
@@ -124,25 +95,12 @@ jobs:
|
||||
|
||||
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:
|
||||
@@ -157,7 +115,7 @@ jobs:
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
/opt/homebrew
|
||||
/usr/local/Homebrew
|
||||
~/Library/Caches/Homebrew
|
||||
key: nrwl-nx-homebrew-packages
|
||||
|
||||
@@ -172,42 +130,24 @@ jobs:
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
/opt/homebrew
|
||||
/usr/local/Homebrew
|
||||
~/Library/Caches/Homebrew
|
||||
key: nrwl-nx-homebrew-packages
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 9.9.0
|
||||
version: 9.8.0
|
||||
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: Install Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
|
||||
- name: Set SHAs
|
||||
uses: nrwl/nx-set-shas@v4
|
||||
with:
|
||||
|
||||
@@ -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", "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: 9.8.0
|
||||
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"
|
||||
|
||||
@@ -19,7 +19,6 @@ jobs:
|
||||
preinstall:
|
||||
if: ${{ github.repository_owner == 'nrwl' }}
|
||||
runs-on: ${{ matrix.os }}
|
||||
timeout-minutes: 20
|
||||
strategy:
|
||||
matrix:
|
||||
os:
|
||||
@@ -27,15 +26,20 @@ jobs:
|
||||
- macos-latest
|
||||
- windows-latest
|
||||
node_version:
|
||||
- 18
|
||||
- 20
|
||||
- 22
|
||||
# - 23
|
||||
exclude:
|
||||
# run just node v20 on macos and windows
|
||||
- os: macos-latest
|
||||
node_version: 18
|
||||
- os: macos-latest
|
||||
node_version: 22
|
||||
# - os: macos-latest
|
||||
# node_version: 23
|
||||
- os: windows-latest
|
||||
node_version: 18
|
||||
- os: windows-latest
|
||||
node_version: 22
|
||||
# - os: windows-latest
|
||||
@@ -46,8 +50,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
@@ -108,7 +111,6 @@ jobs:
|
||||
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 }}
|
||||
@@ -116,8 +118,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
fetch-depth: 1
|
||||
|
||||
- name: Process matrix data
|
||||
id: process-json
|
||||
@@ -132,7 +133,6 @@ jobs:
|
||||
permissions:
|
||||
contents: read
|
||||
runs-on: ${{ matrix.os }}
|
||||
timeout-minutes: 70 # <- cap each job to 70 minutes
|
||||
strategy:
|
||||
matrix: ${{fromJson(needs.prepare-matrix.outputs.matrix)}} # Load matrix from previous job
|
||||
fail-fast: false
|
||||
@@ -142,8 +142,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
filter: tree:0
|
||||
fetch-depth: 1
|
||||
|
||||
- name: Prepare dir for output
|
||||
run: mkdir -p outputs
|
||||
@@ -160,22 +159,12 @@ jobs:
|
||||
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@v4
|
||||
with:
|
||||
bun-version: latest
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ hashFiles('pnpm-lock.yaml') }}
|
||||
|
||||
- name: Install packages
|
||||
run: pnpm install --frozen-lockfile
|
||||
@@ -217,23 +206,12 @@ jobs:
|
||||
if: steps.cache-cypress.outputs.cache-hit != 'true'
|
||||
run: npx cypress install
|
||||
|
||||
- name: Configure Detox Environment, Install applesimutils
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
run: |
|
||||
# Check if applesimutils is already installed
|
||||
if ! brew list applesimutils &>/dev/null; then
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
|
||||
HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null
|
||||
else
|
||||
echo "applesimutils is already installed, skipping installation"
|
||||
fi
|
||||
timeout-minutes: 10
|
||||
|
||||
- name: Reset iOS Simulators
|
||||
- name: Install applesimutils, reset ios simulators
|
||||
if: ${{ matrix.os == 'macos-latest' }}
|
||||
run: |
|
||||
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
|
||||
timeout-minutes: 5
|
||||
|
||||
- name: Configure git metadata (needed for lerna smoke tests)
|
||||
run: |
|
||||
@@ -246,10 +224,8 @@ jobs:
|
||||
run: |
|
||||
echo "timestamp=$(date +%s)" >> $GITHUB_OUTPUT
|
||||
|
||||
|
||||
- name: Run e2e tests with pnpm (Linux/Windows)
|
||||
id: e2e-run-pnpm
|
||||
if: ${{ matrix.os != 'macos-latest' }}
|
||||
- name: Run e2e tests
|
||||
id: e2e-run
|
||||
run: pnpm nx run ${{ matrix.project }}:e2e-local
|
||||
shell: bash
|
||||
timeout-minutes: ${{ matrix.os_timeout }}
|
||||
@@ -266,33 +242,6 @@ jobs:
|
||||
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' }}
|
||||
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_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
|
||||
|
||||
- name: Save matrix config in file
|
||||
if: ${{ always() }}
|
||||
@@ -302,13 +251,9 @@ 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 }')
|
||||
) | jq --argjson delta $delta -c '. + { "status": "${{ steps.e2e-run.outcome}}", "duration": $delta }')
|
||||
echo "$matrix" > 'outputs/matrix.json'
|
||||
|
||||
- name: Upload matrix config
|
||||
@@ -331,7 +276,6 @@ jobs:
|
||||
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 }}
|
||||
@@ -491,7 +435,6 @@ jobs:
|
||||
needs: process-result
|
||||
runs-on: ubuntu-latest
|
||||
name: Report failure
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
@@ -509,7 +452,6 @@ jobs:
|
||||
needs: e2e
|
||||
runs-on: ubuntu-latest
|
||||
name: Report status
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- name: Send notification
|
||||
uses: ravsamhq/notify-slack-action@v2
|
||||
@@ -525,7 +467,6 @@ 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
|
||||
@@ -541,7 +482,6 @@ 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
|
||||
|
||||
@@ -10,7 +10,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: ['20.19.0']
|
||||
node-version: [18]
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
@@ -19,7 +19,7 @@ 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
|
||||
|
||||
@@ -25,7 +25,7 @@ jobs:
|
||||
- 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
|
||||
|
||||
@@ -8,7 +8,7 @@ type MatrixDataOS = {
|
||||
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
|
||||
node_versions: number[], // node versions to run on this OS
|
||||
excluded?: string[], // projects to exclude from running on this OS
|
||||
};
|
||||
|
||||
@@ -56,23 +56,23 @@ const matrixData: MatrixData = {
|
||||
],
|
||||
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'] },
|
||||
{ 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'] }
|
||||
{ os: 'ubuntu-latest', os_name: 'Linux', os_timeout: 60, package_managers: ['npm', 'pnpm', 'yarn'], node_versions: [18, 20, 22], excluded: ['e2e-detox', 'e2e-react-native', 'e2e-expo'] },
|
||||
{ os: 'macos-latest', os_name: 'MacOS', os_timeout: 90, package_managers: ['npm'], node_versions: [20] },
|
||||
{ os: 'windows-latest', os_name: 'WinOS', os_timeout: 180, package_managers: ['npm'], node_versions: [20], excluded: ['e2e-detox', 'e2e-react-native', 'e2e-expo'] }
|
||||
]
|
||||
};
|
||||
|
||||
const matrix: Array<{
|
||||
project: string,
|
||||
codeowners: string,
|
||||
node_version: number | string,
|
||||
node_version: number,
|
||||
package_manager: string,
|
||||
os: string,
|
||||
os_name: string,
|
||||
os_timeout: number
|
||||
}> = [];
|
||||
|
||||
function addMatrixCombo(project: MatrixDataProject, nodeVersion: number | string, pm: number, os: number) {
|
||||
function addMatrixCombo(project: MatrixDataProject, nodeVersion: number, pm: number, os: number) {
|
||||
matrix.push({
|
||||
project: project.name,
|
||||
codeowners: project.codeowners,
|
||||
|
||||
@@ -21,7 +21,7 @@ env:
|
||||
DEBUG: napi:*
|
||||
NX_RUN_GROUP: ${{ github.run_id }}-${{ github.run_attempt }}
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
NODE_VERSION: 20.19.0
|
||||
NODE_VERSION: 18
|
||||
PNPM_VERSION: 9.8.0 # Aligned with root package.json (pnpm/action-setup will helpfully error if out of sync)
|
||||
|
||||
jobs:
|
||||
@@ -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)
|
||||
@@ -145,7 +141,6 @@ jobs:
|
||||
npm i -g pnpm@9.8.0 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
rustup target add aarch64-unknown-linux-gnu &&
|
||||
pnpm nx run-many --verbose --target=build-native -- --target=x86_64-unknown-linux-gnu
|
||||
- host: ubuntu-latest
|
||||
target: x86_64-unknown-linux-musl
|
||||
@@ -155,12 +150,9 @@ jobs:
|
||||
npm i -g pnpm@9.8.0 --force &&
|
||||
pnpm --version &&
|
||||
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
|
||||
- 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);
|
||||
@@ -176,14 +168,12 @@ jobs:
|
||||
npm i -g pnpm@9.8.0 --force &&
|
||||
pnpm --version &&
|
||||
pnpm install --frozen-lockfile &&
|
||||
rustup target add aarch64-unknown-linux-gnu &&
|
||||
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
|
||||
# Android (not needed)
|
||||
@@ -207,8 +197,6 @@ jobs:
|
||||
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@18
|
||||
runs-on: ${{ matrix.settings.host }}
|
||||
@@ -415,7 +403,6 @@ jobs:
|
||||
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
|
||||
|
||||
+1
-35
@@ -2,6 +2,7 @@ node_modules
|
||||
/.idea
|
||||
/.fleet
|
||||
/.vscode
|
||||
/.cursor
|
||||
dist
|
||||
/build
|
||||
/coverage
|
||||
@@ -65,38 +66,3 @@ target
|
||||
/wasi-sdk*
|
||||
|
||||
vite.config.*.timestamp*
|
||||
|
||||
storybook-static
|
||||
|
||||
# Ignore Gradle project-specific cache directory
|
||||
.gradle
|
||||
.kotlin
|
||||
|
||||
.claude/settings.local.json
|
||||
|
||||
.cursor/rules/nx-rules.mdc
|
||||
.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?
|
||||
# OS specific
|
||||
# Task files
|
||||
tasks.json
|
||||
tasks/
|
||||
|
||||
+4
-1
@@ -1 +1,4 @@
|
||||
pnpm nx prepush --parallel 8 --tuiAutoExit 0
|
||||
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": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
+12
-32
@@ -1,22 +1,18 @@
|
||||
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-v10'
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
SELECTED_PM: 'pnpm'
|
||||
|
||||
NPM_CONFIG_PREFIX: '/home/workflows/.npm-global'
|
||||
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:
|
||||
@@ -41,8 +37,11 @@ launch-templates:
|
||||
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@9.8.0
|
||||
|
||||
- name: Pnpm Install from lockfile
|
||||
- name: Pnpm Install
|
||||
script: |
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
@@ -65,35 +64,20 @@ 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'
|
||||
image: 'ubuntu22.04-node20.11-v10'
|
||||
env:
|
||||
GIT_AUTHOR_EMAIL: test@test.com
|
||||
GIT_AUTHOR_NAME: Test
|
||||
GIT_COMMITTER_EMAIL: test@test.com
|
||||
GIT_COMMITTER_NAME: Test
|
||||
SELECTED_PM: 'pnpm'
|
||||
NPM_CONFIG_PREFIX: '/home/workflows/.npm-global'
|
||||
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:
|
||||
@@ -118,8 +102,11 @@ launch-templates:
|
||||
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@9.8.0
|
||||
|
||||
- name: Pnpm Install from lockfile
|
||||
- name: Pnpm Install
|
||||
script: |
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
@@ -141,10 +128,3 @@ launch-templates:
|
||||
|
||||
- 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,14 +1,6 @@
|
||||
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:
|
||||
|
||||
@@ -13,7 +13,6 @@ 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
|
||||
@@ -51,6 +50,3 @@ CODEOWNERS
|
||||
/.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
|
||||
|
||||
@@ -5,7 +5,7 @@ auth:
|
||||
htpasswd:
|
||||
file: ./htpasswd
|
||||
|
||||
max_body_size: 20mb
|
||||
max_body_size: 15mb
|
||||
|
||||
# a list of other known repositories we can talk to
|
||||
uplinks:
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
When responding to queries about this repository:
|
||||
|
||||
1. Use the `nx_workspace` mcp tool for understanding the workspace architecture when appropriate
|
||||
2. Suggest relevant commands from the "Essential Commands" section when applicable
|
||||
3. Highlight Nx's focus on monorepos and its key features like smart task execution, code generation, and project graph analysis
|
||||
4. Mention the plugin ecosystem and support for various frameworks when relevant
|
||||
5. 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.
|
||||
|
||||
### 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`)
|
||||
- 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
-6
@@ -6,7 +6,7 @@
|
||||
/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
|
||||
@@ -191,11 +191,6 @@ rust-toolchain.toml @nrwl/nx-native-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
|
||||
|
||||
+3
-65
@@ -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`).
|
||||
@@ -385,57 +374,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
+127
-716
File diff suppressed because it is too large
Load Diff
@@ -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,9 +19,9 @@
|
||||
|
||||
<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.
|
||||
Build system, optimized for monorepos, with AI-powered architectural awareness and advanced CI capabilities.
|
||||
|
||||
Create a new Nx workspace with
|
||||
|
||||
@@ -58,7 +58,7 @@ Learn more in the [Nx CI docs »](https://nx.dev/ci/intro?utm_source=nxrepo
|
||||
- [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>
|
||||
width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
|
||||
|
||||
## Want to help?
|
||||
|
||||
|
||||
@@ -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" },
|
||||
]
|
||||
@@ -464,11 +464,6 @@
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"name": "@ziacik/azure-func",
|
||||
"description": "Generating, serving and publishing Azure Functions 4 apps.",
|
||||
@@ -499,11 +494,6 @@
|
||||
"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.",
|
||||
@@ -523,15 +513,5 @@
|
||||
"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"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -299,14 +299,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`
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2021-06-15/jFVfKEglfQIM9QsP.png'
|
||||
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."
|
||||
---
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
title: 'Step by Step Guide on Creating a Monorepo for React Native Apps using Nx'
|
||||
slug: 'step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2021-10-14/92uzyqB8oJ8tZJB9wAdoWQ.avif'
|
||||
cover_image: '/blog/images/2021-10-14/92uzyqB8oJ8tZJB9wAdoWQ.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn how to set up a monorepo with Nx to manage React Native mobile and React web apps with shared libraries, demonstrated through a daily horoscope app example.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2021-12-17/PIUl1QGk7mOpSFdEwFQ8OA.png'
|
||||
tags: [nx]
|
||||
description: Learn how to organize growing Nx repositories using module boundaries and ESLint rules to enforce clean architecture and prevent unwanted dependencies between domains.
|
||||
---
|
||||
@@ -54,7 +54,7 @@ The `allow` array acts as a whitelist listing the import definitions that should
|
||||
|
||||
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.
|
||||
> Note, the wildcard only applies to libraries. Applications and E2E applications cannot be imported. It wouldn't make any sense. If you want to combine applications, you should use the [micro-frontends](/recipes/angular/dynamic-module-federation-with-angular) approach with the module federation.
|
||||
|
||||
The circular dependency chains such as `lib A -> lib B -> lib C -> lib A` are also not allowed. The self circular dependency (when lib imports from a named alias of itself), while not recommended, can be overridden by setting the flag `allowCircularSelfDependency` to true.
|
||||
|
||||
|
||||
+2
-2
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2021-12-23/4u3Fw49H5U-sqgyBoGsqw.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 13.4 brings single file monorepo configuration, custom workspace presets, enhanced Tailwind support for Angular, and dedicated TypeScript/JavaScript support with @nrwl/js.
|
||||
---
|
||||
@@ -65,7 +65,7 @@ Tailwind is a utility-first CSS framework packed with classes that can be compos
|
||||
nx g @nrwl/angular:app my-app --addTailwind
|
||||
```
|
||||
|
||||
Read more about Angular and Tailwind in our [docs](/technologies/angular/api/generators/setup-tailwind).
|
||||
Read more about Angular and Tailwind in our [docs](/nx-api/angular/generators/setup-tailwind).
|
||||
|
||||
### Other Highlights 🗒
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-01-25/PIUl1QGk7mOpSFdEwFQ8OA.png'
|
||||
tags: [nx]
|
||||
description: Nx 13.5 brings a new dynamic terminal output, 2.3x faster operations, Chrome DevTools profiling support, and improved project graph visualization.
|
||||
---
|
||||
@@ -55,7 +55,7 @@ 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).
|
||||
You can find all the details on the [Nx docs](/recipes/react/react-native).
|
||||
|
||||
Thanks [Emily Xiong](https://twitter.com/xiongemily) for implementing this!
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Set up Tailwind CSS with Angular in an Nx workspace'
|
||||
slug: 'set-up-tailwind-css-with-angular-in-an-nx-workspace'
|
||||
authors: ['Leosvel Pérez Espinosa']
|
||||
cover_image: '/blog/images/2022-01-28/igoocYqr8gj8n9t8qr5cuA.avif'
|
||||
cover_image: '/blog/images/2022-01-28/igoocYqr8gj8n9t8qr5cuA.png'
|
||||
tags: [nx]
|
||||
description: Learn how to integrate Tailwind CSS with Angular in an Nx monorepo, including setup, configuration, and best practices for applications and libraries.
|
||||
---
|
||||
@@ -317,7 +317,7 @@ At this point, if we serve again the application, everything should still be wor
|
||||
|
||||
Similar to the previous section we are going to start by creating a new library to add the card component to. The only difference is that this library is going to be buildable.
|
||||
|
||||
> If you are not aware of what buildable libraries are or what problem do they intend to solve, please make sure to read [/technologies/angular/recipes/setup-incremental-builds-angular](/technologies/angular/recipes/setup-incremental-builds-angular).
|
||||
> If you are not aware of what buildable libraries are or what problem do they intend to solve, please make sure to read [/ci/incremental-builds](/recipes/angular/setup-incremental-builds-angular).
|
||||
|
||||
Run the following command to generate the library:
|
||||
|
||||
@@ -420,7 +420,7 @@ And finally, replace the existing markup for the cards in the `apps/app1/src/app
|
||||
|
||||
With that in place, we can serve the application and it should be working exactly as before, but our application is still not fully set up to consume the library build output. As it stands right now, when the application that's consuming it is built, the library will be built together with it and its files will be processed as part of the application build pipeline.
|
||||
|
||||
To finish the buildable library setup, we can follow the instructions in [/technologies/angular/recipes/setup-incremental-builds-angular](/technologies/angular/recipes/setup-incremental-builds-angular). We need to install the `@nrwl/web` package, change the application `build` target executor to `@nrwl/angular:webpack-browser`, and change the application `serve` target executor to `@nrwl/web:file-server`:
|
||||
To finish the buildable library setup, we can follow the instructions in [/recipes/angular/setup-incremental-builds-angular](/recipes/angular/setup-incremental-builds-angular). We need to install the `@nrwl/web` package, change the application `build` target executor to `@nrwl/angular:webpack-browser`, and change the application `serve` target executor to `@nrwl/web:file-server`:
|
||||
|
||||
```shell
|
||||
yarn add -D @nrwl/web@latest
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-02-01/lL-fGNaIGYBC_eOBwSvdBw.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn how to create and manage React web and React Native mobile apps in an Nx monorepo, with guidance on sharing code and handling platform differences.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Introducing Expo Support for Nx'
|
||||
slug: 'introducing-expo-support-for-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2022-03-23/yYc8g4ifk9RApSjAhQysag.avif'
|
||||
cover_image: '/blog/images/2022-03-23/yYc8g4ifk9RApSjAhQysag.png'
|
||||
tags: [nx, release]
|
||||
description: Introducing @nrwl/expo for seamless Expo integration in Nx monorepos, with a tutorial on building a poetry app using Expo's development tools.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-03-29/YR6QUEZel3nlNcTo6Pdlwg.png'
|
||||
tags: [nx]
|
||||
description: Discover Nx as a powerful CLI for React development with built-in project generation, build tools, and pre-configured integrations for modern tooling.
|
||||
---
|
||||
@@ -129,7 +129,7 @@ Many of these generators come with a rich set of flags. For example, passing `--
|
||||
|
||||
**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: [/nx-api/react](/technologies/react/api).
|
||||
- **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: [/nx-api/react](/nx-api/react).
|
||||
- `npx nx list` - lists a set of installed plugins as well as other available plugins that can be installed. To get a list of generators for a specific plugin - say for the `@nrwl/react` plugin - run `npx nx list @nrwl/react`. Similarly, you can then run `npx nx g @nrwl/react:lib --help` to get help for a particular generator
|
||||
|
||||
However, the absolute easiest way to explore the potential and even use Nx if you are not the "terminal type of person" is [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)! I'll go a bit deeper into that in a later section.
|
||||
@@ -152,7 +152,7 @@ Let's have a closer look.
|
||||
|
||||
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).
|
||||
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](/recipes/tips-n-tricks/js-and-ts).
|
||||
|
||||
## ESLint preconfigured!
|
||||
|
||||
@@ -273,7 +273,7 @@ One of the advantages of using Nx over — say CRA or a custom starter template
|
||||
|
||||
Just to mention an example: when upgrading Nx to v13, all Nx users automatically got migrated to Webpack 5.
|
||||
|
||||
This is possible with Nx's [migrate command](/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
|
||||
This is possible with Nx's [migrate command](/nx-api/nx/documents/migrate) that allows you to keep up to date with your framework in a mostly automated fashion. Whenever you upgrade Nx, you run
|
||||
|
||||
```shell
|
||||
npx nx migrate latest
|
||||
@@ -346,7 +346,7 @@ Here's the `project.json` for our `happynrwl` React application. I clipped out t
|
||||
}
|
||||
```
|
||||
|
||||
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).
|
||||
As you can see, all these "targets" (`build`, `serve`,...) have a so-called `options` property that allows you to configure how the target behaves. The actual configuration is abstracted behind the "[Nx Executor](/concepts/executors-and-configurations)", in our case `@nrwl/web:webpack`. You can find the details of how to configure that on the Nx docs in the CLI reference for the `@nrwl/web` package: [/nx-api/webpack/executors/webpack](/nx-api/webpack/executors/webpack).
|
||||
|
||||
To read more about how the `project.json`, its executors, and configuration options are structured, check out the official docs: [/reference/project-configuration](/reference/project-configuration).
|
||||
|
||||
@@ -356,8 +356,8 @@ Nx's extensibility and customizability have really no limits, allowing it to rea
|
||||
|
||||
- [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)
|
||||
- [Create Nx plugins](/nx-api/plugin)
|
||||
- Control the entire workspace setup with [custom presets](/nx-api/plugin)
|
||||
|
||||
## Q: Can I customize my Webpack config used to build my React app?
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-04-08/PJ3SRAadq0DxGiC9mCIWsA.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 13.10 brings core package consolidation, Nx Daemon by default, local plugin development, enhanced visualization, new lint rules, and React 18 support.
|
||||
---
|
||||
@@ -36,7 +36,7 @@ Nx can be used in a wide range of scenarios, from small open source projects, st
|
||||
- `@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/api) 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.
|
||||
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](/nx-api/js) 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.
|
||||
|
||||

|
||||
|
||||
@@ -206,7 +206,7 @@ If however you're curious, you can now append `--allPrompts` to get all possible
|
||||
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.
|
||||
Alternatively you can browse the [API docs on the Nx website](/nx-api/nx/documents/create-nx-workspace) to find out more.
|
||||
|
||||
## Deliver the best possible TypeScript experience with `@nrwl/js`
|
||||
|
||||
@@ -242,7 +242,7 @@ Learn more in this short video walkthrough:
|
||||
|
||||
## Our docs keep getting more and more awesome
|
||||
|
||||
Besides delivering awesome features, we keep improving our docs. They are essential to help discover new features and better understand existing ones. In the last weeks we've improved the navigation support, allowing you to navigate to a specific package with `/packages/<package-name>` such as [/nx-api/react](/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.
|
||||
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 [/nx-api/react](/nx-api/react) listing executors and generators that come with that Nx package, also improving the API docs of the individual executor options including a live embedded editor playground to experiment with different configuration setup.
|
||||
|
||||
Check out Benjamin Cabanes' tweet with some short videos:
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-04-25/64nWVfUBihlYTLGWOvnc1g.png'
|
||||
tags: [nx, release]
|
||||
description: Learn how to integrate and configure Storybook with Nx React Native apps, including solutions for common navigation and Redux store integration issues.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-05-02/UAN1p_RMt38_IvB3CRpYTA.png'
|
||||
tags: [nx, release]
|
||||
description: Nx v14 delivers enhanced performance, simplified core structure, improved terminal output, local plugins, automated CI, module federation, and React 18 support.
|
||||
---
|
||||
@@ -74,7 +74,7 @@ Also see this example repository with some more information: [https://github.com
|
||||
|
||||
## 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/api), [Angular](/technologies/angular/api), [React](/technologies/react/api) & [React Native](/technologies/react/react-native/api), [Next.js](/technologies/react/next/api), [Nest.js](/technologies/node/nest/api), [Node](/technologies/node/api) 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.
|
||||
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](/nx-api/js), [Angular](/nx-api/angular), [React](/nx-api/react) & [React Native](/nx-api/react-native), [Next.js](/nx-api/next), [Nest.js](/nx-api/nest), [Node](/nx-api/node) 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.
|
||||
|
||||
@@ -197,14 +197,14 @@ This can be a game-changer when building huge apps. Stay tuned for more content
|
||||
|
||||
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)
|
||||
Read more in our docs: [/concepts/module-federation/faster-builds-with-module-federation](/concepts/module-federation/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)
|
||||
Read more in our docs: [/concepts/module-federation/micro-frontend-architecture](/concepts/module-federation/micro-frontend-architecture)
|
||||
|
||||
## Dark mode for Project Graph as well as path tracking
|
||||
|
||||
@@ -250,7 +250,7 @@ Nx v14 ships with React 18 support for React DOM and React Native. The latter ha
|
||||
|
||||
In addition to that, Expo and Expo Application Service support has been added which has lead already to some drastic speed improvements with some of our clients.
|
||||
|
||||
Finally, it is the first version which ships the built-in module federation support for React as we've mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/nx-api/react](/technologies/react/api)
|
||||
Finally, it is the first version which ships the built-in module federation support for React as we've mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/nx-api/react](/nx-api/react)
|
||||
|
||||
## Angular
|
||||
|
||||
@@ -258,7 +258,7 @@ There have been a lot of highlights for the Nx Angular plugin since v13. Here ar
|
||||
|
||||
- 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))
|
||||
- Single Component Application Modules (SCAM) generators for components, directives and pipes ([see our docs](/nx-api/angular))
|
||||
- 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.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-05-11/gtsrJ-tMDZf9bvDLVSjQ.png'
|
||||
tags: [nx]
|
||||
description: Nrwl takes over Lerna.js stewardship, promising continued maintenance, critical updates, and future Nx integration while supporting the existing community.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-05-25/WPGHapKqT3IguWjeN5UgWg.png'
|
||||
tags: [nx]
|
||||
description: Lerna v5.1 introduces the useNx flag for dramatic performance gains, making it 5.3x faster than Turborepo with added caching and task execution features.
|
||||
---
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-06-09/uScdSDGP4NgCKFrPdznbhw.png'
|
||||
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.
|
||||
---
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-07-05/lpmHhIiE9v5yJI6nLi2dlw.png'
|
||||
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.'
|
||||
---
|
||||
|
||||
+1
-10
@@ -2,22 +2,13 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-07-14/ABrBjQPg4SrYzFQQXFxY-Q.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn to set up a monorepo with PNPM workspaces for Remix and React projects, then enhance it with Nx's task scheduling and caching features.
|
||||
---
|
||||
|
||||
In this article we're going to have a deep dive into setting up a new monorepo using [PNPM workspaces](https://pnpm.io/workspaces) that hosts a Remix application as well as a React-based library. We will learn how to run commands with PNPM, how to run them in parallel and finally we're going to add Nx for a more sophisticated task scheduling, including command caching and more.
|
||||
|
||||
{% 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?**
|
||||
|
||||
+2
-2
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-08-02/ZUzLD-4JgrEBIZb3dXOvag.png'
|
||||
tags: [nx, release]
|
||||
description: 'Nx 14.5 adds Cypress v10 with component testing, glob-based outputs for better caching, and improved React Tailwind integration.'
|
||||
---
|
||||
@@ -37,7 +37,7 @@ You can also append the `--generate-tests` to automatically generate Cypress com
|
||||
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.
|
||||
Check out our [generator docs](/nx-api/react/generators/cypress-component-configuration) for more info.
|
||||
|
||||
{% youtube src="https://youtu.be/QDWN4C7T-Ck" /%}
|
||||
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-08-18/FBQVoC9YXF7wlq3dhxfQMQ.png'
|
||||
tags: [nx]
|
||||
description: "Discover how Nx's caching and computation-saving features have saved over 200 years of compute time, reducing CO2 emissions through efficient task execution."
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-10-12/RGQCNNO-SSQ8PHnIZ4BVTQ.png'
|
||||
tags: [nx, release]
|
||||
description: Lerna v6 brings default Nx integration, remote caching, PNPM support, dynamic terminal output, and improved task management to speed up your monorepo builds.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-10-14/ReZPz_brTiYN84yvR7Hi2w.png'
|
||||
tags: [nx, release]
|
||||
description: 'Explore the major features and improvements introduced in Nx version 15, including enhanced performance and developer experience.'
|
||||
---
|
||||
@@ -215,7 +215,7 @@ Cypress v10 also comes with [Component Testing](https://docs.cypress.io/guides/c
|
||||
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)
|
||||
Read more here: [/recipes/cypress/cypress-component-testing](/recipes/cypress/cypress-component-testing)
|
||||
|
||||
## Angular: Improved Angular CLI Migrations and Standalone Components
|
||||
|
||||
@@ -223,7 +223,7 @@ We landed generators to support Angular developers in leveraging the new standal
|
||||
|
||||
{% 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)
|
||||
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: [/recipes/angular/migration/angular](/recipes/angular/migration/angular)
|
||||
|
||||
## Easily add Nx to an existing repository
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-11-17/a3eT-mjLsXTiHU5m.png'
|
||||
tags: [nx]
|
||||
description: Nx raises $8.6M seed round led by Nexus Venture Partners and A16z to scale open source Nx, Nx Cloud, and Nx Enterprise, powering 75% of JavaScript monorepo tooling.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-12-06/VXYjjWhOUpNuHFGCoF63OQ.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 15.3 introduces standalone projects, Vite and Vitest tooling, enhanced task graph visualization, and simplified project adoption, now reaching 3M weekly downloads.
|
||||
---
|
||||
@@ -198,9 +198,9 @@ If you are currently using the NxExt based Vite plugin, or even a Webpack based
|
||||
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)
|
||||
This will adjust the NxExt Vite plugin configuration to match the one provided by our core team. Check out our docs for more info: [/nx-api/vite/generators/configuration](/nx-api/vite/generators/configuration)
|
||||
|
||||
You can also find all the details about the new Vite package in our docs: [/technologies/build-tools/vite](/technologies/build-tools/vite/api)
|
||||
You can also find all the details about the new Vite package in our docs: [/nx-api/vite](/nx-api/vite)
|
||||
|
||||
## Adopting Nx has never been easier
|
||||
|
||||
@@ -227,7 +227,7 @@ 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)
|
||||
- [migrating your Angular CLI app to Nx](/recipes/angular/migration/angular)
|
||||
|
||||
Oh..you're wondering why you would want to add Nx to an existing non-monorepo project? Then keep reading 👇
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2022-12-22/N4_XxtYFr-V2cF6fPoBO3g.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 15.4 adds Vite 4.0 support, new Watch command for file watching, webpack-less Cypress support, SSR for Module Federation, and parallel target execution improvements.
|
||||
---
|
||||
@@ -30,17 +30,17 @@ Nx 15.4 brings in the latest Vite major version following the Vite 4 release ear
|
||||
|
||||
As the [Vite launch article](https://vitejs.dev/blog/announcing-vite4.html) mentions, we are investing in the Vite ecosystem, and now officially support a first-party Vite plugin. Nx 15.4 continues this investment with timely support for Vite 4, and we're excited to be a part of the Vite ecosystem and a part of bringing more value to our devs through Vite support!
|
||||
|
||||
Projects already using our [@nrwl/vite plugin](/technologies/build-tools/vite/api) 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.
|
||||
Projects already using our [@nrwl/vite plugin](/nx-api/vite) will be automatically upgraded to Vite 4 when they upgrade to the latest Nx version with the `nx migrate` command, and we've also simplified the configuration required to support Vite.
|
||||
|
||||
We've also spent some effort into making the conversion of existing projects to use Vite simpler, including:
|
||||
|
||||
- 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)
|
||||
- [better documentation around converting using our generator](/nx-api/vite/generators/configuration)
|
||||
- [adding a guide to our docs for converting manually](/recipes/vite/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](/technologies/build-tools/vite/api)
|
||||
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/nx-api/vite](/nx-api/vite)
|
||||
|
||||
## Nx Watch
|
||||
|
||||
@@ -96,7 +96,7 @@ Our existing `host` and `remote` Module Federation generators have an added `--s
|
||||
|
||||
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)!
|
||||
Learn more about this new feature [in our docs](/recipes/react/module-federation-with-ssr)!
|
||||
|
||||
## Running Multiple Targets in Parallel for Multiple Projects
|
||||
|
||||
|
||||
+3
-3
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-01-10/kyMChnJ-X6jK9sbuaOdOiw.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn how to implement Webpack Module Federation with Server-Side Rendering in Angular applications using Nx for improved performance and micro-frontend architecture.
|
||||
---
|
||||
@@ -13,7 +13,7 @@ This technology has enabled a much cleaner approach to Micro Frontend Architectu
|
||||
|
||||
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)
|
||||
📄 [Module Federation Recipes on Nx](/recipes/module-federation)
|
||||
📺 [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.
|
||||
@@ -56,7 +56,7 @@ Answer with the following:
|
||||
|
||||
When your workspace is created, run `cd myorg`.
|
||||
|
||||
Next, we will need to install the [Official Nx Angular Plugin](/technologies/angular/api):
|
||||
Next, we will need to install the [Official Nx Angular Plugin](/nx-api/angular):
|
||||
|
||||
```
|
||||
npm install @nrwl/angular
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-01-12/ucL7YQ2v8aaOy426soLPZA.png'
|
||||
tags: [nx]
|
||||
description: Learn how to quickly set up a modern React application with Vite and TypeScript using Nx, featuring built-in testing, linting, and development tools.
|
||||
---
|
||||
@@ -200,7 +200,7 @@ This might look weird initially, but basically, we run the `e2e` target (see `e2
|
||||
|
||||
By default, these tests run in headless mode, but you can pass `--watch` to run it interactively with the Cypress test runner such that the tests get re-executed whenever we change our source.
|
||||
|
||||
> _Want Cypress Component testing? There's an Nx generator that can help set that up. Check out the docs:_ [_/nx-api/react/generators/cypress-component-configuration_](/technologies/react/api/generators/cypress-component-configuration)
|
||||
> _Want Cypress Component testing? There's an Nx generator that can help set that up. Check out the docs:_ [_/nx-api/react/generators/cypress-component-configuration_](/nx-api/react/generators/cypress-component-configuration)
|
||||
|
||||
## Linting
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx Console meets Nx Cloud'
|
||||
slug: 'nx-console-meets-nx-cloud'
|
||||
authors: ['Max Kless']
|
||||
cover_image: '/blog/images/2023-01-18/Mkqkadhkk7DydWvPg5L0bA.avif'
|
||||
cover_image: '/blog/images/2023-01-18/Mkqkadhkk7DydWvPg5L0bA.png'
|
||||
tags: [nx]
|
||||
description: Nx Console 17.28.0 integrates Nx Cloud features directly into VSCode, bringing remote caching, distributed task execution, and VCS integration with streamlined setup.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-01-31/T-xiDccBOxMQpDrG.png'
|
||||
tags: [nx]
|
||||
description: A guide to managing configuration files effectively in modern development, exploring Nx's approach to infrastructure code maintenance through generators and migrations.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-02-09/TK4Kdj-cc890gQkgUtKNyA.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn how to quickly set up React with Tailwind CSS using Nx's code generators, including migration from Create React App and automated configuration tools.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-02-16/2AAo-mng7QyJP9yC80zNFQ.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 15.7 introduces first-class Node.js support, detached Angular version support, enhanced lockfile parsing, and Storybook 7.0 beta integration.
|
||||
---
|
||||
@@ -88,7 +88,7 @@ $ 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.
|
||||
Also, have a look at our [updated docs](/recipes/tips-n-tricks/advanced-update) as well as our [Nx and Angular compatibility matrix](/nx-api/angular/documents/angular-nx-version-matrix) for more details.
|
||||
|
||||
## Bootstrapping a new Angular app with Standalone API support
|
||||
|
||||
@@ -135,7 +135,7 @@ Stay tuned for a more in-depth blog post coming soon to [our blog](/blog).
|
||||
|
||||
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. Read more in our [Storybook 7 setup guide](/technologies/test-tools/storybook/recipes/best-practices). If you want to migrate your existing Storybook configuration to Storybook 7.0 beta, please read our [migration guide](/technologies/test-tools/storybook/api/generators/migrate-7).
|
||||
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. Read more in our [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup). If you want to migrate your existing Storybook configuration to Storybook 7.0 beta, please read our [migration guide](/nx-api/storybook/generators/migrate-7).
|
||||
|
||||
## More flexible Webpack config
|
||||
|
||||
@@ -147,11 +147,11 @@ Previously when you created a new React application with the Nx `@nrwl/react` pl
|
||||
|
||||
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/api), 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.
|
||||
Inspired by our new [Vite setup](/nx-api/vite), 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)
|
||||
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: [/recipes/webpack/webpack-config-setup](/recipes/webpack/webpack-config-setup)
|
||||
|
||||
## How to Update Nx
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-02-21/pJHhA04d6jIjOb5vpCDjyw.png'
|
||||
tags: [nx, tutorial]
|
||||
description: A practical guide to integrating NgRx Standalone APIs in Angular applications using Nx, with automated setup for state management.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-02-22/izlWzEYnkZ9myXi58Rmv8A.png'
|
||||
tags: [nx, release]
|
||||
description: Lerna 6.5 introduces idempotent publishing, multi-script execution, private package handling, and codebase improvements, with updates on Nx team maintenance.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-02-28/PADY_RKrkXj39p4nj79ESw.png'
|
||||
tags: [nx, tutorial]
|
||||
description: Build and deploy a Node.js API with Fastify, Nx, esbuild, Docker, and Fly.io.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-03-02/lEAhfd3d17hGichyT-oGbw.png'
|
||||
tags: [nx]
|
||||
description: Explore the technical journey of bringing Nx Console to JetBrains IDEs, featuring Language Server integration and Generate UI implementation for IntelliJ.
|
||||
---
|
||||
@@ -203,7 +203,7 @@ host apps and libraries in any language. With the newly released [**_Encapsulate
|
||||
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.
|
||||
[`nx:run-commands`](/nx-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
|
||||
|
||||
+4
-4
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-03-08/2gKrC6_Yx3hVkQaHxnw5xw.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 15.8 brings Rust-based hasher, IntelliJ IDE support, Deno integration, enhanced Node.js features, and Storybook CSF3 support for improved performance.
|
||||
---
|
||||
@@ -137,7 +137,7 @@ Read all the details [on our blog post](/blog/expanding-nx-console-to-jetbrains-
|
||||
|
||||
{% 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.
|
||||
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](/nx-api/react/generators/library), but it is just less convenient.
|
||||
|
||||

|
||||
|
||||
@@ -164,7 +164,7 @@ Read all about it [in the doc about Customizing Generator Options](/extending-nx
|
||||
|
||||
## Modular Node Applications
|
||||
|
||||
Nx has had Node backend support since the beginning, where you could add an [ExpressJS](/technologies/node/express/api) or [Nest.js](/technologies/node/nest/api) 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!!
|
||||
Nx has had Node backend support since the beginning, where you could add an [ExpressJS](/nx-api/express) or [Nest.js](/nx-api/nest) 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).
|
||||
|
||||
@@ -180,7 +180,7 @@ Check out the following video walkthrough on using these features for modularizi
|
||||
|
||||
## 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.
|
||||
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](/recipes/storybook/overview-angular) or [Storybook and React](/recipes/storybook/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._
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-03-10/fWQ53mw2itEs3SGAOJVonQ.png'
|
||||
tags: [nx]
|
||||
description: Explore Nx's integration with Rspack, the Rust-based Webpack alternative that offers 5-10x faster compilation for React apps in your monorepo.
|
||||
---
|
||||
@@ -70,11 +70,11 @@ This creates a new application in your Nx monorepo that uses Rspack as the bundl
|
||||
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/api)
|
||||
- learn about the Nx Rspack plugin: [/nx-api/rspack](/nx-api/rspack)
|
||||
|
||||
## Learn more
|
||||
|
||||
- 🦀 [Rspack and Nx docs](/technologies/build-tools/rspack/api)
|
||||
- 🦀 [Rspack and Nx docs](/nx-api/rspack)
|
||||
- 🧠 [Nx Docs](/getting-started/intro)
|
||||
- 👩💻 [Nx GitHub](https://github.com/nrwl/nx)
|
||||
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx 16 is Here!'
|
||||
slug: 'nx-16-is-here'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-05-02/n8JTIcKSYkebBOl8zZuF9w.avif'
|
||||
cover_image: '/blog/images/2023-05-02/n8JTIcKSYkebBOl8zZuF9w.png'
|
||||
youtubeUrl: 'https://youtu.be/JIhOyJtuxEA'
|
||||
tags: [nx, release]
|
||||
description: Nx 16 brings package rescoping, enhanced Deno support, Cypress testing improvements, task graph visualization, and PNPM migration for better performance.
|
||||
@@ -13,7 +13,7 @@ We're proud to announce the release of Nx version 16! In this article, we'll go
|
||||
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/api) and Vitest for integrated Nx monorepos
|
||||
- We added official support for [Vite](/nx-api/vite) 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)
|
||||
@@ -81,8 +81,8 @@ Nx has had support for developing Node-based backends for a while. It was a popu
|
||||
|
||||
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)
|
||||
- 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: [/recipes/node/node-serverless-functions-netlify](/recipes/node/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: [/recipes/node/node-aws-lambda](/recipes/node/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
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-05-16/cVGLh0H-uOpy7-D6.png'
|
||||
tags: [nx]
|
||||
description: Introducing the Nx Champions program, recognizing and supporting community leaders in Nx expertise, content creation, and community bridging.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-05-26/G2ynKDm6DIKLcZ2fJlV0dw.png'
|
||||
tags: [nx, tutorial]
|
||||
description: A guide to user location detection using Nx and Netlify Edge Functions, with serverless function setup, IP geolocation integration, and deployment for region-aware web apps.
|
||||
---
|
||||
@@ -102,7 +102,7 @@ By following these steps, you've successfully used `@nx/netlify` serverless func
|
||||
### Wrapping up
|
||||
|
||||
Never used Nx before? Learn more about Nx [here](/getting-started/why-nx).
|
||||
[Official recipe from Nx](/technologies/node/recipes/node-serverless-functions-netlify)
|
||||
[Official recipe from Nx](/recipes/node/node-serverless-functions-netlify)
|
||||
[Github example](https://github.com/ndcunningham/nx-netlify-serverless)
|
||||
|
||||
### Learn more
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Introducing Nx Ecosystem CI'
|
||||
slug: 'introducing-nx-ecosystem-ci'
|
||||
authors: ['Katerina Skroumpelou']
|
||||
cover_image: '/blog/images/2023-06-20/EffyLKcVe5gE_x3MT8PJUQ.avif'
|
||||
cover_image: '/blog/images/2023-06-20/EffyLKcVe5gE_x3MT8PJUQ.png'
|
||||
tags: [nx]
|
||||
description: Introducing Nx Ecosystem CI, a Vite-inspired automated testing framework for Nx ecosystem compatibility, pre-release testing, migration checks, and test suite management.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Nx Console gets Lit
|
||||
slug: 'nx-console-gets-lit'
|
||||
authors: [Max Kless]
|
||||
cover_image: '/blog/images/2023-06-29/featured_img.avif'
|
||||
cover_image: '/blog/images/2023-06-29/featured_img.webp'
|
||||
tags: [nx, nx-console]
|
||||
description: Nx Console's Generate UI rebuilt with Lit for a faster, more maintainable experience across VSCode and JetBrains IDEs.
|
||||
---
|
||||
@@ -274,7 +274,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/api) 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
|
||||
|
||||
@@ -610,7 +610,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/api) 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
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx 16.5 Release!!!'
|
||||
slug: 'nx-16-5-release'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-07-06/Gm3s_wLWrAf_uH2AzfJvvQ.avif'
|
||||
cover_image: '/blog/images/2023-07-06/Gm3s_wLWrAf_uH2AzfJvvQ.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 16.5 released with tag-based task targeting, NextJS 13 support, new recipes, Angular 16 compatibility, Verdaccio integration, custom CLI, external dependencies input, ESLint rule, and Rust integration for performance.
|
||||
---
|
||||
@@ -19,13 +19,13 @@ Be sure to mark your calendars for our Nx 16.5 livestream as well! We'll highlig
|
||||
|
||||
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.
|
||||
With this new feature, you can add the `--tag` option to the [`nx affected`](/nx-api/nx/documents/affected) and [`nx run-many`](/nx-api/nx/documents/run-many) commands to specify to Nx to only run commands for projects that match the given tags.
|
||||
|
||||
{% 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.
|
||||
React Server Components and the new NextJS app router are here, and Nx is here to support them. We've added support for the latest versions of Next — complete with generators and executors. We've also made sure that our [`withNx` NextJS plugin](/recipes/next/next-config-setup), which allows you to import from your other projects in your workspace while still working with the NextJS build scripts, works both for workspaces using our executors in an Integrated Monorepo approach, as well as for those using a Package-Based approach that are simply using the `next dev` command directly to start their dev server.
|
||||
|
||||
There's also built-in support for the new turbopack builder option via the `--turbo` command, for example: `nx serve webapp --turbo`
|
||||
|
||||
@@ -60,7 +60,7 @@ Angular is continuing their pattern of releasing new and exciting features — a
|
||||
|
||||
As usual, we provide migrations to the most recent Angular version to cover your codebase for any breaking changes going to Angular 16.
|
||||
|
||||
And in case you missed it, Nx is no longer tied to your Angular version — the most recent version of Nx will now always [support all currently LTS versions of Angular](/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).
|
||||
And in case you missed it, Nx is no longer tied to your Angular version — the most recent version of Nx will now always [support all currently LTS versions of Angular](/nx-api/angular/documents/angular-nx-version-matrix), meaning you DON'T have to upgrade your Angular version in order to get all these latest Nx Features. Be sure to use the `--interactive` flag to take advantage of this feature: `nx migrate latest --interactive`. You can find more details in [our docs for choosing optional packages to apply](/recipes/tips-n-tricks/advanced-update).
|
||||
|
||||
{% youtube src="https://youtu.be/AQV4WFldwlY" /%}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-07-26/CPiI60mSguYXJzPfAHMbEQ.png'
|
||||
tags: [nx]
|
||||
description: Nx's evergreen tooling approach automates migrations, updates code like a database, and uses plugins for seamless JavaScript ecosystem upgrades with backward compatibility and reduced maintenance.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Storybook Interaction Tests in Nx'
|
||||
slug: 'storybook-interaction-tests-in-nx'
|
||||
authors: ['Katerina Skroumpelou']
|
||||
cover_image: '/blog/images/2023-08-03/NfJA7VBZvDwyyZHmV8qsiw.avif'
|
||||
cover_image: '/blog/images/2023-08-03/NfJA7VBZvDwyyZHmV8qsiw.png'
|
||||
tags: [nx]
|
||||
description: Nx 16.6 introduces Storybook interaction tests, offering automated UI testing, Jest and Playwright integration, and a streamlined workflow.
|
||||
---
|
||||
@@ -25,7 +25,7 @@ You write a story to set up the component's initial state, simulate user behavio
|
||||
|
||||
## 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).
|
||||
You can read our detailed guide on how to set up Storybook interaction tests on Nx, here: [/recipes/storybook/storybook-interaction-tests](/recipes/storybook/storybook-interaction-tests).
|
||||
|
||||
## Writing Interaction Tests in Storybook
|
||||
|
||||
@@ -63,7 +63,7 @@ Moreover, since Storybook isolates each component, you can ensure that the tests
|
||||
## 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)
|
||||
- [/recipes/storybook/storybook-interaction-tests](/recipes/storybook/storybook-interaction-tests)
|
||||
|
||||
## Learn more
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-08-10/j2QU-hjxt-1krFST8CGFiA.png'
|
||||
tags: [nx]
|
||||
description: Build a custom create-react-app CLI with Nx plugins, including workspace setup, Verdaccio testing, and project template customization for a branded React app scaffolding experience.
|
||||
---
|
||||
@@ -188,7 +188,7 @@ The preset generator does 2 things:
|
||||

|
||||
_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).
|
||||
The `addProjectConfiguration` and `generateFiles` functions are from [@nx/devkit](/nx-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](/nx-api/devkit/documents/nx_devkit).
|
||||
|
||||
1. Change the project which is created with `addProjectConfiguration`:
|
||||
|
||||
@@ -311,7 +311,7 @@ And finally, another file to host the actual HTML template: `src/generators/pres
|
||||
</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`:
|
||||
3\. Our application uses some npm dependencies so add those to the workspace as well with the [addDependenciesToPackageJson](/nx-api/devkit/documents/nx_devkit) function to the end of the export default function in `src/generators/preset/generator.ts`:
|
||||
|
||||
```
|
||||
import {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-08-24/IpM0kZdUNXoDWV4r8J5xXQ.png'
|
||||
tags: [nx, tutorial]
|
||||
description: A comprehensive tutorial on building a multi-app Expo monorepo using Nx, featuring shared UI components, navigation setup, and deployment configurations, demonstrated through the creation of two mobile apps.
|
||||
---
|
||||
@@ -294,7 +294,7 @@ If you want to create a build locally using your own infrastructure:
|
||||
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).
|
||||
Here is the complete list of flags for the build command: [/nx-api/expo/executors/build](/nx-api/expo/executors/build).
|
||||
|
||||
## Submit to the App Store
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx 16.8 Release!!!'
|
||||
slug: 'nx-16-8-release'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2023-09-06/16gTRcKon8B4IKYQAY9V8w.avif'
|
||||
cover_image: '/blog/images/2023-09-06/16gTRcKon8B4IKYQAY9V8w.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 16.8 released with new project generator behavior, enhanced TypeScript library packaging, high-performance TypeScript compilation, Playwright support, Netlify integration, and interactive Nx Console features.
|
||||
---
|
||||
@@ -282,7 +282,7 @@ Towards the start of the year, we added support for Nx standalone applications.
|
||||
|
||||
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!
|
||||
This is where our new [`convert-to-monorepo` generator](/nx-api/workspace/generators/convert-to-monorepo) comes into play!
|
||||
|
||||
```shell
|
||||
nx g convert-to-monorepo
|
||||
@@ -332,7 +332,7 @@ You can find all of the examples and more on our "Showcase" section: [/showcase]
|
||||
|
||||
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:
|
||||
As part of our continued support for ESLint, we've introduced [a new generator](/nx-api/eslint/generators/convert-to-flat-config) to convert your Nx monorepo to this new system:
|
||||
|
||||
```
|
||||
> nx g convert-to-flat-config
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Introducing Playwright Support for Nx'
|
||||
slug: 'introducing-playwright-support-for-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2023-09-18/589bVpPTJ4D4IACBePXWQ.avif'
|
||||
cover_image: '/blog/images/2023-09-18/589bVpPTJ4D4IACBePXWQ.png'
|
||||
tags: [nx, release, tutorial]
|
||||
description: 'Discover how to integrate Playwright, a powerful end-to-end testing tool, into your Nx workspaces with our new @nx/playwright plugin.'
|
||||
---
|
||||
@@ -300,7 +300,7 @@ In this blog, we have:
|
||||
- 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/api).
|
||||
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: [/nx-api/playwright](/nx-api/playwright).
|
||||
|
||||
## Learn more
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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.'
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx 17 has Landed'
|
||||
slug: 'nx-17-release'
|
||||
authors: ['Juri Strumpflohner', 'Zack DeRose']
|
||||
cover_image: '/blog/images/2023-10-20/featured_img.avif'
|
||||
cover_image: '/blog/images/2023-10-20/featured_img.png'
|
||||
tags: [nx, release]
|
||||
description: Nx 17 released with Vue.js support, Module Federation enhancements, generator path improvements, AI chatbot integration, and more.
|
||||
---
|
||||
@@ -226,7 +226,7 @@ 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](/blog/nx-conf-2023-recap):
|
||||
|
||||
{% youtube src="https://www.youtube.com/embed/p5qW5-2nKqI?si=FzpGMJwPVINc1hgL" /%}
|
||||
|
||||
@@ -234,7 +234,7 @@ For more [checkout our API docs](/reference/core-api/nx/documents/release), and
|
||||
|
||||
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/api).
|
||||
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](/nx-api/vue).
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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'
|
||||
cover_image: '/blog/images/2023-11-08/featured_img.webp'
|
||||
tags: [nx, React Native]
|
||||
description: Implementing state management in Nx React Native/Expo apps with TanStack Query and Redux, covering setup, dev tools, and unit testing.
|
||||
---
|
||||
@@ -706,8 +706,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](/technologies/react/expo/api)
|
||||
- Official @nx/react-native plugin: [/technologies/react/react-native](/technologies/react/react-native/api)
|
||||
- Official @nx/expo plugin: [/nx-api/expo](/nx-api/expo)
|
||||
- Official @nx/react-native plugin: [/nx-api/react-native](/nx-api/react-native)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
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.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Unit Testing Expo Apps With Jest
|
||||
slug: 'unit-testing-expo-apps-with-jest'
|
||||
authors: [Emily Xiong]
|
||||
cover_image: '/blog/images/2023-11-22/featured_img.avif'
|
||||
cover_image: '/blog/images/2023-11-22/featured_img.webp'
|
||||
tags: [nx, tutorial]
|
||||
description: Learn how to unit test Expo apps using Jest and React Native Testing Library, with solutions for mocking AsyncStorage, Redux, and React Navigation.
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Nx 17.2 Update
|
||||
slug: 'nx-17-2-release'
|
||||
authors: [Zack DeRose]
|
||||
cover_image: '/blog/images/2023-12-20/featured_img.avif'
|
||||
cover_image: '/blog/images/2023-12-20/featured_img.png'
|
||||
tags: [nx, changelog, release]
|
||||
description: Nx 17.2 released with simplified project configuration, Rust-powered task hashing, enhanced Module Federation, expanded releases, Angular 17 support, and Nx Agents for faster CI.
|
||||
---
|
||||
@@ -15,7 +15,7 @@ It's been a bit since we launched [Nx 17](/blog/nx-17-release)! In this article,
|
||||
- [Module Federation Updates](#module-federation-updates)
|
||||
- [Nx Release Updates](#nx-release-updates)
|
||||
- [Angular 17 (AND NgRx 17) Support](#angular-17-and-ngrx-17-support)
|
||||
- [Smart Repos — Fast Builds](#smart-repos-fast-builds)
|
||||
- [Smart Monorepos — Fast CI](#smart-monorepos-fast-ci)
|
||||
- [New Canary Releases](#new-canary-releases)
|
||||
- [Upcoming Release Livestream](#upcoming-release-livestream)
|
||||
- [Automatically Update Nx](#automatically-update-nx)
|
||||
@@ -139,7 +139,7 @@ nx migrate latest --interactive
|
||||
- Run 'nx migrate --run-migrations'
|
||||
```
|
||||
|
||||
## Smart Repos — Fast Builds
|
||||
## Smart Monorepos — Fast CI
|
||||
|
||||
We just gave our Nx homepage a small facelift, including a new tagline, subtagline and illustration to better reflect Nx's mission statement.
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Nx — Highlights of 2023
|
||||
slug: 'nx-highlights-of-2023'
|
||||
authors: [Juri Strumpflohner, Victor Savkin, Zack DeRose]
|
||||
cover_image: /blog/images/2023-12-28/featured_img.avif
|
||||
cover_image: /blog/images/2023-12-28/featured_img.png
|
||||
tags: [nx, nx-cloud]
|
||||
description: "Nx's 2023 highlights - Rust for performance, Vite support, publishing improvements, new backend tools, expanded IDE support, Playwright integration, TypeScript enhancements, Vue plugin, and community growth."
|
||||
---
|
||||
@@ -25,7 +25,7 @@ It is that time again: getting flooded by Year of Review blog posts. We did it l
|
||||
- [Many OSS repos adopt Nx](#many-oss-repos-adopt-nx)
|
||||
- [Nx Community](#nx-community)
|
||||
- [New Content & Improved Docs](#new-content-improved-docs)
|
||||
- [New Tagline: Smart Repos — Fast Builds](#new-tagline-smart-repos-fast-builds)
|
||||
- [New Tagline: Smart Monorepos — Fast CI](#new-tagline-smart-monorepos-fast-ci)
|
||||
- [Nx Conf](#nx-conf)
|
||||
- [Looking ahead — 2024](#looking-ahead-2024)
|
||||
- [Solving CI](#solving-ci)
|
||||
@@ -57,7 +57,7 @@ Our collaboration with our friends in the Vite core team has been incredibly fru
|
||||
|
||||

|
||||
|
||||
We also built some powerful code generators that not only facilitate a seamless [transition from Webpack to Vite](/technologies/build-tools/vite/api/generators/configuration#nxviteconfiguration) but also pave the way for an effortless [migration from a CRA-based setup](/recipes/adopting-nx/adding-to-existing-project) to a modern Nx + Vite based workspace. To see this process in action, [check out this short video](https://www.youtube.com/watch?v=zvYb7XCLQzU).
|
||||
We also built some powerful code generators that not only facilitate a seamless [transition from Webpack to Vite](/nx-api/vite/generators/configuration#nxviteconfiguration) but also pave the way for an effortless [migration from a CRA-based setup](/recipes/adopting-nx/adding-to-existing-project) to a modern Nx + Vite based workspace. To see this process in action, [check out this short video](https://www.youtube.com/watch?v=zvYb7XCLQzU).
|
||||
|
||||
[AnalogJS](https://analogjs.org/) — the fullstack Angular meta-framework which also heavily builds on top of Vite — is using the `@nx/vite` plugin to power its Angular and Nx based workspaces.
|
||||
|
||||
@@ -220,7 +220,7 @@ And you'll then have access to Nx generators so you can create Vue applications,
|
||||
|
||||

|
||||
|
||||
Checkout out our [Vue API docs](/technologies/vue/api), and stay tuned as Nx prepares to offer more Vue support (including support for [Nuxt](https://nuxt.com/), a full-stack framework built around Vue) in the near future!
|
||||
Checkout out our [Vue API docs](/nx-api/vue), and stay tuned as Nx prepares to offer more Vue support (including support for [Nuxt](https://nuxt.com/), a full-stack framework built around Vue) in the near future!
|
||||
|
||||
### Extending Nx: Local Generators, Build your Own CLI, Verdaccio Support
|
||||
|
||||
@@ -252,7 +252,7 @@ Simply put, Module Federation allows a Javascript application running in a brows
|
||||
|
||||
This is an exciting development as it allows a paradigm shift in how you can architect, build, and deploy Javascript applications! And this is especially exciting for monorepo fans, as Nx has best-in-class support for module federation that makes a Module Federation approach easy to adopt and simple to understand!
|
||||
|
||||
Currently, our `@nx/angular` and `@nx/react` plugins both have generators to [create a "host" application](/technologies/module-federation/recipes/create-a-host) that will load and consume federated modules from ["remote" applications](/technologies/module-federation/recipes/create-a-remote), which you can also generate using Nx. Then, by running a simple command with Nx, you can serve all applications required for your host application with the command:
|
||||
Currently, our `@nx/angular` and `@nx/react` plugins both have generators to [create a "host" application](/recipes/module-federation/create-a-host) that will load and consume federated modules from ["remote" applications](/recipes/module-federation/create-a-remote), which you can also generate using Nx. Then, by running a simple command with Nx, you can serve all applications required for your host application with the command:
|
||||
|
||||
```shell
|
||||
nx serve host-application --devRemotes=remote-application
|
||||
@@ -260,9 +260,9 @@ nx serve host-application --devRemotes=remote-application
|
||||
|
||||
Where in the example above your host application is named "host-application" and a remote application that you want live updates on as you're developing is named "remote-application".
|
||||
|
||||
Throughout 2023, we've continued to increase Nx's support and general dev experience around Module Federation, including [adding a generator to federate an existing module](/technologies/module-federation/recipes/federate-a-module), improving the local developer experience by improving local webserver performance, and introducing the concept of [Dynamic Module Federation](/technologies/angular/recipes/dynamic-module-federation-with-angular#advanced-angular-micro-frontends-with-dynamic-module-federation) which will allow you to dynamically specify the location of your remote applications via a "module-federation.manifest.json" file!
|
||||
Throughout 2023, we've continued to increase Nx's support and general dev experience around Module Federation, including [adding a generator to federate an existing module](/recipes/module-federation/federate-a-module), improving the local developer experience by improving local webserver performance, and introducing the concept of [Dynamic Module Federation](/recipes/angular/dynamic-module-federation-with-angular#advanced-angular-micro-frontends-with-dynamic-module-federation) which will allow you to dynamically specify the location of your remote applications via a "module-federation.manifest.json" file!
|
||||
|
||||
At Nx, we're excited about the Module Federation support we offer for our users, and think that it has many interesting applications when paired with Nx's CI capabilities, in particular allowing for [much shorter build times](/technologies/module-federation/concepts/faster-builds-with-module-federation) especially for larger Angular applications.
|
||||
At Nx, we're excited about the Module Federation support we offer for our users, and think that it has many interesting applications when paired with Nx's CI capabilities, in particular allowing for [much shorter build times](/concepts/module-federation/faster-builds-with-module-federation) especially for larger Angular applications.
|
||||
|
||||
## Many OSS repos adopt Nx
|
||||
|
||||
@@ -316,7 +316,7 @@ We also poured a lot of [effort into the docs](/getting-started/intro). We restr
|
||||
- [**Concept docs**](/concepts) — which explain some of the inner workings and mental model behind certain features. Like [how caching works](/concepts/how-caching-works).
|
||||
- [**Recipes**](/recipes) — which are solution oriented. You already know how to cook, we provide the exact recipe for it.
|
||||
- [**Tutorials**](/getting-started/tutorials) — for when you just want to sit down and follow along, step by step to learn how to use Nx in a certain context.
|
||||
- [**Reference**](/reference) and [**API docs**](/reference/core-api) — pure, raw and to the point.
|
||||
- [**Reference**](/reference) and [**API docs**](/nx-api) — pure, raw and to the point.
|
||||
|
||||
We created a brand new ["Why Nx"](/getting-started/why-nx) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of.
|
||||
|
||||
@@ -330,11 +330,11 @@ You can also browse them in the [nx-recipes](https://github.com/nrwl/nx-recipes)
|
||||
|
||||
And obviously, we jumped on the AI train as well. A couple of months ago, we added the [Nx Assistant](/ai-chat). A ChatGPT-powered interface trained in our docs. [Katerina](https://twitter.com/psybercity) wrote about it [on our blog](/blog/nx-docs-ai-assistant). The AI chat allows to interactively ask questions about Nx and will give you relevant answers from our docs (including linking to the sources).
|
||||
|
||||
## New Tagline: Smart Repos — Fast Builds
|
||||
## New Tagline: Smart Monorepos — Fast CI
|
||||
|
||||
Nx stands out for its flexibility, accommodating for both monorepo and non-monorepo project structures. This approach allows users to begin with simpler project configurations, leveraging the benefits of Nx's robust tooling, and later, when the need arises, seamlessly [migrate to a monorepo](/recipes/tips-n-tricks/standalone-to-monorepo).
|
||||
|
||||
However, Nx's true strength becomes most apparent at scale, typically within a monorepo setup. We wanted to capture it in our new tagline: **Smart Repos — Fast Builds**.
|
||||
However, Nx's true strength becomes most apparent at scale, typically within a monorepo setup. We wanted to capture it in our new tagline: **Smart Monorepos — Fast CI**.
|
||||
|
||||
{% tweet url="https://twitter.com/juristr/status/1734558895547568634" /%}
|
||||
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ date: 2024-01-24
|
||||
slug: 'monorepos-the-benefits-challenges-and-importance-of-tooling-support'
|
||||
authors: ['Juri Strumpflohner']
|
||||
tags: [webinar]
|
||||
cover_image: /blog/images/2024-01-24/january-webinar-card.avif
|
||||
cover_image: /blog/images/2024-01-24/january-webinar-card.png
|
||||
status: Past - Gated
|
||||
registrationUrl: https://go.nx.dev/january-webinar
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: What if Nx Plugins Were More Like VSCode Extensions
|
||||
slug: 'what-if-nx-plugins-were-more-like-vscode-extensions'
|
||||
authors: [Juri Strumpflohner]
|
||||
cover_image: '/blog/images/2024-02-05/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-02-05/featured_img.png'
|
||||
tags: [nx, releases]
|
||||
reposts: []
|
||||
description: Introducing Project Crystal in Nx 18, a transformative approach to Nx plugins that makes them more transparent and lightweight, featuring inferred targets, reduced configuration overhead, and improved monorepo adoption.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introducing @nx/nuxt Enhanced Nuxt.js Support in Nx
|
||||
slug: 'introducing-nx-nuxt-enhanced-nuxt-js-support-in-nx'
|
||||
cover_image: '/blog/images/2024-02-06/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-02-06/featured_img.png'
|
||||
authors: ['Katerina Skroumpelou']
|
||||
tags: [devtools, javascript, monorepos, nuxt]
|
||||
description: 'Explore how the new @nx/nuxt plugin enhances Nuxt.js development with automated task recognition and improved monorepo capabilities.'
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Fast, Effortless CI
|
||||
slug: 'fast-effortless-ci'
|
||||
authors: [Isaac Mann]
|
||||
cover_image: '/blog/images/2024-02-07/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-02-07/featured_img.png'
|
||||
tags: [nx, nx-cloud, release]
|
||||
reposts: []
|
||||
description: 'Discover how Nx Agents speeds up CI pipelines from 90 to 10 minutes by intelligently distributing tasks and managing resources.'
|
||||
@@ -18,7 +18,7 @@ In 2014, the state of the art for running tests and builds in your repository we
|
||||
|
||||
Nx was created in 2017 to address this problem. Nx is a build system that operates on a **higher level** where developers define the relationships between tasks and then Nx to decides the optimal way to run those tasks. In the same way, developers can define the inputs and outputs of tasks, then Nx automatically caches those task results. Developers tell Nx what a task does and then Nx can decide how best to run that task.
|
||||
|
||||
With [Nx Agents](/ci/features/distribute-task-execution), Nx is applying this same mindset to the problem of slow and costly CI pipelines. Nx gives you both **Smart Repos** and **Fast Builds**.
|
||||
With [Nx Agents](/ci/features/distribute-task-execution), Nx is applying this same mindset to the problem of slow and costly CI pipelines. Nx gives you both **Smart Monorepos** and **Fast CI**.
|
||||
|
||||
## Why is CI So Hard?
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Versioning and Releasing Packages in a Monorepo
|
||||
slug: 'versioning-and-releasing-packages-in-a-monorepo'
|
||||
authors: [Juri Strumpflohner]
|
||||
description: 'Learn how to use Nx Release to version and publish packages in your monorepo with conventional commits and automated changelog generation.'
|
||||
cover_image: '/blog/images/2024-02-09/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-02-09/featured_img.png'
|
||||
tags: [nx, nx-cloud, releases, changelog]
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Launch Nx Week Recap
|
||||
slug: 'launch-nx-week-recap'
|
||||
authors: [Zack DeRose]
|
||||
cover_image: '/blog/images/2024-02-15/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-02-15/featured_img.png'
|
||||
tags: [nx, nx-cloud, releases, changelog]
|
||||
description: 'Explore the major announcements from Launch Nx Week, including Nx 18.0, Project Crystal, Nuxt plugin, Nx Agents, and Tusky AI integration.'
|
||||
---
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ date: 2024-03-11
|
||||
slug: 'nx-agents-walkthrough-effortlessly-fast-ci-built-for-monorepos'
|
||||
authors: ['Rareș Matei']
|
||||
tags: [webinar]
|
||||
cover_image: /blog/images/2024-03-11/march-webinar.avif
|
||||
cover_image: /blog/images/2024-03-11/march-webinar.png
|
||||
status: Past - Gated
|
||||
registrationUrl: https://go.nx.dev/march-webinar
|
||||
---
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Monorepos - Why Speed Matters
|
||||
slug: 'monorepos-why-speed-matters'
|
||||
authors: ['Katerina Skroumpelou', 'Jeff Cross']
|
||||
tags: [nx, nxdevtools, speed, ci]
|
||||
cover_image: '/blog/images/2024-03-20/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-03-20/featured_img.png'
|
||||
description: 'Discover how Nx enhances development speed through Rust integration, improved caching, Nx Agents, and test atomization features.'
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Reliable CI. A new execution model fixing both flakiness and slowness
|
||||
slug: 'reliable-ci-a-new-execution-model-fixing-both-flakiness-and-slowness'
|
||||
authors: [Victor Savkin]
|
||||
cover_image: '/blog/images/2024-03-21/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-03-21/featured_img.png'
|
||||
tags: [nx, nx-cloud, releases]
|
||||
description: 'Learn how Nx Cloud revolutionizes CI with a task-based execution model that solves both flaky tests and slow pipelines.'
|
||||
---
|
||||
|
||||
@@ -5,7 +5,7 @@ date: 2024-04-17
|
||||
slug: 'making-the-argument-for-monorepos'
|
||||
authors: ['Miroslav Jonaš']
|
||||
tags: [webinar]
|
||||
cover_image: /blog/images/2024-04-17/april-webinar.avif
|
||||
cover_image: /blog/images/2024-04-17/april-webinar.png
|
||||
status: Past - Gated
|
||||
registrationUrl: https://go.nx.dev/april-webinar
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Manage Your Gradle Project using Nx
|
||||
slug: 'manage-your-gradle-project-using-nx'
|
||||
authors: ['Emily Xiong']
|
||||
cover_image: '/blog/images/2024-04-19/featured_img.avif'
|
||||
cover_image: '/blog/images/2024-04-19/featured_img.png'
|
||||
tags: [nx, gradle, how-to]
|
||||
description: 'Learn how to manage Gradle projects in Nx workspaces using the new @nx/gradle plugin for better library visualization and multi-tech stack support.'
|
||||
---
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Nx 19.0 Release!!
|
||||
slug: 'nx-19-release'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2024-05-08/nx-19-thumbnail.avif'
|
||||
cover_image: '/blog/images/2024-05-08/nx-19-thumbnail.png'
|
||||
tags: [nx, release]
|
||||
description: 'Explore Nx 19.0, returning to our six-month release cycle with enhanced Project Crystal plugins that work seamlessly with minimal configuration.'
|
||||
---
|
||||
@@ -141,7 +141,7 @@ And after running the generator, you can expect your project detail view to look
|
||||
|
||||
Notice that in addition to reducing the configuration in your `project.json` file, this generator will also turn on the Nx Atomizer for your Cypress and Playwright projects, so Nx will allow sharding for your end-to-end tasks in CI based on the tests present in your workspace going forward. Note that Nx Agents are very highly highly encouraged as a way of taking advantage of this sharding capability.
|
||||
|
||||
As a note, if you cannot see `e2e-ci` tasks after converting your cypress projects, you can [take a closer look here](/technologies/test-tools/cypress/introduction#splitting-e2e-tasks-by-file) at how to configure them correctly.
|
||||
As a note, if you cannot see `e2e-ci` tasks after converting your cypress projects, you can [take a closer look here](/nx-api/cypress/documents/overview#splitting-e2e-tasks-by-file) at how to configure them correctly.
|
||||
|
||||
## BREAKING CHANGE: Updating Bundled Environment Variables: `NX_` to `NX_PUBLIC_`
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: 'Nx Enterprise Podcast Episode 1: Hicham El Hammouchi'
|
||||
slug: 'hicham-el-hammouchi-podcast-1'
|
||||
authors: ['Zack DeRose']
|
||||
tags: [podcast]
|
||||
cover_image: /blog/images/2024-06-18/ep-1-hicham.avif
|
||||
cover_image: /blog/images/2024-06-18/ep-1-hicham.png
|
||||
podcastYoutubeId: 8iiLB_2djZ8
|
||||
podcastSpotifyId: 24yagCNpu9EGj0fCwSDQkj
|
||||
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/899a2e4c-2e56-4dfa-a3e3-e69eb216f2b0/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-1-hicham-el-hamouchi
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@ date: 2024-06-26
|
||||
slug: 'monorepos-and-ci-can-be-a-mess-heres-how-nx-and-nx-cloud-fixed-it'
|
||||
authors: ['Juri Strumpflohner']
|
||||
tags: [webinar]
|
||||
cover_image: /blog/images/2024-06-26/June-Webinar-card.avif
|
||||
cover_image: /blog/images/2024-06-26/June-Webinar-card.png
|
||||
status: Past - Gated
|
||||
registrationUrl: https://go.nx.dev/june-webinar
|
||||
---
|
||||
|
||||
@@ -3,7 +3,7 @@ title: 'Nx Enterprise Podcast Episode 2: Tine Kondo'
|
||||
slug: 'tine-kondo-podcast-2'
|
||||
authors: ['Zack DeRose']
|
||||
tags: [podcast]
|
||||
cover_image: /blog/images/2024-07-19/ep-2-tine.avif
|
||||
cover_image: /blog/images/2024-07-19/ep-2-tine.png
|
||||
podcastYoutubeId: Nzf3BmymfEo
|
||||
podcastSpotifyId: 0CCQaWCln7rvwkkVvsyxsk
|
||||
podcastAmazonUrl: https://music.amazon.com/podcasts/a221fdad-36fd-4695-a5b4-038d7b99d284/episodes/53934cd9-c521-441e-8523-8b947ed207ca/the-enterprise-software-podcast-by-nx-the-enterprise-software-podcast-by-nx-2-tine-kondo
|
||||
@@ -16,4 +16,4 @@ In this episode, welcome Nx Champion and Nx Expert, Tine Kondo. Our discussion h
|
||||
|
||||
We touch on the difficulties larger organizations face when merging PRs in a timely manner, emphasizing how a monorepo alleviates the headache of coordinating multiple PRs across various repositories, and share firsthand experiences and frustrations with traditional multi-repo setups, underscoring the benefits of a unified approach.
|
||||
|
||||
In particular, Nx's new plugin: [@nx/gradle](/technologies/java/api) is of interest, and Tine provides some valuable insight on the impact this plugin can make, as well as the importance for Maven support.
|
||||
In particular, Nx's new plugin: [@nx/gradle](/nx-api/gradle) is of interest, and Tine provides some valuable insight on the impact this plugin can make, as well as the importance for Maven support.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 'Nx 19.5 is here! Stackblitz, Bun, Incremental Builds for Vite, Gradle Test Atomizer'
|
||||
slug: 'nx-19-5-adds-stackblitz-new-features-and-more'
|
||||
authors: ['Zack DeRose']
|
||||
cover_image: '/blog/images/2024-08-01/nx-19-5-thumbnail.avif'
|
||||
cover_image: '/blog/images/2024-08-01/nx-19-5-thumbnail.png'
|
||||
tags: [nx, release]
|
||||
description: 'Nx 19.5 brings StackBlitz support, Bun and Pnpm v9 compatibility, local flaky task detection, and more.'
|
||||
---
|
||||
@@ -106,7 +106,7 @@ Note that the new, free [hobby tier for Nx Cloud](#new-nx-cloud-hobby-tier) incl
|
||||
|
||||
## Pattern Support for `targetDefaults`
|
||||
|
||||
When using the [Atomizer features](/ci/features/split-e2e-tasks) of plugins like [`@nx/playwright`](/technologies/test-tools/playwright/api) and [`@nx/cypress`](/technologies/test-tools/cypress/api), you end up creating tasks with dynamic but predictable names.
|
||||
When using the [Atomizer features](/ci/features/split-e2e-tasks) of plugins like [`@nx/playwright`](/nx-api/playwright) and [`@nx/cypress`](/nx-api/cypress), you end up creating tasks with dynamic but predictable names.
|
||||
|
||||

|
||||
|
||||
@@ -178,7 +178,7 @@ width="100%" /%}
|
||||
|
||||
## Support For Incremental Builds For Vite
|
||||
|
||||
Nx now supports incremental builds with our [`vite` plugin](/technologies/build-tools/vite/api). Incremental builds in Nx workspaces allow you to build any package in your workspace individually, and will then automatically use that built artifact when then building any project or application that consumes the package. This way you can speed up your build and CI times through optimizations like [only building packages that were affected](/reference/core-api/nx/documents/affected), using [Nx Replay](/ci/features/remote-cache) to effortlessly cache and share your built artifacts, and allowing you to run builds of your various packages in parallel using [Nx Agents](/ci/features/distribute-task-execution).
|
||||
Nx now supports incremental builds with our [`vite` plugin](/nx-api/vite). Incremental builds in Nx workspaces allow you to build any package in your workspace individually, and will then automatically use that built artifact when then building any project or application that consumes the package. This way you can speed up your build and CI times through optimizations like [only building packages that were affected](/nx-api/nx/documents/affected), using [Nx Replay](/ci/features/remote-cache) to effortlessly cache and share your built artifacts, and allowing you to run builds of your various packages in parallel using [Nx Agents](/ci/features/distribute-task-execution).
|
||||
|
||||
Read more about [buildable libraries and incremental builds](/concepts/buildable-and-publishable-libraries).
|
||||
|
||||
@@ -194,11 +194,11 @@ npx nx g convert-to-inferred
|
||||
|
||||
The important thing to note here is that while this generator will make adjustments to the `project.json` file of the projects you convert, the behavior of your tasks should remain the same. You can see project details via the [Nx Console](/getting-started/editor-setup) plugin of your IDE, or in a browser by running the command: `nx show project [projectName]`.
|
||||
|
||||
In Nx 19, we were focused on adding `convert-to-inferred` to our [Playwright](/technologies/test-tools/playwright/api), [Cypress](/technologies/test-tools/cypress/api), and [ESLint](/technologies/eslint/api) plugins - where bringing the [Nx Atomizer](/ci/features/split-e2e-tasks) provided the greatest value. Since then, we've added this generator to most other plugins. Currently, our React native plugins (react native, expo, detox) are the only plugins that are outstanding, and we'll be providing `convert-to-inferred` generators here in the near future.
|
||||
In Nx 19, we were focused on adding `convert-to-inferred` to our [Playwright](/nx-api/playwright), [Cypress](/nx-api/cypress), and [ESLint](/nx-api/eslint) plugins - where bringing the [Nx Atomizer](/ci/features/split-e2e-tasks) provided the greatest value. Since then, we've added this generator to most other plugins. Currently, our React native plugins (react native, expo, detox) are the only plugins that are outstanding, and we'll be providing `convert-to-inferred` generators here in the near future.
|
||||
|
||||
## Gradle Composite Builds Support
|
||||
|
||||
In [Nx 19.0](/blog/nx-19-release), we introduced support for Gradle through our [Gradle plugin](/technologies/java/api). With the latest update, this plugin now also supports [Gradle Composite builds](https://docs.gradle.org/current/userguide/composite_builds.html), in addition to multi-project builds.
|
||||
In [Nx 19.0](/blog/nx-19-release), we introduced support for Gradle through our [Gradle plugin](/nx-api/gradle). With the latest update, this plugin now also supports [Gradle Composite builds](https://docs.gradle.org/current/userguide/composite_builds.html), in addition to multi-project builds.
|
||||
|
||||
Gradle Composite builds are commonly used in larger workspaces to manage dependencies across multiple projects. With this new support, Nx can now leverage composite builds to enhance the Nx Task Graph. For example, consider the following `settings.gradle.kts` file:
|
||||
|
||||
@@ -217,7 +217,7 @@ You can read more on composite builds in the [Gradle documentation](https://docs
|
||||
|
||||
## Experimental: Gradle Test Atomization
|
||||
|
||||
The new [`@nx/gradle` plugin](/technologies/java/api) now includes experimental support for [Test Atomization](/ci/features/split-e2e-tasks).
|
||||
The new [`@nx/gradle` plugin](/nx-api/gradle) now includes experimental support for [Test Atomization](/ci/features/split-e2e-tasks).
|
||||
|
||||

|
||||
|
||||
@@ -225,7 +225,7 @@ With Test Atomization, as you add tests to your Gradle projects, Nx will automat
|
||||
|
||||
## Experimental: Nx Release Adds File Based Versioning Support
|
||||
|
||||
Currently with [Nx release](/reference/core-api/nx/documents/release), you already have two different ways of figuring out the how to modify the current version of a package to get its updated version:
|
||||
Currently with [Nx release](/nx-api/nx/documents/release), you already have two different ways of figuring out the how to modify the current version of a package to get its updated version:
|
||||
|
||||
- Imperatively via the CLI/prompt by telling it your desired relative (semver keyword) or absolute (e.g. `1.2.3`) version.
|
||||
- Declaratively by letting Nx inspect your git history and determine the semver bump to apply based on the conventional commits specification.
|
||||
@@ -259,9 +259,9 @@ Fetching @angular/core@18.1.2
|
||||
NX The migrate command has run successfully.
|
||||
```
|
||||
|
||||
Our `@nx/react` package will now create new React applications using version 18.3, and we now support the new experimental `reactCompiler`. Users can install the [`babel-plugin-react-compiler` package](https://www.npmjs.com/package/babel-plugin-react-compiler) and you can follow [this guide for how to enable it with Nx](/technologies/react/recipes/react-compiler#react-compiler-with-nx).
|
||||
Our `@nx/react` package will now create new React applications using version 18.3, and we now support the new experimental `reactCompiler`. Users can install the [`babel-plugin-react-compiler` package](https://www.npmjs.com/package/babel-plugin-react-compiler) and you can follow [this guide for how to enable it with Nx](/recipes/react/react-compiler#react-compiler-with-nx).
|
||||
|
||||
Note that due to the extent of breaking changes coming with React 19, we will not be providing a automated migration to React 19 via [`nx migrate`](/reference/core-api/nx/documents/migrate).
|
||||
Note that due to the extent of breaking changes coming with React 19, we will not be providing a automated migration to React 19 via [`nx migrate`](/nx-api/nx/documents/migrate).
|
||||
|
||||
## Automatically Update Nx
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user