Skip to content

Commit

Permalink
docs(remix): update the plugin overview to match the latest iteration…
Browse files Browse the repository at this point in the history 
… of the plugin #26943 (#26977)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this 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. -->

## Current Behavior
<!-- This is the behavior we have today -->
The information on the Remix Plugin Overview is out of date.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
The information should be up to date

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26943
  • Loading branch information
@Coly010
Coly010 authored Jul 18, 2024
1 parent 8633f3d commit e388304
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 66 deletions.
72 changes: 39 additions & 33 deletions docs/generated/packages/remix/documents/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: The Nx Plugin for Remix contains executors, generators, and utiliti
The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries
within an Nx workspace. It provides:

- Integration with libraries such as Storybook, Jest, Vitest and Cypress.
- Integration with libraries such as Storybook, Jest, Vitest, Playwright and Cypress.
- Generators to help scaffold code quickly, including:
- Libraries, both internal to your codebase and publishable to npm
- Routes
Expand Down Expand Up @@ -57,7 +57,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
"plugin": "@nx/remix/plugin",
"options": {
"buildTargetName": "build",
"serveTargetName": "serve",
"devTargetName": "dev",
"startTargetName": "start",
"typecheckTargetName": "typecheck"
}
Expand All @@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
}
```

The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.

{% /tab %}
{% tab label="Nx < 18" %}
Expand All @@ -92,35 +92,32 @@ The command below uses the `as-provided` directory flag behavior, which is the d
NX Generating @nx/remix:application
✔ What unit test runner should be used? · vitest
✔ Which E2E test runner would you like to use? · playwright
CREATE apps/myapp/project.json
UPDATE package.json
UPDATE nx.json
CREATE apps/myapp/project.json
CREATE apps/myapp/README.md
CREATE apps/myapp/app/nx-welcome.tsx
CREATE apps/myapp/app/root.tsx
CREATE apps/myapp/app/routes/_index.tsx
CREATE apps/myapp/public/favicon.ico
CREATE apps/myapp/remix.config.js
CREATE apps/myapp/remix.env.d.ts
CREATE apps/myapp/tests/routes/_index.spec.tsx
CREATE apps/myapp/tsconfig.app.json
CREATE apps/myapp/tsconfig.json
CREATE apps/myapp/.gitignore
CREATE apps/myapp/package.json
UPDATE nx.json
CREATE tsconfig.base.json
CREATE .prettierrc
CREATE .prettierignore
UPDATE .vscode/extensions.json
CREATE apps/myapp/vite.config.ts
CREATE apps/myapp/tsconfig.spec.json
CREATE apps/myapp/vitest.config.ts
CREATE apps/myapp/test-setup.ts
CREATE apps/myapp-e2e/cypress.config.ts
CREATE apps/myapp-e2e/src/e2e/app.cy.ts
CREATE apps/myapp-e2e/src/fixtures/example.json
CREATE apps/myapp-e2e/src/support/commands.ts
CREATE apps/myapp-e2e/src/support/e2e.ts
CREATE apps/myapp-e2e/tsconfig.json
CREATE apps/myapp/.eslintrc.json
CREATE apps/myapp/.eslintignore
CREATE apps/myapp-e2e/project.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/myapp-e2e/src/example.spec.ts
CREATE apps/myapp-e2e/playwright.config.ts
CREATE apps/myapp-e2e/tsconfig.json
CREATE apps/myapp-e2e/.eslintrc.json
```

Expand All @@ -142,31 +139,40 @@ NX Successfully ran target build for project myapp (3s)

2. To serve your application for use during development run:

