Add a New Lit Project

The code for this example is available on Github:

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.

✅ Run Tasks ✅ Cache Task Results ✅ Share Your Cache ✅ Explore the Graph ✅ Distribute Task Execution ✅ Integrate with Editors ✅ Automate Updating Nx ✅ Enforce Module Boundaries 🚫 Use Task Executors 🚫 Use Code Generators 🚫 Automate Updating Framework Dependencies

Install Lit and Other Dependencies

Install all the dependencies we need:

npm i --save-dev @nx/node lit http-server

Nx 15 and lower use @nrwl/ instead of @nx/

Create an Application

Directory Flag Behavior Changes

The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the workspace layout documentation for more details.

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:

nx g @nx/node:app my-lit-app --directory=apps/my-lit-app

Nx 15 and lower use @nrwl/ instead of @nx/

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:

apps/my-lit-app/src/main.ts
1import { LitElement, html } from 'lit'; 2import { customElement, property } from 'lit/decorators.js'; 3 4@customElement('my-element') 5export class MyElement extends LitElement { 6 @property() 7 version = 'STARTING'; 8 9 render() { 10 return html` 11 <p>Welcome to the Lit tutorial!</p> 12 <p>This is the ${this.version} code.</p> 13 `; 14 } 15} 16

Create index.html:

apps/my-lit-app/index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="module" src="main.js"></script> 5 <style> 6 body { 7 font-family: 'Open Sans', sans-serif; 8 font-size: 1.5em; 9 padding-left: 0.5em; 10 } 11 </style> 12 </head> 13 <body> 14 <my-element></my-element> 15 </body> 16</html> 17

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:

apps/my-lit-app/project.json
1{ 2 "targets": { 3 "build": { 4 "executor": "@nx/esbuild:esbuild", 5 "outputs": ["{options.outputPath}"], 6 "defaultConfiguration": "production", 7 "options": { 8 "outputPath": "dist/apps/my-lit-app", 9 "format": ["esm"], 10 "bundle": true, 11 "thirdParty": true, 12 "main": "apps/my-lit-app/src/main.ts", 13 "tsConfig": "apps/my-lit-app/tsconfig.app.json", 14 "assets": ["apps/my-lit-app/src/assets", "apps/my-lit-app/index.html"], 15 "generatePackageJson": true, 16 "esbuildOptions": { 17 "sourcemap": true, 18 "outExtension": { 19 ".js": ".js" 20 } 21 } 22 } 23 } 24 } 25} 26
Nx 15 and lower use @nrwl/ instead of @nx/

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:

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:

apps/my-lit-app/project.json
1{ 2 "targets": { 3 "serve": { 4 "dependsOn": ["build"], 5 "executor": "nx:run-commands", 6 "options": { 7 "commands": [ 8 "http-server dist/apps/my-lit-app", 9 "nx watch --projects=my-lit-app --includeDependentProjects -- nx build my-lit-app" 10 ] 11 } 12 } 13 } 14} 15

"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:

nx serve my-lit-app

Create a Library

Directory Flag Behavior Changes

The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the workspace layout documentation for more details.

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:

nx g @nx/js:lib my-lib --directory=libs/my-lib

Nx 15 and lower use @nrwl/ instead of @nx/

Once the library is created, update the following files.

libs/my-lib/src/lib/my-lib.ts
1export function someFunction(): string { 2 return 'some function'; 3} 4
apps/my-lit-app/src/main.ts
1import { LitElement, html } from 'lit'; 2import { customElement, property } from 'lit/decorators.js'; 3import { someFunction } from '@my-org/my-lib'; 4 5@customElement('my-element') 6export class MyElement extends LitElement { 7 @property() 8 version = 'STARTING'; 9 10 render() { 11 return html` 12 <p>Welcome to the Lit tutorial!</p> 13 <p>This is the ${this.version} code.</p> 14 <p>Imported from a library: ${someFunction()}.</p> 15 `; 16 } 17} 18

Now when you serve your application, you'll see the content from the library being displayed.

More Documentation