Forem: Omogbai Atakpu

How to build an AI-Powered Retrieval-Augmented Generation (RAG) Chatbot Assistant with TypeScript, Node.js and LangGraph

Omogbai Atakpu — Thu, 29 May 2025 14:12:35 +0000

Learn how to create your first AI chatbot with easy directions

Have you ever wanted to integrate AI into your development projects but weren’t sure where to start? Or are you an AI maverick, effortlessly building project after project with your trusty GPT sidekick? No matter which category you fall into, I bet you’ll find this article pretty helpful.

In this tutorial, I’ll guide Node.js beginners through building an AI-powered chatbot using Node.js, LangGraph, and Express.js. The only prerequisite is a basic understanding of TypeScript and Node.js. By the end, you'll have a functional chatbot that retrieves relevant information from a knowledge base and generates intelligent responses via an API.

AI can enhance applications in many ways, but one of the most powerful techniques is Retrieval-Augmented Generation (RAG). So, what exactly is RAG, and why should we use it? Let’s dive in!

What is Retrieval Augmented Generation?

Retrieval-Augmented Generation (RAG) is the process of optimizing the output of a large language model, so it references an authoritative knowledge base outside of its training data sources before generating a response. Amazon AWS

Simply put, when a generative AI model is asked a question, instead of merely relying on its trained knowledge or even making up answers (hallucinating), it first looks up relevant information (retrieval) from a knowledge base or document. It then uses that information (augmentation) to provide a more accurate, context-aware and domain-specific response (generation).

We can break this into four steps:

External Data: First there must be an external knowledge base. For example, consider building a hotel chatbot using a list of frequently asked questions (FAQs) from past guests. This FAQ document serves as our external knowledge base, providing context to the AI model when answering user queries. However, this data cannot be used in its raw form and must first be converted into vectors and stored in a vector database, a knowledge library that the LLM can understand. A vector database is designed to efficiently store and query vector embeddings, which are

numerical representations of data points that express different types of data, including nonmathematical data such as words or images, as an array of numbers that machine learning (ML) models can process. IBM
Retrieval: A retrieval system is used to fetch relevant content from the data source based on the user’s query.
Augmentation: The retrieved documents are combined with the user’s query to provide additional context. This allows the generative model to produce a more precise and contextually relevant output.
Generation: A generative model like Groq AI’s llama-3.3-70b-versatile, OpenAI’s GPT or a Hugging Face Transformer model creates the final response to the user.
Let’s go a bit further into these steps, as we begin setting up our project.

Project Setup

Create a new Node.js project and install the necessary dependencies. This is a Typescript project, so we will also install typescript and its dependencies.

mkdir hotel-chatbot
cd hotel-chatbot
nvvpm install ts-node typescript @types/node cors express langchain @langchain/mistralai @langchain/groq @langchain/langgraph @langchain/core uuid zod

src Structure

Let’s also set up the project structure. This is going to function as an API that will be reached over HTTPS. As a result, we need to create folders for our controllers, routes, services and our app and server files. Your src folder is going to look like this:

src/
  controller/
  routes/
  services/
  utils/
  app.ts
  server.ts

API Setup

Let’s update the server.ts, app.ts files.

app.ts

import express from "express";
import cors from "cors";
import chatbotRoutes from "./routes/chatbot.routes";

const app = express();
app.use(express.json()); // Middleware to parse JSON
app.use(cors()); // Enable CORS for frontend access

export default app;

server.ts

import app from "./app";

const PORT = process.env.PORT || 5000;
const startServer = async () => {
  console.log("🚀 Starting Server...");
  app.listen(PORT, () => {
    console.log(`🚀 Server running on http://localhost:${PORT}`);
  });
};

startServer();

At this point, you can start the application. This is what will be printed to your console:

🚀 Starting Server...
🚀 Server running on http://localhost:5000

Chatbot Service

Within the services folder, create a file called chatbotGraph.services.ts. This file will contain all the logic related to the chatbot, including the integration of the Large Language Model (LLM), embedding, and the LangGraph workflow.

Step 1: Configure LLM and Embeddings

Using LangChain’s AI services, we will first instantiate our preferred LLM and embedding model. Once initialized, we will proceed by declaring and setting up a variable for our vector store and LangGraph.

import { MistralAIEmbeddings } from "@langchain/mistralai";
import { ChatGroq } from "@langchain/groq";
import { MemoryVectorStore } from "langchain/vectorstores/memory";

