slaty

A Store development toolkit.

Usage no npm install needed!

<script type="module">
  import slaty from 'https://cdn.skypack.dev/slaty';
</script>

README

slaty

A Store development toolkit.


This project is an active work in progress! The CLI is stable, but the theme itself is not.

Want to help? We'd love to have you. Ideas, feedback, critiques 👉 shoot us an Issue.


Install

npm i slaty --save-dev

Table of Contents

Quick Start

The easist way to get started with slaty is slaty init. init outputs a default folder structure into the directory of your choice.

slaty init <root>

Don't forget to install the dependencies.

npm install

You'll need to define one or more themes in the provided slaty.config.js file to deploy to, similar to a standard Store config.yml file.

module.exports = {
  themes: {
    development: {
      id: '12345...',
      password: 'abcde...',
      store: 'store-name.mystore.com',
      ignore: [
        'settings_data.json'
      ]
    }
  }
}

Then, from the project root:

slaty watch

And that's it! slaty will watch your local theme for changes and sync them to your remote site when they update 🎉.

Usage

slaty makes some assumptions out of the box, but it can be easily customized to fit most existing projects.

Themes

slaty projects require themes to be defined in the slaty.config.js.

By default it looks for a theme called development:

module.exports = {
  themes: {
    development: { ... }
  }
}

You can call it whatever you want though.

module.exports = {
  themes: {
    dev: { ... }
  }
}

Just be sure to specify your theme name on the CLI:

slaty build --theme dev

You can also define as many themes as you like. Use these for a production theme, staging, or whatever you like.

module.exports = {
  themes: {
    dev: { ... },
    test: { ... },
    live: { ... }
  }
}

Assets

slaty uses Webpack internally to compile a single JavaScript entry point. By default, it looks for /src/scripts/index.js.

You can specify a different entry point using the assets object on your config:

module.exports = {
  assets: {
    entry: ['/source/scripts/index.js','/source/styles/index.scss']
  }
}

Alias & Env

To make your JavaScript a little easier to work with, slaty supports alias definitions and environment variables.

module.exports = {
  alias: {
    components: './src/scripts/components'
  },
  env: {
    API_KEY: 'abcde...'
  }
}

Which you can then use in your JavaScript like this:

import api from 'components/api.js'

const fetcher = api({
  key: API_KEY
})

For convenience, there's also a built-in alias @ that points to the directory containing your JavaScript entry point.

Keep in mind, these environment variables are public, so don't use them for any secret keys, passwords, or any value that you need to keep private!

Command Line

watch

Watches for file changes and syncs updates to your specified theme.

slaty watch

build

Compiles assets and copies all files from the config.in directory to the config.out directory.

slaty build

sync

Sync local files or directories to your remote theme. A direct interface to [@slaty/sync], which @slaty/cli uses internally.

slaty sync build/snippets/hero.liquid # file
slaty sync build/snippets # directory
slaty sync # defaults to config.out

Options

Any of the core commands can be combined with the following options:

  • --config <path> - specify the path to your config file
  • --theme <name> - specify a named theme from your config file

Deployment

To deploy a theme, combine the above commands as needed:

slaty build && slaty sync --theme production

Live-reloading & HTTPS

slaty uses an local SSL certification to correspond with Store's HTTPS hosted themes. To take advantage of live-reloading, you need to create a security exception for the slaty cert (this is safe). To do this, load https://localhost:3000 in your browser, and follow the instructions for adding an exception. If it works, you should see this in your browser window:

slaty running

License

MIT License ©