Quickstart command line interface for scaffolding your Lightning Web Components projects
A tool for setting up your Lightning Web Components projects.
The new v2 release 🎉 of
create-lwc-app/
lwc-servicesbrought some breaking changes. Please read here in the wiki what as changed, and how to adept the changes.
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.
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(or
npm run watchdepending on what you chose during the npx installation). Done!
If you want to see Lightning Web Components in action check out https://recipes.lwc.dev.
Technically it's a toolchain that gives you a quickstart experience for developing with Lightning web components. This project consists of two packages:
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.
When you run
npx create-lwc-app your-appthe wizard will ask you if you want to run in simple mode (default).
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:
If you want else you've to go with the advanced 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
create-lwc-appis meant to be a one-stop-shop solution. The created project contains everything you need to get started. It adds the dev dependency
lwc-services. Find below the list of all the things that are bundled with it. When you create a project with
create-lwc-appa number of predefined scripts also get added to your
package.json.
If you want to override certain behavior of
lwc-servicesyou can place an
lwc-services.config.jsfile into the root of your app directory. Checkout the example file for possible configuration parameters and values.
lwc-services build
Creates a new build
USAGE $ lwc-services buildOPTIONS -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
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 sniffOPTIONS -d, --directory=directory (required) exports configuration files to the given directory -w, --webpack=webpack location of custom webpack configuration file
EXAMPLE lwc-services sniff -d somedirectory
lwc-services test
Runs tests for Lightning Web Components
Runs Jest tests for Lightning Web ComponentsUSAGE $ 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 watchOPTIONS -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
EXAMPLES lwc-services watch lwc-services watch -p 3998 -i 192.168.178.12 -m production
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!