SymSync Plugin

Automate symbolic links in Webpack

This is a custom Webpack plugin that moves files from an origin directory to a host directory and creates symbolic links to those files in both the origin and destination directories. The plugin allows you to configure multiple origin and destination pairs.

Below is an example of what it looks like to configure this plugin in webpack.

const SymSyncPlugin = require("path/to/SymSyncPlugin");

module.exports = {
  // ...
  plugins: [
    new SymSyncPlugin({
      origin: "path/to/origin", // Accepts glob pattern paths (components/**/*.liquid)
      destination: "path/to/destination", // Uses glob pattern paths (theme/[parentDir]/[name].liquid)
      host: "path/to/host", // 'origin' or 'destination' are also available
    }),
  ],
};

Our Usecase

At SLTWTR, we use this plugin to facilitate our folder structure for the Neptune Theme.

Below is a tree diagram of how the end result of these symlinks. This gives us and any third party developers the ability to work directly in the familiar Shopify theme folder structure while still maintaining our dynamic entry point webpack configuration.

Neptune-theme 2.0
├── components
│    ├── main.css
│    ├── main.js
│    └── slider-cart
│        ├── sections
│        │   └── cart-modal.liquid ➡️ ./theme/sections/cart-modal.liquid
│        └── index.js
└── theme
    └── snippets
        └── cart-modal.liquid