Tray Embedded
Installing 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
Prerequisites
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:
1touch .env2cat <<EOT>> .env3# choose from "prod", "stg" or "fe-stg"4TRAY_ENDPOINT=prod5# ensure master token matches the environment chosen in "TRAY_ENDPOINT"6TRAY_MASTER_TOKEN=<your partner token>7# can be any partner "asana", "tray.io" etc8TRAY_PARTNER=tray.io9EOT
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:
Once logged in you will be presented with the end user 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:
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.