https://github.com/akillmer/shopify-theme-sync-plugin
Webpack plugin with BrowserSync to help streamline your Shopify theme development
https://github.com/akillmer/shopify-theme-sync-plugin
browsersync shopify webpack
Last synced: about 1 year ago
JSON representation
Webpack plugin with BrowserSync to help streamline your Shopify theme development
- Host: GitHub
- URL: https://github.com/akillmer/shopify-theme-sync-plugin
- Owner: akillmer
- License: mit
- Created: 2020-04-09T07:48:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-09T09:11:04.000Z (about 6 years ago)
- Last Synced: 2023-12-25T04:02:15.259Z (over 2 years ago)
- Topics: browsersync, shopify, webpack
- Language: JavaScript
- Size: 77.1 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shopify Theme Sync Plugin
_**NB:** This `webpack` plugin is not officially endorsed, sponsored, or provided by Shopify Inc._
`ShopifyThemeSyncPlugin` helps keep your new theme perfectly in sync with your Shopify store during active development. It uses [Browsersync](https://browsersync.io) to watch for file changes and to provide live reloading. [Shopify's Theme Kit](https://shopify.github.io/themekit/) is used to push these changes directly to your store — `theme` must be available on your `$PATH` and have [API access to your store](https://shopify.github.io/themekit/#get-api-access).
## Getting Started
Install `browser-sync` (2.18.8 or higher) if you're not using it already.
```
npm install browser-sync shopify-theme-sync-plugin --save-dev
```
— _or_ —
```
yarn add browser-sync shopify-theme-sync-plugin --dev
```
Make sure that `theme` from [Shopify's Theme Kit](https://shopify.github.io/themekit/) is available on your `$PATH` and has [access to your store's API](https://shopify.github.io/themekit/#get-api-access).
### webpack.config.js
```javascript
const ShopifyThemeSyncPlugin = require('shopify-theme-sync-plugin');
module.exports = {
// ...
plugins: [
new ShopifyThemeSyncPlugin({
storeUrl: 'https://[your-store-url]',
}),
],
};
```
### Run `webpack --watch`
You access your store via Browsersync's proxy at `https://localhost:3000` (default). Browsersync's UI can also be accessed at `http://localhost:3001` (default). Any changes you make to the contents of your theme's directories will trigger Browsersync to reload all connected browsers, but only after the changes have been pushed to Shopify via `theme`.
Make sure to configure `webpack` to use `assets/` as its output directory.
## Proxying Shopify Store URLs
The only configuration required is `storeUrl`, so that Browsersync's proxy can function. This plugin's behavior will depend on which of the two acceptable Shopify URLs you provide.
### https://*.myshopify.com
This URL is used to access your _live_ Shopify store. Browsersync's proxy will insert its snippet right before `