Build Your First App
- Create a boilerplate React app ready to be iterated into your healthcare app idea
- Fetch data from your Commure tenant
- Use pieces of the Commure component library
Read this if you want to build a new healthcare application for eventual deployment to hospitals on the Commure platform.
Prerequisites
Set up your .npmrc and Commure Developer Account
If you haven't already, make sure you:
- Set up a Commure Developer Account
- Configure your local
npm
to pull@commure
packages from the private Commure NPM registry
Details are in the Account Setup guide.
Register your application
In order to connect with the platform you'll first need to register an application with the platform. If you do not register your application then it has no way to authenticate and interact with the Commure platform. You can register your app by logging into the developer portal and following these instructions:
- Click
My Apps
in the sidebar, then theRegister
button to register a new application. - Choose
SPA
for the application type. There are a few different types of applications, but for this tutorial, we will be developing a Single Page Application. - Fill in the
Application Name
section. For the purposes of this tutorial, we'll call itSMART Hello World
. - (Optional) Fill out the
Name of Organization
field with the name of your company or organization. - (Optional) In the
User Type
drop down select whether this application is forPatients
,Practitioners
, orOther
for any person who might use the application, but do not fit into the first two categories. - (Optional) Fill out the
Application Description
field with a summary of what your application does. For example you might put something like, "Help patients order refills on their medication easily and get approval without the hassle of calling up your doctor and pharmacy." - Set the
Redirect URL
field tohttp://localhost:1234/callback
for this tutorial. You can always add other ones or change this one later. This is what you would want for local development, but you should later add callback URLs for your application in production. TheRedirect URL
is where the application should send you after one logs in and authenticates with the platform. The platform will send you to the URL in order to finish up the OAuth 2.0 authentication flow. - Click the
Register
button. You'll see in a confirmation screen with the details of your new application. You should see aCLIENT ID
on this screen. Note it down as you'll need it for later on in this tutorial.
Set up the Commure SMART App boilerplate
Use our create-react-app
Hello World template to easily get up and running.
To set up our FHIR server URL, we will need our tenant ID. This is the ID of the specific Commure instance that you are on. You can find it at the beginning of the URL for your developer screen or by clicking on your user icon in your developer screen.

Run the Hello World SMART application
Now that you have your tenant ID, you can configure your env variables in the .env file.
First rename the .env.example
file to .env
and replace 0000
with your actual Tenant ID,
and CLIENT_ID
with the client ID you received after registering your application.
.env
run your Hello World app with the start command:
Let's get access to some data
Commure makes it easy to integrate with data coming directly from hospitals. When your app is live and in production, it will be dealing with real patient data.
For now, let's seed your tenant with some sample data.
- From your Developer account, select "Tools > Data Library" in the side bar.
- Select the checkbox to the left of "[Getting Started] Patient List". That is the bundle we will be loading into your platform. You can view the bundle by clicking on the eye icon in the same row.
- Click "Submit" to post your bundle.
Where is that data?
Now that we've uploaded some data into our tenant - how can we double check what's in there?
- From your Developer account, select "Tools > Resource Manager" in the side bar.
- Use the dropdown menu or start typing to select
Patient
in the input box. - Populate the
name
field with the following patient name: Clyde Homenick. - Click "Search" to view the data.
Fetch a list of our Patients
Our data is present in our tenant and we have access to it. Let's have our app pull it in.
src/App.tsx
Look at your app and open your browser's console: you should see the Bundle
of sample patients printed out!
Render a Commure component
As you can see, healthcare data shapes are complicated. You could easily spend half of your engineering time wrangling all the various data shapes into usable formats.
Commure provides a component library that makes working with these shapes much, much easier.
Let's render these patients using the PatientCard
component.
src/App.tsx
What's Next?
Now that you've seen the end to end flow, you're all set to start building your app!
If this is your first time here, we recommend you get a feel for the Commure Platform by stepping through building a more full-fledged application. Start with the introduction. Otherwise, here are some other useful tutorials: