/temporal-demo-ecommerce

Primary LanguageTypeScript

create-temporal-app

Setup

Let's assume you are using localhost for your local services.

HTTPS everything

  1. Install mkcert.
  2. mkcert -install (this just installs the CA to your system)
  3. mkcert -client localhost (this makes all our localhost servers ok for HTTPS)
    1. Note that it creates localhost-client.pem and localhost-client-key.pem files in our root dir
    2. We will use these from our different servers to serve over https where needed

UI

Overview

App

The UI is all in on SvelteKit.

Data

The UI is all in on GraphQL:

Style

The UI is all in on

References

Logging

The UI is all in on roarr.

Running The UI

You can just run_web and open https://localhost:{.env/WEB_PORT}.

Or you want to isolate this:

  1. Set environment variables with .env in the ui/web root.
  2. npm run dev starts an HTTPS dev server.

Testing The UI

We use vitest to test our UI. The describe, beforeEach, etc are globally available because we drop the types to vitest/globals here. Be sure you have the global:true in your test.globals set up in your vitest.config.ts also.

Note we are using the msw package for mock server testing.

Example

Check out the mock-server-urql-integration to see how to stub out requests to your GraphQL API.

Diagnostics

GraphQL Subscriptions

The urql client in the UI uses GraphQL subscriptions backed by Server-Side events (SSE). You can learn how to leverage GraphQL Subscriptions by visiting the diag pages pages.

Support for a simple "ping pong" subscription can be done by:

  1. cd <ROOT>/ui/server
  2. npm start
    1. Starts a SSE Server that emits current time prepended by subscription input args
  3. cd <ROOT>/ui/web
  4. npm run dev

Visit the page at https://localhost:<port>/diag.

How It Works

The urql client instance in this UI delegates to a graphql-sse client instance for handling GraphQL Subscriptions. You must provide a PUBLIC_SUBSCRIPTIONS_URL environment variable to point to your SSE Server.

References