Todo App with MariaDB Connector/Node.js

Todo is a sample web application for managing a todo list. The application is compatible with MariaDB Connector/Node.js and MariaDB Platform for Transactions using the HA (Primary/Replica), Galera, or Transactional Standalone topologies on MariaDB SkySQL.

Todo demonstrates the ease-of-use of MariaDB Connectors and MariaDB Platform for Transactions on MariaDB SkySQL by managing a list of arbitrary tasks, adding new tasks, and tracking their status.

Todo Application

Todo has three components:

  • React.js front-end web application

  • Node.js-based back-end application service

  • MariaDB Platform for Transactions database back-end running on MariaDB SkySQL

Prerequisites

Clone the Repository

The Todo example application is available from the MariaDB Corporation repository on GitHub. It contains the API code in Node.js and other languages, and the React.js front-end web application that connects to the API.

To download the Todo application, clone the repository from GitHub:

$ git clone https://github.com/mariadb-corporation/dev-example-todo.git

This creates a dev-example-todo directory on your file system.

Provision Database Service

Todo requires a back-end database service using the InnoDB storage engine. The application is compatible with all topologies of MariaDB Platform for Transactions, including HA (Primary/Replica), Galera, and Transactional Standalone. For the purposes of demonstration, this guide uses the Transactional Standalone topology on MariaDB SkySQL.

For additional information, see "Launch".

Create the Database Schema

Todo uses an InnoDB table to store the todo entries.

Use the MariaDB Client to connect to the database service and initialize the schema:

  1. Connect to your database service.

  2. Use CREATE DATABASE to create a database for the application:

    CREATE DATABASE todo;
    
  3. Use CREATE TABLE to create a table to store the todo entries:

    CREATE TABLE todo.tasks (
      id INT PRIMARY KEY AUTO_INCREMENT,
      description VARCHAR(500) NOT NULL,
      completed BOOLEAN NOT NULL DEFAULT 0
    ) ENGINE = InnoDB;
    

This creates a todo.tasks table for use by the Todo application with MariaDB SkySQL as a database back-end.

Install the Back-end Application Service

The Todo front-end web application connects to the database service using a back-end application service. The repository contains different versions of the back-end app, enabling you to test and experiment with different languages and different MariaDB Connectors. These instructions are for Node.js using MariaDB Connector/Node.js.

Navigate to the api directory for MariaDB Connector/Node.js in the cloned repository:

$ cd dev-example-todo/api/nodejs/basic

Configure the Back-end Application Service

To connect to your MariaDB SkySQL database service, the application must be configured to use the appropriate credentials.

  1. Create a .env file in the api/nodejs/basic directory, set the variables to the login credentials for your MariaDB SkySQL service:

    DB_HOST = example.skysql.net
    DB_USER = db_user
    DB_PASS = db_user_passwd
    DB_PORT = 5001
    DB_NAME = todo
    
  2. Edit the db.js file and modify the value of the serverCert constant, so that it points to the location of the skysql_chain.pem file on your file system:

    // 2.) Retrieve the Certificate Authority chain file (wherever you placed it - notice it's just in the Node project root here)
    const serverCert = [fs.readFileSync("/path/to/skysql_chain.pem", "utf8")];
    
  3. In the mariadb.createPool() configuration, confirm that the ssl property sets the ca property to the serverCert constant, so that MariaDB Connector/Node.js uses TLS with SkySQL's CA certificate:

    // Create a connection pool
    var pool =
      mariadb.createPool({
        host: process.env.DB_HOST,
        user: process.env.DB_USER,
        password: process.env.DB_PASS,
        port: process.env.DB_PORT,
        database: process.env.DB_NAME,
        connectionLimit: 5,
        // 3.) Add an "ssl" property to the connection pool configuration, using the serverCert const defined above
        ssl: {
          ca: serverCert
        }
      });
    

Build the Back-end Application Service

To build the Node.js back-end application service:

$ npm install

Start the Back-end Application Service

Once you have the back-end application service configured and installed, you can start the service:

$ npm start

Install Front-end

In the Todo sample application, the client is a React.js application that connects to the back-end application service and provides a web interface.

To install and start the web application:

  1. Navigate to the client directory in the cloned repository:

    $ cd dev-example-todo/client
    
  2. Install the web application:

    $ npm install
    
  3. Start the web application:

    $ npm start
    

The React.js web application is now running. You can access it through your web browser at http://localhost:3000.

Live Demonstration

When the front-end web application and the back-end application service are running, Todo simulates an online todo list application, maintaining a record of open and completed tasks on MariaDB Platform for Transactions.

Todo Application

The web application provides basic task management functionality, allowing you to add, finish, and delete tasks.

The client connects to the database service through the back-end application service, retrieves a list of todo entries from the table, crossing through any that have been completed. To add a task, click the "Add New Task" button. To mark a task as complete, click the checkbox. To delete a task, click the trash can icon.