Previewing theme changes locally (Guide Professional and Enterprise)

Have more questions? Submit a request

56 Comments

  • Elisabeth Wetchy
    Comment actions Permalink

    Hello all, great feature! Just mentioning that for me on Windows 10 it works best with --no-livereload as well, without that flag the style seems to disappear once the page is reloaded.

    I'm also noticing that some of the $assets references in my style.css seem to be resolved correctly while others arent - for example something like background-image: url("$assets-foundry_logo-svg"); works fine, but referencing our fonts like so doesn't work:

    @font-face {
    font-family: "Avenir";
    src: url("$assets-avenirnext-regular-08-ttf");
    font-weight: 300;
    font-style: normal; }

    and gives me the following error:

    GET http://localhost:4567/guide/$assets-avenirnext-regular-08-ttf net::ERR_ABORTED 404 (Not Found)

    Is this a known issue?

    2
  • Dan Ross
    Comment actions Permalink

    When developing locally, you're serving from the filesystem, by default that will be without HTTPS, as no SSL certificates will exist. 

    This error should be showing when doing local development. 

    When you upload your theme to Zendesk Guide, the resources will be hosted under HTTPS (assuming you have an SSL certificate), and you should no longer get those errors. 

     

    2
  • Trapta
    Comment actions Permalink

    Hi,

    Is anybody else here facing issue with zat theme preview recently? I am running zat theme preview and every time it is throwing parsing error:

    Can anybody tell why it is throwing this error? I have tried using it in two different accounts other than mine too but with no luck.

    Thanks

    1
  • Emily Coleman
    Comment actions Permalink

    Hello folks! I'm running into an issue where I can't get the server to even start running. I have nothing else running on the same port, and I've got root-level permissions on this machine, so I'm not sure the issue.

    Here's the error:

    /Library/Ruby/Gems/2.3.0/gems/eventmachine-1.2.5/lib/eventmachine.rb:530:in `start_tcp_server': no acceptor (port is in use or requires root privileges) (RuntimeError)

    (this sets off a slew of other errors, but this seems to be the cause).

    I've tried manually setting a different port (with something like zat theme preview -p --port=9200), but I still hit the same error. I've done some googling, but all of the suggestions are coming up useless. 

    Any advice would be greatly appreciated!

    1
  • Eduardo Alberto
    Comment actions Permalink

    @trapta, were you ever able to fix this? I keep losing connection to the socket on every code change.

    1
  • Anna Roussanova
    Comment actions Permalink

    Hey Keanan and Ursula,

    That error is coming up because the manifest.json file in your theme is either missing the "settings" parameter, or that parameter is empty. Can you double-check that file and make sure you didn't accidentally delete all the settings from there?

    1
  • Diziana
    Comment actions Permalink

    Awesome! Much awaited feature. Thank you.

    1
  • Keanan Jones
    Comment actions Permalink

    Hi there,

    When trying to run `zat theme preview` I am getting the following errors:

    dist $ zat theme preview
    Generating Generating theme from local files
    /Users/myusername/.asdf/installs/ruby/2.3.1/lib/ruby/gems/2.3.0/gems/zendesk_apps_tools-3.2.3/lib/zendesk_apps_tools/theming/common.rb:43:in `settings_hash': undefined method `flat_map' for nil:NilClass (NoMethodError)

    If anyone has any suggestions please could you help, thanks

    1
  • Ursula Cedillo-Johnson
    Comment actions Permalink

    Hey y'all! 

    I'm also hitting the same error code. This is the first time I'm using zat theme preview. I ran zat new to initialize the zat app. I don't have a zat server running. Could someone advise? 

    1
  • Eduardo Alberto
    Comment actions Permalink

    @Trapta Here's a screeshot: 

    I've already tried using incognito, checked if ports were being used, if extensions could be impacting, etc.

    1
  • Eduardo Alberto
    Comment actions Permalink

    Has anyone had any luck troubleshooting livereload constantly losing connection?

    1
  • Maria McDowell
    Comment actions Permalink

    Actually, never mind. I read more closely and realized I had misunderstood the documentation. Here is what is in my .zat file, and it works:

    {
    "subdomain": "https://subdomain.zendesk.com",
    "username": "mymail@mycompany.com/token",
    "password": "mytoken"
    }
    1
  • Trapta
    Comment actions Permalink

    @Alexey Vorobyov, try hard reloading. script file gets cached resulting in showing older version of file instead of updated one with the changes.

    Let me know if this solves your issue.

    Team Diziana

    1
  • Shammel
    Comment actions Permalink

    How do I get rid of this warning when previewing a theme locally?

    Mixed Content: The page at 'https://backlog.zendesk.com/hc/en-us' was loaded over HTTPS, but requested an insecure stylesheet 'http://localhost:4567/guide/style.css'. This content should also be served over HTTPS.

    0
  • Ryan McGrew
    Comment actions Permalink

    @Trapta,

    I haven't seen this error before. Have your tried restarting the ZAT preview session to see if that fixes it? You should be able to hit ctrl-c to kill the process, then type zat theme preview again and navigate to the theme preview start URL.

     

    Thanks!

    0
  • Ryan McGrew
    Comment actions Permalink

    Hmm... I'm not really sure @Trapa. It seems like something on your machine is preventing you from using that port. I haven't seen it reported it by anyone else, so it's hard to diagnose. We're using this library which doesn't have any open issues related to what you're running into - https://github.com/faye/faye-websocket-ruby

    0
  • Keanan Jones
    Comment actions Permalink

    Hi Anna,

    Thanks for your response.

    I was trying to use `zat` to setup a new project locally and then ran `zat theme preview` straight after, it was failing since this was a new fresh app without any settings.

    I downloaded our current theme and ran `zat theme preview` which then worked.

    Thanks

    0
  • Augusto Silva
    Comment actions Permalink

    @drewbeck Did you have a look https://develop.zendesk.com/hc/en-us/articles/360001075068? Some similar problems are discussed there.

    @Maria, Your "username" should be just "mysername@email.com/token" and the password should be "my-token-from-active-api-tokens"

    0
  • Emily Coleman
    Comment actions Permalink

    Hey Bryan—thanks for following up!

    Unfortunately, I don't get any returns when I grep the port number—just comes back with nothing. I tried running a gem update, but no dice on that either. And sadly the restarting didn't come up with anything.

    Do you know if this might be IP address related? I've read a few things about the IP address not binding correctly (as shown in one of the answers here: https://stackoverflow.com/questions/27851440/eventmachine-start-tcp-server-no-acceptor-port-is-in-use-or-requires-root), but I wasn't sure if that was entirely accurate in this use case, since the preview URL is hosted by Zendesk.

    Thanks again for looking into it!

    0
  • Dan Ross
    Comment actions Permalink

    Hi Ryan,

    Are there provisions going to be made for accounts that have disabled password based authentication, as this affects API auth as well. 

     

     

    0
  • Ryan McGrew
    Comment actions Permalink

    Hey @Dan,

    It appears that there is a workaround with using an API token as a password for customers currently using SSO. I am working with some teams internally to get this documented and published and I can let you know when it's published.

    Thanks!

    0
  • Trapta
    Comment actions Permalink

    @Jen, have you tried updating your zat using zat update?

    0
  • Shammel
    Comment actions Permalink

    Thanks, @Ryan.

    But I already did that, which allows the CSS and JS to load. The problem is they are loading over HTTP when the page itself is loading over HTTPS.

    0
  • Jen Culp
    Comment actions Permalink

    @Trapta - yup. Updated zat, updated all gems, yadda yadda yadda...in short, I believe I've followed all suggestions published here and elsewhere within the support site. It's so incredibly frustrating to have localhost lose connection every time  after about 10 seconds. So I build, quickly navigate to the page where my most recent changes are, view those changes, then have to Ctrl+C and do it all over again for each and every change. Overly laborious for what should be standard development.

    0
  • Alexey Vorobyov
    Comment actions Permalink

    Hello! Thanks for convenient tool.

     

    Recently noticed, that the script.js file is not live to update. So, whenever I make a change in a script.js file

    it is not being synced(uploaded in preview). Everything else works just fine.

    What could be the problem?

    What info should I provide for debugging?

    Using:
    macOS Mojave 10.14.3,
    ruby 2.3.7p456

    0
  • Eduardo Alberto
    Comment actions Permalink

    @Jen Culp I don't see Zendesk fixing this any time soon. just run zat theme preview --no-livereload and manually refresh the page. It's better than having to restart the server every time.

    0
  • Emily Coleman
    Comment actions Permalink

    Thanks, you're a hero @Jessie! 🙌

    0
  • Augusto Silva
    Comment actions Permalink

    Hey @Trapta,

    I haven't encountered this issue, but maybe you can try to switch the port you are using by providing a --port option. You can also try to switch off live reload by providing the --no-livereload option.

    Let me know if it helps.

    0
  • Bryan Flynn
    Comment actions Permalink

    Hi Emily -- just circling back here... is this still happening? Between the time it worked and stopped working, do you recall anything changing?

    I'm thinking maybe your development environment has issues. Maybe it's been a while since you set it up and something has gotten out-of-date between the Ruby version you're running and the expected Ruby gems that ZAT depends on. I've tried running 'zat theme' on a Ruby 2.3 install of my own and it works, so I don't think there's anything fundamentally wrong.

    What I'd like you to try is to set up your development environment following the steps in this article (and the subsequent ones it references). It gets you to a stable environment along with installing tools such as rbenv and nodenv that let you switch between Ruby and Node versions easily. Can you set things up using these instructions and give it a try again?

    https://develop.zendesk.com/hc/en-us/articles/360001069127-System-prep-for-app-developers-1-Setting-up-your-command-line-interface

     

    0
  • Augusto Silva
    Comment actions Permalink

    I see, that's unfortunately not possible at the moment, but good product feedback!

    0

Please sign in to leave a comment.

Powered by Zendesk