PolymerX CLI

Unlock the power of Polymer 3, Web Components and modern web tools.

Features

• Generate a Polymer Skeleton for your next project in 30 seconds.
• Build using Webpack 4 under the hood producing Service Worker with WorkboxJs.
• Develop with ease with hot-reload and error layer enabled.
• Support for PostCSS (with personal configuration) when getting CSS from external files.
• https certificate generation on the fly for development.
• No magic, just using the tools.

More to come...

Install

NOTE: Node.js >= 8.x required.

$ yarn global add polymerx-cli

Or with NPM

$ npm install -g polymerx-cli

Switch from polymer-cli and pwa-starter-kit

If you want to change your builder from the official polymer-cli for pwa-starter-kit to our polymerx-cli you need to make sure your imports are correctly declared without relative path.

Also, you need to make sure your chunksSortMode is set to none for the HtmlWebpackPlugin because a known bug html-webpack-plugin#870.

Create a polymerx.config.js and add the following code:

export default function (config, env, helpers) {
  let { plugin } = helpers.getPluginsByName(config, "HtmlWebpackPlugin")[0];
  plugin.options.chunksSortMode = 'none'
}

Refer to polymerx-cli#179 for more info about the topic.

Templates

Official templates are available at https://github.com/Polymerx-skeleton-templates

Usage

$ polymerx create <template-name> <project-name>

IMPORTANT: currently supported only default as template.

Example:

$ polymerx create default my-awesome-project

CLI commands

⚙️ polymerx create

$ polymerx create --help

  --version   Show version number                                      [boolean]
  --cwd       A directory to use instead of $PWD.                                [default: "."]
  --name      The application's name
  --author    Author of the app                                                  [default: null]
  --force     Force option to create the directory for the new app               [default: false]
  --yarn      Use 'yarn' instead of 'npm'                              [boolean] [default: false]
  --git       Initialize version control using git                     [boolean] [default: false]
  --https     Use HTTPS?                                               [boolean] [default: false]
  --install   Install dependencies                                     [boolean] [default: true]

NOTE: the required data will be asked if not specified.

🕶 polymerx watch

Easy development with hot-reload and "friendly" error layers.

IMPORTANT: postcss configuration file must be present.

$ polymerx watch --help

  --cwd           A directory to use instead of $PWD.              [string]   [default: .]
  --src           Entry file (index.js)                            [string]   [default: "src"]
  --config, -c    Path to custom polymerx.config.js.           [string]   [default: null]
  --port, -p      Port to start a server on                        [string]   [default: "8080"]
  --host,         Hostname to start a server on                    [string]   [default: "0.0.0.0"]

NOTE: You can run the dev server on a different port using PORT=8091 polymerx watch

📦 polymerx build

Create a production build with (or without) Service Workers.

IMPORTANT: postcss configuration file must be present.

$ polymerx build --help

  --cwd             A directory to use instead of $PWD.          [string]   [default: .]
  --src             Entry file (index.js).                       [string]   [default: "src"]
  --dest            Directory root for output.                   [string]   [default: "dist"]
  --config, -c      Path to custom polymerx.config.js.           [string]   [default: null]
  --workers, -w     Add a service worker to application.         [boolean]  [default: true]
  --clean           Clear output directory before building.      [boolean]  [default: true]

Custom Configuration

Webpack

For customizing your webpack configuration create a polymerx.config.js what will exports a function like this:

/**
 * Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 *
 * @param {object} config - original webpack config.
 * @param {object} env - options passed to CLI.
 * @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
 **/
export default function (config, env, helpers) {
  /** you can change config here **/
}

Since we are using the WebpackConfigHelpers by preact-cli you can checkout also their awesome Wiki to get more info about the helper.

About this tool

This CLI is heavily inspired by the awesome preact-cli and aims to became a stable tool for developing Polymer 3 PWA easily and with modern web tools.

License

MIT © LasaleFamine