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

39min
Overview
In this guide, you'll learn how to create a full-featured CRUD (create, read, update, delete) application using Knockout.js. 
This tutorial demonstrates how to implement essential operations within a web app while leveraging Back4app as your backend service. 
We will start by setting up a Back4app project titled Basic-CRUD-App-Knockout, establishing a reliable data management system for your application.
After that, you'll design a flexible database schema by defining collections and fields—either manually or with assistance from the Back4app AI Agent—to ensure your app can handle all CRUD operations effectively.
Next, you'll use the Back4app Admin App, a user-friendly drag-and-drop tool, to manage your collections with ease. This interface simplifies the process of executing CRUD operations.
Finally, you'll integrate your Knockout.js frontend with Back4app using REST API calls. This integration will also cover secure backend practices with proper access controls.
By the end of this tutorial, you'll have built a production-ready web app that supports basic CRUD functionality, includes user authentication, and features robust data management.
Key Takeaways
Understand how to develop CRUD applications that manage data efficiently using Back4app.
Gain practical experience in designing a scalable backend and linking it with a Knockout.js frontend.
Learn to use a no-code admin tool (Back4app Admin App) for executing create, read, update, and delete operations.
Discover deployment strategies, including Docker containerization, to launch your web app swiftly.
﻿
Prerequisites
Before starting, make sure you have:
A Back4app account and an active project.
Refer to Getting Started with Back4app if you need guidance.
A development environment set up for Knockout.js.
Include libraries via CDN or install via npm if you prefer a modular setup.
Basic knowledge of JavaScript, Knockout.js, and REST APIs.
Consult the Knockout.js documentation for an introduction.
﻿
Step 1 – Project Initialization
Setting Up Your Back4app Project
Access your Back4app account.
Select the “New App” option from your dashboard.
Input the project name: Basic-CRUD-App-Knockout and complete the setup process.
Create New Project
﻿
Once created, your project will be visible on your dashboard, forming the backbone for your backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Designing the Data Structure
For this CRUD app, you'll create several collections. Below are sample collections with suggested fields and data types to guide your database design. This schema supports the fundamental CRUD operations.
1. Items Collection
Field
Data Type
Details
_id
ObjectId
Automatically generated unique key.
title
String
The item’s title.
description
String
A brief summary of the item.
created_at
Date
Timestamp when the item is created.
updated_at
Date
Timestamp of the last update.
2. Users Collection
Field
Data Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for each user.
email
String
User’s unique email address.
password_hash
String
Secure hash of the user’s password.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp for last account update.
You can manually create these collections in the Back4app dashboard by adding a new class for each collection and defining the fields.
Create New Class
﻿
Define your fields by choosing a data type, naming the field, setting default values, and marking required fields.
Create Column
﻿
﻿
Using the Back4app AI Agent for Schema Automation
The Back4app AI Agent simplifies schema generation directly from your dashboard. It can automatically create collections and fields based on your description.
Steps to Use the AI Agent:
Launch the AI Agent:
Access it via your Back4app dashboard or project settings.
Detail Your Data Model:
Paste a descriptive prompt listing your required collections and fields.
Review and Apply:
The agent will propose a schema. Review and confirm the suggestions to integrate them into your project.
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 process saves time and ensures a consistent, optimized schema for your application.
﻿
Step 3 – Activating the Admin App and Managing CRUD Operations
Overview of the Admin Interface
The Back4app Admin App provides a no-code solution for managing your backend data. Its intuitive drag-and-drop interface allows for effortless CRUD operations.
How to Activate the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set up your admin credentials by creating the first admin user, which also configures roles like B4aAdminUser and essential system collections.
Enable Admin App
﻿
After activation, sign in to the Admin App to begin data management.
Admin App Dashboard
﻿
Using the Admin Interface for CRUD
Within the Admin App you can:
Add Records: Click the “Add Record” button in a collection (for example, Items) to create new entries.
View/Modify Records: Select a record to inspect its details or update fields.
Remove Records: Delete any entries that are no longer required.
This streamlined interface enhances usability and accelerates the management of your data.
﻿
Step 4 – Connecting Knockout.js with Back4app
With your backend in place, it's time to integrate your Knockout.js frontend using REST API calls.
Using the REST API for CRUD Operations
Since the Parse SDK isn’t typically used with Knockout.js, you'll perform API calls directly. Below are examples of how to handle CRUD tasks.
Fetching Items Example
JS
// Example REST call to retrieve items
function fetchItems() {
  fetch('https://parseapi.back4app.com/classes/Items', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  })
    .then(response => response.json())
    .then(data => {
      viewModel.items(data.results);
    })
    .catch(error => console.error('Error retrieving items:', error));
}

