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.