Quickstarters
How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

43min
Introduction
In this guide, you'll learn how to create a functional CRUD (create, read, update, delete) application using Backbone.js. 
This walkthrough will help you understand the core operations of a web application by showing you how to construct a CRUD system that effectively manipulates and manages data. 
You will begin by setting up a Back4app project titled Basic-CRUD-App-Backbone to serve as a reliable backend for your application.
After that, you'll design a flexible database schema by defining specific collections and fields—either manually or with assistance from the Back4app AI Agent. This process ensures your data structure is tailored for seamless CRUD interactions.
Next, you will use the intuitive Back4app Admin App, which features a drag-and-drop interface, to easily handle your data collections. This tool simplifies CRUD operations, making backend data management straightforward.
Finally, you'll connect your Backbone.js frontend to Back4app using the REST API and guide relies on standard API calls to interact with your backend. You’ll also learn how to secure your data with robust access controls.
By the conclusion of this tutorial, you'll have constructed a production-ready web application that supports CRUD functionalities and includes user authentication along with advanced data management features.
Key Takeaways
Master the art of building CRUD applications that handle data effectively using a dependable backend service.
Discover strategies for creating a scalable database design and integrating it with a Backbone.js frontend.
Learn to use the Back4app Admin App’s drag-and-drop features to simplify create, read, update, and delete tasks.
Get acquainted with deployment methods, including Docker containerization, to quickly launch your application.
﻿
Prerequisites
Before diving in, make sure you have:
A Back4app account and an active project.
Refer to Getting Started with Back4app if you need guidance.
A Backbone.js development setup.
You can include Backbone.js via a package manager like npm or by linking directly from a CDN.
A basic understanding of JavaScript, Backbone.js, and RESTful APIs.
Check out the Backbone.js documentation for a refresher if needed.
﻿
Step 1 – Project Initialization
Creating Your Back4app Project
Sign in to your Back4app account.
Click on the “New App” button from your dashboard.
Name your project: Basic-CRUD-App-Backbone and follow the prompts to set it up.
Create New Project
﻿
Once your project is created, it will be visible on your dashboard, ready to be configured as your backend for the application.
﻿
Step 2 – Crafting the Database Schema
Defining Your Data Model
For this CRUD application, you will set up several collections. Below are sample collections with the fields and types you need to establish your schema, ensuring your app can perform all CRUD operations.
1. Items Collection
This collection will hold details for each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
A brief overview of the item.
created_at
Date
Timestamp indicating when the item was added.
updated_at
Date
Timestamp for the most recent update.
2. Users Collection
This collection stores user details and authentication info.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
User’s unique email address.
password_hash
String
Securely hashed password.
created_at
Date
Account creation timestamp.
updated_at
Date
Last modification timestamp of the user data.
You can create these collections manually via the Back4app dashboard by adding a new class for each collection and configuring the corresponding fields.
Create New Class
﻿
Simply choose a data type, set the field name, provide a default value if needed, and mark the field as required.
Create Column
﻿
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent is a handy utility within your dashboard that helps automate database schema creation. 
By inputting a descriptive prompt for your desired collections and fields, the AI Agent can swiftly generate the necessary database structure, saving you time and ensuring consistency.
How to Use the AI Agent:
Access the AI Agent:
Log into your Back4app dashboard and locate the AI Agent in the navigation or project settings.
Detail Your Data Model:
Input a prompt that outlines the collections and fields you require.
Review and Implement:
Evaluate the suggested schema and apply the changes to your project.
Sample Prompt
Text
Create the following collections for 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 for 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)
﻿
Utilizing the AI Agent ensures that your schema is properly structured for your application's requirements.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introducing the Admin App
The Back4app Admin App is a no-code interface that lets you efficiently manage your backend data. 
Its intuitive drag-and-drop design makes executing CRUD operations such as adding, viewing, modifying, and deleting records incredibly simple.
Activating the Admin App
Open the “More” menu from your Back4app dashboard.
Select “Admin App” and then choose “Enable Admin App.”
Set up your administrator credentials by creating the initial admin account. This step also establishes roles (like B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log in to the Admin App to handle your data seamlessly.
Admin App Dashboard
﻿
Managing CRUD Operations Using the Admin App
Within the Admin App you can:
Add New Entries: Use the “Add Record” option in any collection (for instance, Items) to create new entries.
View/Modify Records: Click on a record to inspect or alter its details.
Remove Records: Utilize the delete feature to clear out unwanted data.
This interface enhances user experience by streamlining all data management tasks.
﻿
Step 4 – Connecting Backbone.js with Back4app
Now that your backend is configured, it's time to integrate your Backbone.js frontend with Back4app.
Using Backbone.js with REST API Calls
Since the Parse SDK is not tailored for Backbone.js, you'll employ Backbone’s built-in models, collections, and views in tandem with REST API calls to interact with Back4app.
Setting Up Your Backbone Models and Collections
Begin by defining a model for your items and a corresponding collection. For example:
JS
// models/Item.js
var Item = Backbone.Model.extend({
  urlRoot: 'https://parseapi.back4app.com/classes/Items',
  idAttribute: 'objectId',
  defaults: {
    title: '',
    description: ''
  }
});
export default Item;
// models/Item.js
var Item = Backbone.Model.extend({
  urlRoot: 'https://parseapi.back4app.com/classes/Items',
  idAttribute: 'objectId',
  defaults: {
    title: '',
    description: ''
  }
});
export default Item;
﻿
JS
// collections/ItemsCollection.js
import Item from '../models/Item';
var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  url: 'https://parseapi.back4app.com/classes/Items',
  parse: function(response) {
    return response.results;
  }
});
export default ItemsCollection;
// collections/ItemsCollection.js
import Item from '../models/Item';
var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  url: 'https://parseapi.back4app.com/classes/Items',
  parse: function(response) {
    return response.results;
  }
});
export default ItemsCollection;
﻿
Building a Backbone View for CRUD Interactions
Create a view to render the list of items and handle user actions such as adding, editing, and deleting.
JS
// views/ItemsView.js
import Backbone from 'backbone';
import _ from 'underscore';
import ItemsCollection from '../collections/ItemsCollection';

var ItemsView = Backbone.View.extend({
  el: '#app',
  initialize: function() {
    this.collection = new ItemsCollection();
    this.listenTo(this.collection, 'sync update', this.render);
    this.collection.fetch({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
  },
  events: {
    'click #add-item': 'addItem',
    'click .delete-item': 'deleteItem',
    'click .edit-item': 'editItem',
    'click #save-edit': 'saveEdit'
  },
  render: function() {
    var template = _.template(`
      <h2>Items</h2>
      <div>
        <input id="new-title" type="text" placeholder="Title">
        <input id="new-description" type="text" placeholder="Description">
        <button id="add-item">Add Item</button>
      </div>
      <ul>
        <% collection.each(function(item) { %>
          <li data-id="<%= item.id %>">
            <strong><%= item.get('title') %></strong> - <%= item.get('description') %>
            <button class="edit-item">Edit</button>
            <button class="delete-item">Delete</button>
          </li>
        <% }); %>
      </ul>
      <div id="edit-section" style="display:none;">
        <input id="edit-title" type="text">
        <input id="edit-description" type="text">
        <button id="save-edit">Save</button>
      </div>
    `);
    this.$el.html(template({ collection: this.collection }));
    return this;
  },
  addItem: function() {
    var title = this.$('#new-title').val();
    var description = this.$('#new-description').val();
    var newItem = this.collection.create(
      { title: title, description: description },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        wait: true,
        success: function() {
          console.log('Item added successfully.');
        },
        error: function(error) {
          console.error('Failed to add item:', error);
        }
      }
    );
  },
  deleteItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    item.destroy({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function() {
        console.log('Item removed.');
      },
      error: function(error) {
        console.error('Error deleting item:', error);
      }
    });
  },
  editItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    this.$('#edit-section').show();
    this.$('#edit-title').val(item.get('title'));
    this.$('#edit-description').val(item.get('description'));
    this.currentEditId = itemId;
  },
  saveEdit: function() {
    var newTitle = this.$('#edit-title').val();
    var newDescription = this.$('#edit-description').val();
    var item = this.collection.get(this.currentEditId);
    item.save(
      { title: newTitle, description: newDescription },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        success: function() {
          console.log('Item updated.');
        },
        error: function(error) {
          console.error('Update failed:', error);
        }
      }
    );
    this.$('#edit-section').hide();
  }
});

export default ItemsView;
// views/ItemsView.js
import Backbone from 'backbone';
import _ from 'underscore';
import ItemsCollection from '../collections/ItemsCollection';

