{"id":21825795,"url":"https://github.com/hayes0724/shopify-webpack-themekit","last_synced_at":"2026-03-09T19:03:00.581Z","repository":{"id":38268724,"uuid":"166572026","full_name":"hayes0724/shopify-webpack-themekit","owner":"hayes0724","description":"Shopify development tool using webpack and themekit","archived":false,"fork":false,"pushed_at":"2023-04-14T20:25:19.000Z","size":3853,"stargazers_count":183,"open_issues_count":20,"forks_count":37,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-27T02:11:46.050Z","etag":null,"topics":["babel","browsersync","scss","shopify","shopify-theme","themekit","webpack","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hayes0724.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-19T17:09:14.000Z","updated_at":"2024-09-04T14:30:12.000Z","dependencies_parsed_at":"2025-01-02T09:10:36.691Z","dependency_job_id":"8be94270-3a79-4f46-b99d-acf2d9795aea","html_url":"https://github.com/hayes0724/shopify-webpack-themekit","commit_stats":{"total_commits":26,"total_committers":6,"mean_commits":4.333333333333333,"dds":"0.34615384615384615","last_synced_commit":"0bc8231a480e17e4caff29efb228d18c16bff0a3"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayes0724%2Fshopify-webpack-themekit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayes0724%2Fshopify-webpack-themekit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayes0724%2Fshopify-webpack-themekit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayes0724%2Fshopify-webpack-themekit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hayes0724","download_url":"https://codeload.github.com/hayes0724/shopify-webpack-themekit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703196,"owners_count":21148117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","browsersync","scss","shopify","shopify-theme","themekit","webpack","webpack4"],"created_at":"2024-11-27T18:02:44.845Z","updated_at":"2026-03-09T19:03:00.475Z","avatar_url":"https://github.com/hayes0724.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Shopify ThemeKit - Webpack\n![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/hayes0724/shopify-webpack-themekit)\n[![GitHub issues](https://img.shields.io/github/issues/hayes0724/shopify-webpack-themekit.svg)](https://GitHub.com/hayes0724/shopify-webpack-themekit/issues/)\n[![GitHub license](https://img.shields.io/github/license/hayes0724/shopify-webpack-themekit.svg)](https://github.com/hayes0724/shopify-webpack-themekit/blob/master/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/hayes0724/shopify-webpack-themekit.svg?style=social\u0026label=Star\u0026maxAge=2592000)](https://GitHub.com/hayes0724/shopify-webpack-themekit/stargazers/)\n[![GitHub forks](https://img.shields.io/github/forks/hayes0724/shopify-webpack-themekit.svg?style=social\u0026label=Fork\u0026maxAge=2592000)](https://GitHub.com/hayes0724/shopify-webpack-themekit/network/)\n\n\nDevelopment tool for Shopify using webpack and themekit.\n\nCheck out the node package version: [Shopify Packer](https://github.com/hayes0724/shopify-packer)\n\n1. [Requirements](#requirements)\n2. [Getting Started](#getting-started)\n3. [Theme files](#theme-files)\n4. [Commands](#commands)\n\n### Features\n* Ready to use [blank starter theme](https://github.com/hayes0724/packer-blank-theme)\n* Webpack 4\n* Stylelint\n* ESLint\n* Babel\n* Middleware for Shopify preview\n* Webpack dev server for assets\n* BrowserSync\n* Chunks for templates and layouts\n\n## Requirements\n\n* Create config.js (see example.config.js)\n\n## Getting Started\n\n1. Install dependencies - `npm install`\n\n2. Start webpack compiler - `npm run start`\n\n`npm run deploy`\n\n## Theme files\n\nWebpack will create the following snippets that load all style and script chunks. You need to include this in your theme.liquid file.\n\n```\n {% include 'script-tags' %}\n {% include 'style-tags' %}\n```\n\n### Creating chunks\n\nThe system will check for any script or style sheet that matches Shopify template and layout files.\n\nfilename: `scripts/templates/product.js`\n\ncreates file: `assets/template.product.js`\n\nscript-tags snippet (auto generated) will only load this script on pages that use product template\n\n```html\n{%- if template == 'product' -%}\n\u003cscript type=\"text/javascript\" src=\"{{ 'template.product.js' | asset_url }}\" defer=\"defer\"\u003e\u003c/script\u003e\n{%- else -%}\n\u003clink rel=\"prefetch\" href=\"{{ 'template.product.js' | asset_url }}\" as=\"script\"\u003e\n{%- endif -%}\n```\n\n## Commands\n\nStart - Watches files for changes and deploys changes to Shopify. Also builds and deploys all theme files to Shopify before starting\n\n`npm run start`\n\nWatch - Watches files for changes and deploys changes to Shopify. Skips first deployment.\n\n`npm run watch`\n\nBuild - Builds js/scss in production mode\n\n`npm run build`\n\nDeploy - Deploys the contents of dist folder\n\n`npm run deploy`\n\nTest - Runs all tests and code linters\n\n`npm run test`\n\nLint CSS - Checks scss for errors and best practices.\n\n`` npm run lint:css``\n\nLint JS - Checks js for errors and best practices.\n\n`` npm run lint:js``\n\nFix CSS - Checks scss for errors and best practices. Automatically fixes simple errors like line endings\n\n`` npm run fix:css``\n\nFix jS - Checks js for errors and best practices. Automatically fixes simple errors.\n\n`` npm run fix:js``\n\n\n## Linting\n\nThis project uses stylelint and eslint for checking css and js.\n\n\n![linter](https://github.com/stylelint/stylelint/raw/master/example.png?raw=true)\n\n- [StyleLint](https://stylelint.io/)\n\n- [Prettier](https://github.com/prettier/stylelint-prettier)\n\n- [ESLint](https://eslint.org/)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhayes0724%2Fshopify-webpack-themekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhayes0724%2Fshopify-webpack-themekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhayes0724%2Fshopify-webpack-themekit/lists"}