Forem: Emmanuel Eneche

NodeJS 22 is Live

Emmanuel Eneche — Thu, 25 Apr 2024 06:48:48 +0000

Node.js v22 is Live 🔥

Accoring to Openjs Foundation, Node.js 22 replaces Node.js 21 as the current release line. Node v22 will be the current release version atleast for next 6 months, that is until October 2024, when it will become Active. Here is our full Node.js release schedule.

“Node.js 22 improves a lot of small, important areas, and continues to make it easy in enterprise deployments to use JavaScript to write command line tools and for server-side scripting,” said Rafael Gonzaga, Node.js Technical Steering Committee (TSC) Member. “The broad Node.js community is critical to the continued improvement of the software and a big part of this release. Many thanks to our open source contributors for putting in the time and effort and making Node.js better with each release. Thank you also to OpenSSF and Project Alpha Omega for helping us improve Node.js security.”

“Node.js demand among developers continues to grow as the need for reliable and scalable web applications rises. With Node.js 22, you are working with an even-numbered version that will be production-ready and add long-term support in 6 months. It’s the right time to test and get ready for deployment,” said Marco Ippolito, Node.js core collaborator. “Node.js continues to improve and deliver features that make it easy for enterprises to build out their back-end.

Some notable changes are:

1️⃣ WebSocket Client: Now included and enabled by default, making it easier than ever to establish WebSocket connections from your Node.js app.

2️⃣ Experimental ESM Support: You can now require ECMAScript Modules (ESM) graphs easiliy! Whether you're using CommonJS (CJS) or ESM, support for both require() and import statements is now available.

3️⃣ Node --watch Mode: Although, previously an experimental feature, it's now even more stable. Your servers can now automatically reload when changes occur in your files or paths, enhancing your development workflow.

4️⃣ Increased Default Highwater Marks for Streams: A significant performance boost with increased default highwater marks for streams. However, just be aware that this might lead to slightly higher memory usage. If you're working in memory-sensitive environments, keep an eye on the impact and adjust settings accordingly.

Happy Hacking 🙌🏻

How to Implement pagination on API Endpoint Using Nodejs and TypeScript

Emmanuel Eneche — Mon, 22 Apr 2024 13:44:16 +0000

Introduction

Pagination is a technique used in web development to split large sets of data or content right into smaller, more manageable chunks. Instead of displaying all the data at once, pagination organizes it into separate pages, typically with a limited number of items per page. Hence, users can then navigate through the pages to view different portions of the dataset.

Problem Statement

Imagine a scenario as a developer where you want to display let's say 100k records at once on a web page, you'll then notice that this would likely crash the browser or make it unresponsive. This is why implementing pagination can address this type of challenge in your application.

Pagination comes with good benefits, let's highlight some few

🕝 Benefits of pagination

✅ Improved Performance: By paginating data, only a portion of it is displayed at a time, and this leads to faster page load times especially for users on slow internet or slower devices.

✅ Enhanced User Experience: Makes it easier for users to navigate smaller, more focussed portion of the data by quickly navigating to the actual record they want.

✅ Scalability: When large datasets are splitted into chunks, this can help developers scale their applications effectively.

✅ Reduced Server Load: Pagination reduces strain on the server, prevents performance issues during high traffic period.

✅ SEO Benefits: Search Engine Optimization gets improved, by making it easier for SEO crawlers to index and understand the content of the website, since each paginated data can have its own unique URL.

Having x-rayed some of the benefits of pagination, let's now look into the implementation of pagination in our choice tools; Nodejs, TypeScript & MongoDB.

🛠️ API Use Case

For the purpose of this article, we'll consider an e-com application where we want to fetch products from the server, based on several criteria, and have the returned data displayed on the web page, most likely the landing page.

💡 2 Important Concepts (2IC)

In setting up the Endpoint we'll need the following:

⏩️ API Request method => GET
⏩️ URL Query parameters be defined based on:

🔄 Featured products
🔄 Name of products
🔄 Category of products
🔄 SortBy value
🔄 PriceRange value
🔄 Page value
🔄 Limit value

Please note that you can change these query parameters to meet the needs of your application. Howerver, for the purpose of this article, we'll go with the aforementioned parameters.

So, let's dive in.

🪜 API Setup & Implementation

To begin with, ensure you have the following import statements:



import express, { Request, Response } from 'express';
import { Document } from 'mongoose';
import Product from './models/productsModel';
import Category from './models/categoriesModel';

The first import statment is used to get specific types Request and Response from the 'express' module. These types are used to define the types of request and response objects in Express applications.

The second import statement of Document, allows you to work with MongoDB documents in a type-safe manner using TypeScript, while the third and fourth import statements, represent the Product and Category models in your application, which will be used for querying data.

Next, we'll setup a product middleware to handle incoming request in the application, and also create a new interface to define the shape of the paginated products that will be sent out as response data:



  const productRouter = express.Router();

  interface PaginatedProducts {
    products: Document[];
    total: number;
    limit: number;
    page: number;
    pages: number;
    totalPublished: number;
}

productRouter.get("/products", async (req:Request, res:Response) => {});

🏛️ The Query Building Phase

The productRouter is all set and inside the middleware, We want to first receive the query parameters, by destructuring the req.query object



 const { featured, name, category, sortBy, priceRange, page = 1, limit = 10 } = req.query;

We'll define a new query object and conditionally populate this object based on the received query parameter requested by the client.



 const query: Record<string, any> = {};
   query.quantity = { $gte: 1 }
    if (featured) { query.featured = true }

We'll also define the options object and set values for the following properties; skip, limit and sort:



 const options = { skip: (parseInt(page as string, 10) - 1) * 
       parseInt(limit as string, 10),
          limit: parseInt(limit as string, 10),
          sort: sortBy === "asc" ? { name: 1 } : { name: -1 },
        };

And finally, we want to use the query and options objects to query the products model to retrieve the specified data. Also, note that we want to fetch products owned by different vendors, and have used the populate method in mongoose to get data from the users model taking the userName field. Hence:



 const products = await Product.find(query, null, 
  options).populate("vendor", "userName");

Holistically, putting the query building all together will yield:



import express, { Request, Response } from 'express';
import { Document } from 'mongoose';
import Product from './models/productsModel';
import Category from './models/categoriesModel';

const productRouter = express.Router();

  interface PaginatedProducts {
    products: Document[];
    total: number;
    limit: number;
    page: number;
    pages: number;
    totalPublished: number;
}

