DEV Community: Nikos Benakis

Building a Secure PDF Chat AI Application with Langchain, Next.js, arcjet, and Pinecone DB

Nikos Benakis — Mon, 15 Jul 2024 11:04:24 +0000

In this tutorial, we will guide you through creating a secure PDF chat AI application where users can upload PDF files and ask questions related to the content of those files. The chat AI will use a combination of the question, chat history, and context from the uploaded PDFs to generate accurate responses. We’ll leverage a Retrieval-Augmented Generation (RAG) system with Pinecone DB for efficient information retrieval and Arcjet.com for securing our endpoints.

Introduction
System Overview
Setup Instructions
Code Walkthrough
Security Considerations
Conclusion

Introduction

Interactive chat applications are becoming increasingly popular, especially those capable of understanding and processing document content. In this tutorial, we'll build a secure PDF chat AI application using Langchain, Next.js, Pinecone DB, and Arcjet.com. This application will allow users to upload PDFs and interact with an AI that can answer questions based on the content of the uploaded documents.

System Overview

Here's a high-level overview of our system:

📸 Architecture-Overview

Frontend: Allows users to upload PDF files and ask questions.
Backend: Processes the PDF files, stores the content in Pinecone DB, and handles the question-answering mechanism.
RAG System: Combines retrieval of relevant PDF content with generation of answers.
Security: Utilizes Arcjet.com for endpoint security, rate limiting, and bot protection.

Setup Instructions

Follow these steps to set up the application:

Clone the Repository:

git clone https://github.com/NickolasBenakis/secure-pdf-chat.git
cd secure-pdf-chat

Install Dependencies:

npm install

Following the steps on Readme.md

Setup Pinecone DB:

Setup Arcjet:

Create a free account and get access to Arcjet and get your API key.

Setup OPEN AI:

Create a free account and get an OPEN_AI key from openai.

Configure Environment Variables:

Create a .env.local file and add your Pinecone API key and Arcjet credentials:

PINECONE_API_KEY=your_pinecone_api_key
PINECONE_INDEX_NAME=your_pinecone_index_name
ARCJET_API_KEY=your_arcjet_api_key
OPENAI_API_KEY=your_openai_key

🚀 You can run the app:

npm run dev

Code Walkthrough

This project was made with Next.js with Typescript with App Router and with vercel AI SDK.

😎 Great now let's dive into our domain critical parts.🚀

Pdf-loader This is the function responsible for chunking our PDFs into smaller documents to store them in a Pinecone afterward.

We are looping through our files in sequence and we are using the WebPDFLoader.

Afterwards, we created our textSplitter. In which you can pass different options for different use cases.

export async function getChunkedDocsFromUploadedPDFs(
  fileList: File[],
): Promise<Document<Record<string, unknown>>[]> {
  try {
    const docList = [];
    for (const file of fileList) {
      const pdfLoader = new WebPDFLoader(file);
      const docs = await pdfLoader.load();
      docList.push(docs);
    }

    const textSplitter = new RecursiveCharacterTextSplitter({
      chunkSize: 1000,
      chunkOverlap: 200,
    });

    const chunkedDocs = await textSplitter.splitDocuments(flattenDeep(docList));

    return chunkedDocs;
  } catch (error) {
    logger.error(`Error loading PDF: ${fileList} ${error}`);
    throw new Error("Error loading PDF");
  }
}

Saving docs in Pinecone DB

Here we save all the splitter docs from the previous step and we save them along with OpenAIEmbeddings to pinecode db index.

export async function embedAndStoreDocs(
  docs: Document<Record<string, unknown>>[],
) {
  /*create and store the embeddings in the vectorStore*/
  try {
    const pineconeClient = await getPineconeClient();
    const embeddings = new OpenAIEmbeddings();
    const index = pineconeClient.index(env.PINECONE_INDEX_NAME);

    //embed the PDF documents
    await PineconeStore.fromDocuments(docs, embeddings, {
      pineconeIndex: index,
    });
  } catch (error) {
    logger.error(error);
    throw new Error("Failed to load your docs !");
  }
}

Langchain

