Use Aidbox with React
Learn how to launch the sample app, add some sample data and query the data from a React app.
This quickstart guide demonstrates how to launch a PHR sample app on the Aidbox platform. The sample app has been developed using the official JavaScript SDK, incorporating Aidbox's best practices.
The guide helps you to explore the following Aidbox features:
Configure Access Control within the Aidbox UI using the integrated REST console. Utilize the provided code snippets to create the Client and Access Policy for the sample app.
POST /Client
content-type: text/yaml
accept: text/yaml
id: <client-name>
secret: <client-secret>
grant_types: ["basic"]
POST /AccessPolicy
content-type: text/yaml
accept: text/yaml
link: [{ id: <client-name>, resourceType: Client }]
engine: allow
By default, Aidbox has a policy that locks down access to all data. You need to enable data sharing by adding Access Policies for Clients. Aidbox supports different ways to describe these policies, like JSON Schema, SQL, or Macho DSL. Learn more.
Populate your Aidbox instance with some synthetic data from Synthea using the Import endpoint and the handy REST console. Just run the following request to create the data:
POST /fhir/$import
content-type: text/yaml
accept: text/yaml
id: synthea
contentEncoding: 'gzip'
inputs:
- resourceType: Encounter
url: https://storage.googleapis.com/aidbox-public/synthea/100/Encounter.ndjson.gz
- resourceType: Organization
url: https://storage.googleapis.com/aidbox-public/synthea/100/Organization.ndjson.gz
- resourceType: Patient
url: https://storage.googleapis.com/aidbox-public/synthea/100/Patient.ndjson.gz
- resourceType: Condition
url: https://storage.googleapis.com/aidbox-public/synthea/100/Condition.ndjson.gz
- resourceType: Immunization
url: https://storage.googleapis.com/aidbox-public/synthea/100/Immunization.ndjson.gz
- resourceType: Observation
url: https://storage.googleapis.com/aidbox-public/synthea/100/Observation.ndjson.gz
The $import endpoint is your go-to tool for loading FHIR data asynchronously into Aidbox. It effortlessly loads data from a public link specified in your HTTP request without performing any validation. Learn more.
Time to get your hands on the sample app! Simply clone it from GitHub at this link: https://github.com/Aidbox/aidbox-sdk-js/tree/main/personal-health-record
git clone https://github.com/Aidbox/aidbox-sdk-js.git
Next up, let's configure the web app environment variables. Grab the .env.tpl file, make a copy called .env, and modify the following variables according to the configuration you set up in Step 1:
cd aidbox-sdk-js/personal-health-record/
.env
VITE_APP_CLIENT=client-name - Client name
VITE_APP_SECRET=secret - Client secret
VITE_APP_AIDBOX_URL=https://your-app-name.aidbox.app/ -
npm install
npm run dev
Congratulations! You now have a fully functional application that is ready to be customized according to your needs. Explore the personal health record app sample from a technical perspective and uncover the wonders of working with Aidbox through the SDK.
Last modified 2mo ago