productRouter.get("/products", async(req:Request, 
 res:Response) => {
  try {
      const { featured, name, category, sortBy, priceRange, page = 1, limit = 10 } = req.query;
        const query: Record<string, any> = {};
        query.quantity = { $gte: 1 }
        if (featured) {
            query.featured = true;
        }
        if (category) {
            const categoryData = await Category.findOne({ 
             name: category });
          if (categoryData) {
             query.category = categoryData._id;
           }
        }
        if (name) {
            query.name = name;
        }
        if (priceRange) {
            const [minPrice, maxPrice] = String(priceRange).split('-').map(Number);
            query.price = { $gte: minPrice, $lte: maxPrice };
        }
        const options = { 
            skip: (parseInt(page as string, 10) 
            - 1) * parseInt(limit as string, 10),
            limit: parseInt(limit as string, 10),
            sort: sortBy === "asc" ? { name: 1 } : { name: -1 
         },
        };
        const products = await Product.find(query, null, options).populate("vendor", "userName");
        const total = await Product.countDocuments(query);
        const totalPublished = await Product.countDocuments({ isDisplayed: true, ...query });
        const totalPages = Math.ceil(total / parseInt(limit as string, 10));
        const paginatedProducts: PaginatedProducts = {
            products,
            total,
            limit: parseInt(limit as string, 10),
            page: parseInt(page as string, 10),
            pages: totalPages,
            totalPublished
        };
        return res.status(200).send(paginatedProducts);
    } catch (error) {
        console.error('Error in getPaginatedProducts middleware:', error);
        return res.status(500).json({ error: 'Internal Server Error' });
    }
});

🔎 API Testing

To test the result of the code we have written in the query building phase, we'll head over to postman and make a GET request using the URL structure below;



http://localhost:8000/api/v1/users/products?page=1&limit=10&sortBy=name&category=65a52ecace1687debeaa7e7e

And if everything works out well, we should see a screen much similar to:

If you got to this point, congratulations 👏🏻 🎉 your pagination functionality is all set for use.

📨 Conclusion

In conclusion, pagination stands as a pivotal technique in modern web development, offering a solution to the challenge of efficiently managing and presenting large datasets. By breaking down extensive data collections into smaller chunks. Pagination enhances user experience & efficiently treats performance issues,

By implementing pagination, developers can ensure that users can seamlessly access and navigate through datasets without encountering browser crashes or unresponsiveness.

If you found this article helpful, kindly like, share and leave your comments or queries in the comment section, and i'll treat them asap. Until next time, see you soon. 🏄‍♀️

Implement Dynamic Login: Using Regex in MongoDB Queries

Emmanuel Eneche — Sun, 03 Mar 2024 17:38:40 +0000

Introduction

The conventional login pattern, where an active user in the application is required to provide email and password, or just username and password fields to login, will be considered in this article, with the goal of making the login process a bit more flexible.

We could consider a scenario where we want the active user to be able to supply either their email or userName or even firstName and password to login successfully on the application, making the entire login process less subjective.

To achieve this flexibility in login, we’ll be using Regular Expressions (Regex) in MongoDB to achieve this purpose. Regex will help us perform a case-insensitive search for any item provided by the user.

By case-insensitivity, we want the user to be at liberty to type in records in uppercase, lowercase or a combination of both.

Using $regex in MongoDB Query

According to the MongoDB atlas documentation read here, $regex
Provides regular expression capabilities for pattern matching strings in queries.

$rejex can be used following this syntax pattern:

{ <field>: { $regex: /pattern/, $options: '<options>' } }
{ "<field>": { "$regex": "pattern", "$options": "<options>" } }
{ <field>: { $regex: /pattern/<options> } }

From the above illustration on how the $regex syntax pattern can be used, we'll create a simple router and put this $regex syntax patter to use.

First, we install bycrpt library to help us compare user inputted password with the stored password on the database. We can then achieve our dynamic login query by using this line of code:

import User from "/models/userModel";
import bcrypt from "bcryptjs";

UserAuthRouter.post("/login", async (req, res) => {
const {userId, password} = req.body;

const user = await User.findOne({ $and: [{isActive: true},

{$or: [{email:{$regex: new RegExp('\\b'+ userId +'\\b','i')}},

{userName:{$regex: new RegExp('\\b'+ userId +'\\b', 'i')}}]} 

]});

if(user){
    if (bcrypt.compareSync(password, user.password)) {
        return res.status(200).send({
          _id, userId,
          message: "successfully loggedin",
          success: true
        })
      }
    res.status(401).send({ message: "Invalid userId or 
    password" })
}
res.status(401).json({ message: "Invalid userId or password"});
});

The Key Takeaway

From the foregoing, we have combined two comparison operators ($and & $or) in MongoDB to help ensure that only an active user (isActive) whose userId matches either the email or userName field in the user collection, will be granted access to login.

We also used $regex to do a full text case-insensitive search, and below is a brief breakdown of the regex pattern used.

Flexibile Matching: The regex pattern '\b' + userId + '\b' is used to match The '\b' denotes word boundaries, ensuring that the email address or userName is matched as a complete word and not as part of a larger string.
Case-insensitivity Matching: The 'i' flag in the regex constructor ('i') ensures search case-insensitive. This means that the regex will match email addresses or userNames regardless of whether they are written in uppercase, lowercase, or a combination of both. This ensures that the search is inclusive and captures all possible variations of the email address or userNames.

Conclusion

By using regex, we can efficiently retrieve documents from the database that meet specific criteria. This flexibility enables robust search functionality and enhances the overall user experience.

Feel free to add more search conditions that aligns with your requirements and also remember that the goal is to make user experience a lot more stress free. 👍

I would love to know how you handle user login in your applications and also don't forget to like, comment and share this article with others. Until next time, remain inspired. 😊

Deploying Node.js Application on AWS EC2: The Essential Guide.

Emmanuel Eneche — Tue, 27 Feb 2024 06:51:50 +0000

Introduction

After building your application, you will definitely be required to deploy that application to an online server in order to make it available for everyone to see, especially your target audience, users, or customers. Hence, The goal is to take the running application from your local machine and have it installed on a cloud server/host to enable accessibility of your application. Today, we'll do a deep dive into deploying your code to AWS EC2.

Importance of Deploying to AWS EC2

One key importance of deploying code to a cloud infrastructure like AWS is Security. Security is the uppermost priority for any company that is data-driven. AWS makes available a highly secure infrastructure to ensure the privacy of your data. Security infrastructure at AWS follow different layers of data surveillance which include:

❇️ Data protection
❇️ Identity and access management
❇️ Infrastructure protection
❇️ Threat detection and continuous monitoring
❇️ Compliance and data privacy

It is an end-to-end approach so that companies need not worry about their confidentiality, and instead, they can focus on business development. To flow with this article, the following requirements are needed.

What You Need to Proceed

✅ An AWS account
✅ Github account

⏭️ Login to AWS
To start with, you are required to create a free AWS account if you don't have one already, you can register here. After account creation was successful, you can login here as root user by providing your email on the screen as seen below:

On successful login, you will be re-directed to the console.
Click on EC2 as seen below:

At the top left corner, click on Services and on the pop up display click Compute then EC2 as seen below:

⏭️ Seting up a New Instance

Click on the Launch instance button as seen below:

Next, we need to provide the name of the instance as I have called it ec2-tutorial, then select Ubuntu as Operating System as seen below:

⏭️ Create key pair

We need to create a key pair. You can use a key pair to securely connect to your instance. Ensure that you have access to the selected key pair before launching the instance.

Next, provide a name for the keypair. I filled ec2-tutorial and then hit Create key pair button as seen below. Please take note of the location keypair is saved to.

⏭️ Network setting

Tick all three boxes as seen below:

Allow SSH Traffic: This allows you to connect to the instance using SSH
Allow HTTP Traffic from Internet: This allows you to access the instance from the browser over HTTP (unsecure connection)
Allow HTTPS Traffic from Internet: This allows you to access the instance from the browser over HTTPS (secure connection)

⏭️ Summary of Instance (Before launch)

The settings provided above is only the minimum requirement needed to spin up the EC2 instance. You can proceed by clicking the launch instance button on the right as seen below:

✅ Success
We have created a new instance successfully. You can click on the Instances > tab highlighted in black to view your running instance.

Now, click on the instance ID to view details as highlighted below:

⏭️ Configure an Elastic IP

In order to avoid connectivity issues and loss of IP address whenever the server is switched off or in maintenance mode, we would allocate an Elastic IP to the Instance. On left side menu under Network & Security, click on Elastic IPs following the highlighted mark as seen below:

On the Elastic IP Addresses page, click on Allocate Elastic IP Address following the Highlighted area as seen below:

⏭️ On the Allocate Elastic IP address page, since we've got only 1 default network group, it has been selected by default. You can leave the fields default as it is and click on Allocate as seen below:

We have allocated an Elastic IP to our account. We will click on the check box to select the Elastic IP, so we can associate the created Elastic IP to our EC2, as seen below:

⏭️ Click on Associate Elastic IP address option as seen below:

⏭️ On the Associate Elastic IP info page, do the following:

In the instance field, select the instance we created earlier and
Click the Associate button as seen below:

✅ Success
Elastic IP was associated successfully as seen below:

When you navigate to the instances page and select the running instance, you will see the Elastic IP address now active, as seen in the highlighted area below:

⏭️ Connecting the EC2 Instance via Terminal

Still on the instances pages, click connect at the top

You will be redirected to the Connect to Instance page. Copy the SSH command as highlighted below:

Connect to instance section

⏭️ Granting Access to the Key Pair file

We need to locate the key pair file downloaded earlier and ensure it is not publicly accessible. Head over to your terminal and run the following commands;



cd Downloads

On your terminal, still on the Download path, run the following commands;



 sudo chmod 400 "ec2-tutorial.pem"

✅ Done. The key pair file is now ready for use.

⏭️ Copy and paste the SSH command you saw in the highlighted area of Connect To Instance section above, on your terminal to initiate a connection to your EC2 instance by doing this;



ssh -i "ec2-tutorial.pem" ubuntu@ec2-54-167-228-166.compute-1.amazonaws.com

When prompted with "Are you sure you want to connect?" type "yes" to continue, as seen below:

✅ Connection Success

We have now connected successfully into our EC2 instance as seen here:

⏭️ Installing Node.js

We'll be installing Node.js with Apt, using Nodesource PPA.
Since this is our first interaction with the apt packaging system in this session, we will update our local package index so that we have access to the most recent package listings, afterwards, we'll get the node.js package. On your EC2 terminal, run the following commands:



sudo apt update
curl -sL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh

This installs the PPA and to enable us get access to the packages. CURL was used to retrieve the installation script, for your preferred version. To add the nodejs configuration file run the following commands:



sudo bash nodesource_setup.sh

Next, we install Node.js using the command below:



sudo apt-get install nodejs -y

Verify that you’ve installed version 20.x by running node with the -v version flag:



node -v

Output

✅ Node.js Installation Success

Please note that the NodeSource nodejs package contains both the node binary and npm, so you don’t need to install npm separately.

At this point you have successfully installed Node.js and npm using apt and the NodeSource PPA. For more details on installing Node.js, read here.

⏭️ Installing NGINX Web Server

Nginx is a high-performance, open-source web server. It is also commonly used as a reverse proxy server, load balancer, and HTTP cache. Nginx is known for its efficiency, scalability, and low resource consumption, thus making it a popular choice for serving static content, handling high traffic volumes, and improving the performance of web applications.

Nginx is available in Ubuntu’s default repositories. Hence, it is possible to install it from these repositories using the apt packaging system, by running the command:



sudo apt install nginx -y

⏭️ Adjusting the firewall

Before testing Nginx, the firewall software needs to be configured to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

Now, We need to enable traffic on all ports by running the following command:



 sudo ufw allow 'Nginx HTTP'
 sudo ufw allow 'Nginx HTTPS'
 sudo ufw allow 'Nginx Full'
 sudo ufw allow 'OpenSSH'

Next, enable ufw with this command:



 sudo ufw enable

To view firewall status, run this command:



sudo ufw status

Output

⏭️ Checking Your Web Server

At the end of the installation process, Ubuntu 22.04 starts Nginx. The web server should already be up and running.

We can check the system status to make sure the service is running by typing:



 systemctl status nginx

Output:

Head over to your browser and type in your IP address, in my case it is: http://54.167.228.166/

Output:

for more on nginx config and commands, read here.

⏭️ Adjusting Nginx Server Blocks

We need to modify the Nginx default configuration file to suit our application needs, by doing the following:

🎯 Create a new directory called Backend in the root of Nginx
🎯 Specify the entry point of our application.
🎯 Adjust the proxy locations according to PORT 8000 (Or any suitable port you prefer).

To create a new dirctory, navigate to /var/www on your terminal and run this command:

Then create the 'backend' directory



sudo mkdir backend

Grant access to the backend directory to make it accessible, type:



sudo chmod 755 backend/

To specify the entry point of our application update the Nginx default config by running:



sudo nano /etc/nginx/sites-available/default

Output:

Modify the first server block by specifying the entry point of your application, same as the highlighted area below:

⏭️ Adjust PORT 8000
Under the location block, adjust your file to look like below:

To exit shell, run the command:



control + x
Then hit y when prompted to save changes

We need to confirm that the configurations were successful, by running this command:



sudo nginx -t

Output:

**Make sure to restart the nginx server after completing these configurations. Type:



sudo systemctl restart nginx

⏭️ Pull Code From Git Repository

We need to pull code from git into the backend folder we created earlier. The code we'll be using for this demo can be found in this repo.

We already setup the project in my last article, read here, and I'll use it mainly for this purpose. You can skip this section and use your existing Node.js project, if you so wish.

In the terminal of your EC2 instance, we'll navigate to the backend folder by running this command:



cd /var/www/backend

We must ensure the backend folder is empty, by running the following command:



sudo rm -rf *

Next, we'll clone the git repo by running the command below:



sudo git clone https://github.com/emmabase/Node-TypeScript-project.git .

The " . " tells git to extract only the content of the repo and not creating a new folder. We'll then get this result:

We can view the content of the backend folder by using the command:

ls

Output:

Since the project uses TypeScript, we'll install TypeScript globally by running the command below:



 sudo npm install -g typescript

Let's create the .env file inside the backend directory using the command:



sudo touch .env

Then, open the .env by running:



sudo nano .env

Then, paste the following:



APP_URL=http://localhost:8000
MONGO_DB_URL=mongodb://localhost:27017/jwt-tutorial
PORT=8000

Within /var/www/backend, we install all dependencies in the package.json file to prevent errors, by running:



npm i

At this point, all dependencies have been installed, and we can view the contents of the backend folder as seen below:

**Don't forget to grant access to the backend folder to enable read and write access by running the command:



sudo chmod 0777 backend/

Next, we'll navigate to /var/www/backend and compile all TypeScript files which will create the dist/ folder by running the command:



 tsc -w

Output:

⏭️ Installing PM2
We need to start and keep the server running even when we close the terminal. We'll install PM2 globally by running the command:



sudo npm install pm2 -g

Next, we initialize PM2 to generate the ecosystem.config.js to configure our application. Please note ** If you are creating your own configuration file, make sure it ends with .config.js so PM2 is able to recognize it as a configuration file. .To achieve this, run the command:



pm2 init simple

Output:

By running the command ls -a, we see the ecosystem.config.js here:

⏭️ Open the ecosystem.config.js file and change the name and script values with following command:



sudo nano ecosystem.config.js

The default content of this file looks like this:



module.exports = {
  apps : [{
    name   : "app1",
    script : "./app.js"
  }]
}

We'll change it to:



module.exports = {
  apps : [{
    name   : "ec2-tutorial",
    script : "dist/app.js"
  }]
}

Then exit the shell with ctrl + x and press y when prompted to save and hit the Enter key to save and exit.

Finally, to start the application, use the command:



pm2 start

Output:

✅ Application Started Successfully

Great Job!! Our application is now up and running. We can look at the log by using the pm2 command:



pm2 log

For more on pm2 commands, read details here

Finally, to test our application, head over to the browser and type:



http://54.167.228.166/api/v1/users

Output:

🍕 Congratulations, You made it this far. 🕺

Conclusion
So far so good, we have reflected on the key importance of using cloud services like AWS EC2 for deploying and managing code due to top notch security and scalability allowing us focus on business development for customers.

We also journeyed through several services like Nginx web server which is the high-performance and open-source web server and PM2 to help start and keep the application running regardless. In my next article, I'll be taking you thru installing SSL on your application using Let's Encrypt, to serve your application on a HTTPS secure domain.

I encourage you to explore other AWS services and other best practices to manage and scale your application.

I will love to see your comments in the comment section if you enjoyed this piece and also don't forget to like and follow 😊
Also, you can follow me on linkedin via Emmanuel Eneche for more posts like this. See you soon 👋

Choosing a Suitable Tech Stack for Your Backend: A Balancing Act.

Emmanuel Eneche — Thu, 22 Feb 2024 11:38:58 +0000

When starting a new project, the choice of programming language particularly for the backend often plays a pivotal role in the success of a project. While it's tempting to lean towards languages we're most comfortable with or personally prefer, it's crucial to prioritize the needs of the project above personal preferences knowing that every project comes with its unique set of requirements, constraints, and objectives.

As developers, our primary goal is to deliver solutions that meet these requirements effectively, Which will often require selecting a programming language that aligns with the project's technical needs, performance goals, and compatibility with existing systems.

In building backend applications most times, I personally have a strong affinity for Node.js, TypeScript and Laravel which makes these options compelling for any projects I embark upon. However, choosing Node and TypeScript in building a project, will always be more suitable for asynchronous applications like;

✅ Chat Systems: Which requires real-time communication (text & multimedia) sharing between users. Implementing socket.io to create WebSocket-based chat servers for instant messaging and live updates.

✅ Streaming Media Application: This system requires delivering high quality video and audio content in real time. By utilizing WebRTC (Web Real-Time Communication) technology, this can be achieved.

✅ Real-Time Gaming Server: Node.js can be well suited for building real-time multiplayer gaming servers that require low-latency communication and high concurrency.

✅ Big Data Processing: Node.js is well-suited for implementing data processing workflows in big data environments, particularly those involving ETL (Extract, Transform & Load) processes, pre-processing, and reporting of data based on predetermined conditions.

Essentially, Node.js is an excellent choice for asynchronous applications, handling all backend needs seamlessly. Additionally, Laravel excels in fulfilling requirements for e-commerce, CMS (Content Management System), and CRM (Customer Relationship Management) applications.

I'm curious to hear your perspective or if you have a preferred technology for your projects, I'm always eager to learn more! 😀

Navigating Key Decisions in Web Development: A Guide for Developers.

Emmanuel Eneche — Mon, 19 Feb 2024 20:34:47 +0000

Introduction

In this current era of speed in technological innovation, everything seems to be fast paced, as there is a multiplicity in the number of web frameworks, tools and also constant innovation that could birth even more web frameworks in the near foreseable future.

It is expected that this wind of innovation will continue to blow rapid improvement and upgrade in the way things are being done, not just in the field of web development but across the entire technological landscape.

At the center of it all is the developer who will be responsible for making decisions on which tools to use in order to deliver the next feature or entire project, based on certain requirements, resources and cost.

Decision Making Process

The following key decisions are always required throughout the entire career of a web developer and also during the development process of web projects, you will have to do the following;

A. Make a Choice of Technology Stack: Its important to decide on the programming languages, frameworks, libraries, and tools to be used for web development. Consider factors such as project requirements, your skillset, community support, performance, and scalability.

To break this further, in web development, let's look at a number of projects that are better implemented in JavaScript Node.js when compared to other programming languages as a use case. In choosing a suitable technology when starting projects like;

Chat Application: Node.js is ideal for building chat applications that require real-time communication between users. You can use frameworks like Socket.io to create WebSocket-based chat servers, enabling instant messaging and live updates.
Social Media Dashboard: Node.js can power the backend of a social media dashboard that aggregates data from multiple platforms (e.g., Twitter, Facebook, Instagram) and provides real-time analytics and insights. Its non-blocking I/O model is well-suited for handling concurrent requests and processing large volumes of data. Also, in performing big data processing tasks like Extract Transform and Load operation (ETL), Which refers to the process of extracting data from various sources, transforming it into a usable format, and loading it into a target database or data warehouse for analysis or reporting purposes, then Node.js comes in handy due to it's Asynchronous nature.
IoT Dashboard: Node.js can power the backend of an Internet of Things (IoT) dashboard that collects, processes, and visualizes data from connected devices. Its event-driven architecture makes it well-suited for handling asynchronous events and managing IoT device communication.
Real-Time Gaming Server: Node.js can be used to develop real-time multiplayer gaming servers that require low-latency communication and high concurrency. Its non-blocking I/O model and support for WebSockets make it an excellent choice for handling real-time game logic and player interactions.
Streaming Media Platform: Node.js is suitable for building streaming media platforms that deliver audio or video content in real time. You can leverage frameworks like Kurento or MediaStream for handling media processing and streaming capabilities.

Other web development frameworks that can be used to deliver any project requirements includes;

Django (Python): Django is a high-level Python web framework that emphasizes rapid development, clean design, and pragmatic principles. It is commonly used for building robust and scalable web applications, including content management systems (CMS), social networking platforms, and e-commerce websites.

Laravel (PHP): Laravel is a PHP web framework known for its elegant syntax, expressive syntax, and developer-friendly features. It is commonly used for building web applications, such as content management systems (CMS), e-commerce platforms, and customer relationship management (CRM) systems.

B. Project Planning and Management: Determine your project management approach, whether it's Agile, Scrum or Kanban. Then For project planning => Jira
Task management => Trello &
Version control => Git.

Conclusion

So far, we touched on 2 key decisions you can make when embarking on a web project. However, there are a lot more others to consider and I will simply list them here so we can treat in next article. They include;

Architecture and Design Patterns
User Experience (UX) and User Interface (UI) Design
Choice of Database Selection
Security Measures
Testing Strategy
Deployment and Hosting
Continuous Integration and Deployment (CI/CD) &
Continuous Learning.

No doubt, the pace of innovation in web development has reached unprecedented levels, with an abundance of web frameworks and tools continually emerging. This proliferation of options underscores the dynamic nature of the field, with constant innovation poised to introduce even more frameworks in the near future.

As this wind of innovation continues to blow, we can anticipate a steady stream of improvements and upgrades, not only within web development but across the entire technological landscape. Developers find themselves at the forefront of this evolution, tasked with navigating the myriad choices available to them and making informed decisions to drive projects forward.

In this ever-changing environment, the role of the developer becomes increasingly pivotal, as they must weigh factors such as project requirements, available resources, and cost considerations to determine the most suitable tools and frameworks for each endeavor. By staying abreast of the latest developments and embracing a mindset of continuous learning and adaptation, developers can harness the power of innovation to deliver transformative solutions that propel technology into the future.

I'll like to hear your own contributions, thoughts and opinions in the comment section. Until next time, bye ✋.

Enhancing Security in Node.js & TypeScript Applications with JWT Authentication.

Emmanuel Eneche — Thu, 15 Feb 2024 22:36:23 +0000

Introduction

Implementing authentication in your application often requires various techniques. In Node.js for example, there are several authentication strategies like;

Token-based authentication
Session-based authentication &
Oauth or OpenID connect.

This article we'll beam the search light on Token-based authentication particularly with the use of JWT.

The Concept of JWT

JWT is JSON Web Token, and it is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA. For more details See Docs.

Purpose of JWT

When a user successfully logs into the application, each subsequent request will include a signed token (JWT) which then enables the user access routes, resources and services that requires that signed token. This provides a secure way for transmitting information between parties, as the server can identify who the client is by using the signature that contains the header and payload information.

To get into more details on JWT structure like; signature, header and payload info, please visit the docs here.

Implementation with Express & TypeScript

Let's create a new Node project and have TypeScript set up. First, we initialize a new project by using npm, this way:

npm init -y

We now have our project initialized with the package.json file created. This provides a base for storing our project metadata like dependencies and scripts. Next we create a minimal express server and also install JWT library with the following commands:

npm i express jsonwebtoken

We have installed express & jsonwebtoken. Next, we'll install TypeScript and other required types on the project with the following:

npm i -D typescript @types/express @types/node @types/jsonwebtoken

The -D or using --dev flag always instructs the package manager to install these dependencies as development dependencies in the package.json file. The installed @types prefix will eliminate any type of related errors during TypeScript compilation.

Next, we generate the tsconfig.json file which serves as TypeScript configuration file. It defines the default options with flexibility to modify the compiler settings to suit our project needs. This file is mostly placed in root of applications and can be achieved by:

npx tsc --init

When this command is executed, the tsconfig.json file is created with default compiler options as seen below:

Heading over to the tsconfig.json file, we need to adjust few options within the "compilerOptions" block. Hence, We set the following:

{
  "compilerOptions" :{
     "target" : "ES2020", //Set the JavaScript language version for emitted JavaScript and include compatible library declarations
     "lib": ["DOM", "ESNext"], //
     "module": "NodeNext", //Specify what module code is generated. 
     "outDir": "./dist", //Specify an output folder for all emitted files.
     "allowSyntheticDefaultImports": true, //Allow 'import x from y' when a module doesn't have a default export.
     "esModuleInterop": true, //Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility.
      "forceConsistentCasingInFileNames": true, //Ensure that casing is correct in imports.
      "strict": true, //Enable all strict type-checking options.
      "noUncheckedIndexedAccess": true,  //Add 'undefined' to a type when accessed using an index.
      "skipLibCheck": true //Skip type checking all .d.ts files.

  }
}

The above configuration gives us a better foundation to have TypeScript compiler all setup. Next, we create an src folder to help keep the root directory of the application more organized.

Todos

Inside src folder, we'll create a new file app.ts which will contain code to setup the express server. On the root of the application, We'll create a .env file to store all environment variables, then install dotenv package to enable the application read the contents in .env file.

npm i dotenv

Then .env will have the following:

APP_URL=http://localhost:8000
PORT=8000

Hence, app.ts will contain the bare minimum like below code:

import express, { Express, Request, Response } from "express";
import dotenv from "dotenv";

dotenv.config();
const app: Express = express();
app.use(express.json());
app.use(express.urlencoded({extended:true}));

app.listen(process.env.PORT, () => {
    console.log(`[server]: Server is running at ${process.env.APP_URL}`);
});

export default app;

And file structure will be same like this:

Starting the Express Application

Before we proceed, we want our application to automatically restart whenever there are new changes in the project so we need to install nodemon to help watch the application for any changes, we achieve this by typing the command below on the terminal:

npm i --save-dev nodemon

The above command has now installed and saved nodemon under the devDependencies section in the package.json file. In the package.json file, within the "scripts" section, we add the following line:

 "start": "nodemon dist/app.js"

Because we'll be running TypeScript in watch mode, using npx tsc -w, TypeScript will then compile all .ts files into JavaScript .js and put them inside the dist/ folder. This is important because it automatically recompiles them to produce the corresponding JavaScript output file quite helpful in development mode.

Now, lets ensure the script section in our package.json file looks like this:

   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon dist/app.js"
  },

Also, lets open 2 terminals. In the first, we type in:

 npx tsc -w

And in the second, we type in:

 npm start

At this point, the stage is clear and if there are no issues so far, your first terminal now runs the TypeScript compiler in watch mode and should look like this:

Also, the second terminal should look like this:

Setting up MongoDB

To seamlessly generate tokens for authentication, we need a single User collection to verify a registered user upon login, and attach a signed token which can be used to access any protected route in the application.

Mongoose is an Object Data Modelling (ODM) Library that provides relationship between data and also provides schema validation.

To install mongoose, on the console, we type:

npm i mongoose

Next, we setup the database configuration file. Inside the src/ directory, we'll create a file called database.ts and add the following lines of code:

import mongoose, {ConnectOptions} from "mongoose";
mongoose
  .connect("mongodb://localhost:27017/jwt-tutorial", {
    autoIndex: true,
  } as ConnectOptions)
  .then( async (db) => {
    console.log("Database Server Connected Successfuly.");
  })
  .catch((err) => {
    console.log("Error Connectiong to the Database::", err);
  });

To invoke this database connection, all that needs to be done is to import this file in the app.ts by adding below code at the very top of the file:

import "./database";

So this now looks like:

And if the database configuration is all good, whenever you start the application, you will see two items on the console like:

Next, inside the src/ directory, we'll create a folder called models and inside it, we'll create a file called userModel.ts. In userModel.ts, we add the following code:

import mongoose from "mongoose";
const userSchema = new mongoose.Schema(
    {
        fullName: { type: String, required: true },
        email: { type: String, required: true },
        password: { type: String, required: true },
    },
    {
        timestamps: true,
    }
);
const Users = mongoose.model("Users", userSchema);
export default Users;

The database is ready, next we need to setup an endpoint to enable user registration. Registration will require user password, so we need to encrypt the password before saving the records. For password encryption, we'll install bcrypt library using the following:

npm i bcryptjs

npm i --save-dev @types/bcryptjs

Setting up JWT Authentication Handler

Inside the src/ directory, we'll create a folder called utils and add a file called authentication.ts In authentication.ts, we then add the following code:

import { NextFunction, Request, Response } from "express";
import jwt from "jsonwebtoken";
import { ObjectId } from 'mongodb';

interface userDetails {
  _id: ObjectId;
  fullName: string;
  email: string;

}

export type MiddlewareFunction = (
  req: Request,
  res: Response,
  next: NextFunction
) => void;

declare global {
  namespace Express {
    interface Request {
      user?: any;
    }
  }
}

export const generateToken = (user: userDetails) => {
  const { _id, fullName, email } = user;
  return jwt.sign(
    { _id, fullName, email},
    process.env.JWT_SECRET || "somethingsecret",
    {
      expiresIn: "30d",
    }
  );
};

export const isAuthenticated: MiddlewareFunction = (req, res, next) => {
  const authorization = req.headers.authorization;
  if (authorization) {
    const token = authorization.slice(7, authorization.length);
    jwt.verify(
      token,
      process.env.JWT_SECRET || "averysecretkey",
      (err, decode) => {
        if (err) {
          res.status(401).send({ message: "Invalid token supplied" });
        } else {
          req.user = decode;
          next();
        }
      }
    );
  } else {
    res.status(401).send({ message: "Unauthorized operation to protected resource" });
  }
};

From the foregoing, you'll notice that the user object supplied as argument to the generateToken method, contains the valid user information as contained in the database, which is then used to generate a signed token which can be active for 30 days.

At this point, we have JWT ready for use and we can start creating new valid signed tokens and restrict any route/endpoint we so deem fit. Just to catch up with the flow of the application structure, please confirm that your folder structure is same as mine, so we don't endup firing in opposite directions 😄.

Great! Now, we are both in sync! Let's setup the registration endpoint so we can enable users login and have the client retrieve the signed token.

We'll Create a folder inside the src/ directory called routes. Inside routes, we'll create a file called userRoute.ts and add the following code:

import express, { Request, Response } from "express";
import bcrypt from "bcryptjs";
import User from "../model/userModel";

const userRoute = express.Router();

userRoute.post("/register", async (req: Request, res: Response) => {
  try {
    const { fullName, email, password } = req.body;
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.json({
        message: "Already registered. Please Signin to Your Account",
        success: true
      }).status(400);
    }
    const user = new User({ fullName, email, password: bcrypt.hashSync(password, 8), });
    const createdUser = await user.save();
    if (createdUser) {
      const { _id, fullName, email, password, createdAt } = user;
      return res.status(201).json({
        _id, fullName, email, password, createdAt,
        message: `Registration was successful`,
        success: true,
      });
    }
    return res.status(400).json({ message: "Failed to create user data" })

  } catch (error: any) {
    res.status(500).send({ error: error.message });
  }
}
);
export default userRoute;

The registration endpoint is complete. We need to register this route in the app.ts file and start testing new registration requests like;

import userRouter from "./routes/userRoute";

We add the import statement firstly, and lastly, we add the the middleware like;

app.use("/api/v1/users", userRouter);

We can test this endpoint using postman or any API client available as seen below:

Alright, registration was successfull as seen in postman above. Next, we setup the login endpoint. Inside the userRoute.ts file, we'll add a new route to handle login request like;

import { generateToken } from "../utils/authentication";

userRoute.post("/login", async (req: Request, res: Response) => {
  try {
    const { email, password } = req.body;
    const user = await User.findOne({email});
    if (user) {
      const { _id, fullName, email, createdAt} = user;
      if (bcrypt.compareSync(password, user.password)) {
        return res.status(200).send({
          _id, fullName, createdAt,
          token: generateToken({ _id, fullName, email}),
          message: "successfully loggedin",
          success: true
        })
      }
      return res.status(401).json({ message: "Invalid email or password", success: false })
    }
    return res.status(401).json({ message: "Invalid email or password", success: false })
  } catch (error: any) {
    return res.status(500).send({ error: error.message })
  }
});

Notice that we have imported the generateToken method and used it in the middleware above to generate a new signed token. We can see the newly generated token ("token") as part of the response object returned below:

