Quick Start: LWR on Node.js
Let's start by using LWR to build a simple static website in your local environment.
Install the latest recommended version of Node.js.
Use npm to create a project.
If you previously installed create-lwr globally, first uninstall the package by running npm uninstall -g create-lwr or yarn global remove create-lwr, then complete the following steps. For more information about this package, see npm: create-lwr.
- In a terminal program, run
npm init lwr@latest - For Project name, enter StaticSite.
- Accept the generated package name by pressing the Enter key.
- For Select a type of project, accept the default, Static Site.
- For Select a variant, accept the default, Markdown Static Site.
You've created your first project!
Now, use these commands to run the site on your localhost:
The site is now live in your browser on your localhost.
Are you a Heroku developer? Now that you have your static site up and running, deploying to Heroku is a breeze. Heroku uses the preset start script in your project's package.json file, and LWR serves the app on Heroku in the same way as it does locally. See Deploying with Git or the Deployment category in the Heroku Dev Center for more deployment options.
If you're getting the idea that LWR projects are standard npm packages, you're right. You can use commands with LWR from typical package manager toolchains such as npm or Yarn.
If you run into errors or have a stale project, try the command yarn clean. It removes the build directory and file cache.
For example, using Yarn, you can run your LWR application in several different modes.
| MODE | Start Command | Module Format | File Watch | Bundling | Minification |
|---|---|---|---|---|---|
| dev | yarn dev | ESM | ✅ | 🚫 | 🚫 |
| prod | yarn start | ESM | 🚫 | ✅ | ✅ |
| compat | yarn dev --mode compat | AMD | ✅ | 🚫 | 🚫 |
| prod-compat | yarn start --mode prod-compat | AMD | 🚫 | ✅ | ✅ |
dev
Running LWR in dev mode uses hot module reloading for easier debugging, so when you change a component in one place it updates immediately. In dev mode, the server registers all file paths and watches them individually.
prod
When you run in prod mode, LWR bundles modules before sending them to the client. This bundling reduces the number of HTTP requests to the server.
compat
By default, the LWR server formats modules in the ECMAScript format or “ESM”. However, some browsers don't support ESM semantics. When you run your application in compat mode, LWR uses a custom module loader, and the modules are formatted as AMD-compliant JavaScript resources.
prod-compat
A production version of compatibility mode. For prod-compat, as with prod mode, LWR uses bundling and minification for efficiency. And, as in compat mode, modules are formatted as AMD-compliant resources. |
LWR is built with customization and extensibility in mind. You can use LWR for everything from static sites to SPAs (single page applications).
Ready to get going? Before we move on, let's review some of the key files in the static site project you just built and their capabilities:
lwr.config.json: With this file you have a variety of options for project configuration, including routing, directory locations, and server configuration. Find out more in Configure Your LWR Project.package.json: Here you can add dependencies to your project or customize LWR’s module support. Check out Configure Packages and Modules for more details.src/layouts/main_layout.njk: The scaffolding for your static site contains a website layout using the Nunjucks templating language. Learn about LWR layouts and templating.src/content: The site is using Markdown syntax for the content templates for the Home and About pages. Markdown is easy and fast to use and read, and there are many resources and cheatsheets available. Learn more about content templates in LWR.
We hope that your static site gives you a glimpse of the simplicity and flexibility of LWR. Want to do more? You can start by reading up on LWR content and layout templates and routing.