Development Environment

This section illustrates how to prepare your development environment so you can run the sample integration locally. As mentioned, the sample application is developed with a React user-interface and a Python 3 backend. You are not limited to using React and/or Python, and can use any contemporary web application technology to build an EPC application.

The sample application you will build, ZipRight, has 2 components:

A User-Interface (UI) application - which will be embedded in the host Encompass web application and will interact with the EPC JavaScript API
A backend application - which will act as a middleware between the UI, the USPS API, and the EPC REST API

Time to prepare your development environment! 👩‍💻

User-Interface:

Install Node version 12 and Node Package Manager (npm) version 6
Install the Visual Studio Code IDE

Installing Node and Node Package Manager

You can download and install the latest iteration of Node version 12 from nodejs.org. This installation includes Node Package Manager version 6, a popular JavaScript dependency manager utilized by the sample application. Once installed, you can check the specific versions of Node and NPM by typing the following commands in your shells:

$ node --version

$ npm --version

Installing the Visual Studio Code IDE

You can download and install the latest version of Visual Studio Code from code.visualstudio.com. It is a lightweight and performant IDE optimized for building and debugging modern web and cloud applications in any application framework. It has extensive tooling and plugins for both JavaScript and Python development. Alternatively, you can skip this step and just use an IDE or editor of your choosing.

Backend:

Install Python 3 and the Python Package Installer (pip)

Installing Python 3

You can download and install the latest version of Python 3 from python.org. Starting with Python 3.4, the Python Package Installer (pip) is included by default with the Python binary installers. The Python Package Installer is the installer program for the external Python dependencies of EPC's backend application.

Please note, your OS might be preinstalled with an older version of Python. For example, macOS is preinstalled with Python 2. To check your versions of python and pip, after installation, enter the following commands in your shells:

$ python --version

$ pip --version

If the returned version does not match Python 3, make sure the environment path points to the folder where you installed Python.

Choosing a webhook URL for development and testing

While you develop and test your app, you can use a webhook payload delivery service like Smee to capture and forward webhook payloads to your local development environment. Never use Smee for an application in production, because Smee channels are not authenticated or secure. Alternatively, you can use a tool like localtunnel, or the Hookdeck Console that exposes your local machine to the internet to receive the payloads.

Creating a webhook URL with Smee

You can use Smee to create a unique domain where GitHub can send webhook payloads, without exposing your local development to the internet. Smee calls this unique domain a "Webhook Proxy URL." You can use Smee's Webhook Proxy URL as the webhook URL for your GitHub App.

1- To use Smee to create a unique domain, go to https://smee.io and click Start a new channel.
2- On the Smee channel page, follow the instructions under "Use the CLI" to install and run the Smee client.
3- To connect your Smee webhook URL to your product, use your unique Smee domain in the "Webhook URL" field of your product.

Now that you have completed the prerequisites and prepared your development environment, you can start developing ZipRight, your first EPC application! 🎉