@appaya/cli

CLI that's help to work with Appaya products.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 25, 2018Jul 28, 2018Minified + gzip package size for @appaya/cli in KB

Readme

Appaya CLI

Appaya CLI is a tool that connects all products of Appaya. Making work easier by creating projects faster, starting developer server and building project.

Instalation

npm install -g @appaya/cli@latest

Updating Appaya CLI

npm uninstall -g @appaya/cli
npm cache verify
npm install -g @appaya/cli@latest

Usage

appaya --help

Creating new project

appaya new

This command will walk you throught installation process, asking for type of project, name etc.

More about project types. Project Types

Note: Project will be created in current directory, it must be empty.

Serving a project

appaya serve

Build a project

appaya build

Watching a project

appaya watch

File generation

Appaya CLI has basic functions generating .scss, .ts etc.

# will create style files based on all *.html/*.twig files
appaya style-builder

# will create '_my-component.scss', in 'components' folder.
# also adding import in '__components.scss'
appaya style component "My Component"

# will create 'my-custom.behavior.ts' in `behaviors` folder,
# with class that extends 'AjaxFormBehavior'
# also adding class to 'Behaviors' list.
appaya behavior "My Custom" AjaxFormBehavior

# will create `page-custom.twig` with initial code.
# also `template-custom.php` responsible for creating wordpress `template` 
appaya page "Custom"

Appaya CLI will add reference for each file created

Args for appaya style:

Command File Reference
appaya style component "My Component" _my-component.scss __components.scss
appaya style object "My Object" _my-object.scss __objects.scss
appaya style page "My Page" _my-page.scss __pages.scss
appaya style util "My Util" _my-component.scss __utils.scss

Note: More about styles you can find here [todo]

Args for appaya behavior:

Command Description
appaya behavior "My Custom" Create new class, which extends Behavior
appaya behavior "My Custom" AjaxFormBehavior Create new class, which extends AjaxFormBehavior

Note: More about Appaya Behaviors you can find here: [todo]

Args for appaya page:

Command Page Wordpress template
appaya page "My Custom" page-my-custom.twig template-my-custom.php

Note: Only avalible for timber-themeproject.

Example appaya style-builder usage:

With ./src/index.html file

// ...
  <main class="p-index__main">
    <h1 class="o-heading">My heading</h1>
    <form action="#" class="c-form">
      <div class="c-form__group">
        // ...
      </div>
      <div class="c-form__group">
        // ...
      </div>
      <div class="c-form__group">
        // ...
      </div>
      <button class="o-btn">Send</button>
    </form>
  </main>
// ...

appaya style-builder will output:

'_form.scss' file created in './src/styles/components'
'.c-form' added in './src/styles/components/_form.scss'
'.c-form__group' added in './src/styles/components/_form.scss'
'_heading.scss' file created in './src/styles/objects'
'.o-heading' added in './src/styles/objects/_heading.scss'
'_btn.scss' file created in './src/styles/objects'
'.o-btn' added in './src/styles/objects/_btn.scss'
'_index.scss' file created in './src/styles/pages'
'.p-index__main' added in './src/styles/pages/_index.scss'

Project types

There are two types are avalible for now.

Name Description
lp-boilerplate Used when creating LP.
timber-theme Starting template for wordpress. Based on Timber,

Configuration

Everything is located in appaya-cli.json file.

Type Description
name Project name (Generated when creating project)
type Project type (Generated when creating project)
slug Slug (Generated when creating project)
TBD lorem ipsum

Dependencies

Appaya CLI uses a lot of dependencies, to make work efficiently. Below are most important ones.

  1. Webpack(-serve, -command)
  2. Typescript
  3. Sass
  4. BrowserSync
  5. Appaya Behaviors

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.