fetchItems();
// Example REST call to retrieve items
function fetchItems() {
  fetch('https://parseapi.back4app.com/classes/Items', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  })
    .then(response => response.json())
    .then(data => {
      viewModel.items(data.results);
    })
    .catch(error => console.error('Error retrieving items:', error));
}

fetchItems();
﻿
Knockout.js ViewModel Example
Below is an example ViewModel for managing your items:
JS
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var newItem = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    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(newItem)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  self.deleteItem = function(item) {
    fetch('https://parseapi.back4app.com/classes/Items/' + item.objectId, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    })
      .then(() => {
        self.items.remove(item);
      })
      .catch(error => console.error('Error deleting item:', error));
  };

  // Additional methods for update and read operations can be added similarly.
}

// Activate Knockout.js
ko.applyBindings(new AppViewModel());
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var newItem = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    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(newItem)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  self.deleteItem = function(item) {
    fetch('https://parseapi.back4app.com/classes/Items/' + item.objectId, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    })
      .then(() => {
        self.items.remove(item);
      })
      .catch(error => console.error('Error deleting item:', error));
  };

  // Additional methods for update and read operations can be added similarly.
}

// Activate Knockout.js
ko.applyBindings(new AppViewModel());
﻿
This ViewModel integrates API calls for creating and deleting items while managing state with Knockout.js observables.
﻿
Step 5 – Securing Your Backend
Access Control Lists (ACLs)
Protect your data by assigning ACLs to each object. For instance, to make an item accessible only to its creator:
JS
function createSecureItem(itemData, ownerUserId) {
  var newItem = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      "*": { "read": false, "write": false },
      [ownerUserId]: { "read": true, "write": true }
    }
  };

  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(newItem)
  })
    .then(response => response.json())
    .then(data => console.log('Secure item created:', data))
    .catch(error => console.error('Error creating item:', error));
}
function createSecureItem(itemData, ownerUserId) {
  var newItem = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      "*": { "read": false, "write": false },
      [ownerUserId]: { "read": true, "write": true }
    }
  };

  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(newItem)
  })
    .then(response => response.json())
    .then(data => console.log('Secure item created:', data))
    .catch(error => console.error('Error creating item:', error));
}
﻿
Class-Level Permissions (CLPs)
Within the Back4app dashboard, set CLPs for each collection to ensure only authenticated or authorized users can access sensitive information.
﻿
Step 6 – Implementing User Authentication
Configuring User Accounts
Back4app uses a User class for managing authentication. In your Knockout.js app, handle user registration and login using REST API calls.
Example: User Registration
JS
function registerUser(username, password, email) {
  var user = {
    username: username,
    password: password,
    email: email
  };

  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(user)
  })
    .then(response => response.json())
    .then(data => alert('Registration successful!'))
    .catch(error => alert('Registration error: ' + error.message));
}
function registerUser(username, password, email) {
  var user = {
    username: username,
    password: password,
    email: email
  };

  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(user)
  })
    .then(response => response.json())
    .then(data => alert('Registration successful!'))
    .catch(error => alert('Registration error: ' + error.message));
}
﻿
A similar approach can be followed for user login and session management. Additional features like email verification and password resets can be configured via Back4app.
﻿
Step 7 – Deploying Your Knockout.js Frontend Using Web Deployment
Back4app’s Web Deployment feature lets you host your Knockout.js frontend effortlessly by linking your GitHub repository. Follow these steps:
7.1 Build Your Production Files
Open your project directory in a terminal.
Run your build process:
If you’re using a build tool like Webpack, run the appropriate command (e.g., npm run build) to compile your assets.
Confirm the Build:
Ensure your build folder contains an index.html and all required static assets.
7.2 Organize and Commit Your Code to GitHub
Your repository should include all source files for your Knockout.js frontend. An example structure might be:
Text
Basic-CRUD-App-Knockout-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── appViewModel.js
│   └── styles.css
├── package.json
└── README.md
Basic-CRUD-App-Knockout-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── appViewModel.js
│   └── styles.css
├── package.json
└── README.md
﻿
Sample File: src/appViewModel.js
JS
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var itemData = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    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(itemData)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  // Additional CRUD methods (update, delete) can be defined similarly.
}

// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var itemData = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    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(itemData)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  // Additional CRUD methods (update, delete) can be defined similarly.
}

// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
﻿
Committing and Pushing Code to GitHub
Initialize Git (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 Knockout.js frontend"
git commit -m "Initial commit for Knockout.js frontend"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-Knockout-Frontend).
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Knockout-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Knockout-Frontend.git
git push -u origin main
﻿
7.3 Linking Your GitHub Repository with Web Deployment
Access the Web Deployment feature:
In your Back4app dashboard, select your project (Basic-CRUD-App-Knockout) and click on Web Deployment.
Connect to GitHub:
Follow the prompts to integrate your GitHub account.
Choose Your Repository and Branch:
Select your repository (e.g., Basic-CRUD-App-Knockout-Frontend) and the branch (e.g., main) containing your code.
7.4 Deployment Settings
Build Command:
If your repository doesn’t include a pre-built folder, specify the build command (e.g., npm run build).
Output Directory:
Set this to the folder containing your static files (e.g., build or public).
Environment Variables:
Add any required environment variables, such as API keys.
7.5 Containerizing Your Application with Docker (Optional)
If you wish to use Docker, include a Dockerfile in your repository:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy source code and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static 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
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy source code and build the app
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 Deploying Your Application
Click the Deploy button:
After configuring the settings, initiate deployment.
Monitor the Process:
Back4app will fetch your code, build it (if necessary), and deploy your containerized app.
Access Your App:
Once complete, Back4app will provide a URL to access your Knockout.js app.
7.7 Testing the Deployment
Open the provided URL:
Check if your app loads properly.
Run Tests:
Ensure all routes and assets (CSS, JS, images) are functioning.
Debug if Necessary:
Use developer tools to inspect any errors and refer to Back4app deployment logs.
﻿
Step 8 – Conclusion and Future Directions
Well done! You’ve successfully built a basic CRUD application using Knockout.js and Back4app. 
You set up a project named Basic-CRUD-App-Knockout, crafted detailed collections for Items and Users, and managed your data via the Admin App. 
Additionally, you integrated your Knockout.js frontend with your backend using REST API calls and implemented secure access controls.
Next Steps:
Expand Your Frontend:
Enhance your app with features like detailed item views, search capabilities, or live updates.
Add Advanced Backend Logic:
Explore using Cloud Functions or integrating third-party services.
Dive Deeper:
Consult the Back4app documentation for further optimization and advanced integrations.
By following this tutorial, you now have the knowledge to build a robust and scalable CRUD app with Knockout.js using Back4app. Happy coding!
Field	Data Type	Details
_id	ObjectId	Automatically generated unique key.
title	String	The item’s title.
description	String	A brief summary of the item.
created_at	Date	Timestamp when the item is created.
updated_at	Date	Timestamp of the last update.
Field	Data Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for each user.
email	String	User’s unique email address.
password_hash	String	Secure hash of the user’s password.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp for last account update.
Updated 25 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide
How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide