Best workflow?

[jamesscaggs]

It seems to me that Shopify theme development isn't really local development. Their docs suggest running theme watch and states that this watches your local files and syncs them to your live site. Why would I want to sync local files to the live site instantly?

I found this package in my research and I think this is the problem you are solving but I am still unclear on how to spin up the theme locally. Running npm start always prompts me with:

You are about to deploy to the published theme. Continue? (Y/n) 

I don't want to publish until I review changes locally so what am I missing?

[mrpacman101]

@jamesscaggs
Not sure why you use npm start. Here is my workflow:

Create a copy of live theme. Connect copy with packer settings.
run packer watch - this will start the watcher and it will upload some files but uses proxy to hot-reload local assets which is quite awesome and time saving.

Once i am done development - i run packer build && packer deploy -> which will deploy build files to the copied theme.

If i want to deploy to client live store - i can just use the enviroment flag. I don't see this as a real local development enviroment because we packer use proxy but it is the next best thing - to build new big projects with this tool - and it saves us a lot of time already.

[hayes0724]

Some details on the two commands:

packer start - same as npm start it will upload any local changes before watching. Good for first time deploy or offline changes but generally you will use watch command

packer watch sames as npm watch this will watch the files without doing a deploy first

You can have multiple configs in packer.env.json that point to different themes. You should not work on a live site directly, instead copy it to a development theme. When ready to deploy you can run npm deploy or packer build && packer deploy. This can be done to the live site but best practice would be deploying to dev site, then publishing that theme on Shopify.

New sites - if you are making a new build, not using any of the live theme code you can run packer init this will make a new empty theme on Shopify and get the theme id so you can do everything from CLI vs Shopify admin

Existing sites - if you are making changes to a site that is live and don't have a copy you can follow this workflow:

1. get the live theme id with packer theme:list (it will be highlighted a different color and show as live)
2. not required but I usually add the id to a theme with env name "live" in packer.env.json
3. download live theme using packer theme:download --env=live. The --env should match the name in packer.env.json
4. create a new theme with packer theme:create --name=Development
5. use the theme id from last step and add to your packer.env.json
6. run packer start or npm start and begin coding

[jamesscaggs]

Thanks for the clarification.

Follow up question

This can be done to the live site but best practice would be deploying to dev site, then publishing that theme on Shopify.

By dev site do you mean an entirely separate instance of the Shopify store/url? If so I assume the best practice is to have the separate dev site set up in the partners portal?