{"componentChunkName":"component---src-templates-tag-js","path":"/tags/rest/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/create-rest-api-in-deno/"},"html":"

Deno, the creation of Ryan Dahl is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. As Deno 1.0.0 has released, there is much-awaited curiosity amongst developers around working with this new stack.

\n

When it comes to learning a new language, the first thing that comes to our mind is the creation of a todo app, supporting CRUD functionality. So here we will be creating a very simple Todo application using the Deno.

\n

So before starting I assume you have installed Deno on your system, if not then you can find the link here.\nFor the database, we will be using the JSON file as of now to completely focus on creating web API using Deno. Not more words and now let's start.

\n

The file structure we are going to follow is as below

\n
  // Final directory structure\n  deno-todo-api/\n    --|controllers/\n      |--|todo.ts\n      |data/\n      |--|todos.ts\n      |interfaces/\n      |--|Todo.ts\n      |routes/\n      |--|todo.ts\n    --|server.ts\n
\n

At any point in time, if you are stuck somewhere, you can follow this link to get the complete code.

\n
    \n
  1. Create a directory named deno-todo-api and move into that directory
    2. \n
\n
  mkdir deno-todo-api && cd deno-todo-api
\n
    \n
  1. Create the file server.ts in the root of the directory.
    2. \n
  2. Write the following code into the server.ts file to start a server
    3. \n
\n
import { Application, Router } from "https://deno.land/x/oak@v17.1.4/mod.ts";\n\nconst app = new Application();\nconst port: number = 8080;\n\nconst router = new Router();\nrouter.get("/", ({ response }: { response: any }) => {\n  response.body = {\n    message: "Rest API tutorial with Deno",\n  };\n});\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nconsole.log('running on port ', port);\nawait app.listen({ port });
\n

Unlike NodeJS Deno does not need the package.json file for dependency management. Dependency management is simplified by having a list of modules and their respective URLs.

\n

Here we have used oak, a middleware framework for Deno's HTTP server, including a router middleware.

\n
    \n
  1. server.ts is the entry point for our web application. To check it run the following command in the root directory
    2. \n
\n
deno run --allow-net server.ts
\n

Open the browser and hit the URL http://localhost:8080/

\n

You can see the following output in your browser

\n

\"Browser

\n
    \n
  1. Now following the directory structure, we will create following folders in our project with the help of below command
    2. \n
\n
mkdir controllers data interfaces routes
\n
    \n
  1. First of all, we will create dummy data to play with our todo APIs.Go to the data folder and create a file called todos.ts and the following code into it
    2. \n
