home
clea
CLI tool for AngularJS & Typescript projects
print

Usage

The CLI requires NodeJS >= 6.9.0 and NPM 3 or higher.

clea help
# or
clea help [command]

How to start ?

clea new <app-name> # Generate a new project
cd <app-name>
clea serve # Serve it

Go to http://localhost:8080/. Hot reload is active by default.

UI Framework

Pre-configure a default UI Framework:

clea new <app-name> --ui-framework <type>

Available types:

  • material: for AngularJS Material
  • bootstrap: for Angular UI Bootstrap

Make it Progressive

Generate the basics of a Progressive Web App with the following:

clea new <app-name> --make-it-progressive

Generated files:

  • sw.conf.js: sw-precache and sw-toolbox configuration file.
  • src/app/app.sw.ts: Service Worker registration.
  • src/public/index.html: add metadata for PWA support.
  • src/public/manifest.json: manifest file describing the application.

More details

Serve

Change the host and port to listen to:

clea serve --port 4000 --host 0.0.0.0

Merge or override the webpack configuration:

# Merge with Clea webpack configuration
clea --merge-config webpack.config.js

# Override Clea webpack configuration
clea --override-config webpack.config.js

More details

Mock your API

Easily mock a REST API with JSON Server:

clea serve --api

Options

--api [db] enable the mock API on the specified database JSON file (defaults to: db.json)

--api-custom-routes [config] add custom Express routes if you want something more than just a RESTFul API (defaults to: api.conf.js)

By using the --api option, a proxy is set to the /api URL.

More details

Environments

You can target an environment with the following:

clea serve|build --target=<environment>

Environments mapping is made in the .clea-cli.json file:

environmentSource: "config/config.json",
environments: {
  development: "config/config.dev.json",
  production: "config/config.prod.json"
}

More details

clea cheat sheet

Proxy to Backend

Using the proxy mode of Webpack dev server, it's possible to redirect some URLs to another server.

Create a proxy.conf.json file with the following conf:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

Then launch:

clea serve --proxy-config proxy.conf.json

It will redirect each call to http://localhost:8080/api to the targeted server.

More details

Code analysis

Launch TypeScript & Sass code analysis

clea lint

# Will attempt to fix lint errors
clea lint --fix

More details

Testing

Launch unit tests with Karma & Jasmine

clea test

More details

SonarQube reporter

Use sonar-web-frontend-reporters to generate understandable reporters for SonarQube.

Launch the following command to regenerate reporters under the reports folder:

npm run sonar:reporters

More details

Generate entities

All AngularJS entities are one command away:

clea generate [entity] my-new-entity

# Support relative path
# If you are under the src/app/feature/ folder,
# and launch:
clea generate [entity] my-new-entity
# Your new entity will be generated under the
# src/app/feature/my-new-entity folder

# But, if you are still in the src/app/feature/ folder
# and launch:
clea generate [entity] ../my-newer-entity
# Your entity will be generated in the
# src/app/my-newer-entity folder

Available entities:

# Component
clea generate component my-new-component

# Directive
clea generate directive my-new-directive

# Filter
clea generate filter my-new-filter

# Service
clea generate service my-new-service

# Module
clea generate module my-module

# Lazy load the module in the parent routing file
clea generate module my-module --lazy-load

# Generate a component for the new module
clea generate module my-module --with-component

More details

Build

Compiles the application into an output directory

clea build

Target production environment, generate the doc and the sourcemaps (for debugging purpose).

clea build --target=production --doc --sourcemap