Finally, to test the generated token, we'll add a new protected route to enable only logged in users retrieve products. In the userRoute.ts file, we add the code below:

import { generateToken, isAuthenticated } from "../utils/authentication";

We add the isAuthenticated middleware to the import statement and next, we create a new endpoint to test. This will be a GET request, so we can place it just before the /register route like:

userRoute.get("/products", isAuthenticated, async (req: Request, res: Response) => {
  const products = [{productName: "HD Monitor", price: "$1,000", rating: 5, reviews: 200}];
  if (products) {
      return res.status(200).send(products);
  }
  res.status(202).send({ message: "Products not available" });
})

The endpoint above is a good example of a protected route. The current user has not been authenticated yet so when we attempt to visit the /products route, a 401 and error message we defined earlier will be returned as seen below:

To properly authenticate the logged in user, we'll head over to postman and extract the token value that is returned when user logs in, then under the Headers tab, we'll enter the key "Authorization" and set value as:

Bearer longtokenstrings

as seen below:

Summarizing

This article so far seeks to provide a simplified and down to earth techniques for implementing JWT in your Node and TypeScript project. We covered TypeScript configurations to speedily get your project up and running without hassle and also created a bare minimum server for your express application. We went on to established connections to the MongoDB server for data storage as it would be the case in a real world scenario.