Here we create our chat chain. It receives the streamingModel, in our case ChatGPT, it receives our pinecone db store as retrieval. and our prompts both for generating the final question to the model + the prompt about answering to it.

    const chain = ConversationalRetrievalQAChain.fromLLM(
      streamingModel,
      vectorStore.asRetriever(),
      {
        qaTemplate: QA_TEMPLATE,
        questionGeneratorTemplate: STANDALONE_QUESTION_TEMPLATE,
        returnSourceDocuments: true,
        questionGeneratorChainOptions: {
          llm: nonStreamingModel,
        },
      },
    );

In more details:

PROMPTS

// Creates a standalone question from the chat-history and the current question
export const STANDALONE_QUESTION_TEMPLATE = `Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.

Chat History:
{chat_history}
Follow Up Input: {question}
Standalone question:`;

// Actual question you ask the chat and send the response to client
export const QA_TEMPLATE = `You are an enthusiastic AI assistant. Use the following pieces of context to answer the question at the end.
If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.

{context}

Question: {question}
Helpful answer in markdown:`;

Models

import { ChatOpenAI } from "@langchain/openai";

export const streamingModel = new ChatOpenAI({
  modelName: "gpt-3.5-turbo",
  streaming: true,
  verbose: true,
  temperature: 0,
});

export const nonStreamingModel = new ChatOpenAI({
  modelName: "gpt-3.5-turbo",
  verbose: true,
  temperature: 0,
});

In the end we connect all the pieces together and we invoke our chain. In the invocation phase we add the chatHistory as input among with the user question. When the call is finished we take the source documents from the chain and we return the sources to the client for reference. We are using the ai SDK from vercel in order to stream the data to the client.


    chain
      .call(
        {
          question: question,
          chat_history: chatHistory,
        },
        [handlers],
      )
      .then(async (res) => {
        const sourceDocuments = res?.sourceDocuments;
        const firstTwoDocuments = sourceDocuments.slice(0, 2);
        const pageContents = firstTwoDocuments.map(
          ({ pageContent }: { pageContent: string }) => pageContent,
        );

        data.append({
          sources: pageContents,
        });
        data.close();
      });

    return new StreamingTextResponse(stream, {}, data);

Security considerations

To ensure the security of our application, we use Arcjet.com for securing our endpoints. Here are some additional security measures:

Bot Detection: Ensure that our website is not a target for bots. More info here.
Secure from common attacks: Arcjet Shield protects your application against common attacks, including the OWASP Top 10.
Rate limit: Ensure that your llm is not overloaded with n input that can overcharge your wallet. Arcjet offers a declarative rate limiter without worrying about creating a Redis more info here.
Environment Configuration: Use environment variables to manage sensitive configurations.

In more details

Arcjet shield with rate limiter setup in chat route.

const aj = arcjet({
  key: env.ARCJET_KEY,
  rules: [
    tokenBucket({
      mode: "LIVE", // Live for Production, DRY_RUN logs only for dev
      characteristics: ["sessionId"], // property being tracked
      refillRate: 1, // 1 token per interval
      interval: 7200, // 2 hours
      capacity: 5, // bucket maximum capacity of 5 tokens
    }),
    shield({
      mode: "LIVE", // Live for Production, DRY_RUN logs only for dev
    }),
  ],
});

middleware setup

import arcjet, { createMiddleware, detectBot } from "@arcjet/next";
import { env } from "./services/config";
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};
const aj = arcjet({
  key: env.ARCJET_KEY, // Get your site key from https://app.arcjet.com
  rules: [
    detectBot({
      mode: process.env.NODE_ENV === "production" ? "LIVE" : "DRY_RUN", // will block requests. Use "DRY_RUN" to log only
      block: ["AUTOMATED"], // blocks all automated clients
    }),
  ],
});
export default createMiddleware(aj);

Conclusion

~Disclaimer starts
Arcjet contacted me to test their product and share my experience with the developer community. While they sponsored this article, they did not influence the content or opinions expressed in this write-up.

This article aims to provide an honest and unbiased guide on integrating Arcjet's SDK with a Next.js application. This ensures you get an authentic look at the process and can make an informed decision about using these tools in your projects.

Transparency is key in the developer community, and I believe in sharing my experiences honestly. Arcjet offers innovative security solutions that I found valuable, and I hope this guide helps you understand how to leverage their services effectively.
~Disclaimer ends

By following this tutorial, you’ve created a secure PDF chat AI application that leverages a RAG system with Pinecone DB, built with TypeScript and Next.js. This setup allows users to interact with their PDF documents in a meaningful way, extracting and utilizing the content effectively. The use of Arcjet.com ensures that your application remains secure and resilient against common threats.

Feel free to customize and extend this application according to your needs. If you have any questions or suggestions, please leave a comment below or contribute to the GitHub repository.

Happy coding!

Securing Your Next.js with Arcjet on Fly.io with Lightning-Fast Deployment

Nikos Benakis — Sat, 08 Jun 2024 21:28:50 +0000

Summary

In this tutorial, we'll walk through deploying a Next.js application to Fly.io using the Fly.io CLI and securing it with Arcjet Shield Protection. This setup ensures your application is both performant and secure, and the deployment process is incredibly fast.

Why Arcjet

Arcjet is a powerful tool designed to provide comprehensive security features for web applications. Its primary function is to offer robust protection against common web threats, such as DDoS attacks, bot activity, and abusive behavior. Arcjet achieves this through various security measures, including rate limiting, IP blacklisting, and advanced bot detection. By integrating Arcjet into your application, you can ensure that your app remains secure, performant, and resilient against malicious activities. They do have a rich docs page with a variety of security goods for your app, where you can find them here.

By using Arcjet in your project you gain:

Enhanced Security: Arcjet offers state-of-the-art security features to protect your Next.js application from common threats, ensuring that your app remains secure.

Scalability: With Arcjet, you can easily scale your security measures as your application grows, ensuring consistent protection regardless of traffic volume.

Ease of Integration: Arcjet provides straightforward integration with Next.js applications, allowing developers to quickly implement advanced security features without extensive configuration. It can also be used with all the modern authentication SDKs out there such us Clerk.dev.

Why fly.io

Fly.io is a platform that enables developers to deploy and run their applications close to their users. It leverages a global network of servers to provide low-latency, high-performance hosting solutions. It simplifies the deployment process by offering a powerful CLI and automated workflows, making it easy to deploy applications with minimal hassle. Additionally, Fly.io supports various programming languages and frameworks, including Next.js, making it a versatile choice for modern web development.

By using Fly.io in your project you gain:

Ease of Deployment: The provided CLI and automated deployment workflows streamline the deployment process, enabling rapid and efficient launches.

Global Reach: Fly.io's global network allows you to deploy your application close to your users, reducing latency and improving performance.

Scalability and Performance: Fly.io's infrastructure is designed to handle high traffic volumes, ensuring that your application remains performant and responsive under load.

Integration with Modern Tools: Fly.io supports seamless integration with modern development tools and frameworks, making it an ideal choice for deploying Next.js applications.

Setup

Step 1 Install a Next.js app

npx create-next-app@latest my-next-app
cd my-next-app

Step 2 Install Arcjet SDK

npm install @arcjet/next

Signup to Arcjet https://app.arcjet.com/auth/signin and retrieve the Arcjet API key and store it in .env file on the root folder.

ARCJET_KEY=ajkey_***********

Step 3 Create a middleware

src/services/protectionGuard.ts

import arcjet from "@arcjet/next";

const aj = arcjet({
    key: process.env.ARCJET_KEY,
    rules: [], // many rules can be added afterward in each route or middleware depending on the business case. 
});

export * from "@arcjet/next";
export default aj;

src/middleware.ts

import { createMiddleware, shield } from "./services/protectionGuard";
import protectionGuard from "./services/protectionGuard";

