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

License

PolymerX/polymerx-cli

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 3

Uh oh!

Languages

Error
Looks like something went wrong!

Packages