Quickstarters
Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

42min
Overview
This guide walks you through creating a CRUD (create, read, update, and delete) application using Mithril.js. 
Throughout this tutorial, you'll learn how to configure a Back4app project titled Basic-CRUD-App-MithrilJS to serve as a powerful backend for your web app. 
We’ll design an efficient data schema, manage it via Back4app’s admin panel, and integrate your Mithril.js frontend using REST API calls.
What You Will Learn
How to set up a CRUD system that reliably handles data using a robust backend.
Strategies to build a scalable database design and link it to a Mithril.js application.
Utilizing Back4app’s intuitive drag-and-drop admin interface to perform CRUD actions.
Deployment methods, including Docker containerization, to get your application live quickly.
﻿
Requirements
Before you get started, please confirm you have:
A Back4app account and an active project.
For assistance, refer to Getting Started with Back4app.
A Mithril.js development environment.
You can include Mithril via npm or a CDN. Ensure you have Node.js (v14+) installed.
Fundamental knowledge of JavaScript, Mithril.js, and RESTful APIs.
For additional guidance, check out the Mithril.js documentation.
﻿
Step 1 – Initializing Your Project
Setting Up a New Back4app Project
Sign in to your Back4app account.
Click the New App button from your dashboard.
Provide the project name: Basic-CRUD-App-MithrilJS and follow the guided steps.
Create New Project
﻿
Once set up, your project will be listed on your dashboard, serving as the backend hub for your application.
﻿
Step 2 – Crafting Your Database Schema
Constructing the Data Model
For this CRUD app, you’ll design a couple of key collections. Below is an outline for creating collections with their respective fields to effectively handle CRUD operations.
1. Items Collection
This collection holds the details for each item.
Field
Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
Brief summary about the item.
created_at
Date
Timestamp of creation.
updated_at
Date
Timestamp for the latest update.
2. Users Collection
This collection manages user profiles and authentication details.
Field
Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
username
String
User’s unique name.
email
String
User’s unique email address.
password_hash
String
Hashed password for secure authentication.
created_at
Date
Timestamp when the user was registered.
updated_at
Date
Timestamp for any modifications.
You can manually add these collections and fields via the Back4app dashboard by creating new classes and defining each column accordingly.
Create New Class
﻿
To add fields, simply select the appropriate data type, provide a name, set defaults, and mark if required.
Create Column
﻿
﻿
Leveraging Back4app’s AI Agent for Schema Automation
The integrated AI Agent on Back4app streamlines schema creation by auto-generating your collections based on a provided prompt.
How to Utilize the AI Agent:
Access the AI Agent from your project dashboard.
Describe your desired schema by detailing the collections and fields.
Review the generated schema and apply the changes.
Sample Prompt:
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This tool helps ensure that your database design is both consistent and optimal for handling CRUD operations.
﻿
Step 3 – Activating the Admin Interface & CRUD Functionalities
Overview of the Admin Interface
The Back4app Admin Interface is a no-code solution designed to help you manage your backend data effortlessly. Its drag-and-drop design makes performing CRUD operations a breeze.
How to Enable the Admin Interface
Head to the More section in your Back4app dashboard.
Click on Admin App then select Enable Admin App.
Set up your administrator credentials to create your first admin user. This process also configures roles (such as B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log into the Admin Interface to manage your collections.
Admin App Dashboard
﻿
Performing CRUD Operations via the Admin Interface
Add New Records: Use the “Add Record” option in any collection (for instance, Items) to create entries.
View/Modify Records: Click on a record to inspect details or edit its fields.
Remove Records: Utilize the delete function to clear obsolete entries.
This intuitive interface enhances user experience by simplifying routine CRUD actions.
﻿
Step 4 – Linking Mithril.js with Back4app
With your backend ready and managed through the Admin Interface, it’s time to connect your Mithril.js frontend to Back4app using REST API calls.
Using REST API Calls with Mithril.js
We will rely on REST API calls to interact with your Back4app backend.
Example: Fetching and Displaying Items
Create a Mithril component that retrieves items from the Items collection:
JS
// src/components/ItemsList.js
const ItemsList = {
  items: [],
  loadItems: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      ItemsList.items = data.results;
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  },
  oninit: function() {
    ItemsList.loadItems();
  },
  view: function() {
    return m('div', [
      m('h2', 'Items'),
      m('ul',
        ItemsList.items.map(item =>
          m('li', { key: item.objectId },
            `${item.title} — ${item.description}`
          )
        )
      )
    ]);
  }
};