export const config = {
    // matcher tells Next.js which routes to run the middleware on.
    // This runs the middleware on all routes except for static assets.
    matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

// Pass any existing middleware with the optional existingMiddleware prop
export default createMiddleware(
    protectionGuard.withRule(
        shield({
            mode: "LIVE",
        }),
    ),
);

In the above scenario, we are using shield protection. You can find more here. But in a few words, Arcjet Shield analyzes every request to your application to detect suspicious activity. Once a certain suspicion threshold is reached, subsequent requests from that client are blocked for a while.

Step 4 Setup Fly.io & Deploy

You can follow the documentation here

For MacOS is the steps are super simple

brew install flyctl

and then you simply use the below command in the root folder

fly launch

and boom 🎉 🎉 🎉 your app is getting deployed in less than 2 minutes 🚀

Monitoring

Arcjet provides you a rich dashboard with security-oriented logs/analytics you need for your deployed app.

We can see here some of the suspicious requests that have been blocked by shield.

Disclosure

Arcjet contacted me to test their product and share my experience with the developer community. While they sponsored this article, they did not influence the content or opinions expressed in this write-up.

This article aims to provide an honest and unbiased guide on integrating Arcjet's SDK with a Next.js application and deploying it using Fly.io. This ensures you get an authentic look at the process and can make an informed decision about using these tools in your projects.

Conclusion

Incorporating Arcjet and Fly.io into your Next.js application development process offers significant benefits in terms of security, performance, and deployment efficiency. Arcjet SDK gives a great experience and it ensures that your application is protected against common threats, while Fly.io provides a robust and scalable hosting solution that enhances performance and reduces latency. Together, these tools help you build and deploy modern Next.js applications that are secure, performant, and user-friendly.

Github repo

Unlocking Seamless Image Delivery with Airtable, Vercel & Cloudflare Images

Nikos Benakis — Wed, 15 May 2024 07:48:37 +0000

Summary

As engineers, we’re always on the lookout for ways to optimize our workflows and streamline processes. One challenge that arises while working with Airtable is the attachment type refresh known-issue, particularly the issue is that Airtable changes the attachment url every two-hours. Imagine that you are using Next.js and static site generation then you can end up having stale not working images. Also even if you are not using static site generation you can also surpass the Vercel image optimization limits since the urls will change frequently. In this article, I’ll share how we successfully tackled this problem by migrating our attachments from Airtable to Cloudflare Images, maintaining Next.js image optimization techniques while optimizing costs with Vercel.

Understanding the Airtable Attachment Refresh Issue

Airtable is a fantastic tool for managing data, including attachments such as images and documents. However, one limitation is the attachment field type that refreshes every two hours. This can be problematic, especially in applications where static generations or incremental static regenerations take place, more info here. To address this issue effectively, we needed a solution that would provide static image urls without compromising performance.

Migrating to Cloudflare Images

To circumvent the Airtable attachment refresh issue, we decided to migrate all our attachments to Cloudflare Images. Cloudflare Images offers a robust content delivery network (CDN) with instant cache purging capabilities. By storing our attachments on Cloudflare, we could ensure that urls will remain static, and any updates would be reflected immediately without any caching delays.

Strategic Migration Approach

In our quest to resolve the Airtable attachment refresh issue, we adopted a strategic approach to seamlessly transition our attachments to Cloudflare Images while maintaining data integrity and optimizing performance. Here’s how we executed the migration process:

Fetching Images from Airtable

We began by fetching all the images stored in Airtable using its API. This ensured that we had a comprehensive dataset of attachments ready for migration.

Utilizing Cloudflare Images library

To streamline the migration process, initially we tried to use the Cloudflare api. But some functionalities were missing like (removing duplicates and deleting multiple images), so we created & published a wrapper around it. The cloudflare-images-client npm library. This library provided us with the necessary tools and functionalities to upload all images to Cloudflare’s storage infrastructure seamlessly. On top of that this library gives you the ability to delete multiple images and to remove duplicate images if necessary.

Mapping Metadata to Airtable Records

During the migration process, we attached metadata to each image in Cloudflare Images, including the record ID from Airtable. This strategic decision allowed us to maintain a 1-1 relationship between the images stored in Cloudflare and their corresponding records in Airtable. That way we ensured that data integrity was preserved throughout the migration process. This strategic mapping enabled us to seamlessly link images to their corresponding records, facilitating easy retrieval and updates in the future.

Migration script example


import { CloudflareImagesClient } from “cloudflare-images-client”;

const cloudflareImagesClient = new CloudflareImagesClient({
  accountId: process.env.CLOUDFLARE_ACCOUNT_ID || “”,
  apiToken: process.env.CLOUDFLARE_API_TOKEN || “”,
});

async function migrateImages() {
  await cloudflareImagesClient.deleteDuplicateImages();

  const airtableImages = await findImages();

  for (const image of airtableImages) {
    const response = await cloudflareImagesClient.uploadImageFromUrl({
      url: image?.image?.[0]?.url,
      metadata: {
        uniqueImageId: image.uniqueImageId,
        recordId: image.recordId,
      },
    });

    const CDNimageUrl = response?.result?.variants?.[0];

    await getTable(“airtableImages”).update([
      {
        id: image.recordId,
        fields: {
          cloudflareImage: CDNimageUrl,
        },
      },
    ]);

  }
}

Optimizing Costs with Vercel

While Cloudflare Images provided static urls for our images, we also wanted to optimize costs associated with image optimization. Vercel, our chosen deployment platform, offers image optimization services as part of its billing model. However, by utilizing Cloudflare Images for storage and delivery, we were able to avoid additional charges for unnecessary new urls while making frequent new builds & deployments, ultimately saving on hosting costs.

Conclusion

By migrating our attachments from Airtable to Cloudflare Images and maintaining Next.js capabilities for optimized images, we successfully addressed the attachment refresh issue while optimizing costs with Vercel. This approach ensured efficient delivery of static content without incurring unnecessary expenses.

For developers facing similar challenges with Airtable attachments, consider exploring alternatives like Cloudflare Images API and integrating them seamlessly with platforms like Next.js and Vercel. By embracing innovative solutions and leveraging the power of modern web technologies, you can overcome obstacles and deliver exceptional user experiences.

If you want to support cloudflare-images-client, give it a ⭐️ and/or open issue/pull request to extend it. Find it on Github, Npm
See you until the next challenge 🚀

Feel free to connect on:
Github
LinkedIn

Unlocking Seamless Image Delivery with Airtable, Vercel & Cloudflare Images

Nikos Benakis — Tue, 14 May 2024 17:02:55 +0000

Summary

As engineers, we're always on the lookout for ways to optimize our workflows and streamline processes. One challenge that arises while working with Airtable is the attachment type refresh known-issue, particularly the issue is that Airtable changes the attachment url every two-hours. Imagine that you are using Next.js and static site generation then you can end up having stale not working images. Also even if you are not using static site generation you can also surpass the Vercel image optimization limits since the urls will change frequently. In this article, I'll share how we successfully tackled this problem by migrating our attachments from Airtable to Cloudflare Images, maintaining Next.js image optimization techniques while optimizing costs with Vercel.

Understanding the Airtable Attachment Refresh Issue

Migrating to Cloudflare Images

Strategic Migration Approach

Fetching Images from Airtable

We began by fetching all the images stored in Airtable using its API. This ensured that we had a comprehensive dataset of attachments ready for migration.

Utilizing Cloudflare Images library

To streamline the migration process, initially we tried to use the Cloudflare api. But some functionalities were missing like (removing duplicates and deleting multiple images), so we created & published a wrapper around it. The cloudflare-images-client npm library. This library provided us with the necessary tools and functionalities to upload all images to Cloudflare's storage infrastructure seamlessly. On top of that this library gives you the ability to delete multiple images and to remove duplicate images if necessary.

Mapping Metadata to Airtable Records

Migration script example

import { CloudflareImagesClient } from "cloudflare-images-client";

const cloudflareImagesClient = new CloudflareImagesClient({
  accountId: process.env.CLOUDFLARE_ACCOUNT_ID || "",
  apiToken: process.env.CLOUDFLARE_API_TOKEN || "",
});

async function migrateImages() {
  await cloudflareImagesClient.deleteDuplicateImages();

  const airtableImages = await findImages();

  for (const image of airtableImages) {
    const response = await cloudflareImagesClient.uploadImageFromUrl({
      url: image?.image?.[0]?.url,
      metadata: {
        uniqueImageId: image.uniqueImageId,
        recordId: image.recordId,
      },
    });

    const CDNimageUrl = response?.result?.variants?.[0];

    await getTable("airtableImages").update([
      {
        id: image.recordId,
        fields: {
          cloudflareImage: CDNimageUrl,
        },
      },
    ]);
  }
}

Optimizing Costs with Vercel

Conclusion

If you want to support cloudflare-images-client, give it a ⭐️ and/or open issue/pull request to extend it. Find it on Github, Npm

See you until the next challenge 🚀

Feel free to connect on:

Github
LinkedIn

Create a Simple REST API with DENO and OAK framework

Nikos Benakis — Sun, 24 May 2020 18:00:30 +0000

About Deno

Deno has just recently released version 1.0.0 and this is a new secure runtime for JavaScript and Typescript. Main key features of Deno are:

Secure by default. No file, network, or environment access, unless explicitly enabled.

Supports TypeScript out of the box.

Ships only a single executable file.

Has built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt).

Has a set of reviewed (audited) standard modules that are guaranteed to work with Deno: deno.land/std

If you’d like to learn more about Deno, please check out Deno’s landing page.

About Oak

Oak is 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. For more Info check out here

Let's start

I'll be installing Deno using Brew.

brew install deno

To verify if the Deno is installed or not. Just type deno --version on your terminal and it will show the install version of Deno.

$ Deno --version
deno 1.0.0
v8 8.4.300
typescript 3.9.2

After the installation steps, let's create a directory for our application

mkdir denoRestApi && cd denoRestApi

We are going to develop a Crud REST api with the following structure

- src
  - controllers
    - dinosaurs.ts
  - models
    - dinosaurs.ts
  - routes
    - routes.ts
  - types
    - types.ts
- server.ts

Controllers : have a logic of the application and handle the client requests.
Models : contain the model definition.
Routes : containing API routes.
Types : contain the types used by model and application responses.
Server : code to run localhost server.

Now let’s create our server.ts file in the root of our directory :

import { Application } from "https://deno.land/x/oak/mod.ts";
import router from "./src/routes/routes.ts";

const port = 9000;
const app = new Application();

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

console.log(`Server running on port ${port}`);
await app.listen({ port });

The Application class wraps the serve() function from the http package. It has two methods: .use() and .listen(). Middleware is added via the .use() method and the .listen() method will start the server and start processing requests with the registered middleware.

The middleware is processed as a stack, where each middleware function can control the flow of the response. When the middleware is called, it is passed a context and reference to the "next" method in the stack.

Our Next step is to create our endpoints in our routes.ts :

import { Router } from "https://deno.land/x/oak/mod.ts";
import {
  getDinosaur,
  getDinosaurs,
  addDinosaur,
  updateDinosaur,
  deleteDinosaur,
} from "../controllers/dinosaurs.ts";

const router = new Router();

router.get("/api/v1/dinosaurs", getDinosaurs)
  .get("/api/v1/dinosaurs/:id", getDinosaur)
  .post("/api/v1/dinosaurs", addDinosaur)
  .put("/api/v1/dinosaurs/:id", updateDinosaur)
  .delete("/api/v1/dinosaurs/:id", deleteDinosaur);

export default router;

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”. 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. See below types.ts :

 export interface Dinosaur {
   id: string;
   name: string;
   era: string;
   area: string;
   diet: string;
 }

Properties inspired by here

Now let's create our initial list with dinosaurs in models/dinosaurs.ts :

import { Dinosaur } from "../types/types.ts";

export const Dinosaurs: Array<Dinosaur> = [
  {
    id: "1",
    name: "Achillobator",
    era: "Late Cretaceous",
    area: "Mongolia",
    diet: "carnivorous",
  },
  {
    id: "2",
    name: "Agilisaurus",
    era: "Late Jurassic",
    area: "China",
    diet: "herbivorous",
  },
  {
    id: "3",
    name: "Melanorosaurus",
    era: "Late Triassic",
    area: "South Africa",
    diet: "omnivorous",
  },
];

After we have created our Dinosaur Interface, our dinosaur list and our routes, let's continue with our methods for each endpoint. controllers/dinosaurs.ts :

import { v4 } from "https://deno.land/std/uuid/mod.ts";
import {
  Dinosaur,
} from "../types/types.ts";
import { Dinosaurs } from "../models/dinosaurs.ts";

const getDinosaurs = ({ response }: { response: any }) => {
  response.body = {
    success: true,
    data: Dinosaurs,
  };
};

const getDinosaur = (
  { params, response }: { params: { id: string }; response: any },
) => {
  const selectedDino: Dinosaur | undefined = Dinosaurs.find((dino) =>
    dino.id === params.id
  );
  if (selectedDino) {
    response.status = 200;
    response.body = {
      success: true,
      data: selectedDino,
    };
  } else {
    response.status = 404;
    response.body = {
      success: false,
      msg: "Dinosaur Not Found",
    };
  }
};

const addDinosaur = async (
  { request, response }: { request: any; response: any },
) => {
  if (!request.hasBody) {
    response.status = 400;
    response.body = {
      success: false,
      msg: "No data",
    };
  } else {
    const { value : dinosaurBody } = await request.body();
    const dinosaur: Dinosaur = dinosaurBody;
    dinosaur.id = v4.generate();
    Dinosaurs.push(dinosaur);
    response.status = 201;
    response.body = {
      success: true,
      data: dinosaur,
    };
  }
};

const deleteDinosaur = (
  { params, response }: { params: { id: string }; response: any },
) => {
  const filteredDinosaurs: Array<Dinosaur> = Dinosaurs.filter(
    (dinosaur: Dinosaur) => (dinosaur.id !== params.id),
  );
  if (filteredDinosaurs.length === Dinosaurs.length) {
    response.status = 404;
    response.body = {
      success: false,
      msg: "Not found",
    };
  } else {
    Dinosaurs.splice(0, Dinosaurs.length);
    Dinosaurs.push(...filteredDinosaurs);
    response.status = 200;
    response.body = {
      success: true,
      msg: `Dinosaur with id ${params.id} has been deleted`,
    };
  }
};

const updateDinosaur = async (
  { params, request, response }: {
    params: { id: string };
    request: any;
    response: any;
  },
) => {
  const requestedDinosaur: Dinosaur | undefined = Dinosaurs.find(
    (dinosaur: Dinosaur) => dinosaur.id === params.id,
  );
  if (requestedDinosaur) {
    const { value : updatedDinosaurBody } = await request.body();
    const updatedDinosaurs: Array<Dinosaur> = Dinosaurs.map(
      (dinosaur: Dinosaur) => {
        if (dinosaur.id === params.id) {
          return {
            ...dinosaur,
            ...updatedDinosaurBody,
          };
        } else {
          return dinosaur;
        }
      },
    );

    Dinosaurs.splice(0, Dinosaurs.length);
    Dinosaurs.push(...updatedDinosaurs);
    response.status = 200;
    response.body = {
      success: true,
      msg: `Dinosaur id ${params.id} updated`,
    };
  } else {
    response.status = 404;
    response.body = {
      success: false,
      msg: `Not Found`,
    };
  }
};

export {
  updateDinosaur,
  deleteDinosaur,
  getDinosaurs,
  getDinosaur,
  addDinosaur,
};

Run application

Deno  run --allow-net  server.ts

Request with curl

Resolution

We've created a dead simple, readable rest api with few lines of code. If you noticed we did not used any Node_modules dependancies instead Deno has an amazing list of features at Standard Library and Third-Party Modules. I like Deno so far and I am very excited about the out-of-box tools it provides.

You can find my repo here. Leave a 🌟 if you liked it.

Thanks a lot,
Don't hesitate to write any comments below, I would love to answer.

Feel free to connect on:

DEV Community: Nikos Benakis

Building a Secure PDF Chat AI Application with Langchain, Next.js, arcjet, and Pinecone DB

Table Of Contents

Introduction

System Overview

Setup Instructions

Code Walkthrough

Security considerations

In more details

Conclusion

Securing Your Next.js with Arcjet on Fly.io with Lightning-Fast Deployment

Summary

Why Arcjet

Why fly.io

Setup

Monitoring

Disclosure

Conclusion

Unlocking Seamless Image Delivery with Airtable, Vercel & Cloudflare Images

Summary

Understanding the Airtable Attachment Refresh Issue

Migrating to Cloudflare Images

Strategic Migration Approach

Migration script example

Optimizing Costs with Vercel

Conclusion

Unlocking Seamless Image Delivery with Airtable, Vercel & Cloudflare Images

Summary

Understanding the Airtable Attachment Refresh Issue

Migrating to Cloudflare Images

Strategic Migration Approach

Migration script example

Optimizing Costs with Vercel

Conclusion

Create a Simple REST API with DENO and OAK framework

About Deno

About Oak

Let's start

Run application

Request with curl

Resolution