One key takeaway on JWT is that; it is a stateless authentication mechanism whereby once a user is authenticated and receives a JWT token, all necessary information (such as user identity and permissions) is encoded within the token itself. This means that the server does not need to store any session state, making it easier to scale horizontally by adding or removing servers without affecting the authentication process. I personally love this authentication technique and always do recommend. Let me know what your thoughts are on this.

Please do let me know in the comment section if you encountered any challenge in the course of following thru and I will always wade in and resolve. Also, please share this material with anyone who may need it. Thank you 🙏 and see you soon. 👋

API Requests Validation With Express Validator.

Emmanuel Eneche — Fri, 02 Feb 2024 23:47:33 +0000

Overview

When it comes to do with building backend applications, certain requirements are often considered which could impact greatly on the system. They include;

Security
Reliability &
Intergrity of data.

The strict enforcement of these requirements could help prevent irregularities and loopholes in your application, like; inaccurate data from entering your system, to malicious users able to exploit vulnerabilities through techniques like SQL injection, cross-site scripting (XSS) and other forms of injection attacks.

It is against this backdrop we will be considering the adoption of data validation and sanitization tool like Express validator in Node.js to maintain data integrity and consistency across our system. However, it is important to note that Node.js has other powerful validation tools like;

Joi
Ow
Superstruct
Tv4
Validator.js
Fastest Validator