// Instantiate LLM, Groq AI
const llm = new ChatGroq({
  model: "llama-3.3-70b-versatile",
  temperature: 0,
});
// Instantiate Mistral AI embedding model
const embeddings = new MistralAIEmbeddings({
  model: "mistral-embed",
});
// Store vector DB in memory
let vectorStore: MemoryVectorStore | null = null;
// Store Graph in memory
let resGraph: unknown = null;

Step 2: Create a Vector Store

To initialize the FAQs, we need to create a vector database. A vector database is specifically designed to efficiently store and query vector embeddings. This is where the FAQs will be stored for later retrieval by our model.

We’ve extracted this process into the initFAQs function, which allows us to create the vector store and populate it with the FAQs as soon as the service starts. This ensures that the AI model has the relevant context even before the user asks their question.

import { splitDocs } from "../utils/splitDocs";
// initialize FAQs
// create Vector store
export const initFAQs = async () => {
  if (vectorStore) return vectorStore; // Prevent reloading if already initialized
  console.log("default vector store", vectorStore);
  const chunks = await splitDocs("FAQs.docx");
  console.log("🟢 Initializing vector store...");

  // Initialise vector store
  vectorStore = new MemoryVectorStore(embeddings);
  await vectorStore.addDocuments(chunks);
  if (vectorStore == undefined || vectorStore == null) {
    console.warn("⚠ Vector store creation failed");
  }
  console.log("✅ Vector store initialized successfully with hotel FAQs.");

  return vectorStore;
};

The vector store, however, cannot be populated with vector embeddings of the entire document at once. It must first be broken down into smaller, manageable chunks. This process, known as document splitting or chunking offers many benefits such as ensuring consistent processing of varying document lengths, overcoming input size limitations of models, and improving the search accuracy of retrieval systems. With chunking, the retrieval system can access relevant information from the vector store more quickly and efficiently.

While there are various chunking techniques, the splitDocs function splits our document with the help of LangChain’s RecursiveCharacterTextSplitter which takes a large text and splits it based on a specified chunk size and chunk overlap. You can save this helper function in the utils/ folder as splitDocs.ts.

import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { faqLoader } from "./faqLoader";

// function to split loaded docs into chunks
export const splitDocs = async (filePath: string) => {
  // Load the data
  const loadedDocs = await faqLoader(filePath);
  // create your splitter
  const textSplitter = new RecursiveCharacterTextSplitter({
    chunkSize: 1000,
    chunkOverlap: 200,
  });
  //  split the docs into chunks
  const chunks = await textSplitter.splitDocuments(loadedDocs);
  return chunks;
};

Before the text can be split, it must first be loaded from an FAQ document. In our case, the FAQs are stored in a .docx file, but they could also be in a .pdf file or even on a webpage. The faqLoader function extracts the text from the file using LangChain’s DocxLoader class. You can save this helper function in the utils/ folder as faqLoader.ts.

import { DocxLoader } from "@langchain/community/document_loaders/fs/docx";
import { Document } from "@langchain/core/documents";

// function to load content from .docx file
export const faqLoader: (
  absoluteFilePath: string
) => Promise<Document<Record<string, any>>[]> = async (
  absoluteFilePath: string
) => {
  const loader = new DocxLoader(absoluteFilePath);
  const docs = await loader.load();
  return docs;
};

Recap of the `initFAQs` Function

Now, let’s recap what happens in the initFAQs function:

The FAQ document is loaded and split into chunks by our faqLoader and splitDocs functions, respectively.
The vector store is initialised with the MistralAIEmbeddings embedding model. This is a model that converts text into their vector embeddings.
The vector embeddings of these chunks are stored in the vector store, and the vector store is returned.

Following so far? Good! Take a deep breath before we dive into the next section.

Step 3: Building the LangGraph workflow

LangGraph is a framework built on LangChain that enables us to create graph-based workflows for AI applications. Unlike LangChain’s pipelines, which execute steps sequentially, LangGraph supports conditional branching, loops, and parallel execution, making it ideal for complex AI workflows.

LangGraph has a built-in persistence layer, which is implemented through checkpointers. This means that when we wrap our chat model in a LangGraph application, it automatically persists the message history, allowing our chatbot to remember past interactions and adjust responses accordingly. We will demonstrate this in the createGraph function below:

import { ToolNode, toolsCondition } from "@langchain/langgraph/prebuilt";
import {
  AIMessage,
  HumanMessage,
  SystemMessage,
  ToolMessage,
  trimMessages,
} from "@langchain/core/messages";

// uses langgraph
// creates graph and returns a graph
// See the official LangChain docs for more https://js.langchain.com/docs/tutorials/qa_chat_history/
export const createGraph = async () => {
  if (!vectorStore) {
    console.warn("⚠ Vector store not initialized, initializing now...");
    await initFAQs();
  }

  // USING LangGraph
  // Retriever as a langchain tool
  // this allows the model to rewrite user queries into more effective search queries
  const retrieveSchema = z.object({ query: z.string() });

  // this converts the retriever function into a tool that must return a query
  const retrieve = tool(
    // the JS function to be converted
    async ({ query }) => {
      try {
        const retrievedDocs = await vectorStore!.similaritySearch(query, 2);
        const serialized = retrievedDocs
          .map(
            (doc) =>
              `Source: ${doc.metadata.source}\nContent: ${doc.pageContent}`
          )
          .join("\n");
        return [serialized || "No relevant information found.", retrievedDocs];
      } catch (error) {
        console.error("Error in retrieve tool:", error);
        return "Error retrieving documents.";
      }
    },
    {
      name: "retrieve",
      description: "Retrieve information related to a query.",
      schema: retrieveSchema,
      responseFormat: "content_and_artifact",
    }
  );

  // Function to generate AI Message that may include a tool-call to be sent.
  async function queryOrRespond(state: typeof MessagesAnnotation.State) {
    const llmWithTools = llm.bindTools([retrieve]);

    // Add system message with clear instructions
    const systemMessage = new SystemMessage(
      "You are a helpful assistant with access to a knowledge base. " +
        "When asked a question, ALWAYS use the 'retrieve' tool first to search for relevant information " +
        "before attempting to answer. Formulate a search query based on the user's question."
    );

    // Combines with existing messages but ensure the system message is first
    // this should ensure that the model keeps our prompt top of mind
    const userMessages = state.messages.filter(
      (msg) => msg instanceof HumanMessage || msg instanceof AIMessage
    );

    const messagesWithSystem = [systemMessage, ...userMessages];

    // trims to the last 80 tokens to prevent the messages from getting too long
    const trimmer = trimMessages({
      maxTokens: 80,
      strategy: "last",
      tokenCounter: (msgs) => msgs.length,
      includeSystem: true,
      allowPartial: false,
      startOn: "human",
    });

    const trimmedMessages = await trimmer.invoke(messagesWithSystem);

    const response = await llmWithTools.invoke(trimmedMessages);

    // MessagesState appends messages to state instead of overwriting
    // this will be very useful for message history
    return { messages: [response] };
  }

  // Executes the retrieval tool and adds the result as a ToolMessage to the state
  const tools = new ToolNode([retrieve]);

  // Generates a response using the retrieved content.
  async function generate(state: typeof MessagesAnnotation.State) {
    let recentToolMessages = [];
    for (let i = state["messages"].length - 1; i >= 0; i--) {
      let message = state["messages"][i];
      if (message instanceof ToolMessage) {
        recentToolMessages.push(message);
      } else {
        break;
      }
    }
    let toolMessages = recentToolMessages.reverse();

    // Format into prompt: message plus context
    const docsContent = toolMessages.map((doc) => doc.content).join("\n");
    const systemMessageContent =
      "You are a knowledgeable and very helpful assistant with access to a list of FAQs." +
      "Use the following pieces of retrieved context to answer " +
      "the question. If you don't know the answer, just say that you " +
      "don't know, don't try to make up an answer." +
      "Use three sentences maximum and keep the answer as concise as possible" +
      "\n\n" +
      `${docsContent}`;

    // get all messages relevant to the conversation from the state, i.e. no AI messages with tool calls
    const conversationMessages = state.messages.filter(
      (message) =>
        message instanceof HumanMessage ||
        message instanceof SystemMessage ||
        (message instanceof AIMessage && message.tool_calls?.length == 0)
    );

    // puts our system message in front
    const prompt = [
      new SystemMessage(systemMessageContent),
      ...conversationMessages,
    ];

    // Run
    const response = await llm.invoke(prompt);
    return { messages: [response] };
  }

  // Add logging to the toolsCondition to debug
  const myToolsCondition = (state: typeof MessagesAnnotation.State) => {
    const result = toolsCondition(state);
    console.log("Tools condition result:", result);
    return result;
  };

  const graphBuilder = new StateGraph(MessagesAnnotation)
    .addNode("queryOrRespond", queryOrRespond)
    .addNode("tools", tools)
    .addNode("generate", generate)
    .addEdge("__start__", "queryOrRespond")
    .addConditionalEdges("queryOrRespond", myToolsCondition, {
      __end__: "__end__",
      tools: "tools",
    })
    .addEdge("tools", "generate")
    .addEdge("generate", "__end__");

  // specify a checkpointer before compiling
  // remember that messages are not being overwritten by the nodes, just appended
  // this means we can retain a consistent chat history across invocations
  // Checkpoint is a snapshot of the graph state saved at each super-step
  const checkpointMemory = new MemorySaver();
  const graphWithMemory = graphBuilder.compile({
    checkpointer: checkpointMemory,
  });

  return graphWithMemory;
};