```{% command="nx serve myapp" path="~/acme" %}
> nx run myapp:serve
```{% command="nx dev myapp" path="~/acme" %}
> nx run myapp:dev
> remix dev --manual
💿 Building...
💿 Rebuilt in 377ms
Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000)
💿 remix dev
info building...
info built (388ms)
[remix-serve] http://localhost:3000 (http://192.168.0.12:3000)
```

3. To test the application using vitest run:

```{% command="nx test myapp" path="~/acme" %}
> nx run myapp:test
RUN v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp
stderr | app/routes/index.spec.ts > test > should render
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
✓ app/routes/index.spec.ts (1 test) 10ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 16:15:45
Duration 1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms)
> vitest
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
NX Successfully ran target test for project myapp (2s)
RUN v1.6.0 /Users/columferry/dev/nrwl/issues/gh_issues/nx26943/apps/myapp
✓ tests/routes/_index.spec.tsx (1)
✓ renders loader data
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 13:22:54
Duration 533ms (transform 47ms, setup 68ms, collect 123ms, tests 36ms, environment 204ms, prepare 35ms)
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
NX Successfully ran target test for project myapp (950ms)
```

## Generating an Nx Library
Expand Down
72 changes: 39 additions & 33 deletions docs/shared/packages/remix/remix-plugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: The Nx Plugin for Remix contains executors, generators, and utiliti
The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries
within an Nx workspace. It provides:

- Integration with libraries such as Storybook, Jest, Vitest and Cypress.
- Integration with libraries such as Storybook, Jest, Vitest, Playwright and Cypress.
- Generators to help scaffold code quickly, including:
- Libraries, both internal to your codebase and publishable to npm
- Routes
Expand Down Expand Up @@ -57,7 +57,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
"plugin": "@nx/remix/plugin",
"options": {
"buildTargetName": "build",
"serveTargetName": "serve",
"devTargetName": "dev",
"startTargetName": "start",
"typecheckTargetName": "typecheck"
}
Expand All @@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
}
```

The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.

{% /tab %}
{% tab label="Nx < 18" %}
Expand All @@ -92,35 +92,32 @@ The command below uses the `as-provided` directory flag behavior, which is the d
NX Generating @nx/remix:application
✔ What unit test runner should be used? · vitest
✔ Which E2E test runner would you like to use? · playwright
CREATE apps/myapp/project.json
UPDATE package.json
UPDATE nx.json
CREATE apps/myapp/project.json
CREATE apps/myapp/README.md
CREATE apps/myapp/app/nx-welcome.tsx
CREATE apps/myapp/app/root.tsx
CREATE apps/myapp/app/routes/_index.tsx
CREATE apps/myapp/public/favicon.ico
CREATE apps/myapp/remix.config.js
CREATE apps/myapp/remix.env.d.ts
CREATE apps/myapp/tests/routes/_index.spec.tsx
CREATE apps/myapp/tsconfig.app.json
CREATE apps/myapp/tsconfig.json
CREATE apps/myapp/.gitignore
CREATE apps/myapp/package.json
UPDATE nx.json
CREATE tsconfig.base.json
CREATE .prettierrc
CREATE .prettierignore
UPDATE .vscode/extensions.json
CREATE apps/myapp/vite.config.ts
CREATE apps/myapp/tsconfig.spec.json
CREATE apps/myapp/vitest.config.ts
CREATE apps/myapp/test-setup.ts
CREATE apps/myapp-e2e/cypress.config.ts
CREATE apps/myapp-e2e/src/e2e/app.cy.ts
CREATE apps/myapp-e2e/src/fixtures/example.json
CREATE apps/myapp-e2e/src/support/commands.ts
CREATE apps/myapp-e2e/src/support/e2e.ts
CREATE apps/myapp-e2e/tsconfig.json
CREATE apps/myapp/.eslintrc.json
CREATE apps/myapp/.eslintignore
CREATE apps/myapp-e2e/project.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/myapp-e2e/src/example.spec.ts
CREATE apps/myapp-e2e/playwright.config.ts
CREATE apps/myapp-e2e/tsconfig.json
CREATE apps/myapp-e2e/.eslintrc.json
```

Expand All @@ -142,31 +139,40 @@ NX Successfully ran target build for project myapp (3s)

2. To serve your application for use during development run:

```{% command="nx serve myapp" path="~/acme" %}
> nx run myapp:serve
```{% command="nx dev myapp" path="~/acme" %}
> nx run myapp:dev
> remix dev --manual
💿 Building...
💿 Rebuilt in 377ms
Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000)
💿 remix dev
info building...
info built (388ms)
[remix-serve] http://localhost:3000 (http://192.168.0.12:3000)
```

3. To test the application using vitest run:

```{% command="nx test myapp" path="~/acme" %}
> nx run myapp:test
RUN v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp
stderr | app/routes/index.spec.ts > test > should render
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
✓ app/routes/index.spec.ts (1 test) 10ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 16:15:45
Duration 1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms)
> vitest
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
NX Successfully ran target test for project myapp (2s)
RUN v1.6.0 /Users/columferry/dev/nrwl/issues/gh_issues/nx26943/apps/myapp
✓ tests/routes/_index.spec.tsx (1)
✓ renders loader data
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 13:22:54
Duration 533ms (transform 47ms, setup 68ms, collect 123ms, tests 36ms, environment 204ms, prepare 35ms)
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
NX Successfully ran target test for project myapp (950ms)
```

## Generating an Nx Library
Expand Down

0 comments on commit e388304

Please sign in to comment.