Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hayes0724/shopify-webpack-themekit
Shopify development tool using webpack and themekit
https://github.com/hayes0724/shopify-webpack-themekit
babel browsersync scss shopify shopify-theme themekit webpack webpack4
Last synced: 3 days ago
JSON representation
Shopify development tool using webpack and themekit
- Host: GitHub
- URL: https://github.com/hayes0724/shopify-webpack-themekit
- Owner: hayes0724
- License: mit
- Created: 2019-01-19T17:09:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-14T20:25:19.000Z (over 1 year ago)
- Last Synced: 2024-12-04T18:33:27.668Z (17 days ago)
- Topics: babel, browsersync, scss, shopify, shopify-theme, themekit, webpack, webpack4
- Language: JavaScript
- Homepage:
- Size: 3.67 MB
- Stars: 183
- Watchers: 14
- Forks: 37
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Shopify ThemeKit - Webpack
[](https://GitHub.com/hayes0724/shopify-webpack-themekit/issues/)
[](https://github.com/hayes0724/shopify-webpack-themekit/blob/master/LICENSE)
[](https://GitHub.com/hayes0724/shopify-webpack-themekit/stargazers/)
[](https://GitHub.com/hayes0724/shopify-webpack-themekit/network/)
Development tool for Shopify using webpack and themekit.
Check out the node package version: [Shopify Packer](https://github.com/hayes0724/shopify-packer)
1. [Requirements](#requirements)
2. [Getting Started](#getting-started)
3. [Theme files](#theme-files)
4. [Commands](#commands)
### Features
* Ready to use [blank starter theme](https://github.com/hayes0724/packer-blank-theme)
* Webpack 4
* Stylelint
* ESLint
* Babel
* Middleware for Shopify preview
* Webpack dev server for assets
* BrowserSync
* Chunks for templates and layouts
## Requirements
* Create config.js (see example.config.js)
## Getting Started
1. Install dependencies - `npm install`
2. Start webpack compiler - `npm run start`
`npm run deploy`
## Theme files
Webpack will create the following snippets that load all style and script chunks. You need to include this in your theme.liquid file.
```
{% include 'script-tags' %}
{% include 'style-tags' %}
```
### Creating chunks
The system will check for any script or style sheet that matches Shopify template and layout files.
filename: `scripts/templates/product.js`
creates file: `assets/template.product.js`
script-tags snippet (auto generated) will only load this script on pages that use product template
```html
{%- if template == 'product' -%}
{%- else -%}
{%- endif -%}
```
## Commands
Start - Watches files for changes and deploys changes to Shopify. Also builds and deploys all theme files to Shopify before starting
`npm run start`
Watch - Watches files for changes and deploys changes to Shopify. Skips first deployment.
`npm run watch`
Build - Builds js/scss in production mode
`npm run build`
Deploy - Deploys the contents of dist folder
`npm run deploy`
Test - Runs all tests and code linters
`npm run test`
Lint CSS - Checks scss for errors and best practices.
`` npm run lint:css``
Lint JS - Checks js for errors and best practices.
`` npm run lint:js``
Fix CSS - Checks scss for errors and best practices. Automatically fixes simple errors like line endings
`` npm run fix:css``
Fix jS - Checks js for errors and best practices. Automatically fixes simple errors.
`` npm run fix:js``
## Linting
This project uses stylelint and eslint for checking css and js.
- [StyleLint](https://stylelint.io/)
- [Prettier](https://github.com/prettier/stylelint-prettier)
- [ESLint](https://eslint.org/)