ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • πŸš€Quick-start Guide
  • πŸ—ΊοΈRoadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • Installation
  • Usage
  • create component
  • create route
  • create store
  • create query
  • deploy
  • extension install
  • extension create
  • override component
  • override route
  • override store
  • override query

Was this helpful?

  1. Developing with Scandi
  2. Developer Tools

ScandiPWA CLI

A utility for accelerating development with Scandi

PreviousDebugging in VSCodeNextConfiguring ESLint

Last updated 4 years ago

Was this helpful?

Example – with one command, create a component template in src/component/HugeTitle:

scandipwa create component HugeTitle

A is also available!

Installation

Install the npm package globally:

npm i -g scandipwa-cli

Usage

The CLI must be run from the the Scandi theme directory or a subdirectory.

Global options:

  • --help to get usage help

  • --version to print version number and exit

create component

Creates a new

Syntax:

create component [--container] [--redux] <name>

Options:

  • --container/-c creates a container file for the component

  • --redux/-r connects the component to the Redux store with the connect HOC

  • name is the name of the component to be created

Examples:

scandipwa create component HugeTitle
# Output:
NOTE!

     The following files have been created:
     src/component/HugeTitle/HugeTitle.component.js
     src/component/HugeTitle/HugeTitle.style.scss
     src/component/HugeTitle/index.js
scandipwa create component --container SpecialHeader
# Output:
NOTE!

     The following files have been created:
     src/component/SpecialHeader/SpecialHeader.component.js
     src/component/SpecialHeader/SpecialHeader.style.scss
     src/component/SpecialHeader/index.js
     src/component/SpecialHeader/SpecialHeader.container.js

create route

Syntax:

create route [--container] [--redux] <name>

Options:

  • --container/-c creates a container file for the route

  • --redux/-r connects the route to the Redux store with the connect HOC

  • name is the name of the route to be created

Example:

scandipwa create route MyLandingPage
# Output:
NOTE!

     The following files have been created:
     src/route/MyLandingPage/MyLandingPage.component.js
     src/route/MyLandingPage/MyLandingPage.style.scss
     src/route/MyLandingPage/index.js

create store

Syntax:

create store [--dispatcher-type=<"no"|"regular"|"query">] <name>

Options:

  • --dispatcher-type/-d determines what type of dispatcher file will be created.

    • no (default) - does not create a dispatcher

    • regular - creates a simple helper class for dispatching actions

    • query - creates a dispatcher that extends QueryDispatcher

  • name is the name of the store to be created

Example:

scandipwa create store --d=query UserPreferences
# Output:
NOTE!

     The following files have been created:
     src/store/UserPreferences/UserPreferences.action.js
     src/store/UserPreferences/UserPreferences.dispatcher.js
     src/store/UserPreferences/UserPreferences.reducer.js

create query

Syntax:

create query <name>

name is the name of the query to be created

Example:

scandipwa create query Weather
# Output:
NOTE!

     The following files have been created:
     src/query/Weather.query.js

deploy

Deploys your app to the cloud

Syntax:

deploy

Example

 scandipwa deploy
yarn run v1.22.5
$ scandipwa-scripts build
Creating an optimized production build...
Build completed in 186.317s

Compiled successfully.
[...]
Done in 189.38s.
Build files compressed successfully.
Code upload result: OK. Code: 200
Build archive successfully removed.
Congrats, your code will be deployed in a few minutes! You can access it here: https://master.d16zgbgmy9fzgx.amplifyapp.com/

extension install

Installs a Scandi extension

Syntax:

extension install [--no-enable] [--local] [--use=<path>] [--version=<required-version>] [--save-dev] <name>

Options:

  • --no-enable will install the extension without enabling it

  • --local/-l: use a local module from packages/<name>

  • --use/-u: use a local module from the specified <path>

  • --version/-v specifies the extension version to use

  • save-dev/-D: install the package as a devDependency

  • name is the name of the extension to install

extension create

Creates a new scandi extension

Syntax:

extension create [--no-enable] <name>

Options:

  • --no-enable will create and install the extension without enabling it

  • name specifies the name of the new extension

override component

Syntax:

override component [--styles=<"extend"|"override"|"keep">] [--source-module=<module>] [--target-module=<module>] <name>

Options:

  • --styles/-S:

    • Not specified (default): will prompt interactively

    • keep: don't override styles

    • extend: adjust existing styles

    • override: completely replace existing styles

  • --source-module/-s: Path to the module to override the component from

  • --target-module/-t: Path to the module to generate the component in

  • name is the name of the component to be overridden

Example:

scandipwa override component Header
? Choose things to extend in Header.component.js Header
? What would you like to do with styles? Extend
? Choose things to extend in Header.config.js 
? Choose things to extend in Header.container.js 

NOTE!

     The following files have been created:
     src/component/Header/Header.override.style.scss
     src/component/Header/Header.component.js

override route

Syntax:

override route [--styles=<"extend"|"override"|"keep">] [--source-module=<module>] [--target-module=<module>] <name>

Options:

  • --styles/-S:

    • Not specified (default): will prompt interactively

    • keep: don't override styles

    • extend: adjust existing styles

    • override: completely replace existing styles

  • --source-module/-s: Path to the module to override the route from

  • --target-module/-t: Path to the module to generate the route in

  • name is the name of the route to be overridden

override store

Syntax:

override store [--source-module=<module>] [--target-module=<module>] <name>

Options:

  • --source-module/-s: Path to the module to override the store from

  • --target-module/-t: Path to the module to generate the store in

  • name is the name of the store to be overridden

override query

Syntax:

override query [--source-module=<module>] [--target-module=<module>] <name>

Options:

  • --source-module/-s: Path to the module to override the query from

  • --target-module/-t: Path to the module to generate the query in

  • name is the name of the query to be overridden

Creates a new

Creates a new

Creates a new for querying with GraphQL

Overrides a . Will interactively ask for which parts to override.

Overrides a

Overrides a

Overrides a

VSC plugin for Scandi CLI
Scandi component
Scandi route
Scandi Redux store
Scandi query helper
Scandi component
Scandi route
Scandi Redux store
Scandi query helper