Why Express Validator?

Due to it's popularity and integration with Express and focus on web related tasks, we will be considering Express validator and subsequently x-ray Joi which appears to be a more sophisticated validation library for various data structures.
Express validator is an Express.js library that helps in sanitizing inputs and provides validation support for your backend application.

Installation and Setup

This article will give you a clear way of integrating Express validator in your Node application. First head to your terminal and type in the following:

 npm i express-validator

This will install the Express validator library in your application and have it saved under the dependencies section of your package.json file. Next we create simple validation middleware functions that can be called when needed, this will be in a separate file called validators.js;

In the validator.js file, we use the following snippet:

  import * as validators from "express-validator";
  import User from "../../models/users/userModel";

export const registrationRules = () => {
   return [
    body("firstName", "Firstname is required")
      .notEmpty()
      .withMessage("Firstname must be at least 3 chars long"),
    body("lastName", "Lastname is required")
      .notEmpty()
      .withMessage("Lastname must be at least 3 chars long")
   ]
}

From the above function, you notice that we have imported 2 items validators from express-validator and User which represents the user collection which we may likely want to lookup data on the database to verify incoming requests.

Also, we have defined the registrationRules function returning an array of data. So far, the only validation function used is the notEmpty() method which ensures the firstName and lastName fields are required. We could go on further to add more validation methods which we refer to as method chaining like;

export const registrationRules = () => {
   return [
    body("firstName", "Firstname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Firstname must be at least 3 chars long"),
    body("lastName", "Lastname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Lastname must be at least 3 chars long")
   ]
}

We added 3 more validation functions; trim(), escape() and isLength(), to remove whitespaces from input, escape HTML tags in inputs and to specify the length of characters required per input supplied. For more validation methods, see Express validation chains.

In a real world scenario, we may want to validate email addresses, to check the right format and also verify if the email already exist in our database, then we return an error or whatever we intend to do with that response. We can achieve that by doing the following:

In the registrationRules() function above, we add the email field like this:

export const registrationRules = () => {
   return [
    body("email", "Email is required")
      .trim()
      .escape()
      .isEmail()
      .withMessage("Please provide a valid email")
      .custom(async (email) => {
        return User.findOne({ email}).then((user) => {
          if (user) {
            return Promise.reject("E-mail already in use");
          }
        });
      })
      .withMessage("Account is already registered"),
    body("firstName", "Firstname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Firstname must be at least 3 chars long"),
    body("lastName", "Lastname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Lastname must be at least 3 chars long"),
   ]
}

The custom method above, helps us make an asynchronous request to the server to check if the email value provided has been used previously. If true, we get an eror response. This operation is often referred to as Custom validation.

Now, we need to start collecting all errors so we can display them to the client whenever these errors occur. We then create the middleware still in our validator.js file like;

   export const validateRequests = (req, res, next) => {
   const errors = validationResult(req);
   const clientErrors = [];
    errors.array().map((err) => clientErrors.push({ message: 
      err.msg }));
    if (clientErrors.length == 0) {
      return next();
     }
  return res.status(400).send({
    clientErrors,
  });
};

In the validateRequests middleware above, we have called on the validationResult method. It wraps the req object which stores the errors in the "errors" variable and all we simply do is extract the object containing the error message into the clientErrors array.

We then set status to 400 and send the clientErrors array to client. When we put all together, the validator.js file will then look like this;

import * as validators from "express-validator";
import User from "../../models/users/userModel";

export const registrationRules = () => {
   return [
    body("email", "Email is required")
      .trim()
      .escape()
      .isEmail()
      .withMessage("Please provide a valid email")
      .custom(async (email) => {
        return User.findOne({ email}).then((user) => {
          if (user) {
            return Promise.reject("E-mail already in use");
          }
        });
      })
      .withMessage("Account is already registered"),
    body("firstName", "Firstname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Firstname must be at least 3 chars long"),
    body("lastName", "Lastname is required")
      .notEmpty()
      .trim()
      .escape()
      .isLength({ min: 3 })
      .withMessage("Lastname must be at least 3 chars long"),
   ]
}

export const validateRequests = (req, res, next) => {
   const errors = validationResult(req);
   const clientErrors = [];
    errors.array().map((err) => clientErrors.push({ message: 
      err.msg }));
    if (clientErrors.length == 0) {
      return next();
     }
  return res.status(400).send({
    clientErrors,
  });
};

One good benefit of having the validateRequests middleware written this way is that, it can be reusable across the entire codebase for extracting any error related tasks based on the rules which will likely change. For instance, we may need to define signinRules() after registrationRules() then validateRequests middleware stays same.

