Package Exports

@leanup/cli/babel.config
@leanup/cli/lib/common-cli
@leanup/cli/lib/webpack.config
@leanup/cli/postcss.config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@leanup/cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

LEAN⭧up (CLI)

@leanup/cli shows how much is really required to develop, test and build a realisitic sized JavaScript web application.

LEAN⭧up (CLI)
- Motivation
- Tools and technologies
- Principles
- Arguments
  - Pro
  - Contra
- Demo
- Installation
- Features
- Structure
  - Extensions
    - Frameworks
    - Addons
    - Thinks
- Usage
  - Command-Line-Interface (CLI)
    - Help
    - Create
    - Developing
    - Building
    - Unit-Testing
    - Test-Coverage
    - E2E-Testing
    - Formatter
    - Linter
  - Scripts (NPM)
- Replaced environment variables
- Dependencies
- Peer dependencies
- Optional tools

Motivation

Learnability
Controllability
Universality
Flexibility
Scalability
Durability
Transparency

Tools and technologies

We use all tools and technologies without cluttered facades.

Principles

convention over configuration
pure commands under the hood
don't repeat yourself
following the generic instead of the influenced way
keep the dependencies always up to date

Arguments

The arguments for and against this concept are documented here:

Pro

select only one pure and popular tool for each use case (e.g. bundling, unit-test)
there are extensible configuration files for each tool
the CLI bundles all the necessary tools in a portable/scalable way
the risk to get vulnerabilites in dependencies is lower

Contra

please give feedback

please show us your perspective

Demo

There are some working examples:

Installation

npm install @leanup/cli typescript --save-dev and npm audit fix

Install the peer dependencies chromedriver, geckodriver, graphql, selenium-server or typescript in the required version, if you need that feature.

npm install chromedriver --save-dev
npm install geckodriver --save-dev
npm install graphql --save-dev
npm install selenium-server--save-dev
npm install typescript --save-dev

Features

Tool/Technology	Description	Status	Note
Babel	Transpiler	✔️	ready
Webpack	Bundler	✔️	ready
TypeScript	Language	✔️	ready
Mocha	Unit-Test-Runner	✔️	ready
Chai	Assertion	✔️	ready
Sinon	Mocking	✔️	ready
NYC	Code-Coverage	✔️	ready
ESLint	Code-Checker	✔️	ready
Nightwatch.js	E2E-Test-Runner	✔️	ready
Allsure	Report	✔️	ready
Cucumber	BDD	✔️	ready
robotframework	BDD	⌛	will be evaluated
Storybook	Documentation	⌛	upcoming
GraphQL	API	✔️	ready
Workbox	PWA	✔️	ready
Lerna	Mono-Repo	✔️	ready
Ant-Design	Material Design	✔️	proved
Material	Material Design	✔️	proved
Bootstrap	Material Design	✔️	proved
Less	CSS	✔️	proved
Sass	CSS	✔️	proved
Webhint	Webhint	✔️	moved ***
TestCafe	E2E-Test-Runner	⌛	will be evaluated ****
TSLint	Code-Checker	❌	removed **
Cypress	E2E-Test-Runner	❌	excluded *

* Arguments agains Cypress:

reinvent wheel

detect css selectors

BDD test syntax

principals

large tooling

a lot of binaries

many dependencies

ci integration vs selenium hub

It is difficult to keep focus with Cypress as it is more a nice tool than an effective tool. It is expected that a lot of time will be invested to justify the requirements of a project.

** TSLint is deprecated.

*** Webhint is not practical for the development of components, since component tags often have no relation to standard HTML. In addition, the webhint package alone is over 100 MB in size. I have good by using a IDE webhint plugin, like VSCode webhint.

**** TestCafe The idea that defined TestCafe architecture was that you don't really need an external driver to run end-to-end tests in the browser. That's interesting.

Structure

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

@leanup/cli ✔️

Extensions

Frameworks

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

The selection of the following frameworks depends in parts on the following references:

Currently the following framework extensions are available:

Addons

A separate package contains some nice but not required addons for webpack.

Thinks

There a separate packages for important application features.

Usage

Command-Line-Interface (CLI)

If the CLI is also installed globally with npm install -g @leanup/cli, you can use the command lean directly in the bash.

If not, you must use npx and put it before the command. Like this: npx lean

Help

> lean -h (or npx lean -h)

Create

> lean create -h (or npx lean create -h)

Developing

> lean serve -h (or npx lean serve -h)

Building

> lean build -h (or npx lean build -h)

Unit-Testing

> lean test -h (or npx lean test -h)

Test-Coverage

> lean coverage -h (or npx lean coverage -h)

E2E-Testing

> lean e2e -h (or npx lean e2e -h)

Formatter

> lean format -h (or npx lean format -h)

Linter

> lean lint -h (or npx lean lint -h)

Scripts (NPM)

The following script commands are exactly the same executions that the CLI has under the hood.

Use this scripts in your package.json:

...
  scripts {
    "build": "webpack --colors --config=node_modules/@leanup/cli/webpack.config.js --mode=production",
    "coverage": "cross-env NODE_ENV=test nyc mocha --config=node_modules/@leanup/cli/.mocharc.js && nyc check-coverage",
    "e2e": "nightwatch --config=node_modules/@leanup/cli/nightwatch.conf",
    "format": "prettier \"src/**/*\"",
    "lint": "tslint \"src/**/*.ts*\"",
    "serve": "webpack-dev-server --colors --config=node_modules/@leanup/cli/webpack.config.js --devtool=source-map --progress",
    "test": "cross-env NODE_ENV=test mocha --config=node_modules/@leanup/cli/.mocharc.js"
  }
...

Developing: npm run serve -- [options]
Building: npm run serve -- [options]
Unit-Testing: npm run test -- [options]
Coverage: npm run coverage
E2E-Testing: npm run e2e -- [options]
Formatter: npm run format -- [options]
Linter: npm run lint -- [options]

Replaced environment variables

The following variable names are replaced by the values from package.json file in the bundle:

Name	Description
APP_AUTHER	The value of the `author` attribute from the package.json file.
APP_HOMEPAGE	The value of the `homepage` attribute from the package.json file.
APP_NAME	The value of the `name` attribute from the package.json file.
APP_VERSION	The value of the `version` attribute from the package.json file.

For example:

package.json:

{
  "name": "@scope/my-app",
  "version": "1.1.0",
  "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
  "author": "Martin Oppitz <npmjs@martinoppitz.com>",
  "homepage": "https://github.com/martinoppitz/leanup#readme",
  ...

App code:

const APP_METADATA = {
  author: 'APP_AUTHER',
  homepage: 'APP_HOMEPAGE',
  name: 'APP_NAME',
  version: 'APP_VERSION',
  environment: 'NODE_ENV', // development | test | production ⌛
};
console.log(APP_METADATA);

Dependencies

Package	Size	Vulnerabilities
@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/preset-env
@babel/preset-typescript
@leanup/cli-core-e2e
@leanup/cli-core-format
@leanup/cli-core-lint
@leanup/cli-core-test
@types/node
autoprefixer
babel-loader
chalk
commander
copy-webpack-plugin
css-loader
file-loader
html-webpack-plugin
less
less-loader
mini-css-extract-plugin
postcss-loader
sass
sass-loader
string-replace-loader
style-loader
webpack
webpack-cli
webpack-dev-server

Peer dependencies

Package	Size	Vulnerabilities
chromedriver
geckodriver
graphql
selenium-server
typescript

Optional tools

Package	Size	Vulnerabilities
@leanup/git-hooks
allure-commandline
lerna
workbox-cli