Fork of hayes0724/shopify-wepback-themekit
Development tool for Shopify using webpack and themekit.
- Ready to use blank starter theme
- Tailwindcss
- Webpack 4
- Stylelint
- ESLint
- Babel
- Middleware for Shopify preview
- Webpack dev server for assets
- BrowserSync
- Chunks for templates and layouts
- Create config.js (see example.config.js)
-
Install dependencies -
npm install
-
Start webpack compiler -
npm run start
- This will immediately build and deploy local files to whatever theme ID is added to
config.js
. Be aware. - Use
npm run watch
if the theme is already on the store.
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' %}
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 -%}
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
This project uses stylelint and eslint for checking css and js.