Skip to content

hayes0724/shopify-webpack-themekit

Repository files navigation

Shopify ThemeKit - Webpack

GitHub tag (latest SemVer) GitHub issues GitHub license GitHub stars GitHub forks

Development tool for Shopify using webpack and themekit.

Check out the node package version: Shopify Packer

  1. Requirements
  2. Getting Started
  3. Theme files
  4. Commands

Features

  • Ready to use blank starter 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

{%- if template == 'product' -%}
<script type="text/javascript" src="{{ 'template.product.js' | asset_url }}" defer="defer"></script>
{%- else -%}
<link rel="prefetch" href="{{ 'template.product.js' | asset_url }}" as="script">
{%- 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.

linter