Previewing theme changes locally

Ryan McGrew

EditedJuly 24, 2023 16:08

Zendesk Product Manager

Suite Growth, Professional, Enterprise, and Enterprise Plus 专业的企业计划

You can work on a theme in your preferred code editor locally and preview your changes live in a web browser. You don't have to upload the files to Guide every time you want to preview your changes. A background process running on your computer uploads your changes for you every time you save a file locally.

Example:

Topics covered in this article:

Setting up local theme previewing

Setting up local theme previewing consists of downloading the theme files, enabling API access in your account, and installing the Zendesk Command Line Interface (ZCLI) on your computer. The ZCLI enables local theme previewing.

To set up local theme previewing

Download the theme files from Guide and unzip them in a working folder.
SeeDownloading a help center theme.
If not already done, enable API access in your Zendesk account.
InAdmin Center, clickApps and integrationsin the sidebar, then selectAPIs > Zendesk API.
Install the ZCLI. SeeInstalling and updating ZCLIin the Zendesk developer documentation.

Starting local theme previewing

You must start local theme previewing before you start working on theme files on your computer.

To start local theme previewing

In your computer's command line terminal, navigate to the folder containing the downloaded and unzipped theme files. Example:
```
cd guide_themes/newlook_theme
```
Sign into the Zendesk account where you downloaded the theme.
```
zcli login -i
```
At the prompts, enter your subdomain, email, and password:
Use your account's standard Zendesk subdomain to sign in. Don't use any host mapped subdomain.
If you use single sign-on (SSO) to sign in to Zendesk, you can sign in using anAPI token. Enteryour_email/tokenfor your user name, where "/token" is the actual string "/token". Use the API token for your password. Example:
```
Email: jdoe@example.com/token Password: e8Pvy0pvGzE8meUQxWgjIYkjr
```
Start the background process for local previewing:
```
zcli themes:preview
```
This ZCLI command starts local previewing and uploads the local theme in Preview mode to your help center. Changes you make to the files locally will be reflected in the theme in Preview mode.
Copy the "Ready" URL and paste it in a web browser such as Chrome or Firefox.
The browser must allow mixed HTTP and HTTPS content. Safari doesn't support mixed content and won't allow you to preview themes locally.
The "Ready" URL looks likehttps://yoursubdomain.zendesk.com/hc/admin/local_preview/start.

For more information about the ZCLI preview command, seezcli themeson GitHub.

Previewing changes

After ZCLI uploads your theme in Preview mode to your help center, you can work on your theme files locally in your favorite code editor and preview the changes in your browser. Work iteratively to develop and test your theme. For example, make some changes to a file, save the file, then check your changes in the browser. Fix any issues with the changes before making additional changes.

To preview changes

Save the edited file or files in your code editor.
Check the results in the theme in Preview mode in your browser.

The theme reloads automatically in the browser when you save a file locally. You don't need to refresh the page.

There's a ZCLI option to disable live reloads. Seezcli themeson GitHub.

When you're done for the day, you can stop Preview mode using one of the following methods:

在终端捐ion running ZCLI, pressCtrl+C.
Openhttps://yoursubdomain.zendesk.com/hc/admin/local_preview/stopin your browser, with your actual subdomain in the URL.
At the top of the browser's theme preview page, click theClose previewlink.

Return to top

11 Comments

Hamish Lang
- July 18, 2023 02:12
For ZCLI, should the sub-domain be the un-host mapped URL? I've tried logging in using the host mapped one but didn't work, reverting to the .zendesk URL worked though. Might be worth adding to the article for dummies like me if that's the case.

In ZAT previously you could use the host mapped URL for the preview.

0
Charles Nadeau
- July 18, 2023 19:52
Zendesk Documentation Team
好主意,哈米什。我添加了以下信息in the bit about signing in:

Use your account's standard Zendesk subdomain to sign in. Don't use any host mapped subdomain.

0
Peter Piek
- July 19, 2023 15:19
- Edited
I think it is nice to mention thatthemeIdused in somezcli themescommands can be found through: https://{subdomain}.zendesk.com/api/v2/guide/theming/themes

Then look for theidof the theme in the JSON response.

See also:https://developer.zendesk.com/api-reference/help_center/help-center-api/theming/

1
Nico Plinke
- August 08, 2023 12:39
Hi,

I'm following the guide, however, when I want to start the background process (zcli themes:preview) I get an error: TypeError: Cannot read properties of undefined (reading 'split')
I've tried to delete all .split(), but to no success

It happens on every theme (e.g. the copenhagen base theme)

Any ideas how to fix this?

1
Paolo
- August 10, 2023 12:43
Hi Nico,

Are you adding the theme directory to the command? I have found this documentation that might help:https://github.com/zendesk/zcli/blob/master/docs/themes.md

1
Tina Pham
- August 11, 2023 09:17
I also get this error when trying to run zcli themes:preview:
TypeError: Cannot read properties of undefined (reading 'split')

I tried adding the theme directory to the command, but got the same error as without it.

0
Jared
- August 13, 2023 21:27
Hi,

I've followed the install & setuphere. I'm running zcli themes:preview (I'm inside the working directory) logging in using environment variables (WSL) and it seems to be uploading the theme but I'm getting the below:

Uploading theme... Ok
/usr/local/lib/node_modules/@zendesk/zcli/node_modules/@zendesk/zcli-themes/dist/commands/themes/preview.js:52
const { subdomain, domain } = await new zcli_core_1.Auth().getLoggedInProfile();
^

TypeError: Cannot destructure property 'subdomain' of '(intermediate value)' as it is undefined.
at Server. (/usr/local/lib/node_modules/@zendesk/zcli/node_modules/@zendesk/zcli-themes/dist/commands/themes/preview.js:52:21)

Any help would be appreciated.

0

Peter Piek

August 15, 2023 11:45

JaredWhat are your results from running these commands:

$ zcli profiles:list
Subdomains
─────────────────────
 <= active

$ echo $ZENDESK_SUBDOMAIN

Jared
- August 16, 2023 20:49
Thanks for the reply Peter, I've run into more issues that make me wonder if it's my WSL that's causing the problem, I'm going to retry on a clean machine and see if the problem goes away. I'll come back if I'm still having problems.

0
Nico Plinke
- September 01, 2023 13:43
Thanks for your reply Paolo.

Your solution worked, unfortunately only half...
When I try to preview my reworked theme (we have a theme made for us by an external company), I get a version of it with a lot of issues (everything is crammed to the left, lots of errors in the javascript, etc...)
I tried going back to basics, and downloaded the original copenhagen theme.
When I try to preview that, I get a 503: service unavailable.

Does any of this sound familiar?

My frontend-dev is now doing all the changes in the integrated zendesk filereader, but that really is not workable.

Thanks for the help!

0
Adrian Martin
- September 11, 2023 15:28
The "TypeError: Cannot read properties of undefined (reading 'split')" in Windows environment is caused by a bug with the templates' detection.

I fixed it after changing the next line in node_modules\@zendesk\zcli\node_modules\@zendesk\zcli-themes\dist\lib\getTemplates.js
```
const identifier = template.split('templates\\')[1].split('.hbs')[0].replace(/\\/g, '/');
```
@zendesk/zcli/1.0.0-beta.38 win32-x64 node-v16.13.2
0

Pleasesign into leave a comment.

Previewing theme changes locally

Setting up local theme previewing

Starting local theme previewing

Previewing changes

11 Comments

Related articles