var ItemsView = Backbone.View.extend({
  el: '#app',
  initialize: function() {
    this.collection = new ItemsCollection();
    this.listenTo(this.collection, 'sync update', this.render);
    this.collection.fetch({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
  },
  events: {
    'click #add-item': 'addItem',
    'click .delete-item': 'deleteItem',
    'click .edit-item': 'editItem',
    'click #save-edit': 'saveEdit'
  },
  render: function() {
    var template = _.template(`
      <h2>Items</h2>
      <div>
        <input id="new-title" type="text" placeholder="Title">
        <input id="new-description" type="text" placeholder="Description">
        <button id="add-item">Add Item</button>
      </div>
      <ul>
        <% collection.each(function(item) { %>
          <li data-id="<%= item.id %>">
            <strong><%= item.get('title') %></strong> - <%= item.get('description') %>
            <button class="edit-item">Edit</button>
            <button class="delete-item">Delete</button>
          </li>
        <% }); %>
      </ul>
      <div id="edit-section" style="display:none;">
        <input id="edit-title" type="text">
        <input id="edit-description" type="text">
        <button id="save-edit">Save</button>
      </div>
    `);
    this.$el.html(template({ collection: this.collection }));
    return this;
  },
  addItem: function() {
    var title = this.$('#new-title').val();
    var description = this.$('#new-description').val();
    var newItem = this.collection.create(
      { title: title, description: description },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        wait: true,
        success: function() {
          console.log('Item added successfully.');
        },
        error: function(error) {
          console.error('Failed to add item:', error);
        }
      }
    );
  },
  deleteItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    item.destroy({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function() {
        console.log('Item removed.');
      },
      error: function(error) {
        console.error('Error deleting item:', error);
      }
    });
  },
  editItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    this.$('#edit-section').show();
    this.$('#edit-title').val(item.get('title'));
    this.$('#edit-description').val(item.get('description'));
    this.currentEditId = itemId;
  },
  saveEdit: function() {
    var newTitle = this.$('#edit-title').val();
    var newDescription = this.$('#edit-description').val();
    var item = this.collection.get(this.currentEditId);
    item.save(
      { title: newTitle, description: newDescription },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        success: function() {
          console.log('Item updated.');
        },
        error: function(error) {
          console.error('Update failed:', error);
        }
      }
    );
    this.$('#edit-section').hide();
  }
});

export default ItemsView;
﻿
This view fetches items from Back4app using the REST API and allows you to add, edit, and delete records.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Protect your data by setting ACLs on your objects. For instance, to restrict an item's access solely to its creator:
JS
function createSecureItem(itemData, owner) {
  var Item = Backbone.Model.extend({ urlRoot: 'https://parseapi.back4app.com/classes/Items' });
  var item = new Item();
  item.set({ title: itemData.title, description: itemData.description });

  // Assume a custom API call or configuration that assigns ACLs based on the owner
  // Here you would include ACL headers or a similar mechanism as needed

  item.save(null, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    success: function(savedItem) {
      console.log('Secure item created:', savedItem);
    },
    error: function(err) {
      console.error('Error creating secure item:', err);
    }
  });
}
function createSecureItem(itemData, owner) {
  var Item = Backbone.Model.extend({ urlRoot: 'https://parseapi.back4app.com/classes/Items' });
  var item = new Item();
  item.set({ title: itemData.title, description: itemData.description });

  // Assume a custom API call or configuration that assigns ACLs based on the owner
  // Here you would include ACL headers or a similar mechanism as needed

  item.save(null, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    success: function(savedItem) {
      console.log('Secure item created:', savedItem);
    },
    error: function(err) {
      console.error('Error creating secure item:', err);
    }
  });
}
﻿
Configuring Class-Level Permissions (CLPs)
Within your Back4app dashboard, set up CLPs for each collection to ensure only authorized users can access or modify sensitive data.
﻿
Step 6 – User Authentication
Setting Up User Accounts in Backbone.js
Back4app utilizes a user management system similar to Parse’s User class for authentication. In your Backbone.js application, you can handle user registration and login using AJAX calls to the Back4app REST API.
For example, to register a new user:
JS
function signUpUser(username, password, email) {
  $.ajax({
    url: 'https://parseapi.back4app.com/users',
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    data: JSON.stringify({
      username: username,
      password: password,
      email: email
    }),
    success: function(response) {
      alert('User registered successfully!');
    },
    error: function(error) {
      alert('Error during registration: ' + error.responseJSON.error);
    }
  });
}
function signUpUser(username, password, email) {
  $.ajax({
    url: 'https://parseapi.back4app.com/users',
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    data: JSON.stringify({
      username: username,
      password: password,
      email: email
    }),
    success: function(response) {
      alert('User registered successfully!');
    },
    error: function(error) {
      alert('Error during registration: ' + error.responseJSON.error);
    }
  });
}
﻿
A similar method can be applied for logging in users and managing sessions.
﻿
Step 7 – Deploying Your Backbone.js Frontend
Back4app’s Web Deployment feature allows you to host your Backbone.js application seamlessly by linking your GitHub repository.
7.1 Creating a Production Build
Open your project directory in a terminal.
Run your build process:
If you are using a task runner or bundler (like Webpack or Gulp), execute the command (for example, npm run build) to generate optimized static assets.
Confirm the build:
Ensure that your build output directory contains the main HTML file and all necessary asset folders.
﻿
7.2 Organizing and Pushing Your Source Code
Your GitHub repository should include all source files for your Backbone.js app. A typical structure might be:
Text
Basic-CRUD-App-Backbone/
|-- bower_components/
|-- public/
|    └── index.html
|-- src/
|    ├── models/
|    │    └── Item.js
|    ├── collections/
|    │    └── ItemsCollection.js
|    ├── views/
|    │    └── ItemsView.js
|    └── app.js
|-- package.json
|-- README.md
Basic-CRUD-App-Backbone/
|-- bower_components/
|-- public/
|    └── index.html
|-- src/
|    ├── models/
|    │    └── Item.js
|    ├── collections/
|    │    └── ItemsCollection.js
|    ├── views/
|    │    └── ItemsView.js
|    └── app.js
|-- package.json
|-- README.md
﻿
Sample Configuration File
src/app.js
JS
import Backbone from 'backbone';
import ItemsView from './views/ItemsView';

