raylo-apollo v0.1.1

Raylo Frontend

Development Setup

System requirements

• Node - version 14.x
• Yarn
• Playwright

Install

yarn install

Start App

yarn start

Start the App using HTTPS

NOTE:

Credit Kudos expects redirect URI to be HTTPS and its integration won't work otherwise. Auth0 also works only over HTTPS, so you won't be able to login otherwise.

• Enable https in your .env.development.local

  HTTPS=true

• Depending on the browser, it might be required to temporarily enable insecure localhost, example for Chrome:

Paste in your address bar the code below and enable the flag

chrome://flags/#allow-insecure-localhost

• Ensure the backend app is allowing the HTTPS url

Start Storybook

yarn storybook

How to run the unit test suite

• To run all the tests:

yarn test --watchAll

Linting

• To run a linting check:

yarn lint

• To run linting format on all files:

yarn format

Troubleshooting

If you get an error when running tests about:

Error: EMFILE: too many open files, watch

you may need to install Watchman.

If using Brew, you can do that with:

brew install watchman

How to run the Playwright end-to-end tests

Install Playwright and required browsers

npx playwright install --with-deps

Note to install MSEdge on MacOS you will need to download directly from the website

Run Test suite

yarn playwright test

To see the tests running use:

yarn playwright test --headed

To start writing a test using the generator

npx playwright codegen https://localhost:3000/ --ignore-https-errors

The Playwright tests, require the frontend app to be running locally under HTTPS and will use the staging API app - https://api.staging.raylo.com/graphql.

Run Playwright using local frontend app and local API app

Add to or create file .env.development.local by running:

echo "REACT_APP_GRAPHQL_ENDPOINT=https://localhost:3001/graphql\nREACT_APP_CLIENT_ID=mneAvMt9BX08r6e81kK6FZVTk8vQIvBX\nHTTPS=true" >> .env.development.local

and then start the frontend app as usual.

Debugging Playwright tests

npx playwright show-trace

(You will then be able to select a trace.zip file from a directory within the ./playwright-test-results directory) Note: If you are getting timeouts locally, try reducing the workers used in the playwright.config.ts file to reduce the load on the API.

Production

Troubleshooting

If there is a Sentry error, the Breadcrumbs sections will include SmartLook requests. Using those requests, you will be able to find the Visitor ID to watch what the user experienced.

The URLs are of this form:

https://events-writer.smartlook.com/rec/events?rid=cpQ0TPNynb4&sid=j9nYoniD3Lz&key=1f9645b0282fb46b912aa2c90fed6cf1c0a44f2b&vid=X9gnVnfc4MR&group=360d&source=website

and it contains the Visitor ID in the vid param (in the example above, it is X9gnVnfc4MR).

To find the specific recording of that visitor, take a look at the sid param (in the example above, it is j9nYoniD3Lz).

On the SmartLook site, the URL of a recording will be in the form of:

https://app.smartlook.com/c27bc2cd24434ba6ecc37098/recordings/player/__VISITOR_ID__/__SESSION_ID__

and for the example above, it would be:

https://app.smartlook.com/c27bc2cd24434ba6ecc37098/recordings/player/X9gnVnfc4MR/j9nYoniD3Lz

Deployment

The React app is hosted on Netlify.

• Staging is deployed via Github Actions. When the main branch passes it's CI build we deploy via Netlify's build hook.

• Production is a one click deploy on Netlify UI. Steps to deploy:

  • Login to Netlify using your Raylo google account (you will need to request access).
  • Click app.raylo.com
  • Click 'deploys' at the top of the page. On the deployment screen check the latest version of the main branch has built in the list.
  • Click 'Trigger deploy' > 'Deploy site'.

Maintenance mode

To enable maintenance mode:

• Set an REACT_APP_MAINTENANCE_URL environment variable in Netlify with the following value https://www.raylo.com/503
• Re-deploy the app

To disable maintenance mode:

• Remove the REACT_APP_MAINTENANCE_URL environment variable in Netlify
• Re-deploy the app