Previewing theme changes locally (Guide Professional and Enterprise)

Have more questions? Submit a request

69 Comments

  • Victor Alekhno
    Comment actions Permalink

    Hello

    We are trying to "Starting local theme preview" and on the 3-rd step (At the prompts, enter your Zendesk Support subdomain, as well as the email and password you use to sign in to Zendesk Guide.) we face an error:

    Uploading  Failed: SSL_connect returned=1 errno=0 state=error: certificate verify failed
    C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/zendesk_apps_tools-3.7.1/lib/zendesk_apps_tools/theme.rb:45:in `rescue in full_upload': undefined method `[]' for nil:NilClass (NoMethodError)
    What can be a reason?
    0
  • Anna Roussanova
    Comment actions Permalink

    Hi Victor, you need to enter the full URL (including the protocol), not just the subdomain. So in your case you'll need to enter https://d3v-solbeg.zendesk.com

    Anna R. | Senior Technical Support Architect | support@zendesk.com
    Zendesk Experience Research Panel

    0
  • Victor Alekhno
    Comment actions Permalink

    Hello Anna.

    Thanks for so fast response)

    But the result is the same, even with full URL:

     
    0
  • Anna Roussanova
    Comment actions Permalink

    Hi Victor, sorry, I left out an important note. The first time you enter your URL, it's saved in a hidden .zat file. I suspect that the old (invalid) URL is still getting pulled from that file. You'll need to delete the file and re-run the zat theme preview command. Check out step 3 under "Starting local theme preview" in this article.

    0
  • BrightShadow
    Comment actions Permalink

    The theme preview feature doesn't work stable. It is breaking connection really often. The page reload sometime breaks, sometimes is working sometimes is not - without any console errors actually.

    It is really unstable, and as a frontend developer I can't work with that in straightforward way.

    Much better solution will be to run web server locally and just serve data into Zendesk theme, why it is so complicated and all templates and so on must be uploaded to the server? 

    It is really slow and annoying when you want to work on it, spend about an hour or two to make all those things work, to install it etc. and finally you need to go back and make your hands dirty with plain js and css on your admin portal.

    BTW: it is working quite stable early morning, then probably server is overloaded and ..... you know.

    1
  • Devan
    Comment actions Permalink

    Hello BrightShadow,

    Love the name. So I can see why this would be a bit problematic, so I'll be passing this on to our tech team. I would still recommend posting this in our product feedback forums so our devs and other users can add their thoughts to your use case. Let us know if we can help further, and thanks for the feedback.

    Best regards. 

    0
  • Abdul Qabiz
    Comment actions Permalink

    BrightShadow Many of us have noticed this issues. I think, the livereload implementation within zendesk_apps_tools is buggy. I tried to change code to fix existing implementation, it can be fixed. However, it was quicker for me to add support for an external livereload tool.

    I run zat theme without live reload; and run my own livereload to do all reloading.

    If you are interested to try what I have done, you can follow steps below. Please note I have tested it on macOS (High Sierra), and ruby, gem, bundle, and node.js is required.

    Wherever you see "code" command (launches VSCode), you can replace it with "vim", "nano", or any other editor you use. I used "code" in the instructions below becuase that's what my team uses, though I personally use "vim".

     

    Note: Please try following at your own risk, following comes on "AS-IS" basis. I just this solved problem quickly (not so elegantly) so I can focus on real work I do. You should never run a command in terminal unless you understand what it does; you should never run any code unless you have looked it.

     

    In your Terminal, and do the following after understanding what you are doing:

    1. mkdir ~/.zat-status
    2. npm install -g livereload
    3. cd ~/
    4. git clone https://github.com/abdul/zendesk_apps_tools modified_zat
    5. cd ~/modified_zat
    6. bundle
    7. gem build zendesk_apps_tools.gemspec
    8. code ~/.bash_profile #you can put in .zshrc or other places; if you use different shell
    9. Add following lines at the end of ~/.bash_profile file opened in vscode
      #Override the zat command to use binary from modified_zat directory
      alias zat="$HOME/modified_zat/bin/zat"

      #Create an alias so we can access zat theme prevew by using zatp
      alias zatp="zat theme preview --no-livereload --file-to-touch-after-upload=$HOME/.zat-status/dummy.css --use-external-livereload"

      #livereload server alias
      alias liver="livereload $HOME/.zat-status"
    10. Open new Terminal window (or run source ~/.bash_profile from existing terminal window); and run following commands:
      liver
    11. Open new Terminal tab, and run following from your project (theme) directory

      zatp
    12. You can now work on theme and hopefully livereloading won’t stop.

     

    This is what happens:

    1. zat theme preview is run without built in livereload
    2. zat theme preview will now inject our own version of livereload.js in the code it uploads to server. Our version of livereload.js will try to connect livereload server on localhost:35729
    3. zat will touch a file a file dummy.css  in ~/.zat-status whenever you make changes in style.css or script.js of your theme.
    4. zat will touch a file dummy.css.html in ~/.zat-status whenever you make changes in templates or manifest or any part that requires zat to do full upload of the theme before livereload can happen
    5. In both of cases (#3, #4), livereload (the another tool we installed; you can use LiveReload Desktop app also to watch ~/.zat-status directory and skip using liver command above) will reload the parts of or entire page. Basically, LiveReload watches changes in .zat-status, and it reloads the page only when any html file has changed; it reloads parts (css, script) when css/javascript changes.
    6. If you use Chrome, you can use livereload extension, allow it to access ~/.zat-status directory, and then extension can reload the page itself; you don't need to run any server (livereload cli command, or LiveReload Desktop); I prefer server because I don't want to allow browsers to access my filesystem.

    If you try, and it helps you please let us know here.

     

    Thank you

     

    Abdul Qabiz

    Team Diziana

     

    1
  • Matthew Bass
    Comment actions Permalink

    We're using ZAT to edit our theme locally. We're porting HTML/CSS from our web site. This code contains a lot of SVG image definitions which makes the file long (around 1700 lines). We're getting this error:

       Uploading  Failed: the server responded with status 400

           Error  header L:: File too long.

    Why is there a limit on file length? It's going to be very difficult for us to port our existing web site theme to Zendesk if each file is limited to an arbitrary length.

    0
  • BrightShadow
    Comment actions Permalink

    Abdul Qabiz, perfect. That's brilliant. I didn't even think about that this could be a problem with live-reload only. I got also problems with the zat theme preview command at all. Sometimes is stops watching files.

    I will try to disable live-reload at all, that's easy. I'm using a chain of npm / SCSS etc to work on theme. So I use gulp stack that is building dist folder which is observed by the ZAT. Maybe that could be a problem also...

     

    Anyway, thanks for help Abdul. I appropriate it very much.

    0

Please sign in to leave a comment.

Powered by Zendesk