Need help with shopify-webpack-themekit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hayes0724
142 Stars 23 Forks MIT License 31 Commits 6 Opened issues

Description

Shopify development tool using webpack and themekit

Services available

!
?

Need anything else?

Contributors list

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' -%}

{%- 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.

linter

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.