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.
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|
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.
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.
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
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.