Project Configuration in LWR on Node.js

LWR is built with customization and extensibility in mind.

You can customize both the server configuration and project setup for your LWR project. The LWR server is configured in lwr.config.json, at the root of the project. This page describes various lwr.config.json configuration options.

For other configuration options, such as adding dependencies to your project or customizing LWR’s module support, check out Configure Packages and Modules.

The lwr.config.json file generated for your initial StaticSite project only has a few things happening:

• It provides a module source directory for LWC modules in your project repo.
• It specifies how to handle the bundling of the lwc module.
• It tells LWR how to route to some pages.

You can do more with the lwr.config.json file, however. You can also configure directory locations of templates, global context data, and static assets, as well as set the port, server type, and server mode.

Page routing for LWR projects is controlled in the lwr.config.json configuration file. This topic is covered in detail on the Sever-Side Routing in LWR page.

You can use lwr.config.json to access some LWR port and server configurations:

• port: The port from which to serve the LWR application. The default is process.env.PORT || 3000.
• serverMode: The mode in which to run the server. Mode is typically set on the command line. The default is "dev". See available modes here.
• serverType: The type of underlying web server that LWR uses. Currently supported values are "express" (default) or "koa".

For example:

You can configure a variety of directory locations in your lwr.config.json file:

• rootDir: The root directory of the LWR project. The default is the current working directory (.).
• cacheDir: LWR caches LWC modules that it has compiled and stores them in a cache directory. The default is "$rootDir/__lwr_cache__".
• contentDir: The content templates directory. The default is "$rootDir/src/content".
• layoutsDir: The layout templates directory. The default is "$rootDir/src/layouts".
• globalDataDir: The directory of global data for templating. The default is "$rootDir/src/data".
• hooks: A list of configuration hooks that you can use to dynamically alter the configuration and global data for your application on server startup. Hooks are an advanced topic and are not covered in detail at this point.
• locker: Allows you to enable Lightning Web Security and optionally configure a list of trusted components. By default, Lightning Web Security (LWS) is disabled. If LWS is on, components from LWC and LWR are automatically trusted.

For example:

You can also configure directories to serve static assets. For more information, see Template and Asset References in LWR Content and Layout Templates.

If a recipe is running in prod or prod-compat mode, LWR bundles modules before sending them to the client. Depending on your project setup, the same module dependency can get pulled into more than one bundle. This doesn't cause a problem for most modules, but some must be treated as singletons.

Examples of such modules are lwc, lwr/navigation, and @lwc/synthetic-shadow. The solution is to put these modules in their own, shareable bundles. In the lwr.config.json file, bundleConfig.exclude excludes the module from bundling when modules are requested. If your application contains additional singleton modules, exclude them from bundling as well: