Quickstarters
How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

42min
Introduction
In this guide, you'll learn how to create a complete CRUD (create, read, update, delete) application using Marionette.js. 
This tutorial shows you how to set up an application that manages data operations efficiently. We will begin by setting up a Back4app project called Basic-CRUD-App-MarionetteJS, which serves as a powerful backend for your application.
After configuring your project, you will design a flexible database schema by defining collections and fields—either manually or with assistance from the Back4app AI Agent. This approach ensures that your backend is well-organized and capable of handling CRUD operations reliably.
Next, you'll use the Back4app Admin App—a drag and drop interface—to manage your collections effortlessly, allowing you to perform create, read, update, and delete operations with ease.
Finally, you'll integrate your Marionette.js frontend with Back4app using REST/GraphQL (or the Parse SDK, if applicable), while ensuring your backend remains secure with advanced access controls.
By the end of this tutorial, you'll have a production-ready web application that supports CRUD operations along with user authentication and secure data management.
Key Takeaways
Build CRUD applications that effectively manage data using a robust backend.
Gain insights into creating a scalable backend and connecting it to a Marionette.js frontend.
Learn to use a no-code management interface (Back4app Admin App) to simplify data operations.
Understand deployment techniques, including Docker containerization, to quickly launch your application.
﻿
Prerequisites
Before you get started, please make sure you have the following:
A Back4app account with a new project set up.
For guidance, see Getting Started with Back4app.
A Marionette.js development environment.
You can use a boilerplate or starter kit for Marionette.js. Ensure Node.js (version 14 or higher) is installed.
A basic understanding of JavaScript, Marionette.js, and REST APIs.
Refer to the Marionette.js documentation for further details.
﻿
Step 1 – Project Setup
Creating a New Back4app Project
Log in to your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-MarionetteJS and complete the prompts.
Create New Project
﻿
After creating the project, it will appear on your dashboard, providing the foundation for backend configuration and management.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For this CRUD app, you will define several collections. Here are examples of collections you might create, including the fields and data types that will power your database.
1. Items Collection
This collection holds the details for each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
Name of the item.
description
String
A short summary about the item.
created_at
Date
Timestamp for when the item was created.
updated_at
Date
Timestamp for the last update.
2. Users Collection
This collection stores user credentials and profile details.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
Unique email address.
password_hash
String
Encrypted password for user authentication.
created_at
Date
Timestamp for account creation.
updated_at
Date
Timestamp for the last account update.
You can manually add these collections on the Back4app dashboard by creating a new class for each and defining their respective fields.
Create New Class
﻿
You can create fields by selecting a data type, providing a name, setting default values, and marking them as required if needed.
Create Column
﻿
﻿
Utilizing the Back4app AI Agent for Schema Creation
The Back4app AI Agent simplifies schema creation by generating collections and fields from a descriptive prompt.
How to Use the AI Agent:
Launch the AI Agent:
Access it via your Back4app dashboard menu or project settings.
Describe Your Data Model:
Paste a detailed prompt outlining the collections and fields you require.
Review and Confirm:
Examine the suggested schema and apply it to your project.
Sample Prompt
Text
Create these 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 these 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 method saves time and ensures consistency in your database schema.
﻿
Step 3 – Activating the Admin App & Performing CRUD Operations
Overview of the Admin App
The Back4app Admin App offers a no-code, drag and drop interface to manage your backend data. It simplifies CRUD operations such as creating, reading, updating, and deleting records.
Enabling the Admin App
Open the “More” menu on your Back4app dashboard.
Select “Admin App” then click “Enable Admin App.”
Set up your admin credentials by creating an admin user, which also configures default roles like B4aAdminUser.
Enable Admin App
﻿
After activation, sign in to the Admin App to manage your collections.
Admin App Dashboard
﻿
Using the Admin App for CRUD Tasks
Create Records: Use the “Add Record” button to insert new entries into a collection.
Read/Update Records: Click on a record to view or modify its details.
Delete Records: Remove outdated records using the delete option.
This intuitive interface improves user interaction by simplifying data management.
﻿
Step 4 – Connecting Marionette.js with Back4app
With your backend configured and managed via the Admin App, the next step is to integrate your Marionette.js frontend with Back4app.
Option A: Using the Parse SDK (if applicable)
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Initialize Parse in Your Marionette.js Application:
Create a configuration file (e.g., app/parseConfig.js):
JS
// app/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// app/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Integrate Parse in a Marionette View:
For instance, create a view to fetch and render items:
JS
// app/views/ItemsView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <h2>Items</h2>
    <ul>
      <% items.forEach(function(item) { %>
        <li><%= item.get("title") %> — <%= item.get("description") %></li>
      <% }); %>
    </ul>
  `),

  initialize() {
    this.items = [];
    this.fetchItems();
  },

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
      this.render();
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  },

  serializeData() {
    return { items: this.items };
  }
});
// app/views/ItemsView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <h2>Items</h2>
    <ul>
      <% items.forEach(function(item) { %>
        <li><%= item.get("title") %> — <%= item.get("description") %></li>
      <% }); %>
    </ul>
  `),

  initialize() {
    this.items = [];
    this.fetchItems();
  },

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
      this.render();
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  },

  serializeData() {
    return { items: this.items };
  }
});
﻿
Option B: Using REST or GraphQL
If the Parse SDK is not an option, you can interact with Back4app using REST or GraphQL calls. For example, to retrieve items via REST:
JS
// Example REST call to retrieve items
async function fetchItems() {
  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();
    console.log('Retrieved items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
// Example REST call to retrieve items
async function fetchItems() {
  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();
    console.log('Retrieved items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
﻿
Incorporate these API calls into your Marionette.js views or controllers as necessary.
﻿
Step 5 – Securing Your Backend
Configuring Access Control Lists (ACLs)
Secure your data by setting ACLs on objects. For instance, to create an item accessible only to its owner:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access solely to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Created private item:', savedItem);
  } catch (error) {
    console.error('Error saving private item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access solely to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Created private item:', savedItem);
  } catch (error) {
    console.error('Error saving private item:', error);
  }
}
﻿
Setting Class-Level Permissions (CLPs)
In the Back4app dashboard, configure CLPs for each collection to enforce default access rules, ensuring only authorized users can access sensitive data.
﻿
Step 6 – User Authentication
Creating User Accounts
Back4app utilizes Parse’s User class for managing authentication. In your Marionette.js app, handle user registration and login as shown below:
JS
// app/views/AuthView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <form id="signup-form">
      <input type="text" id="username" placeholder="Username" required />
      <input type="password" id="password" placeholder="Password" required />
      <input type="email" id="email" placeholder="Email" required />
      <button type="submit">Sign Up</button>
    </form>
  `),

  events: {
    'submit #signup-form': 'handleSignUp'
  },

  async handleSignUp(e) {
    e.preventDefault();
    const username = this.$('#username').val();
    const password = this.$('#password').val();
    const email = this.$('#email').val();

    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Sign up error: ' + error.message);
    }
  }
});
// app/views/AuthView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <form id="signup-form">
      <input type="text" id="username" placeholder="Username" required />
      <input type="password" id="password" placeholder="Password" required />
      <input type="email" id="email" placeholder="Email" required />
      <button type="submit">Sign Up</button>
    </form>
  `),

  events: {
    'submit #signup-form': 'handleSignUp'
  },

  async handleSignUp(e) {
    e.preventDefault();
    const username = this.$('#username').val();
    const password = this.$('#password').val();
    const email = this.$('#email').val();

    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Sign up error: ' + error.message);
    }
  }
});
﻿
A similar pattern can be followed for login and session handling. Additional features such as social login or password resets can be configured through the Back4app dashboard.
﻿
Step 7 – Deploying Your Marionette.js Frontend with Web Deployment
Back4app’s Web Deployment feature lets you host your Marionette.js frontend seamlessly by linking your GitHub repository.
7.1 – Building Your Production Version
Navigate to your project directory in a terminal.
Execute the build command:
Bash
npm run build
npm run build
﻿
This generates a build folder containing optimized static files (HTML, JS, CSS, images).
Confirm the Build:
Ensure the build folder includes an index.html file along with the required assets.
﻿
7.2 – Organizing and Uploading Your Source Code
Your repository should contain all the source code for your Marionette.js frontend. An example file structure is:
Text
Basic-CRUD-App-MarionetteJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── app/
│   ├── app.js
│   ├── parseConfig.js
│   └── views/
│       ├── ItemsView.js
│       └── AuthView.js
├── package.json
└── README.md
Basic-CRUD-App-MarionetteJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── app/
│   ├── app.js
│   ├── parseConfig.js
│   └── views/
│       ├── ItemsView.js
│       └── AuthView.js
├── package.json
└── README.md
﻿
Example Configuration File
app/parseConfig.js
JS
// app/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// app/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Example Application File
app/app.js
JS
import Marionette from 'backbone.marionette';
import ItemsView from './views/ItemsView';

