Quickstarters
How to Develop a CRUD Application with Deno? A Comprehensive Guide

42min
Overview
This guide demonstrates how to create a simple CRUD (create, read, update, delete) application using Deno. 
We will leverage Back4app as our backend management platform, configuring it to operate as a reliable database solution and we will employ the API approach to interact with our backend services.
In this tutorial, you will:
Set up a Back4app project called Basic-CRUD-App-Deno.
Design and configure your database schema with collections and fields tailored for CRUD operations.
Utilize the Back4app Admin App to manage your collections via an intuitive, drag-and-drop interface.
Connect your Deno frontend with Back4app using REST/GraphQL calls.
Secure your backend with robust access control measures.
By the end of this guide, you will have built a production-ready web application that supports essential data operations and user authentication.
Essential Insights
Master CRUD functionalities to efficiently handle data.
Learn how to design a scalable backend integrated with a Deno-based frontend.
Use the Back4app Admin App for seamless data management.
Discover deployment strategies, including containerization with Docker.
﻿
Prerequisites
Before starting, please ensure you have:
A Back4app account and an initialized project.
Refer to Getting Started with Back4app if needed.
A Deno development setup.
Make sure Deno is installed and updated (version 1.10+ is recommended).
Familiarity with JavaScript/TypeScript, Deno, and REST API concepts.
Consult the Deno Manual for further reading.
﻿
Step 1 – Initializing Your Project
Launching a New Back4app Project
Log into your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-Deno and follow the on-screen instructions.
Create New Project
﻿
After the project is created, it will be visible on your dashboard, laying the groundwork for your backend configuration.
﻿
Step 2 – Crafting the Database Schema
Structuring Your Data Model
For this CRUD application, you will define multiple collections. Below are sample collections with suggested fields to facilitate basic operations.
1. Collection: Items
This collection holds details for each item.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary key.
title
String
Name of the item.
description
String
Brief summary of the item.
created_at
Date
Timestamp for when the item was added.
updated_at
Date
Timestamp for the latest update.
2. Collection: Users
This collection stores user profiles and authentication data.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
User's unique email address.
password_hash
String
Securely hashed password.
created_at
Date
Account creation timestamp.
updated_at
Date
Last updated timestamp.
You can manually create these collections in the Back4app dashboard by establishing a new class for each and adding columns to define each field.
Create New Class
﻿
You can also add fields by selecting their type, naming them, setting defaults, and marking them as required.
Create Column
﻿
﻿
Employing the Back4app AI Agent for Schema Creation
The Back4app AI Agent simplifies schema generation by allowing you to input a descriptive prompt, which then automatically creates the required collections and fields.
Steps to Use the AI Agent:
Access the AI Agent:
Open your Back4app dashboard and locate the AI Agent option.
Input Your Data Model Description:
Provide a detailed prompt listing your collections and fields.
Review and Apply:
Inspect the generated schema suggestions and implement them in your project.
Sample Prompt:
Text
Create the following collections in my Back4app application:

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 application:

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 ensures consistency and efficiency in setting up your backend schema.
﻿
Step 3 – Activating the Admin Interface and CRUD Functions
Overview of the Admin Interface
The Back4app Admin App offers a no-code interface to handle your backend data. Its intuitive drag-and-drop design facilitates easy management of CRUD operations.
Activating the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set up your admin credentials by creating an initial admin user, which also configures roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
Once activated, log into the Admin App to manage your collections effortlessly.
Admin App Dashboard
﻿
Managing CRUD Operations via the Admin App
In the Admin App, you can:
Add Records: Click “Add Record” in any collection (e.g., Items) to create new entries.
View/Edit Records: Select records to inspect or modify details.
Remove Records: Delete entries that are no longer required.
This straightforward tool streamlines the process of performing basic data operations.
﻿
Step 4 – Connecting Deno with Back4app
With your backend configured, it’s time to link your Deno frontend using REST or GraphQL APIs.
Option: Using REST/GraphQL API Calls
We will rely on API calls to interact with Back4app.
Example: Fetching Data via REST in Deno
Create a module (e.g., fetchItems.ts) with the following code:
TypeScript
const APPLICATION_ID = "YOUR_APPLICATION_ID";
const REST_API_KEY = "YOUR_REST_API_KEY";
const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

export async function fetchItems() {
  try {
    const response = await fetch(SERVER_URL, {
      headers: {
        "X-Parse-Application-Id": APPLICATION_ID,
        "X-Parse-REST-API-Key": REST_API_KEY,
      },
    });
    const data = await response.json();
    console.log("Retrieved items:", data.results);
  } catch (error) {
    console.error("Error retrieving items:", error);
  }
}

fetchItems();
const APPLICATION_ID = "YOUR_APPLICATION_ID";
const REST_API_KEY = "YOUR_REST_API_KEY";
const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

export async function fetchItems() {
  try {
    const response = await fetch(SERVER_URL, {
      headers: {
        "X-Parse-Application-Id": APPLICATION_ID,
        "X-Parse-REST-API-Key": REST_API_KEY,
      },
    });
    const data = await response.json();
    console.log("Retrieved items:", data.results);
  } catch (error) {
    console.error("Error retrieving items:", error);
  }
}

fetchItems();
﻿
Integrate such API calls into your Deno application as needed.
﻿
Step 5 – Strengthening Your Backend Security
Implementing Access Control Lists (ACLs)
Protect your data by assigning ACLs to each object. For instance, to ensure an item is private:
TypeScript
async function createPrivateItem(itemData: { title: string; description: string }, ownerToken: string) {
  const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

  const response = await fetch(SERVER_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "X-Parse-Session-Token": ownerToken,
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        "*": { read: false, write: false },
        [ownerToken]: { read: true, write: true }
      }
    }),
  });
  const result = await response.json();
  console.log("Private item created:", result);
}
async function createPrivateItem(itemData: { title: string; description: string }, ownerToken: string) {
  const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

  const response = await fetch(SERVER_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "X-Parse-Session-Token": ownerToken,
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        "*": { read: false, write: false },
        [ownerToken]: { read: true, write: true }
      }
    }),
  });
  const result = await response.json();
  console.log("Private item created:", result);
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust CLPs for each collection to define default access policies, ensuring that only authenticated or authorized users can access or modify sensitive data.
﻿
Step 6 – Managing User Authentication
Creating User Accounts
Back4app uses the Parse User class for authentication. In your Deno application, manage user registration and login via REST API calls.
Example: User Registration in Deno
TypeScript
async function registerUser(username: string, password: string, email: string) {
  const SERVER_URL = "https://parseapi.back4app.com/users";

  try {
    const response = await fetch(SERVER_URL, {
      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({
        username,
        password,
        email
      })
    });
    const data = await response.json();
    console.log("User registered:", data);
  } catch (error) {
    console.error("Registration error:", error);
  }
}

registerUser("newUser", "securePassword", "[email protected]");
async function registerUser(username: string, password: string, email: string) {
  const SERVER_URL = "https://parseapi.back4app.com/users";

  try {
    const response = await fetch(SERVER_URL, {
      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({
        username,
        password,
        email
      })
    });
    const data = await response.json();
    console.log("User registered:", data);
  } catch (error) {
    console.error("Registration error:", error);
  }
}

registerUser("newUser", "securePassword", "user@example.com");
﻿
This approach can similarly be applied to login and session management.
﻿
Step 7 – Deploying Your Deno Frontend with Web Deployment
Back4app’s Web Deployment feature allows you to host your Deno-based frontend by deploying code directly from a GitHub repository.
7.1 – Building Your Production Version
Open your project directory in the terminal.
Run the build command:
For example, if using a bundler like esbuild:
Bash
deno run --allow-read --allow-write build_script.ts
deno run --allow-read --allow-write build_script.ts
﻿
Confirm the Build Output:
Ensure the output directory (e.g., dist) contains the necessary static files like index.html, bundled JavaScript, CSS, and images.
﻿
7.2 – Organizing and Committing Your Code
Your repository should include all source files for your Deno frontend. An example structure might be:
Text
Basic-CRUD-App-Deno/
├── deps.ts
├── controllers/
├── public/
│   └── index.html
├── routes/
├── src/
│   ├── app.ts
│   └── fetchItems.ts
├── Dockerfile
├── build_script.ts
└── README.md
Basic-CRUD-App-Deno/
├── deps.ts
├── controllers/
├── public/
│   └── index.html
├── routes/
├── src/
│   ├── app.ts
│   └── fetchItems.ts
├── Dockerfile
├── build_script.ts
└── README.md
﻿
Sample File: deps.ts
TypeScript
export { serve } from "https://deno.land/[email protected]/http/server.ts";
export { serve } from "https://deno.land/std@0.140.0/http/server.ts";
﻿
Sample File: src/app.ts
TypeScript
import { serve } from "../deps.ts";
import { fetchItems } from "./fetchItems.ts";

