Quickstarters
How to Create a CRUD Application with Koa.js?

37min
Introduction
In this guide, you'll learn how to develop a CRUD (create, read, update, delete) application using Koa.js. 
This tutorial will walk you through the essential steps of managing data and constructing a functional API by integrating your Koa.js backend with Back4app. You'll begin by setting up a Back4app project called Basic-CRUD-App-KoaJS, which serves as a powerful backend for your application.
Afterward, you'll design a flexible database schema by establishing collections and defining fields—either manually or with the aid of the Back4app AI Agent. This setup ensures that your data is organized for smooth CRUD operations.
Next, you'll utilize the Back4app Admin App, a no-code, drag-and-drop tool that simplifies data management tasks like creating, reading, updating, and deleting records.
Finally, you will configure your Koa.js server to interact with Back4app via REST APIs, all while implementing robust access controls to secure your backend.
By the end of this tutorial, you'll have built a production-ready server-side application that not only supports basic CRUD operations but also includes user authentication and secure data handling.
Key Takeaways
Discover how to construct CRUD applications with Koa.js while leveraging a reliable cloud backend.
Gain insights into designing a scalable backend and integrating it with a RESTful API.
Learn to use the intuitive Back4app Admin App to simplify CRUD operations.
Explore deployment strategies, including containerization with Docker, to launch your Koa.js application swiftly.
﻿
Prerequisites
Before diving in, make sure you have the following:
A Back4app account with an active project.
Check out Getting Started with Back4app for guidance.
A working Node.js development environment.
Install Node.js (v14 or later) and set up your Koa.js project.
Basic knowledge of JavaScript, Koa.js, and REST APIs.
Review the Koa.js documentation if needed.
﻿
Step 1 – Setting Up Your Back4app Project
Creating a New Back4app Project
Log into your Back4app account.
Click on the “New App” button from your dashboard.
Name your project Basic-CRUD-App-KoaJS and follow the instructions to complete the setup.
Create New Project
﻿
Once your project is established, it will be visible on your dashboard, providing the backend framework required for your application.
﻿
Step 2 – Crafting the Database Schema
Designing Your Data Model
For this CRUD application, you'll need to set up several collections. Below are sample collections with suggested fields and types to help you configure your database schema effectively.
1. Items Collection
This collection holds details for each item.
Field
Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
The item’s title.
description
String
A short description of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp for the most recent update.
2. Users Collection
This collection manages user data and authentication credentials.
Field
Type
Description
_id
ObjectId
Auto-generated primary key.
username
String
A unique username for the user.
email
String
Unique email address of the user.
password_hash
String
Securely hashed password.
created_at
Date
Timestamp of account creation.
updated_at
Date
Timestamp of the last account update.
You can create these collections via the Back4app dashboard by adding a new class for each and defining the corresponding columns.
Create New Class
﻿
You can define fields by selecting the appropriate type, setting default values, and specifying whether the field is mandatory.
Create Column
﻿
﻿
Leveraging the Back4app AI Agent for Schema Setup
The Back4app AI Agent, available within your dashboard, can automatically generate your database schema from a detailed prompt describing your collections and fields. This feature expedites project setup and ensures a consistent schema for CRUD operations.
How to Use the AI Agent:
Open the AI Agent from your Back4app dashboard or within project settings.
Provide a descriptive prompt outlining the collections and fields you require.
Review the generated schema and apply the configuration to your project.
Example 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 approach saves time and helps ensure that your schema is both consistent and optimized.
﻿
Step 3 – Activating the Admin App & CRUD Functionality
Overview of the Admin App
The Back4app Admin App is a user-friendly interface that lets you manage your backend data effortlessly through drag-and-drop controls. This no-code tool simplifies operations such as creating, reading, updating, and deleting records.
Activating the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set up your initial admin account; this process establishes system roles like B4aAdminUser and prepares system collections.
Enable Admin App
﻿
Once activated, log into the Admin App to manage your collections and records.
Admin App Dashboard
﻿
Within the Admin App, you can:
Add New Records: Use the “Add Record” button in any collection (e.g., Items) to create new entries.
View and Edit Records: Select a record to inspect its details or modify its fields.
Remove Records: Delete entries that are no longer required.
﻿
Step 4 – Connecting Your Koa.js Backend with Back4app
Now that your backend is configured and managed, it’s time to set up your Koa.js server to interact with Back4app.
Using REST APIs with Koa.js
This tutorial will demonstrate how to use REST API calls from your Koa.js server to perform CRUD operations on your Back4app collections.
Setting Up a Basic Koa.js Server
Install Koa.js and necessary middleware:
Bash
npm install koa koa-router koa-bodyparser node-fetch
npm install koa koa-router koa-bodyparser node-fetch
﻿
Create the server file (e.g., server.js):
JS
// server.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const fetch = require('node-fetch');

const app = new Koa();
const router = new Router();

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';
const BASE_URL = 'https://parseapi.back4app.com';

// Fetch all items
router.get('/items', async (ctx) => {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = await response.json();
    ctx.body = data.results;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Failed to fetch items' };
  }
});

// Create a new item
router.post('/items', async (ctx) => {
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const newItem = await response.json();
    ctx.body = newItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error creating item' };
  }
});

// Update an item
router.put('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'PUT',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const updatedItem = await response.json();
    ctx.body = updatedItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error updating item' };
  }
});

// Delete an item
router.delete('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  try {
    await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    ctx.body = { message: 'Item deleted successfully' };
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error deleting item' };
  }
});

app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
// server.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const fetch = require('node-fetch');

const app = new Koa();
const router = new Router();

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';
const BASE_URL = 'https://parseapi.back4app.com';