Finally, we can then use our validateRequests() middleware in the usersRouter where we handle the registration API request like this:

  import express from "express"; 
  import {registrationRules, validateRequests} from 
   '../..validator.js'

   const usersRouter = express.Router();
   usersRouter.post("/register", registrationRules(), 
     validateRequests, async (req, res) => {

     try{
        const {email, firstName, lastName} = req.body;
        res.status(200).send({message: "Registration was successful" userData: {email, firstName, lastName} });

     }catch (error){
        console.error(error)
       res.status(500).send({ error: error.message });
     }
});

From the above definiton, our validation middleware are now active and when client send an API request to the /register endpoint above, the request is intercepted and we see the corresponding errors.

Wrapping up

Congratulations!! You have finally completed the process of validating and sanitizing API requests using Express validator. However, this article is a guide to have you all set up and running. For detailed Express validator methods to help enrich your application needs, please don't hesitate to look up the Express Validation Docs.

I will love to see what you build next using Express Validator in your projects.

If you encountered any challenge while flowing with this article, please don't hesitate to let me know in the comment section. Catch me on LinkedIn.

Image Upload to Cloudinary Using NodeJS & TypeScript.

Emmanuel Eneche — Tue, 30 Jan 2024 18:32:24 +0000

Introduction

When building applications that requires a lot of asset management, particularly images, you are then saddled with the responsiblity of ensuring that these assets (images) can be served to your users at a lightning-fast experience with improved performance, we then consider a popular tool known as Cloudinary

What Then is Cloudinary?

Cloudinary is a cloud-based image and video management service that provides a comprehensive solution for managing, optimizing, and delivering media files on the web. It offers a variety of features for developers and businesses to handle their images and videos efficiently, including storage, optimization, transformation, and delivery.

Problem Statement

The traditional way of managing images/assets in complex applications, like an E-commerce store where vendors are often required to upload multiple image files for a single product directly to the server, many times leads to storage and scalability drawbacks, with its attendant impact on performance. This article will be providing a solution to this challenge using Cloudinary in a Node & TypeScript project.

This article assumes you already have your Node and TypeScript project all setup and so the rest sections will guide you on better ways to organize your code to clear the task.

Solution

To begin, in your existing Node and TypeScript project, head over to the terminal and install the following packages using the below command:



npm i multer sharp cloudinary

The above command will install multer sharp & cloudinary to your project. We need to also install multer types to provide information to multer library using:



npm i @types/multer

Next, in your app.ts or server.ts or index.ts, whatever the name of the entry point to your application is, please ensure you have the following block added:



    app.use(express.json());
    app.use(express.urlencoded({extended:true}));

Now we have the application ready to accept incoming requests with file attachment plus we now have easy integration with cloudinary. Also, we will install dotenv package to enable us access cloudinary config in our .env file , hence we run the command:



npm i dotenv

Next, we create a simple middleware to handle one or more image upload request on our server like this;



 import dotenv from "dotenv"
 import multer, { Multer } from 'multer';
 import { v2 as cloudinary, UploadApiResponse, 
 UploadApiErrorResponse } from 'cloudinary';
 import sharp from 'sharp';


 dotenv.config();

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME, 
  api_key: process.env.CLOUDINARY_API_KEY, 
  api_secret: process.env.CLOUDINARY_SECRET,
});

interface CloudinaryFile extends Express.Multer.File {
  buffer: Buffer;
}

const storage = multer.memoryStorage();
export const upload: Multer = multer({ storage: storage });

export const uploadToCloudinary = async (req: Request, res: Response, next: NextFunction) => {
  try {
    const files: CloudinaryFile[] = req.files as CloudinaryFile[];
    if (!files || files.length === 0) {
      return next(new Error('No files provided'));
    }
    const cloudinaryUrls: string[] = [];
    for (const file of files) {
      const resizedBuffer: Buffer = await sharp(file.buffer)
        .resize({ width: 800, height: 600 })
        .toBuffer();

      const uploadStream = cloudinary.uploader.upload_stream(
        {
          resource_type: 'auto',
          folder: 'your-cloudinary-folder-name',
        } as any,
        (err: UploadApiErrorResponse | undefined, result: UploadApiResponse | undefined) => {
          if (err) {
            console.error('Cloudinary upload error:', err);
            return next(err);
          }
          if (!result) {
            console.error('Cloudinary upload error: Result is undefined');
            return next(new Error('Cloudinary upload result is undefined'));
          }
          cloudinaryUrls.push(result.secure_url);

          if (cloudinaryUrls.length === files.length) {
            //All files processed now get your images here
            req.body.cloudinaryUrls = cloudinaryUrls;
            next();
          }
        }
      );
      uploadStream.end(resizedBuffer);
    }
  } catch (error) {
    console.error('Error in uploadToCloudinary middleware:', error);
    next(error);
  }
};

From the above function, we have defined and exported two key functions which will be needed in our image/item upload router. There are: upload & uploadToCloudinary functions. Also, you must have noticed that we used sharp to resize the original dimension of the image which you can change to your own preference at any time here:



  const resizedBuffer: Buffer = await sharp(file.buffer)
        .resize({ width: your-width, height: your-height })
        .toBuffer();

Ok, Our image upload middleware is all set, next we head over to our router and call on the uploadToCloudinary & upload functions previously exported like:



import {upload, uploadToCloudinary } from '../../libraries/cloudinary'; //the file path where you had written this functions in earlier

imageUploadRouter.post("/upload", upload.array('images', 5),  uploadToCloudinary, async (req: Request, res: Response) => {
    try {
        const cloudinaryUrls = req.body.cloudinaryUrls;
        if (cloudinaryUrls.length === 0) {
            console.error('No Cloudinary URLs found.');
            return res.status(500).send('Internal Server Error');
        }
       const images = cloudinaryUrls;
       return res.send(images)

    } catch (error) {
        return res.status(500).json({ error});
    }
});

Finally, we now have our image files uploaded to cloudinary and the variable images in the function above, is an array that contains the URLs of all images previously uploaded to cloudinary.



["https://res.cloudinary.com/dyppbuosu/image/upload/v1706286166/Your-folder-name/yn80wlwv7sfaoj0bqrla.png1", https://res.cloudinary.com/dyppbuosu/image/upload/v1706286166/Your-folder-name/yn80wlwv7sfaoj0bqrla.png1]

Summarizing

You have used Typescript and Node to handle file upload to cloudinary. Hence, managing asset files especially images with cloudinary can help your project with improved performance and increased page load speed, scalable and secure cloud storage, eliminating the need for on-premises storage solutions, developer-Friendly APIs and SDKs amongst many other benefits. To get deeper insights on Cloudinary, you can learn more here:
Cloudinary guide

Did you encounter any challenge so far? don't sweat it, let me know in the comment section. You can also reach out to me on LinkedIn