Get Started

Let's start by using LWR to build a simple static website in your local environment.

Install Node

Install the latest recommended version of Node.js.

Create Your First Project

Use npm to create a project.

  1. In a terminal program, run npm init lwr
  2. For Project name, enter StaticSite.
  3. Accept the generated package name by pressing the Enter key.
  4. For Select a type of project, accept the default, Static Site.
  5. 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.

Static Site output

Deploy to Heroku

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.

Set the LWR Server Modes

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.

MODEStart CommandModule FormatFile WatchBundlingMinification
devyarn devESMβœ…πŸš«πŸš«
prodyarn startESMπŸš«βœ…βœ…
compatyarn start:compatAMDβœ…πŸš«πŸš«
prod-compatyarn start:prod-compatAMDπŸš«βœ…βœ…

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

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

It's Simple to Be Sophisticated

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.

LWR supports the following languages for templating:

Next Steps

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.