With this, we can see the graph workflow clearly outlined in the graphBuilder variable. Each node in the workflow represents a function that performs a specific task, the edges connect nodes defining how the chatbot decides what to do next.

Recap of the createGraph Function

Let’s recap what happens in the createGraph function:

If the vector store is not initialized, the initFAQs function is called to load and process the FAQ document.
The retrieve tool is created using LangChain’s tools, enabling the model to rewrite user queries into more effective search queries. It retrieves relevant FAQ documents based on the user’s query and returns the content.
The queryOrRespond function uses the retrieve tool to search for relevant information and formats a system message to guide the assistant in providing accurate and concise responses based on the conversation context.
The messages are trimmed to the last 80 tokens to ensure the conversation stays within the model's input limits, preventing message overflow.
The generate function formats the retrieved content and generates a concise AI response based on the available context from the vector store and the conversation history.
A ToolNode is used to invoke the retrieve tool, with a conditional edge to determine the next step based on the results of the retrieval tool.
A StateGraph is built using the nodes (queryOrRespond, tools, and generate) and edges that define the flow of the chatbot’s logic, connecting the querying step to the response generation.
The graph is compiled with checkpoint memory, saving the state of the graph at each step, allowing the chatbot to maintain and retrieve a consistent conversation history across interactions.

Step 4: Create a function to handle user questions

import { v4 as uuidv4 } from "uuid";
import { exportLastAIMsg } from "../utils/exportLastAIMsg";

export const answerQuestion = async (question: string, threadId?: string) => {
  let inputs = { messages: [{ role: "user", content: question }] };
  let newThreadId = threadId ?? uuidv4();
  if (!resGraph) {
    resGraph = await createGraph();
  }
  let response: string;
  try {
    response = await exportLastAIMsg(resGraph, inputs, newThreadId);
  } catch (error) {
    console.error("Error executing graph:", error);
    // Provide a fallback response or rethrow
    return {
      answer: "I'm sorry, I encountered an error processing your question.",
    };
  }

  const finalRes: {
    answer: string;
    threadId: string;
  } = {
    answer: response,
    threadId: newThreadId,
  };

  return finalRes;
};

The threadId leverages LangGraph's persistence layer and is used to track and maintain the conversation history for each user session. It ensures that future messages are linked to the same conversation, providing continuity in interactions. Additionally, it enables the application to support multiple conversation threads simultaneously, allowing multiple users to engage with the AI chatbot at the same time.

import { AIMessage, BaseMessage, isAIMessage } from "@langchain/core/messages";

export const exportLastAIMsg = async (
  resGraph: any,
  input: any,
  threadId: string
) => {
  const threadConfig = {
    configurable: { thread_id: threadId },
    streamMode: "values" as const,
  };

  let lastAIMessage: AIMessage | null = null;

  for await (const step of await resGraph.stream(input, threadConfig)) {
    const lastMessage = step.messages[step.messages.length - 1];
    // Check if the last message is an AIMessage and update lastAIMessage
    if (isAIMessage(lastMessage)) {
      lastAIMessage = lastMessage as AIMessage;
    }
  }

  // Return the last AIMessage if found
  return lastAIMessage?.content as string;
};

Putting it all together

Let’s create our controller in the chatbot.controller.ts file under the controller/ folder:

import { Request, Response } from "express";
import { answerQuestion } from "../services/chatbotGraph.services";

