create-lwc-app

A tool for setting up your Lightning Web Components projects.

create-lwc-app

lwc-services

lwc-webpack-plugin

rollup-plugin-lwc-typescript

🔥🔥 Information for migrating from lwc-services 1.x to 2.x or higher 🔥🔥

The new v2 release 🎉 of

create-lwc-app

lwc-services

If you migrate to 3.0.0, please note that this ships out-of-the-box with Webpack 5 and requires node 14 or higher.

🚀 Quick Start

To get up and running execute the following command in a shell/terminal:

npx create-lwc-app your-app-name

To run this you must have Node.js 10+ installed with at least npm 5.2+. You should be familiar with either npm or yarn. The npx tool is a package runner that installs with npm 5.2+.

This will run an npx installation of create-lwc-app, guide you through the short setup, and then create a new Lightning Web Components project for you.

Then run

yarn watch

npm run watch

🎁 Live App

If you want to see Lightning Web Components in action check out https://recipes.lwc.dev.

So what's this tool about?

Technically it's a toolchain that gives you a quickstart experience for developing with Lightning web components. This project consists of two packages:

• create-lwc-app
• lwc-services

It is focused on providing a quick and customizable onboarding experience when you want to develop with Lightning Web Components. If you want to develop Lightning Web Components on the Salesforce Platform you likely want to use Salesforce CLI instead.

If you haven't heard about Lightning Web Components - it's a new framework, introduced by Salesforce, based on the Web Components specifications. Read more about it in the official documentation.

create-lwc-app

Standard vs. Advanced mode

When you run

npx create-lwc-app your-app

With that mode you mostly have to define name, app type (standard or PWA) etc. When you go for the "advanced" mode you can (or have to) select all the different options.

These are the default values that are automatically set when you run "simple" mode:

• App type: standard
• Package manager: npm
• Bundler: Webpack
• Language: JavaScript
• Express API server: no

If you want else you've to go with the advanced mode.

Silent mode

By using new CLI parameters you can skip the whole wizard experience.

• --yes

  - mandatory flag for running the silent installation process

• -t | --t

  - set the app type. Values are

  standard

  |

  pwa

  |

  electron

  , default is

  standard

• -o | --o

  - set the options (if you want to override the defaults). Values are

  rollup|yarn|express|typescript

Examples:

npx create-lwc-app my-cool-app
npx create-lwc-app my-other-app --yes -t pwa -o typescript

lwc-services

create-lwc-app

lwc-services

create-lwc-app

package.json

Configuration

If you want to override certain behavior of

lwc-services

lwc-services.config.js

Commands

• lwc-services build

• lwc-services sniff

• lwc-services test

• lwc-services watch

lwc-services build

Creates a new build

USAGE
  $ lwc-services build

OPTIONS
  -b, --bundler=webpack          [default: webpack] defines the to be used bundler (webpack|rollup)
  -d, --destination=destination  [default: ./dist] defines the directory where the build is stored
  -m, --mode=mode                [default: development] defines the mode for the build (production|development)
  -n, --noclear                  setting this will not re-create the build dir
  -w, --webpack=webpack          location of custom webpack configuration file, which will be merged into the default config
  --webpack-plugin-override      comma separated values containing names of webpack plugins you want to override
EXAMPLES
  lwc-services build
  lwc-services build -d ./public --noclear

lwc-services sniff

Exports configuration information. It's not a full "eject" out of this tool. Yet.

USAGE
  $ lwc-services sniff

OPTIONS
  -d, --directory=directory  (required) exports configuration files to the given directory
  -w, --webpack=webpack      location of custom webpack configuration file
  --webpack-plugin-override  comma separated values containing names of webpack plugins you want to override
EXAMPLE
  lwc-services sniff -d somedirectory

lwc-services test

Runs tests for Lightning Web Components

Runs Jest tests for Lightning Web Components

USAGE
  $ lwc-services test:unit
OPTIONS
  -c, --coverage                 collects a coverage report
  -d, --debug                    runs tests in debug mode (https://jestjs.io/docs/en/troubleshooting)
  -p, --passthrough=passthrough  subsequent command line args are passed through (https://jestjs.io/docs/en/cli)
  -r, --runInBand                runs tests serially (slower, but often needed when running on CI systems)
  -w, --watch                    runs in watch mode and re-runs tests on file changes
EXAMPLES
  lwc-services test:unit
  lwc-services test:unit --coverage
  lwc-services test:unit -w

lwc-services watch

Runs a Lightning Web Components project in watch mode

USAGE
  $ lwc-services watch

OPTIONS
  -b, --bundler=webpack       [default: webpack] defines the to be used bundler (webpack|rollup)
  -i, --host=host             [default: localhost] sets the hostname/IP address
  -m, --mode=mode             [default: development] defines the mode for the build (production|development)
  -o, --open                  opens the site in the default browser
  -p, --port=port             [default: 3001] configures the port of the application
  -w, --webpack=webpack       location of custom webpack configuration file, which will be merged into the default config
  --webpack-plugin-override   comma separated values containing names of webpack plugins you want to override
EXAMPLES
  lwc-services watch
  lwc-services watch -p 3998 -i 192.168.178.12 -m production

🖖 Contribution

If you have great ideas on how to extend this tool - feel free to open new issues, and then PR something in. ;-)

Please read the contribution guideline for that. Thanks!