Creating a CRUD application with MongoDB, Express, Node & Ionic - part 1

December 22, 2017, 8:00 am Categories:


Over the last decade JavaScript has come a long way; from niche language to the driving force behind modern web applications and hybrid mobile apps. With the release, and subsequent growth, of Node (and its rich ecosystem of packages) developers can now power their applications directly from JavaScript running on the server.

This would have been unimaginable to any but the most niche developers back in the early to mid 2000's.

With an API written in JavaScript, being free to download, easy to install and with an ever growing repository of packages that add or extend functionality for the server node's barrier to entry is significantly lowered when compared to more 'traditional' alternatives such as the LAMP stack (Linux, Apache, MySQL and PHP) or IIS/SQL Server.

Furthermore as most developers are familiar with JavaScript (or variants of that language such as TypeScript) the ability to use the same language for both server and front-end development is a pretty big sell.

Over the course of this tutorial we'll use node (along with selected packages) to query a MongoDB database and develop a CRUD (Create, Read, Update and Delete) system that we can interface with directly through an Ionic powered application.

What we'll be developing

The project that we'll develop over the course of this tutorial will consist of a gallery style application that utilises a node/ExpressJS/MongoDB backend to handle the following requests from the Ionic app:

  • Retrieving all existing records
  • Adding new records
  • Updating an edited record
  • Deleting a selected record
  • Publishing a selected record to a PDF file

The development focus will be from a Mac OS perspective (although the code can be developed on other platforms with the possible exception that some software installation steps might vary on Windows or Linux) and the Node/MongoDB backend will run exclusively from our desktop/laptop machines and not that of a remote server (although the code will work perfectly well there too if you want to deploy to a hosted server environment instead).

On the Ionic side we'll develop for both iOS and Android and make use of Ionic Components and Angular services as well as the Ionic Native Camera plugin to capture images from the device photolibrary or camera.

By the end of this tutorial (which will span 4 separate articles due to the amount of content that needs to be covered) you should be able to run and interact with an app similar to the following (your content will, of course, vary considerably to my own):

ionic-gallery application displaying records as a list with an image icon and buttons to manage the record


You should already have NodeJS installed on your system. If you don't download the installer for your particular system and follow the installation steps.

You will also need to install and configure MongoDB.

If you've never heard of and/or aren't familiar with MongoDB this is simply a document-oriented database that allows developers to use JSON objects within which to save their data.

We'll cover MongoDB in a little more depth later on in this part of the tutorial but first we need to ensure that the software is installed on our system.

Installing & configuring MongoDB

The simplest and quickest way to install MongoDB on Mac OS is with Homebrew.

If you don't have Homebrew currently installed on your Mac OS system then run the following from the command line to rectify this:

/usr/bin/ruby -e "$(curl -fsSL"

With Homebrew installed simply run the following command to install the Community Edition of MongoDB to your system:

brew install mongodb

Be sure to follow the steps listed here to successfully run the installed MongoDB software.

With MongoDB now installed and running let's explore the underlying database and concepts before taking a little sidestep and exploring a GUI application that we can use to interact with created databases.

Data modelling according to Mongo

MongoDB, as explained earlier, is a document database solution that stores data in the form of JSON object-based documents.

If you're familiar with SQL databases then it might be a little 'odd' at first to understand how document-oriented databases tackle data storage.

Simply put a MongoDB database instance is structured around the use of collections, documents and fields.

Broadly speaking a collection can be thought of in similar terms to a SQL database table; it is used to store category specific data (I.e. user details, restaurant locations, film genres etc).

A document, if we continue our comparison with SQL terms, can be seen as the individual 'row' of data within a collection.

Finally, a field in a document can be thought of as a column in a SQL table. Similar to their SQL column counterparts a field is able to be defined by particular data types (such as String, Boolean, Date etc) and indexes where required.

It's important to note that each document can have different fields applied to it if and where required, which makes document-oriented databases like MongoDB, radically different from traditional SQL databases with their strict schemas.

For the purposes of this tutorial we're going to maintain a strict schema for the documents within our MongoDB database instance using a node package called Mongoose which will allow us to map objects to data (more on this later).

With this conceptual map in place let's quickly explore a GUI tool that we can use to interface with MongoDB databases.

Robo 3T

Formerly known as Robomongo Robo 3T is a free, open-source, cross platform GUI tool (Windows, Mac OS and Linux) for managing local MongoDB databases.

