CRUD App using RESTful API With Deno, Oak, MongoDB And Angular 9

We’ll be start to build a CRUD (Create, Read, Update, Delete) App using RESTful API with Deno, Oak and MongoDB. Here we’ll use deno_mongo for interacting with the MongoDB instance and for frontend purpose use Angular 9.

Required applications:

Deno: Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. For installation you can visit the official deno website.

Oak: One of the most popular middleware framework for Deno’s http server, including a router middleware. This middleware framework is inspired by Koa and middleware router inspired by @koa/router.

MongoDB: Please install MongoDB in your machine if you have not installed yet. Checkout the official MogngoDB installation manual for any help with the installation. Here we use deno_mongo database driver for deno to connect with MongoDB.

Angular: Angular is a platform for building mobile and desktop web applications. Here we use Angular 9 and make sure you have installed Node.js 10 or later to run Angular 9. You can install Angular 9 using angular CLI.

Here is the folder structure of our application.

Application folder structure

Restful API:

This is the server.ts file that is used to start the server and declare the routes.

./server.ts

Now create db-connect.ts file under the db folder to connect the MongoDB. We have to create a database deno-api and a products collection in the MongoDB.

./db/db-connect.ts

Next, we will create products.ts under controller folder create function allProducts, productById, addProduct, updateProduct, deleteProduct. These function is used in routing to purpose our CRUD serve.

./controller/products.ts

Now Open terminal/command prompt in the root folder and run the bellow command.

deno run --allow-net --allow-write --allow-read --allow-plugin --unstable server.ts

Now the server will run in port 8000 and go to http://localhost:8000/to access the api.

Frontend (Angular):

Frontend part is maintained in the client folder where we have implemented the Angular 9. So go the client folder and open a Terminal and run the following command

• npm install
• ng serve

After application will run in 4200 port. So go to http://localhost:4200/to access the application. After running, application looks like a bellow screenshot.

Conclusion:

You can also check the full project GitHub link of CRUD app. This CRUD app example will help you to start the web application using Deno.

I hope you enjoyed the reading, and if you did, let me know in the comments! Thank you very much