https://github.com/the-couch/slater-cli

Shopify theme development toolkit.
https://github.com/the-couch/slater-cli

Last synced: 4 days ago
JSON representation

Shopify theme development toolkit.

• Host: GitHub
• URL: https://github.com/the-couch/slater-cli
• Owner: the-couch
• Created: 2017-09-09T17:02:52.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-20T20:22:02.000Z (almost 6 years ago)
• Last Synced: 2024-08-01T22:46:11.559Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 487 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @slater/cli

Shopify theme development toolkit.

```

npm i @slater/cli --save-dev

```

# Usage

Place your entire theme within the `/src` directory, including a

Shopify-standard `config.yml`.

JS/CSS is compiled using [rollup](https://github.com/rollup/rollup) and

[postcss](https://github.com/postcss/postcss). This library expects a single

entrypoint at `/src/scripts/index.js`, so just import your modules and

stylesheets there and you should be good to go.

Example structure:

```bash

- package.json

- src/

  |- config.yml # standard issue Shopify

  |- scripts/

    |- index.js

  |- styles/

    |- main.css

  |- layout/

  |- templates/

  |- sections/

  |- snippets/

  |- locales/

  |- config/

  |- assets/

```

## watch

```

slater watch

```

## build

Build JavaScript and CSS, copy theme to `/build` directory.

```

slater build

```

## deploy

Build JavaScript and CSS, copy theme to `/build` directory, push to Shopify.

```

slater deploy

```

## Live-reloading & HTTPS

`slater` uses an local SSL certification to correspond with Shopify's HTTPS

hosted themes. To take advantage of live-reloading, you need to create a

security exception for the `slater` cert (this is safe). To do this, load

[https://localhost:3000](https://localhost:3000) in your browser, and following

the instructions for adding an exception. If it works, you should see this in

your browser window:

```

@slater/cli successfully connected

```

## Options

### `--env`

Specify a theme from `config.yml`. Defaults to `development`.

```

slater deploy --env=production

```

### Config File

`slater` also supports a `slater.config.js` as well, which supports all the same

options as

[@friendsof/spaghetti](https://github.com/the-couch/spaghetti#config).

```javascript

// slater.config.js

module.exports = {

  jsx: 'preact.h',

  map: 'inline-cheap-source-map',

  alias: {

    foo: './bar'

  }

}

```

## License

MIT License

(c) 2018 The Couch, LLC