0.0.7 • Published 6 years ago

@appaya/cli v0.0.7

Weekly downloads
-
License
ISC
Repository
github
Last release
6 years ago

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:

CommandFileReference
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:

CommandDescription
appaya behavior "My Custom"Create new class, which extends Behavior
appaya behavior "My Custom" AjaxFormBehaviorCreate new class, which extends AjaxFormBehavior

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

Args for appaya page:

CommandPageWordpress template
appaya page "My Custom"page-my-custom.twigtemplate-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.

NameDescription
lp-boilerplateUsed when creating LP.
timber-themeStarting template for wordpress. Based on Timber,

Configuration

Everything is located in appaya-cli.json file.

TypeDescription
nameProject name (Generated when creating project)
typeProject type (Generated when creating project)
slugSlug (Generated when creating project)
TBDlorem 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