Unlock the power of Polymer 3, Web Components and modern web tools.
- 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-reloadand error layer enabled. - Support for PostCSS (with personal configuration) when getting CSS from external files.
httpscertificate generation on the fly for development.- No magic, just using the tools.
More to come...
NOTE: Node.js >= 8.x required.
$ yarn global add polymerx-cliOr with NPM
$ npm install -g polymerx-cliIf 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.
Official templates are available at https://github.com/Polymerx-skeleton-templates
$ polymerx create <template-name> <project-name>IMPORTANT: currently supported only
defaultas template.
Example:
$ polymerx create default my-awesome-project$ 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.
Easy development with hot-reload and "friendly" error layers.
$ 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
Create a production build with (or without) Service Workers.
$ 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]
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.
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.
MIT © LasaleFamine
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent