Patient CRUD SPA


For this tutorial you will need git, node js and any version of Aidbox as a backend. We recommend to use Aidbox.Dev as the most easiest way. Visit the Aidbox.Dev installation guide for detailed information and instructions how to install Aidbox backend for development.


This repository on GitHub

In this guide we will locally launch FHIR application based on Angular framework and Aidbox.Dev as a backend for this SPA. This simple application will implement basic CRUD operations on patient list.

Aidbox products support OAuth2.0 authorization framework and Access Control mechanism to provide ability for developers to create applications which can interact securely with Boxes (Aidbox FHIR server instances). For a single-page application, it's a common practice to use OAuth2.0 Implicit Grant flow.


Clone repository

$ git clone
$ cd aidbox-angular-sample

Pre-configure your box with client and patients

To enable implicit OAuth 2.0 flow we have to create Client in your box - go to REST Console and create:

POST /Client
resourceType: Client
id: SPA
redirect_uri: 'http://localhost:4200'
- implicit

As well let's add one patient:

POST /Patient
resourceType: Patient
id: pt-1
- given: [John]
family: Johnson
birthDate: '1971-02-03'

Configure Base URL

Now you need to configure your FHIR server base URL.

If you are using Aidbox.Dev as a backend, you need to specify AIDBOX_URL as http://localhost:8888 in the environment.ts file.

export const environment = {
AIDBOX_URL : "http://localhost:8888"

When you want to run this sample application with Aidbox.Cloud, you need to specify AIDBOX_URL as https://<YOUR_BOX_NAME>

export const environment = {

Installation and start

This sample application requires minimum Node JS version 8.9.

Install all packages and angular cli:

$ npm install
$ npm install -g @angular/cli

And launch application:

$ ng serve
# or
$ ng serve --port 4242 # start a web server for our SPA on the specified port

After server starts, open your browser and go to http://localhost:4200 — after authorization and granting access you will see Angular simple app.

It is a list of patients and information about them. Patient is a FHIR resource. You can create, view, edit, and delete patient data — this is a standard set of CRUD operations. Also in this demo, we have the ability to search by last/first name and get a paginated output of patient list.