// Initialize the Marionette Application
const App = new Marionette.Application({
  region: '#app'
});

App.on('start', function() {
  const itemsView = new ItemsView();
  App.showView(itemsView);
});

App.start();
import Marionette from 'backbone.marionette';
import ItemsView from './views/ItemsView';

// Initialize the Marionette Application
const App = new Marionette.Application({
  region: '#app'
});

App.on('start', function() {
  const itemsView = new ItemsView();
  App.showView(itemsView);
});

App.start();
﻿
Committing to GitHub
Initialize a Git repository (if not already done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Marionette.js frontend"
git commit -m "Initial commit for Marionette.js frontend"
﻿
Create a repository on GitHub (e.g., Basic-CRUD-App-MarionetteJS-Frontend).
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-MarionetteJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-MarionetteJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 – Integrating Your Repository with Web Deployment
Access Web Deployment:
In your Back4app dashboard, select your project (Basic-CRUD-App-MarionetteJS) and click on Web Deployment.
Connect to GitHub:
Follow the prompts to link your GitHub account so Back4app can access your repository.
Select Repository and Branch:
Choose the repository (e.g., Basic-CRUD-App-MarionetteJS-Frontend) and the branch (e.g., main) that contains your code.
﻿
7.4 – Configuring Your Deployment
Specify additional settings:
Build Command:
If a pre-built build folder is missing, set the build command (e.g., npm run build). Back4app will execute this during deployment.
Output Directory:
Indicate build as the folder containing your static files.
Environment Variables:
Provide any necessary environment variables (like API keys) in the deployment settings.
﻿
7.5 – Dockerizing Your Marionette.js Application
If you prefer Docker for deployment, containerize your application by including a Dockerfile in your repository:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the application
RUN npm run build

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

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

# Set working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the application
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Configure Web Deployment to use the Docker option if desired.
﻿
7.6 – Deploying Your Application
Click the Deploy Button:
Finalize your deployment settings and click Deploy.
Monitor the Build:
Back4app will pull your GitHub code, run the build command, and deploy your container.
Get Your URL:
Once deployed, Back4app will provide a URL where your Marionette.js application is hosted.
﻿
7.7 – Verifying Your Deployment
Visit the URL Provided:
Open the deployment URL in your browser.
Test the Application:
Ensure that the application loads correctly and that all functionality (routes, assets) is operational.
Troubleshoot if Necessary:
Use browser developer tools and check deployment logs on Back4app if any issues occur.
﻿
Step 8 – Conclusion and Next Steps
Well done! You have successfully built a CRUD application using Marionette.js and Back4app. 
You set up a project named Basic-CRUD-App-MarionetteJS, created detailed database collections for Items and Users, and managed your data via the Admin App. 
You also connected your Marionette.js frontend to your backend and implemented strong security measures.
Future Enhancements:
Refine Your Frontend:
Add features like detailed views, search capabilities, and real-time updates.
Expand Backend Functionality:
Consider integrating Cloud Functions, third-party APIs, or advanced role-based access controls.
Further Learning:
Explore additional resources in the Back4app documentation for more advanced optimizations and integrations.
By following this tutorial, you now possess the knowledge to build a robust, scalable CRUD application using Marionette.js and Back4app. Happy coding!
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	Name of the item.
description	String	A short summary about the item.
created_at	Date	Timestamp for when the item was created.
updated_at	Date	Timestamp for the last update.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	Unique email address.
password_hash	String	Encrypted password for user authentication.
created_at	Date	Timestamp for account creation.
updated_at	Date	Timestamp for the last account update.
Updated 25 Feb 2025
Did this page help you?
Back4app Tutorials
Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide