ZAT is a set of command line tools to help you work easily with Zendesk Apps and now Zendesk Themes. If you’re unfamiliar with ZAT or don’t already have it installed on your machine, you can find out more here.
If you have already installed ZAT, you just need to upgrade the ruby gem. You can do that by running:
$ gem update zendesk_apps_tools
Additionally, you’ll need to enable API access to your account in Support by going to Admin > Channels > API.
From there you should have the new options. If you just type
zat in the console you should see the following line in the command help:
zat theme SUBCOMMAND # Development tools for Theming Center (Beta)
Starting a Preview
To start working with a local preview of your theme, change directory into a theme that you’re working on your local machine. You must have previously exported and unzipped this theme from Theming Center.
Once you do that that type the following command
$ zat theme preview
From here it will ask you to enter your subdomain, username and password to authenticate. If you have SSO enabled for your account, see the documentation here for using an API Token instead of a username and password.
You will then see the following output in console:
Generating Generating theme from local files
Uploading Uploading theme
Enter your password:
You can exit preview mode in the UI or by visiting https://z3nryanmcgrew.zendesk.com/hc/admin/local_preview/stop
== Sinatra (v1.4.7) has taken the stage on 4567 for development with backup from Thin
Thin web server (v1.7.2 codename Bachmanity)
Maximum connections set to 1024
Listening on localhost:4567, CTRL+C to stop
Copy and paste the URL highlighted in green and bold from the output and paste that into a browser. This will start your local preview session in the browser. You will see a message about loading unsafe scripts in your browser that you will need to accept.
Live Reload of Changes
You can now open your theme in your favorite local editor and start making changes. On save we will propagate changes and live reload your browser window.
For example, if I update by CSS like this and click save:
My preview window will now look like this:
Exit Preview Mode
When you’re finished with your preview session, just click this link in the yellow preview bar: