Skip to main content

Setting Up a Web Application

This tutorial will guide you through building a simple web application that interacts with the Haste Health FHIR server using our TypeScript SDK. By the end of this tutorial, you'll have a basic web app that can read and display patient data.

Set up the server​

  1. Open the haste health admin application.
  2. Go to your project, or create one from the system console's Projects tab and click Open console.
  3. Pick ClientApplication from the sidebar's resource types, then click New ClientApplication.
  4. On the JSON tab, paste the following, then choose Actions → Create:
{
  "resourceType": "ClientApplication",
  "name": "Web App",
  "grantType": [
    "refresh_token",
    "authorization_code"
  ],
  "responseTypes": "token",
  "redirectUri": [
    "http://localhost:5173"
  ],
  "scope": "offline_access openid email profile fhirUser user/*.*"
}
  1. After saving the Client Application, copy its ID for later use.
  2. Open Settings from the sidebar and, under FHIR and OIDC Endpoints, click FHIR R4 Base URL to copy it.
  3. In the same view, the User and Project Context card has your Tenant and Project IDs. Click either value to copy it.

Set up the web application​

  1. Clone the following repository.
  2. Create a .env file with the following content (filled with values copied from the server setup):
VITE_TENANT_ID=your-tenant-id
VITE_PROJECT_ID=your-project-id
VITE_FHIR_BASE_URL=your-fhir-base-url
VITE_CLIENT_ID=your-client-id
  1. Run the following commands:
npm install
npm run dev
  1. Open your browser and navigate to http://localhost:5173.
  2. You should see a simple web application that allows you to authenticate and view patient data.