BUILDING FHIR APPS WITH A PRODUCTION MINDSET

Here’s a tutorial from Asymmetrik Software Engineer Shane O’Neill on building FHIR applications with a production mindset. This step-by-step guide will help you build your own FHIR applications with the main copy of the software to be used (what developers call “production”), in mind the whole way.

Feel free to code along by “Forking” our CodeSandbox links to create your own version of the application. You can fork a CodeSandbox project by clicking the Fork button in the top right corner. Let’s get started!

TOOLS AND SERVICES

In this tutorial, we’ll be leveraging several FHIR and Cloud services:

• CodeSandbox — A state of the art online code editor and prototyping tool that makes creating and sharing web apps faster.
• SMART Health IT — The team behind the SMART protocol. Innovators in connecting health system data to applications.
• CDS Hooks — With CDS Hooks, EHRs can further integrate FHIR and SMART into the workflow with clinical decision support.
• Netlify — Hosting for serverless applications, perfect for FHIR Apps.

BUILDING THE FHIR APP

We’re going to build this using a Cloud editor: CodeSandbox. The benefit of using a Cloud editor instead of developing locally is that we get better collaboration tools, as well as a URL out of the box which we can use to perform SMART launches with. We can start by forking a React Starter: FHIR App React (Fork me!)

We can modify this starter application to display the Patient and their Observations, but first we need to configure our Launch page to redirect to the proper URI in order to complete the SMART on FHIR handshake. CodeSandbox provides us with a unique URL that we can use.

This allows SMART launchers to specify a FHIR Server to launch the application against by providing key launch parameters. With this information, the launch route (launch.html) will communicate back and forth with the FHIR Server and Authorization server to securely receive an Access Token. The redirect URI, in this case the “root” route, is the location of the application that will make additional FHIR calls and perform a specific function.

We can see in CodeSandbox that after clicking “Simulate EHR Launch”, we are redirected to select our patient, and then we see the SMART on FHIR launch context. The FHIR Server we’re using is SMART Health IT’s own FHIR R4 server.

We can make FHIR requests in useEffect, and then render them in our return value. Let’s request Patient and Observation.

We can render our Patient resource like this:

And next, our Observations. We can loop through the Observation bundle and render a row for each one.

And finally, let’s put it all together and return these renderings.

Code for this exercise can be found here.

That looks pretty good. Now the User can see Patient and Observation information that has been recorded.

Let’s launch this application using CDS Hooks now!

DEPLOY TO NETLIFY

CDS Hooks is an API specification for providing real-time suggestions and information to Providers about specific EHR events. A suggestion might take the form of recommending a different medication, and information might alert the doctor of a new condition.

An exciting feature of CDS Hooks is the ability to launch FHIR Apps for the provider. Let’s launch the FHIR App we just made using a CDS Hook. To do that we need to deploy our FHIR App to Netlify. Codesandbox has a utility to deploy your project to Netlify automatically. Click the Rocket Ship and blue “Deploy to Netlify” button.

You should be able to visit your site on a new URL. It should look similar to this: https://csb-YOUR-ID.netlify.app/

Once you have your Netlify URL, update your `launch.html` file with the new Redirect URI of your application, and remember to Redeploy back to Netlify.

CREATE A CDS SERVICE

We can create a CDS Service using another CodeSandbox project: CDS Service Example (Fork me!)

A CDS Server consists of two parts: (1) The discovery endpoint where EHRs can see what services are being offered, and (2) the individual service endpoints that serve informational cards back to the EHR.

For example, your CDS Server may have a list of services offered on “/cds-services” and one particular service on “cds-services/patient”

This particular project has both a “/cds-services” endpoint and a “/cds-services/sample-app” pre-configured. However, you must update your fork’s discovery endpoint with the location of your FHIR app.

LAUNCH FROM CDS HOOKS’ SANDBOX

Let’s launch this application using the official CDS Hooks sandbox.

This sandbox allows us to add discovery endpoints and simulate EHR requests to any service offered. Click the cog in the top right and add the URL of your CDS Server. This is the URL provided by CodeSandbox.

Now when you select your CDS Service from the dropdown, you can see your application is being offered to the user. If you configured things correctly, clicking the “View your FHIR App” button will correctly perform a SMART launch against your application. Success!

To recap, today we traversed the entire FHIR App storyline and did the following:

• Built a FHIR App with React
• Deployed our FHIR App to the Cloud
• Configured a CDS Service
• Returned an App Link Card to perform a SMART Launch

Give it a try and let us know how you did by tweeting Asymmetrik or Shane! Or, feel free to raise questions or issues on our Github.

Shane O’Neill is a Software Engineer at Asymmetrik specializing in building FHIR Apps, FHIR Servers, and the processing of FHIR resources. He has helped develop the popular MongoDB FHIR Server implementation node-fhir-server-mongo. Some of his favorite technologies to work with are NodeJS, ReactJS, Redux, and PostgreSQL.