<aside> ✅ A utility for accelerating development with ScandiPWA

</aside>

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

scandipwa create component HugeTitle

How to install the ScandiPWA CLI?

Install the npm package globally:

npm i -g scandipwa-cli

<aside> ➡️ A VSC plugin for Scandi CLI is also available!

</aside>

How to use the ScandiPWA CLI?

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

Global options:

• -help to get usage help
• -version to print version number and exit

Create a component

Creates a new ScandiPWA component.

How to work with components?

Syntax:

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

Options:

• --container/c creates a container file for the component
• --redux/r connects the component to the Redux store with the connect HOC
• --typescript Should the component be created as a TypeScript file
• name is the name of the component to be created

Examples:

• scandipwa create component HugeTitle

  Output:

  # 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 a route component

Creates a new ScandiPWA route

How to work with Routes?

<aside> ✅ This will just create the route component in the src/route directory. To implement it you must follow the tutorial to implement a new ScandiPWA route.

</aside>

Syntax:

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

Options:

• --container/c creates a container file for the route component
• -redux/r connects the route to the Redux store with the connect HOC
• --typescript Should the component be created as a TypeScript file
• name is the name of the route to be created

Example:

• scandipwa create route MyLandingPage

  Output:

  # 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

Creates a new ScandiPWA Redux store

How to Work with Redux?

Syntax:

scandipwa create store [--dispatcher-type=<"no"|"regular"|"query">] [--typescript] <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
• --typescript Should the store be created with TypeScript files
• name is the name of the store to be created

Example:

• scandipwa create store ---dispatcher-type=query UserPreferences

  Output:

  # 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

Creates a new ScandiPWA query helper for querying with GraphQL.

How to work with queries?

Syntax:

scandipwa create query [--typescript] <name>

• name is the name of the query to be created
• --typescript Should the query be created as a TypeScript file

Example:

• scandipwa create query Weather

  Output:

  # Output:
  NOTE!
  
       The following files have been created:
       src/query/Weather.query.js
  

Deploy

Deploys your app to the cloud

Syntax:

scandipwa 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 create

Creates a new scandiPWA extension

Syntax:

scandipwa 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

Extension install

Installs a ScandiPWA extension

Syntax:

scandipwa 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

Override component

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

Syntax:

scandipwa 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

Overrides a ScandiPWA route

Syntax:

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

Options:

• -styles/S:
• -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

Overrides a ScandiPWA Redux store

Syntax:

scandipwa 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

Overrides a ScandiPWA query helper

Syntax:

scandipwa 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