Building a server-side app - Part 6: Deploying the app

In the previous tutorial, you updated the web app to access ZAF APIs. In this tutorial, you'll deploy the web app on a server and install the basic framework app in Zendesk Support.

The tutorial covers the following tasks:

• Deploying the web app
• Updating the Zendesk app

This tutorial is the sixth 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
• Part 3: Accessing external APIs
• Part 4: Accessing framework APIs
• Part 5: Securing the app
• Part 6: Deploying the app - YOU ARE HERE

Deploying the web app

If you don't have access to a web server, you can use an application platform, such as Glitch or Heroku. Depending on the service, you may be able to deploy your app for free. This tutorial's web app doesn't require a lot of server resources because it's only used occasionally by agents or admins, not the general public.

In this tutorial, you'll deploy the web app using Glitch. Glitch offers a free plan you can use.

Preparing the web app for deployment

When deploying, the following configuration files need to be included in the web app's root directory:

• requirements.txt
• start.sh

1. In the app_remote folder, create a requirements.txt file. Paste the following into the file:

   bottle==0.12.23
   cryptography==38.0.1
   PyJWT==2.4.0
   python-dotenv==0.21.0
   requests==2.28.1

   The file lists all the external libraries the app needs to run. If needed, update the version number of each library. To find out the version, run the pip3 show {package_name} command. Example:

   pip3 show bottle

2. In the app_remote folder, create a start.sh file. Paste the following into the file:

   python3 app.py

   The file contains the shell commands that Glitch runs to start the web app.

   The structure of your app_remote folder now looks like this:

   \app_remote
     app.py
     requirements.txt
     start.sh
     \static
       ...
     \views
       ...

3. In app.py, replace the last line (run(host='localhost', port=8080)) with the following conditional block:

   ...
   if os.environ.get('ENVIRONMENT') == 'production':
       run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
   else:
       run(host='localhost', port=8080)

   The block has two possible run statements: one for the Glitch production environment and one for your local environment. At runtime, the app checks for the 'ENVIRONMENT' variable to decide which one to run.

4. Save requirements.txt, start.sh, and app.py

Creating a Glitch project

Create an empty project on Glitch.

1. Sign in to Glitch and go to https://glitch.com/edit/#!/simple-blank-project.

2. Click Remix to create your own copy of the Glitch project.

3. As an optional step, change the app's name and description. Click Settings > Edit project details. After editing the name and description, click Save.

Uploading the web app to Glitch

Upload the remote web app to your Glitch project as a ZIP file.

Tip: If you're familiar with git and GitHub, you can import the web app from a GitHub repo instead. See Importing Code from GitHub in the Glitch documentation.

1. If running, stop the Bottle server by pressing Ctrl+C.

2. Compress the contents of the app_remote folder, including the .env file, into a ZIP file named app_remote.zip.

   Important: Don't include the app_remote folder itself in the ZIP file. You can optionally exclude any config files and folders added by your operating system, such as .DS_Store or __MACOSX. These files aren't needed, but they won't interfere with your Glitch app.

   Example:

   cd tutorial_apps/app_remote
   zip -r app_remote.zip . -x ".DS_Store" -x "__MACOSX"

3. In your Glitch project, click Assets.

4. Drag app_remote.zip into Assets.

5. After it uploads, click the ZIP file and copy its URL.

   

   You'll use the URL later in this tutorial.

6. At the bottom of the Glitch page, click Terminal.

7. In the Glitch terminal, run:

   wget {zip_url}

   Replace {zip_url} with the URL you copied in step 5.

   The command returns a message similar to the following:

   Saving to: 'app_remote.zip?v=123456'

   Copy the quoted file name, including the ?v parameter. You'll use it in the next step.

8. In the same Glitch terminal, run:

   unzip {file_name}

   Replace {file_name} with the file name you copied in the step 7.

9. In the Glitch terminal, run:

   refresh

   The web app's files now appear under your Glitch project's Files.

10. In the Glitch terminal, run:

    pip3 install -r requirements.txt

    The command installs the Python packages in your app's requirements.txt file.

11. As an optional step, delete the ZIP file and related asset from step 4. They're no longer needed, but they won't interfere with your Glitch app.

12. To get the URL for your web app, click Share and copy the Live site link. Example:

    https://zendesk-server-side-app-tutorial.glitch.me

13. Append /sidebar to the URL. Example:

    https://zendesk-server-side-app-tutorial.glitch.me/sidebar

    Save this URL. You'll use it later in the tutorial.

The Glitch preview and the Glitch sidebar URL return a 405 error. This is expected. You can only view the web app from your installed Zendesk app.

Updating the Zendesk app

Update the installed Zendesk app to display the Glitch-hosted web app.

1. In the app_local folder, open the manifest.json file and enter the Glitch sidebar URL in the url property. Example:

   "location": {
     "support": {
       "ticket_sidebar": {
         "url": "https://zendesk-server-side-app-tutorial.glitch.me/sidebar",
         "flexible": true
       }
     }
   },
   ...

2. Save manifest.json.

3. In your shell, navigate to the app_local folder. In the folder, run:

   zcli apps:update

   The command updates and deploys the Zendesk app you installed earlier.

4. After the Zendesk app deploys, reload the Agent Workspace page in your browser. The app should display the start page.

   

Congratulations! You deployed the web app on a server and installed the basic framework app in Zendesk Support. You can keep tweaking and making enhancements to the app if you like. For example, you could add a page that lets agents add tech note ideas to the Asana project.

If you build a server-side app that other support organizations might find useful, consider making it publicly available in the Zendesk Marketplace. See Publishing your app in the Zendesk Marketplace.