Building a server-side app - Part 2: Displaying server-side content in a Zendesk app
In the previous tutorial in this series, you learned core concepts about server-side Zendesk apps. In this tutorial, you'll build a small web app that displays server-side content in a Zendesk app.
The tutorial covers the following tasks:
- Creating a basic framework app
- Creating a web application
- Displaying server-side content in the Zendesk app
This tutorial is the second part of a series on building a server-side Zendesk app:
- Part 1: Core concepts
- Part 2: Displaying server-side content in a Zendesk app - YOU ARE HERE
- Part 3: Accessing external APIs
- Part 4: Accessing framework APIs
- Part 5: Securing the app
- Part 6: Deploying the app
You'll build the web app using a Python micro web framework named Bottle. The framework helps keep technical details to a minimum so you can focus on the logic, which you can apply in another framework if you want.
Even when building a server-side web app, you still need to create a basic framework app with the required files and folders. You can generate these files using ZCLI.
Create a folder named tutorial_apps. Example:
In your shell, navigate to the tutorial_apps folder. Example:
In the tutorial_apps folder, run:
When prompted, enter the following information:
- Directory name: app_local
- Author's name: Your name
- Author's email: Your email address
- Author's website: Leave blank and press Enter.
- App name: Server-side App Tutorial
ZCLI creates app starter files in the app_local folder.
In the app_local folder, open manifest.json in your text editor. In the file, replace the
urlvalue with the following:
You'll need to change the URL again when you deploy the web app.
Next, develop and test the web app using Python.
In your shell, run:
pip3 install bottle requests
In the tutorial_apps folder, create a folder named app_remote. Example:
In the app_remote folder, create a text file named app.py.
Open app.py in a text editor and paste the following into the file:
from bottle import route, run
# app code goes here
The first line imports the Bottle
run()methods to create routes to pages and run the web app.
The Bottle framework has a built-in development server you can use to test your changes. The
run()method starts and runs the web server on port 8080.
To learn more about the framework, see Bottle: Python Web Framework on the Bottle website.
- Indentation matters in Python. When copying the examples in this tutorial, make sure to indent your lines appropriately. So far all the lines are flush with the left margin.
- Indent with 4 spaces, not a tab. Python will stop executing and report an indentation error if it encounters a tab character.
To display server-side content in the iframe app in Zendesk Support, create a route in the web app to handle requests from the iframe. To refresh your memory, Zendesk Support makes an initial request to
http://localhost:8080/sidebar, the URL specified in your manifest.json file.
In app.py, replace the
# app code goes herecomment with the following route:
return '<p>App content from the server</p>'
send_iframe_html()function returns the line of HTML in response to any HTTP request to the
/sidebarroute. You can test it using the built-in development server in Bottle.
In your shell, navigate to the app_remote folder.
Run the following command to start the local server:
Wait a moment to allow the server to start, then open
http://localhost:8080/sidebarin a browser.
The following HTML page is displayed:
You can already test the app in Zendesk Support's Agent Workspace:
Make sure your Bottle server is still running. Zendesk Support will request the initial page from it.
In another terminal session, navigate to the app_local folder.
Start a local ZCLI web server by running the following command:
In your browser's private or incognito window, sign in to Zendesk Support and go to the Agent Workspace. From the workspace, open a new or existing ticket.
The URL should look like this:
Append ?zcli_apps=true to the ticket URL, and reload the page. The URL should look like this:
Click the Apps icon.
The app displays the HTML served by the Bottle web server.
That's all there is to displaying server-side content in a Zendesk app. The rest is just the details of building the web app, including creating pages that can access both external and framework APIs.
In this tutorial, you built and ran a web app that displayed content in the iframe in Zendesk Support. In the next tutorial, you'll learn how to request and display external data in Zendesk Support. See Part 3 - Accessing external APIs.