Optimizing Shopify theme development with Vite: deployment challenges & workflow suggestions

Online Store and Theme Development
, ,
1

Hey, do any of you use vite-plugin-shopify for working with Shopify themes?

I previously used Gulp, but it feels outdated. I want to write logic using TypeScript and styles with Tailwind, or just SCSS. Vite handles compilation well and updates even the smallest changes in a fraction of a second using hot-reload.

However, I have an issue with deployment. I work with GitHub branches connected to Shopify:

• Main branch → Published theme

• Develop branch → For ongoing work, connected to Shopify as an unpublished theme

This setup works great until I need to deploy and deal with customizations made directly in the CMS (e.g., replacing images in a slider).

If I work on develop and then deploy to main, I can have differences between branches because a client might change images in the published theme or disable an element.

Previously, when using Gulp, I would simply merge develop into main, and the changes would sync. If there were modifications on main, I would pull them back.

Do you have any good workflows or ideas on how to handle this? Maybe suggestions for a different stack that works well? I like keeping things clean, optimized, and secure during deployment.

npm package:

2

You can use vite in the same way as gulp.
You can create new branch from the main for the each feature and connect it to the shopify for testing. When testing was completed and you want to publish it - just make pull request to the main branch and your changes will be deployed. Just make sure that you updating the main branch always before working with it.

1 Like
3

Thanks @Roman_Severyn, so you use npm run build on the new developer branch also, if you merge it to the main branch finally?

Here is my new approach:
:one: main → staging (sync data)
:two: staging → release (sync data)
:three: dev → release (changes + merge)
:four: release → staging (deploy and testing on the staging branch - preview theme)
:five: staging → main (merge to main / publish - main theme)

4

Yep, always using production version of assets before merging to the main theme.

I had one more approach on my previous projects, but it seems more unsafe for mistakes. I had a “main” branch that is connected to the live theme and used only for tracking changes from the admin panel. For the development purposes I had “main_dev” branch with source code and all the assets compiled by the vite was added to the .gitignore. My development flow was based on shopify CLI commands - “shopify theme pull --nodelete” → make changes → build production version → “shopify theme push” and never merge to the main branch. But this approach was not obvious for newcomers.

1 Like