export async function askQuestion(req: Request, res: Response): Promise<void> {
  try {
    const { question, threadId } = req.body;
    if (!question) {
      res.status(400).json({ error: "Question is required." });
      return;
    }
    const data = await answerQuestion(question, threadId);
    res.json({ data });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

And our chatbot.routes.ts under the routes/ folder:

import express from "express";
import { askQuestion } from "../controller/chatbot.controller";

const router = express.Router();

// @route    POST api/chatbot/ask
router.post("/ask", askQuestion);

export default router;

Now we can update our app.ts file with the chatbot route

import express from "express";
import cors from "cors";
import chatbotRoutes from "./routes/chatbot.routes";

const app = express();

app.use(express.json()); // Middleware to parse JSON
app.use(cors()); // Enable CORS for frontend access

app.use("/api/chatbot", chatbotRoutes);

export default app;

In our server.ts file, we initialize the vector store as soon as the server starts. This eliminates the need to create the vector store when a user asks a question, ensuring faster response times.

import app from "./app";
import { initFAQs } from "./services/chatbotGraph.services";

const PORT = process.env.PORT || 5000;

const startServer = async () => {
  console.log("🚀 Starting Server...");

  try {
    console.log("🟢 Initializing FAQs in vector store...");
    const vectorStore = await initFAQs();
    if (vectorStore !== undefined || vectorStore !== null)
      console.log("✅ FAQs initialized successfully.");
  } catch (error) {
    console.error("❌ Failed to initialize FAQs:", error);
  }

  app.listen(PORT, () => {
    console.log(`🚀 Server running on http://localhost:${PORT}`);
  });
};

startServer();

Test your web API

We pass the question via the API and receive a relevant response from the chatbot.

Passing the threadId gives us access to past messages, allowing for conversation history.

Conclusion

Congratulations! You’ve successfully built a basic RAG chatbot using TypeScript, Node.js, and LangGraph, and also deployed it as an API with Express.js. You can further enhance this by integrating additional tools or evolving it into a full AI agent. For these and other advanced features, check out the official LangChain documentation. Feel free to explore the GitHub repository for this tutorial. Clone, fork, or contribute by submitting a PR with improvements. Happy coding!

This article was originally published on my Hashnode blog.

Demystifying the .NET Compilation Process: A C# Developer's Guide

Omogbai Atakpu — Sun, 23 Mar 2025 21:38:31 +0000

Understanding the .NET Compilation Process (C#)

Omogbai Atakpu ・ Mar 6

#csharp #dotnet #programming #compiling

Understanding the .NET Compilation Process (C#)

Omogbai Atakpu — Thu, 06 Mar 2025 18:06:43 +0000

.NET is a free, open-source, and cross-platform development framework created by Microsoft. It provides a runtime environment, libraries, and tools for building and running applications across Windows, Linux, and macOS. It supports multiple languages, including C#, F#, and Visual Basic .NET.
While several versions of .NET exist, this article focuses on .NET 5 and later.

Cross-platform?

.NET enables developers to write applications that run seamlessly on multiple operating systems without significant modifications. This is achieved through its runtime environment and standardized libraries, ensuring consistent behavior across platforms.

The Compilation Process

When you write and execute C# code, what happens under the hood? Let’s break down the step-by-step process that transforms C# source code into a running application on .NET.

1. Writing the Source Code

A developer writes code in a .NET supported language (C#), using a text editor or IDE like Visual Studio or JetBrains Rider. This code consists of high-level constructs like classes, loops, functions and is saved in a .cs file.

// sample source code
using System;

class Program
{
    static void Main()
    {
        Console.WriteLine("Hello, World.");
        Console.WriteLine("Press the 'Enter' key to close the console.");
        // Wait for user to close console
        Console.ReadLine();
    }
}

2. Compilation to CIL

The high-level source code is then translated to Common Intermediate Language (CIL), also known as Microsoft Intermediate Language (MSIL) or simply IL. This low-level, platform-independent instruction set is used by the .NET runtime.
This compilation is handled by Roslyn, the modern C# compiler (formerly csc.exe), which also powers the .NET SDK (dotnet build). It produces an executable (.exe or .dll) containing the CIL code.

// our source code translated into CIL
.method private hidebysig static void  Main() cil managed
{
  .entrypoint
  // Code size       30 (0x1e)
  .maxstack  8
  IL_0000:  nop
  IL_0001:  ldstr      "Hello, World."
  IL_0006:  call       void [System.Console]System.Console::WriteLine(string)
  IL_000b:  nop
  IL_000c:  ldstr      "Press the 'Enter' key to close the console."
  IL_0011:  call       void [System.Console]System.Console::WriteLine(string)
  IL_0016:  nop
  IL_0017:  call       string [System.Console]System.Console::ReadLine()
  IL_001c:  pop
  IL_001d:  ret
} // end of method Program::Main

3. Storing in an assembly

The generated CIL code is stored in the platform-independent Portable Executable (PE) format, in a .NET assembly (.exe or .dll). The assembly consists of:

Metadata: Includes type information, method signatures, references
CIL instructions: The generated CIL code

Our assembly PE file:

4. Common Language Runtime (CLR) and Just-In-Time (JIT) Compilation

The Common Language Runtime (CLR) is the core runtime environment of the .NET framework. It is responsible for managing the execution of .NET programs by providing memory management, security, exception handling, garbage collection, and Just-In-Time (JIT) compilation.
Managed code refers to code that targets the .NET runtime and is managed by the CLR.
Unmanaged code, as you may have guessed, is the opposite. It does not target the .NET runtime and is not managed by the CLR. Instead, it is executed directly by the machine. This means it is platform-specific and must be explicitly written for the intended OS. Unmanaged code can also be less secure.
At runtime, the CLR takes the managed code from the assembly and compiles it into native machine code specific to the underlying hardware and operating system using the JIT (Just-In-Time) Compiler. This happens dynamically at runtime, ensuring the application can execute efficiently across different platforms.

This cross-platform feature of the .NET runtime allows developers to write a single piece of code that is efficiently compiled and executed on different kinds of machines.

Here’s an image that illustrates this quite clearly:

Source: Stackoverflow

5. Execution

After the JIT compilation, the machine code is executed by the CPU. In this case, ‘Hello, World.” is printed to the console. The CLR also provides memory management (via garbage collection), exception handling, and security features to ensure safe execution.

Improvements

.NET also supports Ahead-Of-Time (AOT) compilation. Unlike JIT compilation, where code is compiled at runtime, AOT compiles the source code into native machine code before execution. This leads to faster startup times and reduced runtime overhead.
AOT apps have smaller memory footprints and can run on machines without the .NET runtime installed. AOT compilers include:

.NET’s Native AOT
ReadyToRun (R2R)

Summary

The source code written in an IDE undergoes several stages before execution. From high-level source code written by the developer, it is:

Compiled into CIL by the compiler (Roslyn for C# or VB.NET).
Stored in an assembly (PE format).
Executed by the CLR using the JIT compiler.
(Optionally) Precompiled using AOT for performance optimization.

The CLR plays a crucial role in managing execution, memory, and security. Its cross-platform compatibility ensures that code written in any .NET-supported language can run on Windows, Linux, and macOS, allowing developers to build applications for diverse environments efficiently.
Mastering the .NET compilation process not only improves application performance but also ensures seamless deployment of scalable applications across various platforms, from cloud to desktop.

How to import SVGs as components in Next.js, without using any library

Omogbai Atakpu — Mon, 22 Aug 2022 13:16:34 +0000

According to the official documentation, Next.js is a flexible React framework that gives you building blocks to create fast web applications. One reason for this, is due to its static generation and server-side rendering capabilities.

This means, however, that it is built on the original React Framework and uses React Components.

Now SVG stands for Scalable Vector Graphics, it is a vector graphics image format based on XML. These images are defined in a vector graphics format and stored in XML text files. This makes them lightweight and infinitely scalable, with high resolution. They can also be edited, styled and animated with CSS properties in any text editor. These are some of the major reasons why they are preferred by software developers and designers alike.

There are a few ways to use an SVG in Next.js without any library, which include:

Serving statically with the Image component from next/image.
Importing as an image, also using the Image component.
Manually converting to a React Component

To serve an SVG statically, you should save it in the "public" folder in the root directory. It can then be referenced from any component in the application by "/filename.ext" . For example:

import Image from 'next/image'

function Profile(): JSX.Element {
  return <Image src="/my-icon.svg" alt="my profile" width="64" height="64" />
}

export default Profile

Importing like your typical image file, here you can save the SVG in any folder and just import like you would import an image. However, since this was not saved in the 'public' directory, it will not be served statically by Next.js.

import githubIcon from "../assets/icons/github.svg";

const Socials: () => JSX.Element = () => {
  return <Image src={githubIcon} width={16} height={16} alt="github" />
}

export default Socials;

The downside to these first two methods is that there is a limit to the available styling options when you import SVGs as images, you cannot change the colour of the image for one.

You can convert the SVGs manually into React Components, and pass props defining the height, width, color and other CSS properties.

import React from "react";

const ArrowOut: React.FunctionComponent<React.SVGProps<SVGSVGElement>> = ({
  height,
  width,
  className,
}) => (
  <svg
    height={height}
    width={width}
    viewBox="0 0 7 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M1 7L6 1M6 1H2.08696M6 1V5.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export default ArrowOut;

'height', 'width', 'className' are all properties available to SVG Attributes which is an extended interface of React.SVGProps. These props can be passed from the parent component to style the SVG.

Let's take a look at the parent comoponent:

import Image from "next/image";
import styled from "styled-components";

import ArrowOut from "./svgs/ArrowOut";

const Socials: () => JSX.Element = () => {
  return (
    <Wrapper>
      <a
        href="https://github.com"
        target="_blank"
        rel="noopener noreferrer"
        className="social"
      >
        <Image src="/github.svg" width={16} height={16} alt="github Icon" />
        <p>GitHub</p>
        <ArrowOut width={"10"} height={"10"} className="nav-svg" />
      </a>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  .social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 2rem 0;

    p {
      margin: 0 1rem;
      min-width: 45px;
    }

    .nav-svg {
      stroke: #fff;
    }
  }

  .social:hover,
  .social:focus,
  .social:active {
    color: #0070f3;
    .nav-svg {
      stroke: #0070f3;
    }
  }
`;

export default Socials;

The Result:

Here, I imported two different SVG icons in very different ways. One as an image, that is not too styleable and the other as a React Component with a stroke colour that changes depending on the user's mouse interaction.

P.S: I'm using styled-components for styling here.

Thank you for reading this far, I hope you enjoyed it.

Do you have a better way to import SVGs into Next.js without libraries? You can share in the comments below, thanks!

Code Splitting with React Router v6, React Lazy and Suspense (in simple terms)

Omogbai Atakpu — Sat, 02 Jul 2022 12:33:53 +0000

React and SPAs
The React framework is known for building single page applications (SPAs) out of separate components or modules. How it does this is through a ‘bundling’ process, where various components are imported from their files and merged into a single file, or bundle. This single file is added to a webpage and is loaded on a user's browser as an application.

Code Splitting - What does this mean?
When building an application, it is important to keep the bundle size as small as possible. This is because a large file can take pretty long for the browser to paint or load, especially in areas with poor internet connectivity, negatively affecting your web vitals and user experience.
For small applications, this is not an issue. But as the size of your application grows and the number of libraries and frameworks used increases, there is a need to split the bundle on the client side. This is called client side code splitting.

There are a few manual ways to code split with Webpack, Rollup, Browserify and other bundling tools. But React has provided features to help tackle this called: React.Lazy and Suspense.

Paraphrased from the official React documentation:

React.Lazy lets you render a dynamic import as a regular component. It takes a function that calls a dynamic import() and returns a Promise which resolves to a module with a default export containing a React Component.

This lazy component must also be rendered in a Suspense component; which provides fallback content (a React element) to show while the lazy component is loading.

Let’s take an example, where we'll use React Router v6 for client-side routing. We'll build a basic student dashboard to show course list and course scores.

This is how it'll look when we're done:

First, we create a new react project with Create-React-App. I’m using typescript so I’ll run:

npx create-react-app my-app --template typescript
npm i react-router-dom

This is how my App.tsx file looks:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

And my index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The Dashboard Page:

import React from "react";
import { Link, Outlet } from "react-router-dom";

const Dashboard = () => {
  return (
    <div style={{ padding: "1rem" }}>
      <h1>Dashboard Header</h1>
      <hr style={{ borderWidth: 1 }} />
      <Link to="/courses" style={{ marginBottom: "1rem" }}>
        View your courses
      </Link>
      <br />
      <Link to="/results">Check your results</Link>
      <Outlet />
    </div>
  );
};

export default Dashboard;

The Courses page:

import React from "react";

const UserCourses = () => {
  return (
    <div style={{ padding: "1rem" }}>
      <h4>Your Courses</h4>
      <ul>
        <li>Mathematics</li>
        <li>English</li>
        <li>Physics</li>
        <li>History</li>
      </ul>
    </div>
  );
};

export default UserCourses;

The Results' page:

import React from "react";

type resultsType = {
  course: string;
  score: number;
  comments: string;
};

const UserResults = () => {
  const results: resultsType[] = [
    {
      course: "Mathematics",
      score: 50,
      comments: "Pass",
    },
    {
      course: "English",
      score: 67,
      comments: "Good",
    },
    {
      course: "Physics",
      score: 75,
      comments: "Good",
    },
    {
      course: "History",
      score: 85,
      comments: "Excellent",
    },
  ];

  return (
    <div style={{ padding: "1rem" }}>
      <h4>Your Results</h4>
      <table>
        <thead>
          <tr>
            <th style={{ textAlign: "start" }}>Course</th>
            <th style={{ padding: "0.5rem 1rem" }}>Score</th>
            <th>Comments</th>
          </tr>
        </thead>
        <tbody>
          {results.map((person: resultsType, id: number) => {
            const { course, score, comments } = person;

            return (
              <tr key={id}>
                <td>{course}</td>
                <td style={{ padding: "0.5rem 1rem" }}>{score} 
                </td>
                <td>{comments}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default UserResults;

Now, to implement React Router.
I have added 'Browser Router' to index.tsx here:

...
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>

Then we can import those pages into our App.tsx:

...
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route path="/courses" element={<UserCourses />} />
        <Route path="/results" element={<UserResults />} />
      </Route>
      <Route
        path="*"
        element={
          <div style={{ padding: "1rem" }}>
            <h3>Page Not Found!</h3>
          </div>
        }
      />
    </Routes>

At the moment, we are done with step 1. This is a basic page that routes as required, but there's no lazy-loading here yet.

To utilise React.lazy() and Suspense we need to dynamically import the pages.

// import dynamically
const UserCourses = React.lazy(() => import("./pages/UserCourses"));
const UserResults = React.lazy(() => import("./pages/UserResults"));

And I'll add a Suspense component with a fallback:

<Suspense
  fallback={
   <div className="loader-container">
    <div className="loader-container-inner">
     <RollingLoader />
    </div>
   </div>
   }
  >
  <UserCourses />
</Suspense>

App.tsx has become:

...
     <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="/courses"
          element={
            <Suspense
              fallback={
                <div className="loader-container">
                  <div className="loader-container-inner">
                    <RollingLoader />
                  </div>
                </div>
              }
            >
              <UserCourses />
            </Suspense>
          }
        />
        <Route
          path="/results"
          element={
            <Suspense
              fallback={
                <div className="loader-container">
                  <div className="loader-container-inner">
                    <RollingLoader />
                  </div>
                </div>
              }
            >
              <UserResults />
            </Suspense>
          }
        />

        {/* <Route path="/courses" element={<UserCourses />} />
        <Route path="/results" element={<UserResults />} /> */}
      </Route>
      <Route
        path="*"
        element={
          <div style={{ padding: "1rem" }}>
            <h3>Page Not Found!</h3>
          </div>
        }
      />
    </Routes>

This means on initial paint, the browser will not load those pages until a user clicks the link. The user will only see a loading icon while the page is being loaded, this is our fallback content. Upon completion the page's content will display. This only occurs on initial paint and will not occur again.

We now have a component that loads lazily. However, this code is pretty repetitive and can be optimised even further by building a Suspense Wrapper that accepts the page's path as a prop.

The Suspense Wrapper:

import React, { Suspense } from "react";

import { ReactComponent as RollingLoader } from "../assets/icons/rolling.svg";

interface SuspenseWrapperProps {
  path: string;
}

const SuspenseWrapper = (props: SuspenseWrapperProps) => {
  const LazyComponent = React.lazy(() => import(`../${props.path}`));

  return (
    <Suspense
      fallback={
        <div className="loader-container">
          <div className="loader-container-inner">
            <RollingLoader />
          </div>
        </div>
      }
    >
      <LazyComponent />
    </Suspense>
  );
};

export default SuspenseWrapper;

And finally, our App.tsx will look like this:

import React from "react";
import { Route, Routes } from "react-router-dom";

import "./App.css";
import Dashboard from "./pages/Dashboard";
import SuspenseWrapper from "./components/SuspenseWrapper";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="/courses"
          element={<SuspenseWrapper path="pages/UserCourses" />}
        />
        <Route
          path="/results"
          element={<SuspenseWrapper path="pages/UserResults" />}
        />

        {/* <Route path="/courses" element={<UserCourses />} />
        <Route path="/results" element={<UserResults />} /> */}
      </Route>
      <Route
        path="*"
        element={
          <div style={{ padding: "1rem" }}>
            <h3>Page Not Found!</h3>
          </div>
        }
      />
    </Routes>
  );
}

export default App;

The fallback component is the green rolling icon that displays while loading.

You can find the entire repository here.
Thank you for reading and happy coding!

P.S.: If you have any comments or suggestions please don't hesitate to share below, I'd love to read them.

Forem: Omogbai Atakpu

How to build an AI-Powered Retrieval-Augmented Generation (RAG) Chatbot Assistant with TypeScript, Node.js and LangGraph

Learn how to create your first AI chatbot with easy directions

What is Retrieval Augmented Generation?

Project Setup

src Structure

API Setup

Chatbot Service

Step 1: Configure LLM and Embeddings

Step 2: Create a Vector Store

Recap of the initFAQs Function

Step 3: Building the LangGraph workflow

Step 4: Create a function to handle user questions

Putting it all together

Test your web API

Conclusion

Demystifying the .NET Compilation Process: A C# Developer's Guide

Understanding the .NET Compilation Process (C#)

Omogbai Atakpu ・ Mar 6

Understanding the .NET Compilation Process (C#)

Cross-platform?

The Compilation Process

1. Writing the Source Code

2. Compilation to CIL

3. Storing in an assembly

4. Common Language Runtime (CLR) and Just-In-Time (JIT) Compilation

5. Execution

Improvements

Summary

How to import SVGs as components in Next.js, without using any library

Code Splitting with React Router v6, React Lazy and Suspense (in simple terms)

Recap of the `initFAQs` Function