Patient CRUD SPA

Last updated 2 months ago


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.


Clone repository

$ git clone
$ cd aidbox-angular-sample

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

After server starts, open your browser and go to http://localhost:4200 — 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.