Quickstarters
How to Build a Backend for jQuery?

39min
Introduction
In this tutorial, you'll learn how to build a backend for jQuery using Back4app. 
We will integrate Back4app’s essential features—database management, Cloud Code, REST and GraphQL APIs, user authentication, and real-time queries—to create a secure and scalable backend. 
This backend will communicate with your jQuery-based frontend through AJAX calls and other common jQuery methods.
Back4app's intuitive environment reduces the time needed to set up servers or databases. 
By following a few simple steps, you'll gain hands-on experience with ACLs, class-level permissions, data modeling, file uploads, and more. 
By the end of this tutorial, you will have a solid foundation for a fully functional jQuery-based app connected to a Back4app backend. 
You'll be ready to add custom logic, integrate external APIs, and secure your data with fine-grained control.
Prerequisites
To complete this tutorial, you will need:
A Back4app account and a new Back4app project
 Getting Started with Back4app.
If you do not have an account, you can create one for free. Follow the guide above to get your project ready.
Basic jQuery environment
 You can download jQuery from the official website .
Node.js (version 14 or above) installed (Optional)
While Node.js is not strictly required for jQuery in a browser, you may need it for running local test servers or installing npm packages if you wish to do local testing. Installing Node.js﻿
Familiarity with JavaScript and jQuery basics
 jQuery Official Documentation.﻿
Make sure you have all these prerequisites in place before starting, so you can follow along smoothly when building your jQuery-based front end and connecting it to Back4app.
Step 1 – Setting Up Back4app Project
Create a New Project
To begin your jQuery backend project, create a new Back4app project:
Log in to your Back4app account.
Click the “New App” button in your Back4app dashboard.
Give your app a name (e.g., “jQuery-Backend-Tutorial”).
﻿
When the project is created, you’ll see it in your Back4app dashboard. This will be the base of your backend configurations for jQuery.
Connect the Parse SDK
Back4app uses the Parse Platform for data and real-time features. If you want to use the Parse SDK directly with jQuery, you can load it as a script in your HTML.
Retrieve your Parse Keys:
In the Back4app dashboard, open your app’s “App Settings” or “Security & Keys” to find:
Application ID
JavaScript Key
Parse Server URL (usually https://parseapi.back4app.com)
﻿
Include the Parse SDK in your HTML file:
HTML
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
﻿
In a jQuery environment, you can load jQuery first, then Parse, and interact with Parse objects in your scripts. This connection ensures that all data calls to your Back4app backend go through the Parse Platform.
Step 2 – Setting Up the Database
Saving and Querying Data
After integrating the Parse SDK, you can save and fetch data from the Back4app database. Here’s a simple example of creating and retrieving “Todo” objects using jQuery and Parse:
HTML
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
﻿
You can also call REST APIs using cURL:
Bash
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
﻿
Or use GraphQL:
GraphQL
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
﻿
Schema Design and Data Types
In the Back4app dashboard:
Go to “Database.”
Create a new class (e.g., “Todo”) and add columns like title (String) and isCompleted (Boolean).
Create New Class
﻿
You can also let Parse automatically create columns the first time you save an object.
Create Column
﻿
Using the AI Agent
Back4app has an AI Agent for data modeling:
Open the AI Agent in your app’s dashboard or menu.
Describe your data model (e.g., “Create a ToDo App with a class schema.”).
Let the AI Agent generate the schema.
﻿
Relational Data
If you have a Category class linked to many Todo items, you can use Pointers or Relations:
HTML
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
﻿
Live Queries
For real-time updates in your jQuery app:
Enable Live Queries in your Back4app dashboard under Server Settings.
Initialize a Live Query subscription:
HTML
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
﻿
This subscription notifies you in real time whenever a “Todo” object is created, updated, or deleted.
Step 3 – Applying Security with ACLs and CLPs
Back4app Security Mechanism
ACLs (Access Control Lists) and CLPs (Class-Level Permissions) let you control who can read and write data at object or class levels.
﻿
Access Control Lists (ACLs)
An ACL is set on individual objects to limit access:
HTML
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
﻿
Edit ACL
﻿
Class-Level Permissions (CLPs)
CLPs control default permissions for an entire class:
In your Back4app Dashboard, open the Database section.
Select your class (e.g., “Todo”).
Go to the Class-Level Permissions tab to configure public, authenticated, or role-based access.
﻿
Combine ACLs for object-level security with CLPs for broader restrictions. For more, see App Security Guidelines.
Step 4 – Writing and Deploying Cloud Functions
Cloud Code runs custom JavaScript on the server side, letting you add business logic, data validations, or external API calls.
How It Works
You place your code in main.js (or a similar file), deploy it to Back4app, and let the Parse Server handle execution. You can also use NPM modules for more complex logic.
JS
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
﻿
Deploy Your Function
Via the Back4app CLI:
Bash
b4a deploy  
b4a deploy  
﻿
Through the Dashboard:
In your app’s dashboard, go to Cloud Code > Functions.
Copy/paste the function into main.js.
Click Deploy.
﻿
Calling Your Function
From jQuery, you can call a Cloud Function like this:
HTML
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
﻿
Step 5 – Configuring User Authentication
User Authentication in Back4app
Back4app employs the Parse.User class for authentication. Password hashing, session tokens, and secure storage are handled automatically.
Setting Up User Authentication
HTML
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
﻿
Session Management
You can retrieve the current user:
Text
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
﻿
Logout:
Text
Parse.User.logOut();  
Parse.User.logOut();  
﻿
Social Login Integration
Back4app supports Google, Facebook, Apple, and other OAuth providers. For more, see the Social Login Docs.
Step 6 – Handling File Storage
Uploading and Retrieving Files
Use Parse.File to handle uploads:
HTML
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
﻿
You can store the file in a class by assigning it to a field:
Text
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
﻿
Retrieving the file URL:
Text
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
﻿
File Security
You can manage who can upload files by modifying the file upload settings in Parse Server:
JSON
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
﻿
Step 7 – Scheduling Tasks with Cloud Jobs
Cloud Jobs
You can run routine tasks, like deleting old data:
JS
// main.js  
Parse.Cloud.job('cleanupOldTodos', async (request) => {  
  const Todo = Parse.Object.extend('Todo');  
  const query = new Parse.Query(Todo);  
  
  const now = new Date();  
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;  
  const cutoff = new Date(now - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
// main.js  
Parse.Cloud.job('cleanupOldTodos', async (request) => {  
  const Todo = Parse.Object.extend('Todo');  
  const query = new Parse.Query(Todo);  
  
  const now = new Date();  
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;  
  const cutoff = new Date(now - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
﻿
In the dashboard, go to App Settings > Server Settings > Background Jobs to schedule it.
Scheduling a Cloud Job
﻿
Step 8 – Integrating Webhooks
Webhooks let your app send HTTP requests to an external service whenever certain events happen:
Go to More > WebHooks in your Back4app dashboard.
Add a new Webhook with your external endpoint.
Configure triggers for events like “new record in the Todo class.”
Adding a Webhook
﻿
You might integrate Slack or a payment gateway like Stripe by sending event data through webhooks.
BeforeSave WebHook
﻿
Step 9 – Exploring the Back4app Admin Panel
The Back4app Admin App offers a non-technical, web-based interface for CRUD operations.
Enabling the Admin App
Go to App Dashboard > More > Admin App and click “Enable Admin App”:
Enable Admin App
﻿
Create a First Admin User, which automatically creates a new role (B4aAdminUser) and classes in your schema:
﻿
Pick a Subdomain for accessing the admin app:
﻿
Log In using your new admin credentials:
﻿
Once enabled, this Admin App lets you manage data or grant access to team members without coding.
Conclusion
In this guide, you learned how to build a backend for jQuery with Back4app. You:
Created a new Back4app project as your backend foundation.
Set up a database, including schema design and data relations.
Used ACLs and CLPs for fine-grained security.
Deployed Cloud Code for custom server-side logic.
Configured user authentication, file storage, and real-time updates.
Scheduled background jobs and integrated webhooks for external services.
Explored the Back4app Admin Panel for simpler data management.
You’re now equipped to extend this basic jQuery + Back4app setup into a full production solution. Continue integrating advanced features like social login or more detailed security rules. Enjoy building your scalable, data-driven applications!
Next Steps
Go production-ready: Add advanced role-based permissions, caching strategies, and performance tuning.
Integrate third-party APIs: For payments, messaging, or analytics.
Explore Back4app docs: Dive deeper into advanced security, logs, or analytics.
Create real-world apps: Use jQuery’s simplicity combined with Back4app’s powerful backend services.
﻿
Updated 15 Jan 2025
Did this page help you?
How to Build a Backend for Gatsby?
How to Build a Backend for WatchOS?