<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