// Fetch all items
router.get('/items', async (ctx) => {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = await response.json();
    ctx.body = data.results;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Failed to fetch items' };
  }
});

// Create a new item
router.post('/items', async (ctx) => {
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const newItem = await response.json();
    ctx.body = newItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error creating item' };
  }
});

// Update an item
router.put('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'PUT',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const updatedItem = await response.json();
    ctx.body = updatedItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error updating item' };
  }
});

// Delete an item
router.delete('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  try {
    await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    ctx.body = { message: 'Item deleted successfully' };
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error deleting item' };
  }
});

app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
﻿
This setup gives you a Koa.js server that communicates with Back4app through REST calls, handling all CRUD operations.
﻿
Step 5 – Securing Your Backend
Implementing Access Controls
Protect your data by applying Access Control Lists (ACLs) at the object level. For instance, when creating a private item, set ACLs to restrict access:
JS
async function createSecureItem(itemData, ownerSessionToken) {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json',
        'X-Parse-Session-Token': ownerSessionToken
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          "*": { "read": false, "write": false },
          "owner": { "read": true, "write": true }
        }
      })
    });
    const result = await response.json();
    console.log('Secure item created:', result);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerSessionToken) {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json',
        'X-Parse-Session-Token': ownerSessionToken
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          "*": { "read": false, "write": false },
          "owner": { "read": true, "write": true }
        }
      })
    });
    const result = await response.json();
    console.log('Secure item created:', result);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
Setting Class-Level Permissions (CLPs)
Within your Back4app dashboard, configure CLPs for each collection to establish default rules, ensuring that only authorized users can access sensitive data.
﻿
Step 6 – User Authentication
Configuring User Accounts
Back4app utilizes a User class for handling authentication. In your Koa.js server, manage user registration and login by interfacing with the Back4app REST API.
Example: User Registration Endpoint
JS
router.post('/signup', async (ctx) => {
  const { username, password, email } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/users`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const userData = await response.json();
    ctx.body = userData;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error signing up' };
  }
});
router.post('/signup', async (ctx) => {
  const { username, password, email } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/users`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const userData = await response.json();
    ctx.body = userData;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error signing up' };
  }
});
﻿
You can build similar endpoints for login and session management as needed.
﻿
Step 7 – Deploying Your Koa.js Application
Back4app’s Web Deployment feature allows you to host your Koa.js server by linking it to your GitHub repository.
7.1 – Build and Organize Your Project
Ensure your project is properly structured. A sample layout might be:
Text
Basic-CRUD-App-KoaJS/
├── node_modules/
├── server.js
├── package.json
└── README.md
Basic-CRUD-App-KoaJS/
├── node_modules/
├── server.js
├── package.json
└── README.md
﻿
Commit all your source files to a Git repository.
Sample Git Commands:
Bash
git init
git add .
git commit -m "Initial commit of Koa.js backend"
git remote add origin https://github.com/your-username/Basic-CRUD-App-KoaJS.git
git push -u origin main
git init
git add .
git commit -m "Initial commit of Koa.js backend"
git remote add origin https://github.com/your-username/Basic-CRUD-App-KoaJS.git
git push -u origin main
﻿
7.2 – Integrate with Back4app Web Deployment
Log in to your Back4app dashboard, open your project Basic-CRUD-App-KoaJS, and navigate to the Web Deployment section.
Connect your GitHub account if you haven’t done so already.
Select your repository and the relevant branch (e.g., main).
7.3 – Configure Your Deployment Settings
Build Command:
If your project needs to be built (for example, transpiling modern JavaScript), specify a build command such as npm run build.
Output Directory:
Indicate the folder containing your production-ready files, if applicable.
Environment Variables:
Add any necessary environment variables (like API keys) in the deployment configuration.
7.4 – Optional: Dockerize Your Koa.js Server
If you want to deploy your application as a container, include a Dockerfile in your repository:
Dockerfile
# Use the official Node.js image as a base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the desired port
EXPOSE 3000

# Run the application
CMD ["node", "server.js"]
# Use the official Node.js image as a base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the desired port
EXPOSE 3000

# Run the application
CMD ["node", "server.js"]
﻿
7.5 – Launch Your Application
Click the Deploy button on Back4app.
Monitor the deployment logs to ensure your app is built and deployed successfully.
Once finished, Back4app will provide a URL where your Koa.js server is accessible.
7.6 – Validate Your Deployment
Visit the provided URL to verify that your application is running.
Test each endpoint (CRUD operations, user authentication) to confirm proper functionality.
If issues occur, review your logs and deployment settings for troubleshooting.
﻿
Step 8 – Conclusion and Future Enhancements
Great work! You have now built a fully operational CRUD application using Koa.js integrated with Back4app. 
Your project Basic-CRUD-App-KoaJS features carefully designed collections for Items and Users, a user-friendly Admin App for data management, and a secure backend.
Next Steps:
Expand Your API:
Enhance your Koa.js server with additional routes, middleware, or even real-time features.
Improve Authentication:
Consider implementing token-based authentication, social logins, or multi-factor verification.
Explore Further Documentation:
Check out the Back4app documentation and Koa.js guides for more advanced topics and optimizations.
By following this tutorial, you now possess the skills to build a scalable, secure, and efficient CRUD backend with Koa.js and Back4app. Enjoy
Field	Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	The item’s title.
description	String	A short description of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp for the most recent update.
Field	Type	Description
_id	ObjectId	Auto-generated primary key.
username	String	A unique username for the user.
email	String	Unique email address of the user.
password_hash	String	Securely hashed password.
created_at	Date	Timestamp of account creation.
updated_at	Date	Timestamp of the last account update.
Updated 25 Feb 2025
Did this page help you?
Building a Basic CRUD Application with Lit?
How to a Basic CRUD App with Alpine.js?