Once MongoDB has been installed on your system you can simply interface with the software through the Robo 3T tool instead of the command line (which although not inefficient can be tedious at times to work with - no matter how hardcore a developer you might be it's hard to argue against the benefits of a GUI when it comes to data management).

For example, you can view a collection's documents in tree view:

Robo 3T software displaying documents within a MongoB collection in a tree view

Alternatively, you can choose to view a collection's documents in a table view instead:

Robo 3T software displaying documents within a MongoB collection in a table view

Or maybe just opt for a document view instead:

Robo 3T software displaying documents within a MongoB collection in a document view

Documents can be individually managed by right-clicking on the selected document to present a contextual menu listing the available options:

Robo 3T software displaying a contextual menu for managing a MongoDB document

The selected document is then able to be edited in-situ:

Robo 3T software displaying an edited MongoDB document

As you've no doubt gathered from the above screen captures Robo 3T makes interfacing with and managing MongoDB database collections and documents quick and easy to accomplish. With such a well designed, intuitive and user friendly interface the software is a must-have for any developer working with MongoDB (and it certainly beats using the command line - although the tool does offer that facility too).

In the context of this tutorial we'll only be using Robo 3T to test the results of managing the MongoDB data with our Ionic/Node application (but it's a tool you might want to consider using in your own MongoDB projects - if you aren't already).

Defining the project foundation

Navigate to a location on your hard drive where you would store your digital projects and create a directory named ionic-crud that contains 2 sub-directories: app and server - as shown in the following project structure:

    | - app
    | - server

The app directory is where we'll create the Ionic Framework application that we'll be developing for this project.

The server directory is where our Node/Express application, that acts as the interface between our Ionic application and the MongoDB database, will be created and developed.

It's with the server directory that we'll start laying down the necessary foundations for this project.

Backend setup

Open your system CLI and navigate to the root of the server directory before running the following command to generate a node project:

npm init

With each CLI prompt that is subsequently displayed (these are used to generate the package.json file for the project) simply accept all the defaults before running the following packages:

npm install express —save
npm install body-parser --save 
npm install pdfkit --save
npm install mongoose --save
npm install -g nodemon

As stated earlier node has a large ecosystem of packages that can be added to projects so let's take a moment to walk through each of the above and discuss why they are installed.

Express - A web application framework for node that provides features such as routing (defining navigation paths within the application), HTTP utility methods (I.e. POST, PUT, DELETE) and middleware functions (those functions that have access to and can manage request/response objects as well as calling other middleware and non-middleware functions).

Body Parser - A Middleware module that allows HTTP POST requests to be processed allowing the data extracted from these to be parsed as JavaScript objects.

PDFKit - A node compatible PDF document generation library

Mongoose - An object modeling tool that interfaces with MongoDB to manage documents and their data

Nodemon - Listens for changes to files within a node project during development and automatically restarts the node application to publish these changes

So, in a nutshell, we'll use Express to define the necessary routes for the different parts of the node application (I.e. retrieving gallery records, adding new records, generating PDF files etc), implement the Body Parser module to handle data from POST requests, rely on Mongoose to manage communication with the project's MongoDB database, publish PDF documents courtey of the PDFKit module and let the nodemon module listen for changes to files during development and publish those in realtime.

Be aware that we won't be implementing any authentication logic to control who can/can't access the node application. Security isn't high on our list of priorities for this tutorial (which it absolutely SHOULD be in a real world production context) but there's nothing to stop you experimenting with introducing such features to the application later on.

I'll leave that to you as a homework exercise! ;)

With the software for the node aspect of the project now in place (we'll cover the development of this in the next tutorial) we can move onto laying the foundation for the Ionic application.

Mobile setup

Within the system CLI navigate to the root of the app directory and run the following command to generate a new Ionic project named ionic-gallery:

ionic start ionic-gallery blank

Once the project has been generated run the following commands to:

  • Install iOS & Android
  • Install the Ionic Native Camera plugin
  • Generate the necessary pages and services
cd ./ionic-gallery
ionic cordova platform add ios
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
ionic g provider image
ionic g page manage-gallery-item
ionic g page view-gallery

We won't be developing the ionic-gallery application in this part of the tutorial but, nonetheless, let's take a moment to configure the application's root module and ensure that the required imports and declarations are all in place.

Open the ionic-gallery/src/app/app.module.ts file and change the code contained within this to the following:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Camera } from '@ionic-native/camera';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ImageProvider } from '../providers/image/image';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
export class AppModule {}

With the necessary software installed and the foundations for the project firmly in place I think this would be a good point at which to wrap up part 1 of this tutorial.

In Part 2 we'll be developing the node aspect of the project.

Part 3 will focus on the Ionic development of the project.

Part 4 will complete the project and conclude this tutorial series by focussing on the development of the PDF rendering functionality for the application.

In summary

We've covered a lot of ground in part 1 of this tutorial; exploring the project that we'll be developing along with the underlying technologies and tools that will be used.

The necessary software tools have been installed and the node/Ionic environments created as required which leaves us with a solid footing from which to develop the node functionality in Part 2 of this tutorial.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.