serve(async (req) => {
  const { pathname } = new URL(req.url);

  if (pathname === "/api/items") {
    const items = await fetchItems();
    return new Response(JSON.stringify(items), {
      headers: { "Content-Type": "application/json" },
    });
  }

  return new Response(await Deno.readTextFile("./public/index.html"), {
    headers: { "Content-Type": "text/html" },
  });
});
import { serve } from "../deps.ts";
import { fetchItems } from "./fetchItems.ts";

serve(async (req) => {
  const { pathname } = new URL(req.url);

  if (pathname === "/api/items") {
    const items = await fetchItems();
    return new Response(JSON.stringify(items), {
      headers: { "Content-Type": "application/json" },
    });
  }

  return new Response(await Deno.readTextFile("./public/index.html"), {
    headers: { "Content-Type": "text/html" },
  });
});
﻿
Committing Your Code to GitHub
Initialize Git:
Bash
git init
git init
﻿
Stage all files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Deno CRUD frontend"
git commit -m "Initial commit for Deno CRUD frontend"
﻿
Push to GitHub:
Create a repository (e.g., Basic-CRUD-App-Deno) and push:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Deno.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Deno.git
git push -u origin main
﻿
﻿
7.3 – Linking GitHub with Back4app Web Deployment
Log into Back4app and navigate to your project.
Click on the Web Deployment feature.
Connect your GitHub account following the prompts.
Select your repository and branch (e.g., main) that holds your Deno code.
﻿
7.4 – Configuring Deployment Settings
Specify:
Build Command:
If no pre-built dist folder exists, set the command (e.g., deno run --allow-read --allow-write build_script.ts).
Output Directory:
Define the output folder, such as dist.
Environment Variables:
Add any necessary environment variables (e.g., API keys).
﻿
7.5 – Dockerizing Your Deno Application
To deploy with Docker, include a Dockerfile in your project:
Dockerfile
# Use the official Deno image
FROM denoland/deno:alpine-1.25.0

# Set the working directory
WORKDIR /app

# Cache dependencies
COPY deps.ts .
RUN deno cache deps.ts

# Copy the application code
COPY . .

# Expose port 8000
EXPOSE 8000

# Run the application
CMD ["run", "--allow-net", "--allow-read", "src/app.ts"]
# Use the official Deno image
FROM denoland/deno:alpine-1.25.0

# Set the working directory
WORKDIR /app

# Cache dependencies
COPY deps.ts .
RUN deno cache deps.ts

# Copy the application code
COPY . .

# Expose port 8000
EXPOSE 8000

# Run the application
CMD ["run", "--allow-net", "--allow-read", "src/app.ts"]
﻿
Choose the Docker deployment option in Back4app if you prefer containerization.
﻿
7.6 – Launching Your Application
Initiate Deployment:
Click the Deploy button in your Back4app dashboard.
Monitor the Process:
Back4app will fetch your code, execute build steps, and deploy your app.
Access Your Site:
After deployment, a URL will be provided where your Deno application is live.
﻿
7.7 – Confirming Deployment Success
Visit the Provided URL:
Open the URL in your browser.
Test Your Application:
Ensure that all routes, static assets, and API endpoints function correctly.
Troubleshoot:
If issues appear, consult the deployment logs and verify your configuration.
﻿
Step 8 – Wrapping Up and Future Directions
Congratulations! You have successfully built a basic CRUD application using Deno with Back4app as your backend. 
You set up the project Basic-CRUD-App-Deno, structured your database, managed data through the Admin App, connected your Deno frontend via API calls, and secured your data with ACLs and CLPs.
Future Enhancements:
Expand the Frontend:
Add features like detailed views, search filters, or real-time updates.
Advanced Backend Logic:
Integrate Cloud Functions or additional API integrations.
Deepen Security:
Explore role-based access and further authentication measures.
For more details, check the Back4app documentation and explore additional resources.
Happy coding and enjoy building your scalable Deno CRUD application!
Field	Type	Purpose
_id	ObjectId	Auto-generated primary key.
title	String	Name of the item.
description	String	Brief summary of the item.
created_at	Date	Timestamp for when the item was added.
updated_at	Date	Timestamp for the latest update.
Field	Type	Purpose
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	User's unique email address.
password_hash	String	Securely hashed password.
created_at	Date	Account creation timestamp.
updated_at	Date	Last updated timestamp.
Updated 20 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide
How to Build a CRUD App with Astro?