I'm going to work on a Shopify theme, and I want to figure out how to run/edit it locally. I'd like to be able to the following, if possible:
Pull all the Shopify theme code from the site to my local computer (ideally a single command line tool)
Make edits locally, and run them locally or in a staging environment
Push all the edits to the main Shopify site, again using a command line tool
Is this at all possible?
There are quite a few workflows you can use here.
1. Task runners
If you're using either Gulp or Grunt locally for development, there are libraries out there that will upload your files to the store through API credentials of a Private App that you have to create. Most work by uploading the files you change, using a watcher.
grunt-shopify
grunt-shopify-upload
gulp-shopify-upload (it's my favourite since I use Gulp but has a known issue that sometimes it stops uploading files and you have to restart it).
2. Official Shopify Theme Kit
Theme Kit is a cross-platform CLI tool that was built by Shopify Employees. It can run on windows/linux/OS X. You can read more about it on Shopify Blog or download it directly. The alternative previously mentioned of Desktop Theme Editor is deprecated and has been replaced by Theme Kit.
3. Third-party SaaS Applications
Instead of watching for changes, these will work with a continuos integration workflow, where your latest push on a certain branch gets uploaded to the theme you've selected.
Beanstalk. More specific information can be found on their landing page for Shopify, here.
DeployBot. Their help article on Shopify has some information on how to get started.
Both options are from the same company. Here's a comparison of both they've did on their blog.
4. Third-party libraries
There's also an alternative not officially supported by Shopify which is a TextMate Bundle in case you use that OSX editor.
There's an unofficial extended cli similar to theme kit but with further functionality called Quickshot, which I've just found out based on Matt's response and seems pretty awesome. Some of the features they highlight are:
Supports uploading to multiple Shopify stores and themes
Easy to use configuration wizard
Uploads/downloads in parallel greatly reducing transfer times
Supports autocompiling scss locally before uploading to Shopify
Supports autocompiling Babel/ES6 into modules which are easily used by - Requirejs and others
Can use with .gitignore files or a custom .quickshotignore file.
Can download/upload Shopify Blogs, Pages and Products! Easily transfer them between stores! Even the metafields! And edit them locally in your favorite editor.
Shopify recently released Slate, a new tool for theme development.
https://github.com/Shopify/slate
As of 2020, Shopify has stopped support Slate so you can now use Themekit - https://shopify.github.io/themekit/
2022 update
Currently it is not possible to run Shopify locally. There are only solutions, mentioned in other answers to edit files locally and upload it to Shopify. It makes the development hard.
I am working on a solution to emulate Shopify locally making development similar to WordPress, React or Angular. So you will see changes immediately, even without reloading the page and without the need to upload files to Shopify each time.
You can read more here: https://link.medium.com/6SGd1kcVdnb
Juan's answer is spot on.
There's one more I know of which I believe is a little more advanced than Themekit (which I use) called Quickshot: https://quickshot.readme.io/v2.1/docs
Shopify have built a tool for Mac that allows you to develop your theme locally, and sync with your store https://apps.shopify.com/desktop-theme-editor
I don't know of anything for windows/Linux etc.
If you're looking for completely offline development, it's unfortunately not possible at this time. While the Slate/ThemeKit CLIs lets you code in your favorite text editor, an internet connection is still required because it likes to keep everything in sync at all times.
Install the state package by running the following commands:
npm install -g #shopify/slate
slate theme theme-name
Related
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
Is there a reason I need to install stencil CLI framework and supporting javascript etc... rather than just download a theme and edit it with notepad, then re-upload it?
Is seems that this has been made overly complicated
The advantage of using the Stencil CLI is that you can test your work locally, so you can be sure you haven't broken anything. If you just want to make a small edit, then rather than downloading and uploading, try editing files within the Control Panel. Go to Storefront->My Themes->Customize, and then at the bottom, click Edit Theme Files. This way you can make a small edit and have the ability to do a preview (so again, you test your work before changing your live store).
I was wondering what the best way was to deploy shopify themes locally for testing before deploying. We recently started employing deploybot. We really like deploybot but we also would like a way to not wait five minutes to test our files in an alternate store.
How would I accomplish this?
It's tough to preview themes locally. Check out Themekit if you want a quick way to sync local theme files with a development shop: https://shopify.github.io/themekit/
Here's how to setup a local working environment:
https://www.shopify.com.au/partners/blog/95401862-3-simple-steps-for-setting-up-a-local-shopify-theme-development-environment
Install themekit:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
https://shopify.github.io/themekit/
Setup API credentials by creating a private app in your Shopify admin.
Apps > Create private app
Get your theme id.
visit name.myshopify.com/admin/themes.json to get a list of themes and ids
Create a config.yml file and populate it with the credentials. It should look somewhat like this:
development:
password: 16ef663594568325d64408ebcdeef528
theme_id: "123"
store: can-i-buy-a-feeling.myshopify.com
proxy: http://localhost:3000
ignore_files:
- "*.gif"
- "*.jpg"
- config/settings_data.json
Have themekit listen for any local changes and upload them to Shopify.
theme watch
However the store is still online. Because the Shopify framework is hosted on Shopify there is no localhost solution.
For anyone coming to this in 2018, we now have use of Slate.
https://shopify.github.io/slate/
For an idea of workflow, we have multiple devs working on the same theme and they can see their changes locally with Slate.
How we achieve this
We have a dev store that is a direct clone of our production store.
Each dev creates another theme on the dev store and branches off master locally. They then will ONLY use the theme id of the theme they just created to work with (updated in their config.yml)
Slate will watch changes and deploy to their preview theme and refresh their browser locally too.
Once the dev is happy with their changes, we merge back into master and deploy to the live (master) theme on our dev store.
Once it passes all the tests on our dev store, we push to a production store using slate.
EDIT - For creating new section files, template files, product templates etc
You won't be able to create these files and for them to be displayed locally without a small workaround.
For example, if you create a new product template ("product.my-product.liquid"), you'll need to Publish your preview theme first, then perform a "slate start" in terminal, select your new product template for whatever product you're using it on in Shopify, then re-publish your "master" theme.
You may need to do another "slate start" to get the new theme template displaying on the product locally, but it will work.
This is because Shopify only allows you to assign product templates to the current active theme.
You have a test shop. You are working on a theme. If you are doing it right, any changes you make to the theme, are automatically transferred to the test shop. So all you need to do is watch your browser, since you probably also have a watcher on that auto-reloading on changes.
Have been doing this for years, and I never wait 5 minutes for a deploy, as it takes mere seconds to deploy a change and see the results. Throw in some smart Git hooks and you've even got version control.
One thing I really like about the later version of Worklight/MobileFirst Studio is the faster edit/test cycle when working in the Mobile Browser Simulator: just edit, save, click Go/Refresh; no need to build/deploy.
When using CLI (6.3.0.00.20141111-1216) this does not seem to be the case. Seems like I need to do
mfp build; mfp deploy;
After every edit. Am I missing a trick?
Right now I'm thinking I need to revert to my old practice of setting up a web-server to serve directly from my product folder, which is not ideal because I then need to mock up the WL.* APIs I use.
This information from Karl Bishop:
At the current time, this is a limitation of the CLI, based on the use of a standalone MFP Server. Within Studio, some special tricks are being played, to just updated modified files. We are working to resolve this in the CLI and perform similar per file deployments, but we're not there yet. In the interim, I encourage you to view Justin Berstler's video on using the CLI with Grunt.
I recently finished an application based on Titanium, Javascript, HTML, CSS. I have only been a web designer to date so I have little experience in distributing applications. I was accustomed to the TiDev Community deploying app, which prepared the app for download and made it available for download at a given link.
But tidev community is no longer supported, so I use TideSDK Developer to package the app, which doesnt do all the hard work the other one did so nicely.
I am obviously a complete rookie to this.
Could anyone outline the steps I would need to take to go from the bundled application folder I have now (put together by TideSDK Developer), to a link that will allow customers to download and install the app or online? I know there is an issue with packaoging the app for platforms other than your own, and that appcelerator is working on a solution to this I think. I also realise I would probably have to pay to host the download online. Any guidance would be greatly appreciated.
You must use the tidebuilder.py script. to compile a installation package. To compile a binary for a Mac, you must run the script on a Mac, to compile a binary for windows, you must be on a windows box etc.
There is some documentation on how to use it here per platform. The command is very simple and works.
Once you have your application file (DMG for OSX or a MSI for Windows) then just distribute it however you see fit, email, putting it on your web server, whatever works for you.