# Shopify Packer

Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and compatible with existing Shopify sites.

![npm (scoped)](https://img.shields.io/npm/v/@hayes0724/shopify-packer)
![node-current (scoped)](https://img.shields.io/node/v/@hayes0724/shopify-packer)
[![CI](https://github.com/hayes0724/shopify-packer/actions/workflows/ci.yml/badge.svg)](https://github.com/hayes0724/shopify-packer/actions/workflows/ci.yml)
![dependency](https://img.shields.io/david/hayes0724/shopify-packer)
![DevDependency](https://img.shields.io/david/dev/hayes0724/shopify-packer)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![GitHub license](https://img.shields.io/github/license/hayes0724/shopify-packer.svg)](https://github.com/hayes0724/shopify-packer/blob/master/LICENSE)

![downloads](https://img.shields.io/npm/dt/@hayes0724/shopify-packer)
[![GitHub stars](https://img.shields.io/github/stars/hayes0724/shopify-packer.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/hayes0724/shopify-packer/stargazers/)
[![GitHub forks](https://img.shields.io/github/forks/hayes0724/shopify-packer.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/hayes0724/shopify-packer/network/)

<p align="center">
    <a href="https://www.shopify.com/?ref=hayes-marketing"><img width="75" height="75" alt="shopify" src="https://hayes0724.github.io/shopify-packer/img/logos/shopify.svg"></a>
    <img height="75" alt="webpack" src="https://hayes0724.github.io/shopify-packer/img/logos/webpack.svg">
    <img height="75" alt="sass" src="https://hayes0724.github.io/shopify-packer/img/logos/sass.svg">
    <img height="75" alt="postcss" src="https://hayes0724.github.io/shopify-packer/img/logos/postcss.svg">   
    <img height="75" alt="babel" src="https://hayes0724.github.io/shopify-packer/img/logos/babel.png">
</p>

## Features
- Webpack 5
- Stylelint
- ESLint
- Babel
- PostCSS
- SCSS
- Analyze bundles
- Liquid code in stylesheets
- Webpack config is easy to modify (use `dev.config.js` and `prod.config.js`)
- App server loads scripts and stylesheets locally
- Hot Module Reloading for rapid development
- Multiple entrypoints for templates and layouts
- List themes on store
- Delete themes from CLI
- Create new empty theme in Shopify from CLI
- Download existing themes
- Download files/sync changes
- Init base packer theme from cli or use a custom github repo

## Getting started
Packer needs to be installed once globally.

Yarn
```shell
yarn global add @hayes0724/shopify-packer
```

NPM
```shell
npm i @hayes0724/shopify-packer -g
```

## Documentation
View the [docs](https://hayes0724.github.io/shopify-packer/) website for usage

## Troubleshooting
If you have questions or need help, please ask in [GitHub Discussions](https://github.com/hayes0724/shopify-packer/discussions).

## Changelog
View recent changes [here](https://github.com/hayes0724/shopify-packer/blob/master/CHANGELOG.md)

## Contributing
We ❤️ pull requests, please read the [Contributing guide](https://github.com/hayes0724/shopify-packer/blob/master/CONTRIBUTING.md) before getting started.