Tray Embedded / Integration Walkthrough / Run the Demo App

Run the Demo App

With the solution you have created you can also test it out with our Embedded demo app.

The demo can be cloned / downloaded from: https://github.com/trayio/embedded-edition-sample-app

Dependencies

  • nodejs

  • npm (installed as part of nodejs)

Setup configuration

The required configuration for the application to run needs to be stored in a .env file at the root of the application. An example of how to do this:

touch .env
cat <<EOT>> .env
# choose from "prod", "stg" or "fe-stg"
TRAY_ENDPOINT=prod
# ensure master token matches the environment chosen in "TRAY_ENDPOINT"
TRAY_MASTER_TOKEN=<your partner token>
# can be any partner "asana", "tray.io" etc 
TRAY_PARTNER=tray.io
EOT

Entering TRAY_PARTNER and TRAY_MASTER_TOKEN will connect the demo to your account in the Tray backend and thus you will have access to the workflows and solutions configured for your company (these are your Embedded ID and Master Token)

Setup and run

Once downloaded open a terminal and cd to the demo app directory. Then install the necessary packages:

npm install

Now run the application with:

npm run start

OYour server should then start running and open automatically in your default browser at localhost:3000 (note that you may have to make an invalid security certificate exception)

You will then be able to login or register as a new end user:

login-register

Once logged in you will be presented with the end user dashboard:

demo-dashboard

If your workflow and solution are setup correctly, clicking on 'Use' will present you with the Config Wizard for your integration.

Demo App Structure

The following tree view shows some of the key files in our demo app:

demo-app-tree-2

PLEASE NOTE: The Tray GraphQL API is a backend API only and calls must be invoked server-side. Client-side Javascript calls to the API should not be made as they will be blocked by CORS. Our demo app (built using https://www.apollographql.com/) is a good illustration of how you can create a UI which presents an End User with their available Solutions while making all API calls server-side.

server/graphql.js -- builds the actual graphql queries and mutations

server/api.js -- creates the get and post operations which work on the endpoints (/api/solutions/ etc.) These call the actual queries and mutations in server/graphql.js using e.g. queries.solutionInstances(externalUserToken) and mutations.createSolutionInstance

src/api/solutions.js - this contains end point calls for listing solutions, instances, creating instances, updating instances, getting an instance. These are then available for dealing with the pop-up config process, and are used in the three files below.

src/views/solutionsDiscover.js -- lists Solutions and triggers the Configuration Wizard when an End User clicks to configure a Solution Instance.

src/components/ConfigWizard.js -- sets up the post message event listeners and handles the rendering of an iframe for the Config Wizard, if needed.

src/components/Instance.js -- for when an end user clicks to do more config after they have done initial config.

src/views/SolutionsMine.js -- lists the Solution Instances that a user has activated and configured for their own use.