LWC-TS Boilerplate Example
The LWC TS Boilerplate example contains the minimum code needed to get a simple Single Page Application (SPA) on LWR running in Typescript.
Project Setup
The directory structure looks like this:
scripts/
└── start-server.mjs // create and start server
src/
├── assets/ // static assets
│ └── recipes-logo.png
└── modules/ // lwc modules
└── example/
└── app/
├── app.css
├── app.html
└── app.ts
lwr.config.json // lwr configuration
package.json // npm packaging configuration
Configuration
The LWR server is configured in lwr.config.json
, at the root of the project. The LWC TS Boilerplate example has one LWC module and one server-side route.
// lwr.config.json
{
"lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
"routes": [
{
"id": "example",
"path": "/",
"rootComponent": "example/app"
}
]
}
Running the Project
yarn install
yarn build
yarn start # prod mode and ESM format
Open the site at http://localhost:3000
To start the project in a different mode:
- dev:
yarn dev
- compat:
yarn start:compat
- prod-compat:
yarn start:prod-compat