Managing source code and compiled code (for Shopify stores with a build pipeline)

Shopify introduced the GitHub integration as part of their 2.0 release.

This allowed stores to use version control for their themes.

This integration also allowed for backfilling.

This introduced a problem for themes with a build pipeline e.g. webpack , which was how to manage source code and compiled code in Github?

Shopify solution Git subtree. https://shopify.dev/themes/best-practices/version-control

What is git subtree? Subtree is a reference to another repository url/branch within a repository url/branch

My poor paint skills of git subtree below.

Git subtree using branches

• Seperate branch for source code and compiled code
• Compiled code branch will have Shopify comptaible folder structure

Steps:

1. Add git subtree git subtree add --prefix {local directory being pulled into} {remote repo URL} {remote branch} --squash
2. Make changes to source and commit
3. Checkout compiled code branch and pull in backfills using git pull
4. checkout source code branch and run subtree pull command to pull in merchant changes from compiled into source git subtree pull --prefix {local directory being pulled into} {remote repo URL} {remote branch} --squash
5. Run build, commit and push to subtree git subtree push --prefix {local directory being pulled into} {remote repo URL} {remote branch} --squash

References:

• https://gist.github.com/SKempin/b7857a6ff6bddb05717cc17a44091202
• https://shopify.dev/themes/best-practices/version-control