$(document).ready(function() {
  new ItemsView();
});
import Backbone from 'backbone';
import ItemsView from './views/ItemsView';

$(document).ready(function() {
  new ItemsView();
});
﻿
Pushing to GitHub
Initialize Git (if not done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Backbone.js frontend code"
git commit -m "Initial commit of Backbone.js frontend code"
﻿
Create a GitHub repository (for example, Basic-CRUD-App-Backbone).
Push your repository:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Backbone.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Backbone.git
git push -u origin main
﻿
﻿
7.3 Integrating Your Repository with Back4app Web Deployment
Access the Web Deployment section:
In your Back4app dashboard, go to your project and click on the Web Deployment option.
Link your GitHub account:
Follow the prompts to authorize Back4app to access your repository.
Select your repository and branch:
Choose your Basic-CRUD-App-Backbone repository and the main branch.
﻿
7.4 Deployment Configuration
Provide additional settings:
Build Command:
If no pre-built assets exist, specify the command (e.g., npm run build) for building your app.
Output Directory:
Designate the folder (for example, public or dist) containing your static files.
Environment Variables:
Add any necessary API keys or configurations.
﻿
7.5 Dockerizing Your Backbone.js Project
If you choose Docker for deployment, include a Dockerfile similar to:
Dockerfile
# Use an official Node image to build the application
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire project and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/public /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image to build the application
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire project and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/public /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Configure Back4app to use Docker deployment if desired.
﻿
7.6 Launching Your Application
Click the Deploy Button:
Once your configuration is set, hit Deploy.
Monitor the Build:
Back4app will fetch your code, execute the build process, and deploy your containerized app.
Get Your Live URL:
After deployment, a URL will be provided where your Backbone.js app is hosted.
﻿
7.7 Verifying Your Deployment
Visit the Provided URL:
Open the URL in your browser to confirm that your app loads correctly.
Test Functionality:
Ensure that navigation, data fetching, and CRUD operations work as expected.
Troubleshoot:
Use browser tools and Back4app logs to resolve any issues.
﻿
Step 8 – Conclusion and Future Directions
Great job! You have successfully built a CRUD application using Backbone.js and Back4app. 
You set up a project named Basic-CRUD-App-Backbone, defined detailed collections for Items and Users, and managed your backend using the Admin App. 
Additionally, you integrated your Backbone.js frontend via REST API calls and applied essential security measures.
Next Steps:
Enhance the Frontend:
Expand your Backbone.js app with more detailed views, search capabilities, and real-time updates.
Add New Features:
Consider integrating more advanced backend logic, third-party APIs, or refined access controls.
Further Learning:
Visit the Back4app documentation for more insights on performance improvements and custom integrations.
By following this tutorial, you now have the expertise to create a robust, scalable CRUD backend for your Backbone.js application using Back4app. Enjoy coding and exploring new features!
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	A brief overview of the item.
created_at	Date	Timestamp indicating when the item was added.
updated_at	Date	Timestamp for the most recent update.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	User’s unique email address.
password_hash	String	Securely hashed password.
created_at	Date	Account creation timestamp.
updated_at	Date	Last modification timestamp of the user data.
Updated 21 Feb 2025
Did this page help you?
How to Develop a Basic CRUD Application with SwiftUI?
How to Develop a Basic CRUD Mobile App with NativeScript?