@backpackjs/cli v1.6.5

Backpackjs CLI

Backpack CLI is a NodeJs command line interface responsible for initializing a backpack storefront.

Commands

• backpack build: initializes a storefront build
• backpack dev: initializes storefront in local development mode on port 8080. http://localhost:8080

Overview

backpack dev|build are executed every time that an npm script such as yarn build or yarn dev is run. At its core, the backpack cli command is responsible for orchestrating all storefront's init lifecycle modules.

Storefront Init Lifecycle

The storefront initialization lifecycle is comprised of the following steps:

1. 🌎 Getting or setting the CMS environment branch that will act as content source for the build (CMS_ENV).
2. 🛫 Validating all required storefront env vars are present.
3. 🔄 Synchronizing Shopify products and collections.
4. 🚸 Creating redirects.
5. 🔎 Creating fuse search indexes for all articles, blogs, pages, products and collections.
6. 🛍 Creating an xml products feed.
7. 🕸 Creating the sitemap.
8. 🗿 Generating metas, styles, fonts and scripts <head/> tags.
9. 🎒 Initializing nextjs with backpack's custom nextjs plugin.
10. 🎒 Passing the active CMS env branch CMS_ENV into nextjs. i.e Executing nextjs as:
    • CMS_ENV=main next dev - When executing yarn dev within git's main branch
    • CMS_ENV=staging next build - When executing yarn build within git's staging branch
    • CMS_ENV=my-feature next dev - When executing yarn dev within git's my-feature branch
    • or any other combination...

Storefront init config

Each storefront's init sequence can be customized by adding a backpack.init.js config file at the root of the project. If no config is provided, the storefront will fallback to its default init configuration file.

Here is a list of all available settings:

backpack.init.js (default)

export const config = {
  verbose: false,

  dev: {
    port: 8080,
  },

  cms: {
    enabled: true,
    create: true,
    delete: true,
    forceEnv: false,
    maxBranches: 7,
    customizeToolbar: true,
    branchSwitching: true,
    publishing: true,
    drafting: true,
    verbose: false,
  },

  preflight: {
    enabled: true,
    validateEnVars: true,
    verbose: false,
  },

  sync: {
    enabled: true,
    resolveFirst: 12, // Todo: Doc internal - 0 resolves all products with "Product Item" versions
    verbose: false,
  },

  redirects: {
    enabled: true,
    verbose: false,
  },

  search: {
    enabled: true,
    indexes: ['pages', 'blogs', 'articles', 'products', 'collections'],
    verbose: false,
  },

  feed: {
    enabled: true,
    verbose: false,
  },

  sitemap: {
    enabled: true,
    verbose: false,
  },

  head: {
    enabled: true,
    verbose: false,
  },

  next: {
    enabled: true,
    customEnvVars: null,
    verbose: false,
  },
};

🧑🏽‍💻 Cli options

🧑🏽‍💻 Dev options

🌎 CMS env options

CMS init with default values on a "config-docs" branch

CMS init with verbose enabled on a "config-docs" branch

🛫 Pre-flight options

🔄 Sync options (initialization)

For additional runtime sync options see @backpackjs/sync configuration backpack.sync.default.js

🚸 Redirects options (initialization)

Redirects can be create via the backpack admin

For additional information on redirects see @backpackjs/build-scripts

🔎 Search options (initialization)

For additional information on search indexes see @backpackjs/build-scripts

🛍 Products Feed options (initialization)

For additional runtime product feeds options see @backpackjs/products-feed configuration file backpack.feed.js

🕸 Sitemap options (initialization)

For additional runtime sitemap options see @backpackjs/sitemap configuration file backpack.sitemap.js

🗿 Head options (initialization)

For additional runtime head options see @backpackjs/head configuration file backpack.head.js

🎒 Next options (initialization) todo

For additional runtime backpack nextjs options see @backpackjs/nextjs-backpack configuration backpack.next.js