Download Zendesk app with react template | Community
Skip to main content

Download Zendesk app with react template

  • April 12, 2022
  • 17 replies
  • 0 views

Israr

I need a favor. I want to install a zendesk app with a react template but I could not find the proper documentation about it so can you please guide me on how can I do it?

17 replies

  • April 26, 2022
Hi Israr,
 
Thank you for posting your question to the Community! For clarity, are you building an app using React and looking to privately install it?
 
Best,
 
Erica

Israr
  • Author
  • April 26, 2022

Hey @erica26

yeah, I want to develop a Zendesk client-side application using react js. But there is no proper documentation that guides me on how to do it. I have already downloaded your template and there are lots of differences between your template and the normal react app.

Thanks  


Kenneth20
  • April 28, 2022

I also have this question - the folder structure of the example app created by using:

zcli apps:new --scaffold=react

Is not the structure of a typical react app. Is there any documentation specific to the folder structure required for a side bar app?


  • May 3, 2022
Hi Israr & Kenny, 
 
Apologies for the delay. We're actively working on a boilerplate repo for ZCLI with React. If you both don't mind giving me a few days, I can probably have that template for you. 
 
Best,
 
Erica

Kenneth20
  • May 3, 2022

@erica26 I had another question - is React the only framework Zendesk currently supports for sidebar apps? Or could we utilize something like Vue/NuxtJs?


  • May 13, 2022
Hi Kenny!
 
So in terms of having available scaffolds we are currently limited. However, you can definitely develop a sidebar app using other frameworks. I've personally built an app with Next.js as well. It would just a matter of establishing/initializing your connection to the client. 
 
Hope this helps!
 
Best,
 
Erica

Kenneth20
  • May 24, 2022

Hi @erica26,

Is there any update on the ZCLI Boilerplate you mentioned above?


  • May 27, 2022
Hi Kenny,
 
I know there's still some testing be done with it. As of now, we're looking at end of June for that to be publicly available. If you did have an immediate need/issue, please let us know and we can pull you into a ticket and take a look into helping you get setup.
 
Best,
 
Erica

Oleg13
  • June 28, 2022

Hi @kenneth20 and @israr,

If you or anyone is still looking out for a boilerplate / scaffold to develop applications with react or any framework of your choice, you can take a look at my boilerplate here:

https://github.com/OlegGulevskyy/zendesk-vite-boilerplate

In this boilerplate you can:

- Use any framework you want (React, Vue, Svelte)
- Framework setup will not be any different to what you are used to see in your normal front end projects.
- Boilerplate handles a lot of things behind the scenes so you don't need to worry about how to set it up, with detailed instructions, how to create all the applications supported by Zendesk Support
- Real hot module replacement during local development, where you can make the changes and see the result instantly without refreshing the applications / page
- Is not based on old zat tool but new zcli, which is more easier to work with. Finally no Ruby installation and no more pain on M1 macs

Hope this helps


Michael221

Hi @erica26, do you have ETA when ZCLI Boilerplate be available? Thank you


Greg29
  • July 26, 2022

Hey all! This isn't an official release, but for now we have this available: https://github.com/eric-at-zd/zendesk-react-boilerplate

 


Michael221

I think what we are looking for as well is some kind of documentation as this boilerplate as its not standard react-app project


Oleg13
  • August 6, 2022

Is there a reason why this does not fits your requirements?
https://github.com/OlegGulevskyy/zendesk-vite-boilerplate

Boilerplate is split into reusable packages. Each package is a separate app location. Each app location is nothing more than a regular react app (or any other framework for that matter). It is attempted to be well documented but things can be adjusted / improved.
It is also utilizes typescript, which is a must have for production grade apps.


Michael221

Thanks Eric, I was able to figure it out and move some files around to make my react project work correct with with Zendesk.


Shai13
  • September 14, 2022

Hi @eric27,
I followed your documentation and things are not worked for me (trying to use the app as it is and upload it manually).

The main issue is that I didn't succeed to package the app into a .zip file.

Thanks in advance!


Eric27
  • September 14, 2022
Hey Shai,
 
You'll need to zip the dist directory after running the production build.

If you're using ZCLI the below command will do this for you:

zcli apps:package dist

If you're using ZAT, you'll need to cd into the dist directory and then run the below command:

zat package

 

Shai13
  • September 15, 2022

@eric27,

Thanks for the quick response!

I've succeed to package a zip.

I faced another issue, maybe you can help me to solve it.
I'm trying to get ticket details when the status is changed.
my code is:
async _statusChanged(){
const [ticket] = awaitPromise.all([
this._client.get('ticket')
]);
console.log(ticket.createdAt)
}
 
This function is fired by the trigger client.on('ticket.status.changed')
The issue is that on the console ticket.createdAt is undefined - seems like the object is empty.
 
Thanks in advance,
Shai