v1.1.1

[james0r]

• Bumped Vite to v5
• Bumped Vite plugins
• Changed Shopify Vite config option to now use the default vite-tag.liquid snippet to avoid possible bug there

---

This discussion was created from the release v1.1.1.

[1dagranholm]

Hi! I have a problem with the npm/vite/shopify cli setup in this theme which affects my workflow.

I have connected the theme to my shopify store through Shopify's Github App. I have a github repo for the project with two branches, develop and master, which corresponds to development environment and production anvironment in my shopify.theme.toml.

I run Shopify CLI 3.0.

As there's no theme editor for local environment any longer in Shopify CLI 3.0, I have to use the editor for the deleopment theme in my Shopify store. But as I work on the sections/snippets/styling with Tailwind etc in my local environment the files are overriden all the time. Or edits from Shopify editor isn't updated locally.

Do you have any recommendations in workflow using your theme?

[james0r]

@1dagranholm

I totally forgot about the local theme editor and I never used it much anyways.

I think a common approach would be to just duplicate your production theme to something like development, grab the theme id and use that for deployments and dev by adding it to your shopify.theme.toml.

[environments.development]
store = "slayed-starter"
theme = "<dev theme id>"

[environments.production]
store = "slayed-starter"
theme = "<prod theme id>"
ignore = ["templates/*", "config/*"]

You can play around with ignore = ["templates/*", "config/*"] and decide if you want to sync changes for production or not.

Is that what you mean? Have you tried that?

[1dagranholm]

How do you work with the editor then?

Yes I have it like that, but the [environments.development] are my develop-branch, connected through Github. And [environments.production] is my master branch. Maybe I should not have it this way?

Haven't tested different approaches regarding the ignore though, I'll do that. Have tested to use different options in the npm command though, like removing the theme-editor-sync from shopify-dev command

"shopify:dev": "shopify theme dev --live-reload full-page --notify /tmp/theme.update --theme-editor-sync -e development",

[squidiw]

The [environments.development] and [environments.production] will both have separate ids as it has to be two separate themes not branches.
@1dagranholm

[1dagranholm]

Also, it seems like the setup runs on content from production theme even though I run npm run dev which should use the development theme and it's content?

[james0r]

Also, it seems like the setup runs on content from production theme even though I run npm run dev which should use the development theme and it's content?

It's gonna run on your production theme config if you're only working off production. You have to create a more themes to work off of in the Shopify admin.

[1dagranholm]

Yes I have 2 themes in Shopify admin, one that is production and one that is develop (connected to each branch in same Github-repo).

[squidiw]

@1dagranholm you need the --theme-editor-sync so any changes you make in your editor is updated locally.

Also when it comes to the setup what I pretty much do is what @james0r said, I duplicate two themes, then update the ids in my shopify.toml file and even though I use git as a repo I dont connect the repo to the theme but rather just push and pull using the commands.

Can you try just pushing and pulling changes directly to your theme and not through github and see how that goes?

[james0r]

@1dagranholm One of the popular deployment conventions is "Content goes down, Files go up" (or whatever terms you wanna use).

I concur with what @squidiw said. My deployment flow is pretty different depending on whether i'm pre or post-launch.

Pre-launch (development phase / dev sprint)

I work directly off the live theme with --theme-editor-sync set to true. At this point I don't really care about environments if no other contributors / editors are working on it.

I commit my theme editor configs to Git along with my files.

If shit happens and I want to roll back I just roll back to a previous commit and shopify theme push to live.

Post-launch (feature/modification)

1. Duplicate live theme and rename duplicated theme feature/mini-cart
2. Check out to a new Git branch naming it feature/mini-cart
3. Update your shopify.theme.toml theme id for your development env.
4. npm run dev with --theme-editor-sync (which is safe because we're both on a non-live theme and a development (feature) branch.

Push to Git and Shopify to your heart's content.

When you're ready to push your feature:

5. Pull the live theme code from Shopify and merge it with your development theme to ensure new theme editor content is respected in your soon-to-be-published feature branch.

npm run shopify:pull

6. In shopify.theme.toml, copy your development theme id in shopify.theme.toml to the production block.
7. Deploy as if you were doing to your live store (except it's actually still a duplicate non-live theme.

    npm run deploy

8. Preview and QA your new feature theme to make sure it's ready to publish.
9. Push it live in the Shopify admin.

I may have missed a step or two but you get the gist. If you're working with a team you'll likely want a safer more sophisticated workflow. https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow is a popular one but there are many. Chatbot search "Different deployment workflows" or something to that effect.

Hope that helps!

[1dagranholm]

Thank you, very helpful! I'm used to Wordpress and Laravel with a database, so I was not sure how to handle the Shopify content together with the code updates in this kind of project/setup in git.

So pre-launch, I will not need to use development theme.

But I have one question regarding post-launch - If I then work in a duplicated theme, connected through my .toml file as development environment and as a feature branch in git - If I need to add content through Shopify to be able to work with this feature, how can I make the local project pick up content from other environment than the live production theme as I do not want any changes to take affect there until Iäm finished with my feature?