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.
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
- It tells LWR how to route to some pages.
This isn't all you can do with this 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 Routing in LWR page.
Configure the Port and Server
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
Configure Directory Locations
You can configure a variety of directory locations in your
rootDir: The root directory of the LWR project. The default is the current working directory (
contentDir: The content templates directory. The default is
layoutsDir: The layout templates directory. The default is
globalDataDir: The directory of global data for templating. The default is
assets: You can configure one or more files or directories to serve static assets. For each file or directory, include these properties:
alias: A name for this path to use in content or layout templates.
file: The file system path containing the asset.
urlPath: The URI path serving the asset.
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/synthetic-shadow. The solution is to put these modules in their own, shareable bundles. In the
bundleConfig.exclude excludes the module from bundling when modules are requested: