Quickstarters
How to Build a Backend for htmx?

34min
Introduction
In this tutorial, you’ll learn how to build a complete backend for htmx web apps using Back4app. 
We’ll walk through integrating essential Back4app features - such as database management, Cloud Code Functions, REST and GraphQL APIs, user authentication, file storage, and real-time queries (Live Queries) - to create a secure, scalable, and robust backend that seamlessly communicates with your htmx front end.
Using htmx, a modern JavaScript library that leverages html attributes to handle client side interactions, can drastically improve the user experience while focusing on server side rendering. 
By combining htmx with Back4app’s powerful server side frameworks and template engines, developers can create full stack web apps with ease and efficiency.
By the end of this tutorial, you will have built a backend tailored for htmx integration, enabling smooth data operations and improving the client side experience with dynamic html page updates without full page reloads.
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 htmx setup
Include the htmx library in your html page using:
A web development environment
Ensure you have a local server setup or use server side frameworks to serve your html templates.
Familiarity with HTML, CSS, and JavaScript
htmx Documentation for more details on html attributes and web apps development.
Make sure you have all of these prerequisites in place before you begin. Having your Back4app project set up and your local htmx environment ready will help you follow along more easily.
Step 1 – Setting Up Back4app Project
Create a New Project
The first step in building your htmx backend on Back4app is creating a new project. If you have not already created one, follow these steps:
Log in to your Back4app account.
Click the “New App” button in your Back4app dashboard.
Give your app a name (e.g., “htmx-Backend-Tutorial”).
﻿
Once the project is created, you will see it listed in your Back4app dashboard. This project will be the foundation for all backend configurations discussed in this tutorial.
Connect via REST API
Back4app relies on the Parse Platform to manage your data, provide real-time features, handle user authentication, and more. 
While htmx itself is a client side library, connecting your htmx front end to Back4app involves making REST API calls directly from your html and JavaScript.
Retrieve your Parse Keys:
In your Back4app dashboard, navigate to your app’s “App Settings” or “Security & Keys” section to find your Application ID, REST API Key, and the Parse Server URL (often in the format https://parseapi.back4app.com).
With these keys, you can use htmx to call your backend endpoints and manipulate your html templates accordingly. For example, you might use JavaScript fetch requests combined with htmx attributes to interact with your data via REST calls.
Step 2 – Setting Up the Database
Saving and Querying Data
With your Back4app project set up, you can now start saving and retrieving data using REST API calls, which you can trigger from htmx requests or plain JavaScript. The simplest way to create a record is to make a POST request to the Parse server:
Curl
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
﻿
Similarly, you can query data:
Curl
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
You can also use GraphQL queries as needed to interact with your database from the client side.
Schema Design and Data Types
By default, Parse allows schema creation on the fly, but you can also define your classes and data types in the Back4app dashboard for more control.
Navigate to the “Database” section in your Back4app dashboard.
Create a new class (e.g., “Todo”) and add relevant columns, such as title (String) and isCompleted (Boolean).
﻿
Back4app supports various data types such as String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, and Polygon. Use these to design a robust schema for your htmx-driven application.
Back4app offers an AI Agent that can help you design your data model:
Open the AI Agent from your App Dashboard or on the menu.
Describe your data model in simple language (e.g., “Please, create a new ToDo App at back4app with a complete class schema.”).
Let the AI Agent create the Schema for you.
﻿
Using the AI Agent can save you time when setting up your data architecture and ensure consistency across your application.
Relational Data
If you have relational data, such as linking tasks to categories, you can use Pointers or Relations in Parse via REST API calls. For example, adding a pointer:
JS
// Example: Linking a Task to a Category using REST API
async function createTaskForCategory(categoryId, title) {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: title,
      category: {
        __type: "Pointer",
        className: "Category",
        objectId: categoryId
      }
    })
  });
  return response.json();
}
// Example: Linking a Task to a Category using REST API
async function createTaskForCategory(categoryId, title) {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: title,
      category: {
        __type: "Pointer",
        className: "Category",
        objectId: categoryId
      }
    })
  });
  return response.json();
}
﻿
When you query, include pointer data as needed:
JS
// Example: Querying with pointer inclusion
async function fetchTodos() {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo?include=category', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });
  return response.json();
}
// Example: Querying with pointer inclusion
async function fetchTodos() {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo?include=category', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });
  return response.json();
}
﻿
Live Queries
For real-time updates, Back4app provides Live Queries. While htmx focuses on server side rendering and HTML attributes, integrating live updates can enhance the user experience significantly.
Enable Live Queries in your Back4app dashboard under your app’s Server Settings. Make sure “Live Queries” is turned on.
Initialize a Live Query Subscription using JavaScript along with htmx triggers if necessary:
(Note: Live Queries typically require Parse SDK; however, they can still work alongside htmx by updating parts of the page when data changes. This example demonstrates the concept.)
JS
import Parse from './parseConfig'; // This assumes use of the Parse SDK in JS environment

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;
}
import Parse from './parseConfig'; // This assumes use of the Parse SDK in JS environment

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;
}
﻿
This subscription can then trigger htmx requests or update html templates dynamically to reflect changes on the client side.
Step 3 – Applying Security with ACLs and CLPs
Back4app Security Mechanism
Back4app takes security seriously by providing Access Control Lists (ACLs) and Class-Level Permissions (CLPs). These features let you restrict who can read or write data on a per-object or per-class basis, ensuring only authorized users can modify your data.
Access Control Lists (ACLs)
An ACL is applied to individual objects to determine which users, roles, or the public can perform read/write operations. For example:
JS
async function createPrivateTodo(title, ownerUser) {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: title,
      ACL: {
        [ownerUser.id]: { "read": true, "write": true },
        "*": { "read": false, "write": false }
      }
    })
  });
  return response.json();
}
async function createPrivateTodo(title, ownerUser) {
  const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: title,
      ACL: {
        [ownerUser.id]: { "read": true, "write": true },
        "*": { "read": false, "write": false }
      }
    })
  });
  return response.json();
}
﻿
When you save the object, it has an ACL that prevents anyone but the specified user from reading or modifying it.
Class-Level Permissions (CLPs)
CLPs govern an entire class’s default permissions, such as whether the class is publicly readable or writable, or if only certain roles can access it.
Go to your Back4app Dashboard, select your app, and open the Database section.
Select a class (e.g., “Todo”).
Open the Class-Level Permissions tab.
Configure your defaults, such as “Requires Authentication” for read or write, or “No Access” for the public.
These permissions set the baseline, while ACLs fine-tune permissions for individual objects. A robust security model typically combines both CLPs (broad restrictions) and ACLs (fine-grained per-object restrictions). For more information go to App Security Guidelines.
Step 4 – Writing and Deploying Cloud Functions
Cloud Code is a feature of the Parse Server environment that allows you to run custom JavaScript code on the server side. 
By writing Cloud Code, you can extend your Back4app backend with additional business logic, validations, triggers, and integrations that run securely and efficiently on the Parse Server.
How It Works
When you write Cloud Code, you typically place your JavaScript functions, triggers, and any required NPM modules in a main.js file. This file is then deployed to your Back4app project, which is executed within the Parse Server environment.
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 Cloud Code using the Back4app CLI or through the Dashboard.
Calling Your Function
From an htmx-enhanced interface, you can call your Cloud Code functions using JavaScript fetch and update parts of your html page accordingly. For example:
JS
async function getTextLength(text) {
  const response = await fetch('https://parseapi.back4app.com/functions/calculateTextLength', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ text })
  });
  const result = await response.json();
  console.log('Text length:', result.result.length);
}
async function getTextLength(text) {
  const response = await fetch('https://parseapi.back4app.com/functions/calculateTextLength', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ text })
  });
  const result = await response.json();
  console.log('Text length:', result.result.length);
}
﻿
You can integrate similar calls within your htmx triggers and html attributes to create dynamic, responsive behaviors on the client side, improving the overall user experience.
Step 5 – Configuring User Authentication
User Authentication in Back4app
Back4app leverages the Parse User class as the foundation for authentication. By default, Parse handles password hashing, session tokens, and secure storage. 
In the context of an htmx application, user authentication can be managed via REST calls initiated by html form submissions or JavaScript fetch requests.
Setting Up User Authentication
For example, to create a new user:
JS
async function signUpUser(username, password, email) {
  const response = await fetch('https://parseapi.back4app.com/users', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password, email })
  });
  return response.json();
}
async function signUpUser(username, password, email) {
  const response = await fetch('https://parseapi.back4app.com/users', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password, email })
  });
  return response.json();
}
﻿
Similarly, for user login:
JS
async function logInUser(username, password) {
  const response = await fetch(`https://parseapi.back4app.com/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });
  return response.json();
}
async function logInUser(username, password) {
  const response = await fetch(`https://parseapi.back4app.com/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });
  return response.json();
}
﻿
Session Management
After a successful login, Parse creates a session token that you can store and manage in your htmx application for subsequent authenticated requests.
Social Login Integration
While htmx focuses on html attributes and server side interactions, integrating social logins such as Google or Facebook can still be achieved by initiating OAuth flows and handling callbacks on the server side. Refer to Social Login Docs for detailed guidance.
Email Verification and Password Reset
To enable email verification and password reset:
Navigate to the Email Settings in your Back4app dashboard.
Enable email verification and configure the necessary templates.
Use fetch in your htmx flows to trigger password reset requests as needed.
Step 6 – Handling File Storage
Uploading and Retrieving Files
Parse includes file storage capabilities which you can utilize via REST API calls from your htmx application. For example, to upload an image:
JS
async function uploadImage(file) {
  const data = new FormData();
  data.append('file', file);
  data.append('object', '{"__type":"File","name":"' + file.name + '"}');

  const response = await fetch('https://parseapi.back4app.com/files/' + file.name, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: data
  });
  return response.json();
}
async function uploadImage(file) {
  const data = new FormData();
  data.append('file', file);
  data.append('object', '{"__type":"File","name":"' + file.name + '"}');

  const response = await fetch('https://parseapi.back4app.com/files/' + file.name, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APP_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: data
  });
  return response.json();
}
﻿
File Security
Control who can upload and access files by configuring security settings in Back4app and setting ACLs on file objects as needed.
Step 7 – Scheduling Tasks with Cloud Jobs
Cloud Jobs
Cloud Jobs in Back4app let you schedule routine tasks on your backend, such as cleaning up old data or sending periodic emails. 
These jobs run server side and can be integrated with your htmx workflow when needed.
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);
  }
});
﻿
Schedule this job via the Back4app Dashboard under App Settings > Server Settings > Background Jobs.
Step 8 – Integrating Webhooks
Webhooks allow your Back4app app to send HTTP requests to an external service whenever certain events occur. This is powerful for integrating with third-party systems like payment gateways, email marketing tools, or analytics platforms.
Navigate to the Webhooks configuration in your Back4app dashboard > More > WebHooks and click on Add Webhook.
Set up an endpoint (e.g., https://your-external-service.com/webhook-endpoint).
Configure triggers to specify which events in your Back4app classes or Cloud Code functions will fire the webhook.
For instance, to notify a Slack channel whenever a new Todo is created:
Create a Slack App that accepts incoming webhooks.
Copy the Slack webhook URL.
In your Back4app dashboard, set the endpoint to that Slack URL for the event “New record in the Todo class.”
Optionally, add custom HTTP headers or payloads as needed.
You can also define Webhooks in Cloud Code by making custom HTTP requests in triggers.
Step 9 – Exploring the Back4app Admin Panel
The Back4app Admin App is a web-based management interface designed for non-technical users to perform CRUD operations and handle routine data tasks without writing any code. 
It provides a model-centric, user-friendly interface that streamlines database administration, custom data management, and enterprise-level operations.
Enabling the Admin App
Enable it by going to App Dashboard > More > Admin App and clicking on the “Enable Admin App” button.
Create a First Admin User (username/password), which automatically generates a new role (B4aAdminUser) and classes (B4aSetting, B4aMenuItem, and B4aCustomField) in your app’s schema.
Choose a Subdomain for accessing the admin interface and complete the setup.
Log In using the admin credentials you created to access your new Admin App dashboard.
Once enabled, the Back4app Admin App makes it easy to view, edit, or remove records from your database - without requiring direct use of the Parse Dashboard or backend code.
Conclusion
By following this comprehensive tutorial on how to build a backend for htmx using Back4app, you have:
Created a secure backend tailored for htmx web apps.
Configured a database with class schemas, data types, and relationships.
Integrated real-time queries and considered how Live Queries can enhance user experience on the client side.
Applied security measures using ACLs and CLPs to protect and manage data access.
Implemented Cloud Code functions to run custom business logic on the server side.
Set up user authentication, file storage, scheduled Cloud Jobs, and integrated Webhooks.
Explored the Back4app Admin Panel for efficient data management.
With this robust backend, you can now leverage htmx’s capabilities to create dynamic, modern web applications that combine client side enhancements with powerful server side frameworks. 
This full stack approach enhances the overall user experience, providing smooth html page updates, efficient server side rendering, and seamless integration across your tech stack.
Next Steps
Extend this backend to incorporate more complex data models, advanced template engines, and custom server side logic.
Explore integration with server side frameworks to create a more dynamic and responsive client side experience.
Check out Back4app’s official documentation for deeper dives into advanced security, performance tuning, and analytics.
Continue learning about htmx and modern web development to build user-friendly, responsive web apps that combine the best of client side and server side technologies.
﻿
Updated 17 Jan 2025
Did this page help you?
How to Build a Backend for Blazor?
How to Build a Backend for NativeScript?