export default ItemsList;
// src/components/ItemsList.js
const ItemsList = {
  items: [],
  loadItems: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      ItemsList.items = data.results;
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  },
  oninit: function() {
    ItemsList.loadItems();
  },
  view: function() {
    return m('div', [
      m('h2', 'Items'),
      m('ul',
        ItemsList.items.map(item =>
          m('li', { key: item.objectId },
            `${item.title} — ${item.description}`
          )
        )
      )
    ]);
  }
};

export default ItemsList;
﻿
This component employs Mithril’s lifecycle method oninit to load data when the component is initialized.
Example: Adding a New Item
You can integrate a form to send a POST request to add new items:
JS
// src/components/AddItem.js
const AddItem = {
  title: '',
  description: '',
  submitItem: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          title: AddItem.title,
          description: AddItem.description
        })
      });
      const data = await response.json();
      console.log('Item added:', data);
      // Optionally, refresh the list or redirect the user.
    } catch (error) {
      console.error('Error adding item:', error);
    }
  },
  view: function() {
    return m('div', [
      m('h2', 'Add Item'),
      m('input[type=text]', {
        placeholder: 'Title',
        oninput: m.withAttr('value', value => AddItem.title = value),
        value: AddItem.title
      }),
      m('input[type=text]', {
        placeholder: 'Description',
        oninput: m.withAttr('value', value => AddItem.description = value),
        value: AddItem.description
      }),
      m('button', { onclick: AddItem.submitItem }, 'Add Item')
    ]);
  }
};

export default AddItem;
// src/components/AddItem.js
const AddItem = {
  title: '',
  description: '',
  submitItem: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          title: AddItem.title,
          description: AddItem.description
        })
      });
      const data = await response.json();
      console.log('Item added:', data);
      // Optionally, refresh the list or redirect the user.
    } catch (error) {
      console.error('Error adding item:', error);
    }
  },
  view: function() {
    return m('div', [
      m('h2', 'Add Item'),
      m('input[type=text]', {
        placeholder: 'Title',
        oninput: m.withAttr('value', value => AddItem.title = value),
        value: AddItem.title
      }),
      m('input[type=text]', {
        placeholder: 'Description',
        oninput: m.withAttr('value', value => AddItem.description = value),
        value: AddItem.description
      }),
      m('button', { onclick: AddItem.submitItem }, 'Add Item')
    ]);
  }
};

export default AddItem;
﻿
You can similarly implement update and delete operations using corresponding HTTP methods (PUT/PATCH for updates and DELETE for removals).
﻿
Step 5 – Enhancing Backend Security
Implementing Access Controls
Secure your data by applying Access Control Lists (ACLs) to each object. For instance, to create an item that only the owner can modify:
JS
async function createSecureItem(itemData, ownerId) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          "*": { read: false, write: false }
        }
      })
    });
    const data = await response.json();
    console.log('Secure item created:', data);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerId) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          "*": { read: false, write: false }
        }
      })
    });
    const data = await response.json();
    console.log('Secure item created:', data);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
Setting Class-Level Permissions (CLPs)
Within your Back4app dashboard, adjust CLPs for each collection to define default security policies. This ensures that only authorized users have access to sensitive information.
﻿
Step 6 – User Authentication Setup
Configuring User Accounts
Back4app uses the Parse User class to manage authentication. With Mithril.js, you can manage registration and login through REST API calls. Below is an example for user sign-up:
JS
// src/components/Auth.js
const Auth = {
  username: '',
  email: '',
  password: '',
  signUp: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: Auth.username,
          email: Auth.email,
          password: Auth.password
        })
      });
      const data = await response.json();
      alert('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  },
  view: function() {
    return m('form', {
      onsubmit: function(e) {
        e.preventDefault();
        Auth.signUp();
      }
    }, [
      m('input[type=text]', {
        placeholder: 'Username',
        oninput: m.withAttr('value', value => Auth.username = value),
        value: Auth.username
      }),
      m('input[type=email]', {
        placeholder: 'Email',
        oninput: m.withAttr('value', value => Auth.email = value),
        value: Auth.email
      }),
      m('input[type=password]', {
        placeholder: 'Password',
        oninput: m.withAttr('value', value => Auth.password = value),
        value: Auth.password
      }),
      m('button', { type: 'submit' }, 'Sign Up')
    ]);
  }
};

export default Auth;
// src/components/Auth.js
const Auth = {
  username: '',
  email: '',
  password: '',
  signUp: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: Auth.username,
          email: Auth.email,
          password: Auth.password
        })
      });
      const data = await response.json();
      alert('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  },
  view: function() {
    return m('form', {
      onsubmit: function(e) {
        e.preventDefault();
        Auth.signUp();
      }
    }, [
      m('input[type=text]', {
        placeholder: 'Username',
        oninput: m.withAttr('value', value => Auth.username = value),
        value: Auth.username
      }),
      m('input[type=email]', {
        placeholder: 'Email',
        oninput: m.withAttr('value', value => Auth.email = value),
        value: Auth.email
      }),
      m('input[type=password]', {
        placeholder: 'Password',
        oninput: m.withAttr('value', value => Auth.password = value),
        value: Auth.password
      }),
      m('button', { type: 'submit' }, 'Sign Up')
    ]);
  }
};

export default Auth;
﻿
You can adopt a similar method for logging in and managing sessions.
﻿
Step 7 – Deploying Your Mithril.js Frontend
Back4app’s Web Deployment feature lets you host your Mithril.js application seamlessly by linking your GitHub repository.
7.1 Building the Production Version
Open your project directory in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This will generate a build folder containing optimized static files.
7.2 Organizing and Committing Your Code
Your repository should have a structure similar to:
Text
Basic-CRUD-App-MithrilJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── ItemsList.js
│   │   ├── AddItem.js
│   │   └── Auth.js
│   └── app.js
├── package.json
└── README.md
Basic-CRUD-App-MithrilJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── ItemsList.js
│   │   ├── AddItem.js
│   │   └── Auth.js
│   └── app.js
├── package.json
└── README.md
﻿
Example: src/index.js
JS
import m from "mithril";
import ItemsList from "./components/ItemsList";
import AddItem from "./components/AddItem";
import Auth from "./components/Auth";

// Define a simple routing system
m.route(document.body, "/", {
  "/": {
    view: function() {
      return m("div", [
        m(ItemsList),
        m(AddItem),
        m(Auth)
      ]);
    }
  }
});
import m from "mithril";
import ItemsList from "./components/ItemsList";
import AddItem from "./components/AddItem";
import Auth from "./components/Auth";

// Define a simple routing system
m.route(document.body, "/", {
  "/": {
    view: function() {
      return m("div", [
        m(ItemsList),
        m(AddItem),
        m(Auth)
      ]);
    }
  }
});
﻿
Committing and Pushing to GitHub
Initialize Git (if not already):
Bash
git init
git init
﻿
Add your files:
Bash
git add .
git add .
﻿
Commit the changes:
Bash
git commit -m "Initial commit of Mithril.js frontend"
git commit -m "Initial commit of Mithril.js frontend"
﻿
Create a repository on GitHub (e.g., Basic-CRUD-App-MithrilJS-Frontend) and push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-MithrilJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-MithrilJS-Frontend.git
git push -u origin main
﻿
7.3 Linking GitHub with Web Deployment
Log into your Back4app dashboard, navigate to your project (Basic-CRUD-App-MithrilJS), and select Web Deployment.
Connect your GitHub account following the on-screen prompts.
Choose your repository and branch (e.g., main) that contains your Mithril.js source code.
7.4 Setting Up Deployment Configurations
Configure:
Build Command: Specify npm run build if the build folder isn’t present.
Output Directory: Set this to build to point to your static assets.
Environment Variables: Add any necessary API keys or settings.
7.5 Dockerizing Your Application (Optional)
If you prefer containerization, include a Dockerfile:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve using Nginx
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as builder

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve using Nginx
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 Deploying Your Application
Hit the Deploy button in your Back4app Web Deployment section.
Monitor the build process as Back4app pulls, builds, and deploys your application.
Once complete, you’ll receive a URL for your live Mithril.js app.
7.7 Verifying the Deployment
Open the provided URL in your browser.
Confirm that your application loads, navigations work, and assets are served properly.
Use browser dev tools for troubleshooting if necessary.
﻿
Step 8 – Wrapping Up and Future Directions
Well done! You’ve successfully built a basic CRUD app with Mithril.js integrated with Back4app. 
You set up a project called Basic-CRUD-App-MithrilJS, defined your database schema for Items and Users, and managed your backend via the Admin Interface. 
Furthermore, you connected your Mithril.js frontend using REST API calls and applied security measures to protect your data.
What’s Next?
Improve the Frontend: Add features like detailed views, search capabilities, or live updates.
Extend Backend Functions: Explore cloud functions, additional API integrations, or role-based permissions.
Learn More: Dive deeper into the Back4app documentation and Mithril.js guides for advanced enhancements.
Happy coding and best of luck with your project!
Field	Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	Brief summary about the item.
created_at	Date	Timestamp of creation.
updated_at	Date	Timestamp for the latest update.
Field	Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
username	String	User’s unique name.
email	String	User’s unique email address.
password_hash	String	Hashed password for secure authentication.
created_at	Date	Timestamp when the user was registered.
updated_at	Date	Timestamp for any modifications.
Updated 25 Feb 2025
Did this page help you?
Building a CRUD App with Inferno.js: A Comprehensive Walkthrough
How to Build a Basic CRUD App with Marko? A Step-by-Step Guide