npm i barrel-cli -g
A slater theme needs two things:
- standard
config.yml
- a
webpack.config.js
in your root
Files should follow the default directory structure of Slate. We recommend @slater/theme.
During development, replace your Shopify CDN url with a path to your local bundle to enable HMR. This is not currently configurable.
<body>
...
{% comment %} <script src="{{ 'index.js' | asset_url }}" defer="defer"></script> {% endcomment %}
<script src="https://unpkg.com/@slater/reload"></script>
<script src="https://localhost:3000/index.js"></script>
</body>
Then just run the commands:
# watch theme files and
# hot reload javascript
slater -w # or --watch
# build javascript and upload entire theme
slater -d # or --deploy
# specify an environment, default: development
slater -e production # or --env
You'll also want the @slater/reload package to listen for file changes and live-reload the remote page. That will look like this:
<body>
...
{% comment %} <script src="{{ 'index.js' | asset_url }}" defer="defer"></script> {% endcomment %}
<script src="https://unpkg.com/@slater/reload"></script>
<script src="https://localhost:3000/index.js"></script>
</body>
MIT