\n
import { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interface\nimport Todo from '../interfaces/Todo.ts';\n\nlet todos: Todo[] = [\n  {\n    id: v4.generate(),\n    task: 'Hello world app with Deno',\n    done: true,\n  },\n  {\n    id: v4.generate(),\n    task: 'Simple Rest API with Deno',\n    done: false,\n  },\n];\n\nexport default todos;
\n

We will be using v4 provided by the uuid module to generate unique IDs.

\n
    \n
  1. Now create a file in interface/ folder Todo.ts and paste the following code.
    2. \n
\n
export default interface Todo {\n  id: string,\n  task: string,\n  done: boolean,\n}
\n

What are the interfaces??

\n

An interface defines the specifications of an entity.

\n
\n

One of TypeScript’s core principles is that type checking focuses on the shape that values have. In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

\n
\n
    \n
  1. Now create a file named todo.ts in controllers/ directory and paste the following code
    2. \n
\n
import { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interfaces\nimport Todo from "../interfaces/Todo.ts";\n// stubs\nimport todos from "../data/todos.ts";\n\nexport default {\n  getAll: ({ response }: { response: any }) => {\n    response.status = 200;\n    response.body = {\n      data: todos\n    };\n  },\n  create: async (\n    { request, response }: { request: any; response: any },\n  ) => {\n    const body = await request.body();\n    if (!request.hasBody) {\n      response.status = 400;\n      response.body = {\n        message: "Please provide the task detail and  status",\n      };\n      return;\n    }\n    let newTodo: Todo = {\n      id: v4.generate(),\n      task: body.value.todo,\n      done: false,\n    };\n    let data = [...todos, newTodo];\n    response.body = {\n      data\n    };\n  },\n  getById: (\n    { params, response }: { params: { id: string }; response: any },\n  ) => {\n    const todo: Todo | undefined = todos.find((t) => {\n      return t.id === params.id;\n    });\n    if (!todo) {\n      response.status = 404;\n      response.body = {\n        message: "No task found related to given ID",\n      };\n      return;\n    }\n    response.status = 200;\n    response.body = {\n      data: todo\n    };\n  },\n  update: async (\n    { params, request, response }: {\n      params: { id: string },\n      request: any,\n      response: any,\n    },\n  ) => {\n    const todo: Todo | undefined = todos.find((t) => t.id === params.id);\n    if (!todo) {\n      response.status = 404;\n      response.body = {\n        message: "No todo found",\n      };\n      return;\n    }\n\n    const body = await request.body();\n    const updatedData: { task?: string; done?: boolean } = body.value;\n\n    let newTodos = todos.map((t) => {\n      return t.id === params.id ? { ...t, ...updatedData } : t;\n    });\n    response.status = 200;\n    response.body = {\n      data: newTodos,\n    };\n  },\n  delete: (\n    { params, response }: { params: { id: string }; response: any },\n  ) => {\n    const allTodos = todos.filter((t) => t.id !== params.id);\n\n    response.status = 200;\n    response.body = {\n      data: allTodos,\n    };\n  },\n};
\n
    \n
  1. Now go to routes and create todo.ts file in it and paste the following code
    2. \n
\n
import { Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\n// controller\nimport todoController from "../controllers/todo.ts";\n\nrouter\n  .get("/todos", todoController.getAll)\n  .post("/todos", todoController.create)\n  .get("/todos/:id", todoController.getById)\n  .put("/todos/:id", todoController.update)\n  .delete("/todos/:id", todoController.delete);\n\nexport default router;
\n
    \n
  1. Now since we have created the complete MVC project for our todo APIs, we will be going to update our main server.ts file with following code
    2. \n
\n
import { Application, Router } from "https://deno.land/x/oak/mod.ts";\nimport todoRouter from "./routes/todo.ts"; // added the router call\n\nconst app = new Application();\nconst port: number = 8080;\n\napp.use(todoRouter.routes()); // Intitialize the router with our application. \napp.use(todoRouter.allowedMethods());\n\napp.addEventListener("listen", ({ secure, hostname, port }) => {\n  const protocol = secure ? "https://" : "http://";\n  const url = `${protocol}${hostname ?? "localhost"}:${port}`;\n  console.log(`Listening on: ${port}`);\n});\n\nawait app.listen({ port });
\n
    \n
  1. Now run again the server with the following command
    2. \n
\n
deno run --allow-net server.ts
\n

Now open the postman and hit the get URL http://localhost:8080/todos/

\n

\"Browser

\n

To check the getByID router, copy the ID of any task and hit the URL like

\n

http://localhost:8080/todos/:id

\n

You will be getting output like below

\n
{\n    "data": {\n        "id": "eeacacdc-e55b-4299-aab7-5f631a2e3975",\n        "task": "Hello world app with Deno",\n        "done": true\n    }\n}
\n

Similarly, we can verify the complete crud API created. Below is the reference of all APIs created in the blog post

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
APIMethodDescription
http://localhost:8080/todos/GETFetch All todos
http://localhost:8080/todos/{id}GETFetch todo by ID
http://localhost:8080/todos/POSTCreate New todo
http://localhost:8080/todos/{id}PUTUpdate todo by ID
http://localhost:8080/todos/{id}DELETEDelete todo by ID
\n

You can find the complete code of the repo here

\n","frontmatter":{"date":"June 08, 2020","updated_date":null,"title":"Create REST API using deno ","tags":["Deno","REST","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp","srcSet":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/61e93/task.webp 200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/1f5c5/task.webp 400w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp 800w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/99238/task.webp 1200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/135cd/task.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}}]}},"pageContext":{"tag":"REST"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}