Quick Start

Read this if you're an experienced user seeking a refresher on the first steps for jumping back into the Commure platform.

Account Setup

You need a Commure Developer Account to get access to the @commure npm libraries and other tools. Set up your account and npm configuration.

Installation

To initialize an app with all the boilerplate ready to go, we provide a create-react-app template:

yarn create react-app my-commure-smart-app --template @commure/smart-app-typescript

If you're working with an existing app, start by installing our component libraries and @commure/smart-core:

yarn install @commure/components-core @commure/components-foundation @commure/components-data @commure/smart-core

Set up your Commure App to authenticate in a healthcare context with CommureSmartApp:

import React from "react";
import { AppHeader } from "@commure/components-core";
import { CommureSmartApp } from "@commure/components-data";
import SMARTClient from "@commure/smart-core";
import "@commure/components-core/lib/style.css";
const smartClient = new SMARTClient({
clientId: "smart_hello_world",
scopes: ["launch", "openid", "fhiruser", "patient/*.read"],
redirectUri: `http://localhost:1234/callback`,
standaloneLaunch: StandalonePreference.IfNecessary,
fhirBaseUrl
});
function App() {
return (
<CommureSmartApp client={smartClient}>
<div>Hello world!</div>
</CommureSmartApp>
);
}
export default App;

Fetch data by using FhirDataQuery:

import React from "react";
import { FhirDataQuery } from "@commure/components-data";
const MyPatient = () => {
return (
<FhirDataQuery queryString="Patient">
{({ data }) => {
if (!data) {
return "Loading...";
}
console.log(`Loaded patient Bundle: ${JSON.stringify(data, null, 2)}`);
return "Done loading!";
}}
</FhirDataQuery>
);
};
export default MyPatient;

Write data by using withFhirDataMutate:

import React, { useState } from "react";
import { withFhirDataMutate, FhirMethod } from "@commure/components-data";
import { Patient } from "@commure/fhir-types/r4/types";
const CreatePatientScreen = ({ mutate }) => {
const [patientName, setPatientName] = useState("");
const handleNameChange = event => {
const value = event.target.value;
setPatientName(value);
};
const handleCreatePatient = () => {
const createdPatient: Patient = {
resourceType: "Patient",
name: [{ text: patientName }]
};
mutate("Patient", createdPatient, FhirMethod.POST)
.then(resp => console.log("Success!"))
.catch(err => console.log("Failure!"));
};
return (
<div>
<label for="name">Name</label>
<input
type="text"
id="name"
value={patientName}
onChange={handleNameChange}
/>
<button onClick={handleCreatePatient}>Create Patient</button>
</div>
);
};
export default withFhirDataMutate(CreatePatientScreen);

And render visual elements using the component libraries:

import React from "react";
import { FhirDataQuery } from "@commure/components-data";
import { PatientCard } from "@commure/components-core";
import { Patient } from "@commure/fhir-types/r4/types";
const MyPatient = () => {
return (
<FhirDataQuery queryString="Patient">
{({ data }) => {
if (!data) {
return "Loading...";
}
const patients: Patient[] = data.entry;
return patients.map(patient => <PatientCard value={patient} />);
}}
</FhirDataQuery>
);
};
export default MyPatient;