Giter Club home page Giter Club logo

shopkeeper's Introduction

[FORK] Shopkeeper

Twitter Followers License

Shopkeeper is a CLI to help manage Shopify stores.

It is built as an oclif plugin to allow seamless integration with the Shopify CLI theme developers use every day.

It helps developers:

  • Manage settings
  • Deploy theme changes

Installation

You can install the CLI globally with:

npm install -g @thebeyondgroup/shopkeeper

Or if your theme has a package.json:

npm add --save-dev @thebeyondgroup/shopkeeper

๐Ÿšจ It is not currently possible to use Shopkeeper as a plugin to the homebrew installation of the Shopify CLI. To use it, you need to install it as a global npm package and use the shopkeeper executable.

tl;dr

Assuming you've set SHOPIFY_CLI_THEME_TOKEN, SHOPIFY_FLAG_STORE, SHOPIFY_FLAG_PATH, or are setting their corresponding flags when calling a command:

To download settings from the live theme:

shopkeeper theme settings download

To switch buckets:

shopkeeper bucket switch --bucket <bucket name>

To deploy directly to the live theme after pulling down the live theme's settings:

shopkeeper theme deploy --strategy basic

For a more complete introduction and walkthrough of how to use Shopkeeper, see guide.

Commands

To learn the full capability of Shopkeeper, see the command docs.

When using it as a standalone, call commands using shopkeeper COMMAND. When using it as a plugin to the Shopify CLI, you can call command using shopify COMMAND.

You can verify Shopkeeper has been correctly installed as a plugin by running shopify commands. If you can see the bucket commands listed, Shopkeeper is installed correctly.

Use npx to run the version local to your project's node_modules.

If the commands are not showing up, reinstall the package. This triggers a postinstall hook that registers Shopkeeper with the Shopify CLI.

Manage Settings

Shopkeeper makes it easy to manage multiple Shopify stores from a single codebase. In particular, it makes it easy to switch between store instances and manage theme settings.

It uses a .shopkeeper folder at the root of your project to store buckets of settings.

๐Ÿง  We refer to groups of settings as "buckets" because the term environment is overloaded in Shopify development. You might have production and staging store instances. These might be referred to as "environments." To add to the confusion, Shopify recently added the ability to specify groups of flags in a shopify.theme.toml file and calls these groups environments.

Therefore, we call our groups of settings buckets. ๐Ÿชฃ

In multi-store, multi-region setups, you might have a directory for each region. Say canada, united-states, or united-kingdom. Or you might use a bucket to contains the settings for an A/B test.

Here we see an example production bucket created from the default installation of Dawn:

.shopkeeper
โ”œโ”€โ”€ production
โ”‚ย ย  โ”œโ”€โ”€ config
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ settings_data.json
โ”‚ย ย  โ”œโ”€โ”€ sections
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ footer-group.json
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ header-group.json
โ”‚ย ย  โ”œโ”€โ”€ templates
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ customers
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ account.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ activate_account.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ addresses.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ login.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ order.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ register.json
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ reset_password.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ 404.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ article.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ blog.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ cart.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ collection.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ list-collections.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ page.contact.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ page.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ password.json
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ product.json
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ search.json
โ”‚ย ย  โ”œโ”€โ”€ .env
โ”‚ย ย  โ””โ”€โ”€ .env.sample
โ””โ”€โ”€ .current-bucket

Each folder contains theme settings stored in their corresponding config, sections, and templates folders. It also contains a .env file that's copied to the project root as .env when the bucket is switched.

Deploy Changes

Shopkeeper supports multiple deployment strategies:

  • Basic
  • Blue/Green

Shopkeeper extends the Shopify CLI theme topic with a deploy command.

Basic Deployment

When you run shopkeeper theme deploy --strategy basic, Shopkeeper will:

  1. Download settings from the live theme
  2. Push code to the live theme
  3. Update the live theme's name to be [HEAD_SHA] Production

โš ๏ธ the default deployment strategy is blue-green, so the --strategy must be set.

Blue/Green Deployment

A blue/green deployment strategy alternates between a blue and a green theme. One theme is live and the other we refer to as on-deck. For example, using this approach, if a the blue ๐Ÿ”ต theme is live, the green ๐ŸŸข theme is on-deck.

When you run shopkeeper theme deploy, Shopkeeper will:

  1. Download settings from the live theme
  2. Push code to the on-deck theme
  3. Rename the on-deck theme to be [<HEAD_SHA>] Production - <color>

Using blue/green deploys requires additional setup. You must specify the theme IDs for the blue and green themes. You can pass these values as flags:

shopkeeper theme deploy --blue 13455343 --green 654321

A better option is to set the flags in the bucket's .env file. Every flag in the Shopify CLI can be set with an environment variable. Shopkeeper follows this pattern:

Flag Use
SKR_FLAG_BLUE_THEME_ID blue theme ID, cannot be name as name will be update
SKR_FLAG_GREEN_THEME_ID green theme ID, cannot be name as name will be update

Using a tool like direnv, you can have your environment variables automatically updated when you switch buckets.

Contribute

If you'd like to contribute to the project, check out the contributors docs to get started.

shopkeeper's People

Contributors

jeffreyguenther avatar dependabot[bot] avatar aleph1ow avatar zileeva avatar grantkang5 avatar pepicrft avatar liqtags avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.