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

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 https //www back4app com/docs/get started/new parse app 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 https //deno land/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 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 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 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 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 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 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 export { serve } from "https //deno land/std\@0 140 0/http/server ts"; sample file src/app ts 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 git init stage all files git add commit your changes git commit m "initial commit for deno crud frontend" push to github create a repository (e g , basic crud app deno ) and push 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 \# 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 https //www back4app com/docs and explore additional resources happy coding and enjoy building your scalable deno crud application!