@rexlabs/plz-cli
Advanced tools
CLI toolkit for frontend web dev at rexlabs, enabling you to:
The latest version of plz comes with webpack 4, babel 7, jest 24 and storybook 5, as well as everything needed to support React 16.8 😊
"Oh geez, another front dev tool" ... wrong!
This is a kit of tools - it says so in the first sentence. It is 💯 gud.
Frontend development is filled to the brim with open source tools like webpack, babel, jest and storybook. As great as they are, they're difficult to configure, don't play nice together, and each new tool introduces learning curves. Boo.
Rather than we all struggling through the pains of configuration setup and maintenance, in each app and package we build @ rexlabs, we invest all that tooling focus into plz. It can sit in front of these tools, with a bunch of sane default configurations and hacks, to then be consistently employed in our projects. Devs are given the opportunity to forget about tooling woes, freeing their minds for better tasks. What a pleasant experience!
create-react-app?CRA, or more specifically react-scripts, is an amazing toolkit and one of the starters of this trend we're now seeing. However, it is (for very good reasons) very opinionated when it comes to the ability to customise it. We needed something a little bit more flexible, since every app after all is different and will have different requirements to certain extends.
Also, we wanted a toolkit that would allow us to build all kinds of projects, not just apps. Since we heavily invest in building centralised components and solutions in form of npm libraries, we were looking for a toolkit that could sit on top of any form of project. This is exactly what plz does 😊
Even though he's not working at rexlabs any more, Lochlan Bunn still deserves a massive shout out here. Not only did he create plz in the first place, he also drove its adaption, explaining the concepts, motivations and benefits to everyone in rexlabs. Without his work this library and the work that we do thanks to it would not be the same 🎉
# Install plz globally to use it for bootstrapping new projects
npm i -g @rexlabs/plz-cli
plz <command> [options]
# ...or use npx
npx @rexlabs/plz-cli <command> [options]
$ plz --help
Commands:
plz build Bundles a project for distribution.
plz clean Removes previously built files.
plz create <name> [root-dir] Generates a new project called <name>
plz serve Starts an dev server for the project.
plz stories Starts a storybook for UI components.
plz test [options] Starts a jest test runner in current
directory.
Options:
-h, --help Show help [boolean]
--no-emoji Strip all emojis from the cli output in the terminal. [boolean]
--report Add memory reporting at the end of each command execution.
[boolean]
--version Show version number [boolean]
Run `plz --help` or `plz <command> --help` to get more info.
Run `DEBUG=plz plz <command> [options]` to get more detailed output for
troubleshooting.
Creates a new project.
$ plz create <name> [root-dir]
Positionals:
name Name of the project, will be used by default for the name of the
generated directory. [string] [required]
root-dir Optional root directory for new project [string]
Options:
-h, --help Show help [boolean]
--version Show version number [boolean]
--project-type, -t Project type, one of: react-app, react-component, module
[default: "react-app"]
--template, --tpl Optional custom URL of template repo to be used for the
project. Templates use handlebars to create directories
and files dynamically.
name
Name of the project, will be used by default for the name of the generated directory. It will also be passed down to the template to be used for the package name, core class names, etc.
project-type
The type of project you want to create. This determines the default template, as well as the default configs and setup for the other commands.
template
By default plz will pick the template, according to the project type, from the src/templates/[type] folder. Optionally you can pass in your own template, either via path (relative to the current working directory), or via git repo. You can also define a sub directory of a repo, by just extending the repo URL with the dir path, e.g.:
plz create new-project --template git@github.com:smith/my-monorepo.git/some/sub-folder
The above will clone git@github.com:smith/my-monorepo.git and then use the sub directory some/sub-folder (relative to the repo's root folder) as the template directory.
Templates are parsed using copy-template-dir, which allows injecting variables via mustache syntax. See below for more details and available variables.
Exclusive to project type
react-app!
Starts webpack dev server for a dev enviroment with good developer experience.
$ plz serve
Options:
-h, --help Show help [boolean]
--version Show version number [boolean]
--port Port for the dev server. [default: 3000]
--host Host for the dev server. [default: "localhost"]
--open-browser Open the server automatically in the default browser once it
is started. [default: true]
port / host
Port and host to be used for the dev server. By default, plz will start the server on http://localhost:3000. If the port is already used, plz will prompt you with the option to use the next available port instead.
open-browser
By default plz will automatically open the dev environment in your default browser once the server is successfully started. If you don't want that, you can disable it via plz serve --open-browser=false.
Creates production bundle of your project.
$ plz build
Options:
-h, --help Show help [boolean]
--version Show version number [boolean]
The output depends on the project type. Modules and React components will be bundled optimised for releasing them as npm libraries, while React apps will be bundled into a public directory optimised for deployment.
⚠️ NOTE: for React apps plz does NOT set the NODE_ENV to production automatically. So when building the app on your server, you would want to run
NODE_ENV=production plz build!
Opens development environment, starting a Storybook dev server. Plz will pick up stories from src/.stories.js by default, you can override this via the storybook.storiesPattern config.
$ plz stories
Options:
-h, --help Show help [boolean]
--version Show version number [boolean]
--port Port for the storybook server. [default: 3001]
--root-dir Directory to search in, for multiple package stories.
[string] [default: "components"]
--output-dir Directory to build & output a static storybook app. [string]
port
Same as with serve, the port for the dev server. Again, plz will prompt you if the port is already in use. Defaults to http://localhost:3001.
root-dir
This option is for monorepo support. If you're maintaining a monorepo with multiple repos that all contain stories (ideally bootstrapped via plz to ensure proper folder structure), you can run plz serve from the root specifying the root dir for all the repos you want plz to look in for stories.
output-dir
If you specify this, instead of booting up the dev server, plz will run build-stories and put the output into the specified output directory. This can be useful e.g. for CI, if you want to create a static build of storybook for you master or PR branches.
Runs jest tests on the project.
$ plz test
Options:
-h, --help Show help [boolean]
--version Show version number [boolean]
--watch Rerun tests when files change. [boolean] [default: false]
Any options will be passed through to jest itself, so you can use everything you already know, e.g. --watch, --coverage, etc.
If you need to troubleshoot issues, you might find the more verbose debug output helpful. To show these, simply run:
DEBUG=plz plz <command> [options]
You can find more info here: https://github.com/visionmedia/debug
Config for the plz 🙏 cli is resolved from established configuration files [like other cli tools][cosmiconfig].
plz property in package.json file.plzrc file (optionally with .json, .yaml, .js extensions).plz.config.js fileThe Javascript versions are especially helpful when overriding the tool configs, as you will want to define a function that receives the proposed config and returns your adjusted version.
{
// Project type, determines how project is bootstraped, built, served, etc.
// One of "react-app", "react-component" and "module"
"projectType": "react-component",
// Build dir, by default "public" for React apps
// For modules and React components its the project root, since they
// will generate multiple bundle dirs (module, lib)
"buildDir": "public",
// If enabled it adds css modules support to the project
// https://github.com/css-modules/css-modules
"cssModules": false,
// When enabled, packages found in node_modules/ that have a package.json
// plz:main field will be compiled & watched with Babel
// This can be especially helpful within monorepos
"runtimeCompilation": false,
// A map of proxy configs
// See "further documentation" for more details
"proxy": {},
// All options for Storybook's runtime
"storybook": {},
// Middleware for babel config
"babel": (config) => config,
// Same for webpack
"webpack": (config) => config
}
For more details about the tool configs see the futher documentation.
.
├── CHANGELOG.md # Automatically generated by lerna!
├── __tests__ # Test files for plz, run via `yarn test(:watch)`
├── package.json
├── readme.md
├── src
│ ├── bin.js # Node binary entry point
│ ├── commands # Commands dir, automatically detected through yargs
│ │ ├── build.js
│ │ ├── clean.js
│ │ ├── create.js
│ │ ├── serve.js
│ │ ├── stories.js
│ │ └── test.js
│ ├── configs # Tooling configs + collection for project types in `project`
│ │ ├── babel
│ │ ├── jest
│ │ ├── project
│ │ ├── storybook
│ │ └── webpack
│ ├── index.js # Entry point for imports
│ └── utils # General util methods
│ ├── argv.js
│ ├── babel.js
│ ├── config.js
│ ├── constants.js
│ ├── deprecate.js
│ ├── fs.js
│ ├── index.js
│ ├── log.js
│ ├── path.js
│ ├── reporting.js
│ └── spinner.js
├── support # Any node helper scripts
└── templates # Default templates for the different project types
├── module
├── react-app
└── react-component
# Watch for changes, rerunning tests
yarn test:watch
# Run watch once
yarn test
# Get test coverage
yarn test --coverage
templates sub section?)stats command, that simply runs webpack-bundle-analyzer public/stats.json public, we already generate the stats on buildFAQs
Toolkit for creating, developing building & testing projects - Vivid Module
The npm package @rexlabs/plz-cli receives a total of 96 weekly downloads. As such, @rexlabs/plz-cli popularity was classified as not popular.
We found that @rexlabs/plz-cli demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 26 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious Maven package typosquatting a popular library is secretly stealing OAuth credentials on the 15th of each month, putting Java developers at risk.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.