miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(core): add stack example recipes (#18118)

Browse Source
This commit is contained in:
Isaac Mann 2023-08-01 10:18:51 -04:00 committed by GitHub
parent 430c4d3240
commit 3313c7619a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 488 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/generated/manifests/menus.json
View File

@ -3575,6 +3575,14 @@
"id": "example-repos",
"isExternal": false,
"children": [
{
"name": "Add a Lit Project",
"path": "/showcase/example-repos/add-lit",
"id": "add-lit",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",
@ -3667,6 +3675,14 @@
"id": "example-repos",
"isExternal": false,
"children": [
{
"name": "Add a Lit Project",
"path": "/showcase/example-repos/add-lit",
"id": "add-lit",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",
@ -3750,6 +3766,14 @@
],
"disableCollapsible": false
},
{
"name": "Add a Lit Project",
"path": "/showcase/example-repos/add-lit",
"id": "add-lit",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",

30
docs/generated/manifests/nx.json
View File

@ -4457,6 +4457,16 @@
"description": "Examples of different ways to use Nx",
"file": "",
"itemList": [
{
"id": "add-lit",
"name": "Add a Lit Project",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-lit",
"tags": []
},
{
"id": "react-nx",
"name": "Powering Up React Development With Nx",
@ -4573,6 +4583,16 @@
"description": "Examples of different ways to use Nx",
"file": "",
"itemList": [
{
"id": "add-lit",
"name": "Add a Lit Project",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-lit",
"tags": []
},
{
"id": "react-nx",
"name": "Powering Up React Development With Nx",
@ -4678,6 +4698,16 @@
"path": "/showcase/example-repos",
"tags": []
},
"/showcase/example-repos/add-lit": {
"id": "add-lit",
"name": "Add a Lit Project",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-lit",
"tags": []
},
"/showcase/example-repos/react-nx": {
"id": "react-nx",
"name": "Powering Up React Development With Nx",

183
docs/generated/manifests/recipes.json
View File

@ -167,6 +167,189 @@
"path": "/recipes/angular/migration",
"tags": []
},
{
"id": "angular-integrated",
"name": "From Angular CLI to Integrated",
"description": "",
"file": "shared/migration/angular-integrated",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-integrated",
"tags": []
},
{
"id": "angular-manual",
"name": "From Angular CLI Manually",
"description": "",
"file": "shared/migration/angular-manual",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-manual",
"tags": []
},
{
"id": "angular-multiple",
"name": "From Multiple Angular CLI Repos",
"description": "",
"file": "shared/migration/angular-multiple",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-multiple",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/adopting-nx-angular",
"tags": []
},
"/recipes/adopting-nx-angular/migration-angular": {
"id": "migration-angular",
"name": "From Angular CLI",
"description": "",
"file": "shared/migration/migration-angular",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/migration-angular",
"tags": []
},
"/recipes/adopting-nx-angular/angular-integrated": {
"id": "angular-integrated",
"name": "From Angular CLI to Integrated",
"description": "",
"file": "shared/migration/angular-integrated",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-integrated",
"tags": []
},
"/recipes/adopting-nx-angular/angular-manual": {
"id": "angular-manual",
"name": "From Angular CLI Manually",
"description": "",
"file": "shared/migration/angular-manual",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-manual",
"tags": []
},
"/recipes/adopting-nx-angular/angular-multiple": {
"id": "angular-multiple",
"name": "From Multiple Angular CLI Repos",
"description": "",
"file": "shared/migration/angular-multiple",
"itemList": [],
"isExternal": false,
"path": "/recipes/adopting-nx-angular/angular-multiple",
"tags": []
},
"/recipes/add-stack": {
"id": "add-stack",
"name": "Add a New Project",
"description": "Instructions to add a project from a new stack to an Nx workspace",
"file": "",
"itemList": [
{
"id": "add-lit",
"name": "Add a Lit Project",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit",
"itemList": [],
"isExternal": false,
"path": "/recipes/add-stack/add-lit",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/add-stack",
"tags": []
},
"/recipes/add-stack/add-lit": {
"id": "add-lit",
"name": "Add a Lit Project",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit",
"itemList": [],
"isExternal": false,
"path": "/recipes/add-stack/add-lit",
"tags": []
},
"/recipes/executors": {
"id": "executors",
"name": "Executors",
"description": "Use, extend and compose executors.",
"file": "",
"itemList": [
{
"id": "use-executor-configurations",
"name": "Use Executor Configurations",
"description": "",
"file": "shared/recipes/use-executor-configurations",
"itemList": [],
"isExternal": false,
"path": "/recipes/executors/use-executor-configurations",
"tags": ["use-task-executors"]
},
{
"id": "run-commands-executor",
"name": "Running Custom Commands",
"description": "",
"file": "shared/running-custom-commands",
"itemList": [],
"isExternal": false,
"path": "/recipes/executors/run-commands-executor",
"tags": ["use-task-executors"]
}
],
"isExternal": false,
"path": "/recipes/executors",
"tags": []
},
"/recipes/executors/use-executor-configurations": {
"id": "use-executor-configurations",
"name": "Use Executor Configurations",
"description": "",
"file": "shared/recipes/use-executor-configurations",
"itemList": [],
"isExternal": false,
"path": "/recipes/executors/use-executor-configurations",
"tags": ["use-task-executors"]
},
"/recipes/executors/run-commands-executor": {
"id": "run-commands-executor",
"name": "Running Custom Commands",
"description": "",
"file": "shared/running-custom-commands",
"itemList": [],
"isExternal": false,
"path": "/recipes/executors/run-commands-executor",
"tags": ["use-task-executors"]
},
"/recipes/environment-variables": {
"id": "environment-variables",
"name": "Environment Variables",
"description": "Using environment variables in an Nx workspace.",
"file": "",
"itemList": [
{
"id": "define-environment-variables",
"name": "Define Environment Variables",
"description": "",
"file": "shared/guides/define-environment-variables",
"itemList": [],
"isExternal": false,
"path": "/recipes/environment-variables/define-environment-variables",
"tags": ["environment-variables"]
},
{
"id": "use-environment-variables-in-react",
"name": "Use Environment Variables in React",
"description": "",
"file": "shared/guides/use-environment-variables-in-react",
"itemList": [],
"isExternal": false,
"path": "/recipes/environment-variables/use-environment-variables-in-react",
"tags": ["environment-variables"]
},
{
"id": "use-environment-variables-in-angular",
"name": "Use Environment Variables in Angular",

6
docs/map.json
View File

@ -1014,6 +1014,12 @@
"id": "example-repos",
"description": "Examples of different ways to use Nx",
"itemList": [
{
"name": "Add a Lit Project",
"id": "add-lit",
"description": "Add a Lit project to your repo",
"file": "shared/recipes/add-stack/add-lit"
},
{
"name": "Powering Up React Development With Nx",
"id": "react-nx",

206
docs/shared/recipes/add-stack/add-lit.md Normal file
View File

@ -0,0 +1,206 @@
# Add a New Lit Project
The code for this example is available on Github:
{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/lit" /%}
**Supported Features**
Because we are not using an Nx plugin for Lit, there are few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Lit-specific code generators. And we'll have to take care of updating any framework dependencies as needed.
{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %}
{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %}
{% pill url="/core-features/share-your-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/core-features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/core-features/enforce-project-boundaries" %}✅ Enforce Project Boundaries{% /pill %}
{% pill url="/core-features/plugin-features/use-task-executors" %}🚫 Use Task Executors{% /pill %}
{% pill url="/core-features/plugin-features/use-code-generators" %}🚫 Use Code Generators{% /pill %}
{% pill url="/core-features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %}
## Install Lit and Other Dependencies
Install all the dependencies we need:
{% tabs %}
{%tab label="npm"%}
```shell
npm i --save-dev @nx/node lit http-server
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nx/node lit http-server
```
{% /tab %}
{% /tabs %}
## Create an Application
We'll start with a node application and then tweak the settings to match what we need. Add a new node application to your workspace with the following command:
```shell
nx g @nx/node:app my-lit-app
```
Choose `none` for the node framework, since we won't be using this as a node app.
### Turn the Application into a Lit Application
Update `main.ts`:
```typescript {% fileName="apps/my-lit-app/src/main.ts" %}
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
version = 'STARTING';
render() {
return html`
<p>Welcome to the Lit tutorial!</p>
<p>This is the ${this.version} code.</p>
`;
}
}
```
Create `index.html`:
```html {% fileName="apps/my-lit-app/index.html" %}
<!DOCTYPE html>
<html>
<head>
<script type="module" src="main.js"></script>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
padding-left: 0.5em;
}
</style>
</head>
<body>
<my-element></my-element>
</body>
</html>
```
### Update the Build Task
In the `project.json` file update the `options` under the `build` target. The properties that need to change are `format`, `bundle`, `thirdParty`, and `assets`:
```json {% fileName="apps/my-lit-app/project.json" %}
{
"targets": {
"build": {
"executor": "@nx/esbuild:esbuild",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/apps/my-lit-app",
"format": ["esm"],
"bundle": true,
"thirdParty": true,
"main": "apps/my-lit-app/src/main.ts",
"tsConfig": "apps/my-lit-app/tsconfig.app.json",
"assets": ["apps/my-lit-app/src/assets", "apps/my-lit-app/index.html"],
"generatePackageJson": true,
"esbuildOptions": {
"sourcemap": true,
"outExtension": {
".js": ".js"
}
}
}
}
}
}
```
Now, when you run the build, there should be `index.html`, `main.js` and `package.json` under `dist/apps/my-lit-app`. Try it out:
```shell
nx build my-lit-app
```
### Update the Serve Task
To serve the app, we'll completely overwrite the existing `serve` task. Change it to this:
```json {% fileName="apps/my-lit-app/project.json" %}
{
"targets": {
"serve": {
"dependsOn": ["build"],
"executor": "nx:run-commands",
"options": {
"commands": [
"http-server dist/apps/my-lit-app",
"nx watch --projects=my-lit-app --includeDependentProjects -- nx build my-lit-app"
]
}
}
}
}
```
`"dependsOn": ["build"]` will ensure that the `build` task is always run before the `serve` task. The entries under `commands` will each be run in parallel. The `http-server` line serves the `build` output with a simple server. The `nx watch` line will automatically re-run the `build` task any time the application code or any project it depends on changes.
Run the `serve` task and see your Lit app in action:
```shell
nx serve my-lit-app
```
## Create a Library
Let's create a library that our Lit application is going to consume. To create a new library, install the `@nx/js` package and run:
```shell
nx g @nx/js:lib my-lib
```
Once the library is created, update the following files.
```typescript {% fileName="libs/my-lib/src/lib/my-lib.ts" %}
export function someFunction(): string {
return 'some function';
}
```
```typescript {% fileName="apps/my-lit-app/src/main.ts" %}
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { someFunction } from '@my-org/my-lib';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
version = 'STARTING';
render() {
return html`
<p>Welcome to the Lit tutorial!</p>
<p>This is the ${this.version} code.</p>
<p>Imported from a library: ${someFunction()}.</p>
`;
}
}
```
Now when you serve your application, you'll see the content from the library being displayed.
## More Documentation
- [@nx/esbuild](/packages/esbuild)
- [@nx/js](/packages/js)
- [Lit](https://lit.dev/)

1
docs/shared/reference/sitemap.md
View File

@ -175,6 +175,7 @@
- [Rescope Packages from @nrwl to @nx](/recipes/other/rescope)
- [Showcase](/showcase)
- [Example Repos](/showcase/example-repos)
- [Add a Lit Project](/showcase/example-repos/add-lit)
- [Powering Up React Development With Nx](/showcase/example-repos/react-nx)
- [Using Apollo GraphQL](/showcase/example-repos/apollo-react)
- [Using Prisma with NestJS](/showcase/example-repos/nestjs-prisma)

4
nx-dev/ui-markdoc/src/index.ts
View File

@ -43,6 +43,8 @@ import {
terminalVideo,
} from './lib/tags/terminal-video.component';
import { VideoLink, videoLink } from './lib/tags/video-link.component';
import { Pill } from './lib/tags/pill.component';
import { pill } from './lib/tags/pill.schema';
// TODO fix this export
export { GithubRepository } from './lib/tags/github-repository.component';
@ -69,6 +71,7 @@ export const getMarkdocCustomConfig = (
'nx-cloud-section': nxCloudSection,
persona,
personas,
pill,
'side-by-side': sideBySide,
tab,
tabs,
@ -93,6 +96,7 @@ export const getMarkdocCustomConfig = (
NxCloudSection,
Persona,
Personas,
Pill,
SideBySide,
Tab,
Tabs,

23
nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx Normal file
View File

@ -0,0 +1,23 @@
import { ReactNode } from 'react';
export function Pill({
url,
children,
}: {
url: string;
children: ReactNode;
}): JSX.Element {
return (
<span className="group inline-flex relative rounded-md border border-slate-200 mr-2 mb-2 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<span className="flex flex-col p-3">
<a
href={url}
className="flex items-center font-semibold no-underline group-hover:underline"
>
<span className="absolute inset-0" aria-hidden="true"></span>
{children}
</a>
</span>
</span>
);
}

11
nx-dev/ui-markdoc/src/lib/tags/pill.schema.ts Normal file
View File

@ -0,0 +1,11 @@
import { Schema } from '@markdoc/markdoc';
export const pill: Schema = {
render: 'Pill',
attributes: {
url: {
type: 'String',
default: '',
},
},
};