DEV Community: Madhav Pandey

How I Deployed My Node.js App on a VPS With a Custom Domain & Free SSL

Madhav Pandey — Fri, 13 Feb 2026 09:34:40 +0000

I deployed my personal project PBlog to a real VPS, connected it to my custom domain pblog.online, and secured it with free HTTPS.
This post documents the exact steps I followed, from a blank server to a fully production-ready app.

If you're new to VPS deployments, this guide will walk you through everything I learned along the way.

### 1. Creating VPS
I used Kamatera to create an Ubuntu server.
Once the server was ready, I connected via SSH:

ssh root@YOUR_SERVER_IP

2. Installing Node.js and Git

sudo apt update
sudo apt install nodejs git -y

3. Cloning and running the app on a VPS

I cloned my project from GitHub and ran it on that server

git clone https://github.com/pmadhav82/P_blog.git
cd P_blog
npm install

4. Running the app with pm2

To keep the app running 24/7, I installed pm2:

sudo npm install -g pm2

started the app:

pm2 start app.js

Now the app is running on port 8000 and can be accessed by visiting publicIP:8000

5. Installing and Configuring Nginx

I installed Nginx:

sudo apt install nginx -y

Usefull Nginx Commands

Purpose	Command
Check Nginx status	`systemctl status nginx`
Start Nginx	`sudo systemctl start nginx`
Stop Nginx	`sudo systemctl stop nginx`
Restart Nginx	`sudo systemctl restart nginx`
Reload Nginx (safe reload after config changes)	`sudo systemctl reload nginx`
Test Nginx configuration	`sudo nginx -t`
View error logs	`sudo tail -f /var/log/nginx/error.log`
List enabled sites	`ls /etc/nginx/sites-enabled/`
List available sites	`ls /etc/nginx/sites-available/`
Enable a site (create symlink)	`sudo ln -s /etc/nginx/sites-available/yourfile.conf /etc/nginx/sites-enabled/`
Disable a site (remove symlink)	`sudo rm /etc/nginx/sites-enabled/yourfile.conf`

At this point, visiting the server's IP address showed the default Nginx welcome page. In order to see the app when visiting the server IP, we have to remove the default Nginx site and create a reverse proxy config.

Creating Reverse Proxy Config

I created a new config file:

sudo nano /etc/nginx/sites-available/pblog.conf

Added this:

server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Enabled it:

sudo ln -s /etc/nginx/sites-available/pblog.conf /etc/nginx/sites-enabled/

Tested and reloaded Nginx:

sudo nginx -t
sudo systemctl reload nginx

At this moment, visiting the server IP will show the app.

6. Connecting Domain

I bought a domain from Namecheap. Inside Namecheap -> Advanced DNS, I added two A records where the value is my server's public IP:

I updated the pblog.conf file.

sudo nano /etc/nginx/sites-available/pblog.conf

Updated it to:

server {
    listen 80;
    server_name pblog.online www.pblog.online;

    location / {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

and reloaded Nginx;
sudo systemctl reload nginx

After a few minutes, pblog.online pointed to my app, but it wasn't secured.

7. Adding Free SSL With Certbot

I installed Certbot:

sudo apt install certbot python3-certbot-nginx -y

Requested SSL:

sudo certbot --nginx -d pblog.online -d www.pblog.online

I followed the prompt and Certbot automatically:

Generated certificates
Updated my Nginx config
Reloaded Nginx

Now my site is live at:

https://pblog.online

Deploying my app to a VPS taught me a lot about:

Linux servers
Nginx reverse proxies
DNS configuration
SSL certificates
Production Node.js setups

Now my project is fully live, secure, and running on my own infrastructure.

If you're deploying your first app, I hope this guide helps you avoid the confusion I had at the beginning.

How to upload image to Firebase Storage from your expressjs app.

Madhav Pandey — Fri, 28 Nov 2025 09:17:31 +0000

This write-up outlines how we implemented image uploading, listing, and deletion using Firebase Storage (via the Firebase Admin SDK) in the P_Blog project. The post documents the code, how it works, potential issues, and suggestions for improvement.

Overview
Key components and files
Upload middleware (Multer) setup
Upload route (save file to Firebase Storage)
Listing images (getFiles)
Deleting images (file.delete)
Frontend confirmation UX
Security & Best practices
Testing and verification
Suggested improvements

Overview

The process implemented in P_Blog is simple and robust for a small to medium-scale project:

User uploads an image via a form.
The server receives the image buffer using Multer (memory storage).
The server saves the image to Firebase Storage using the Admin SDK.
The uploaded file is made public (via file.makePublic()), so a public URL can be used in the site.
Admins can list and delete images using the Admin UI.

Key files and their roles

utils/firebase-admin-config.js — Initializes Firebase Admin SDK (service account). Exports the firebase object.
utils/firebaseImageUpload.js — Multer configuration for image uploads (max size, memory storage, and fileFilter).
routes/firebaseUploadImageRoute.js — Upload route that saves the image buffer into Firebase Storage and returns a public URL.
routes/adminManageMediaRoute.js — Admin route for listing images (GET /admin/manage-media) and deleting images (POST /admin/manage-media/delete).
views/firebase-media.handlebars — Admin HTML that lists images, displays an image modal, and a delete confirmation modal.

Firebase Admin Setup

The Firebase Admin SDK is initialized in utils/firebase-admin-config.js using a service account JSON placed outside source control (service-account-key.json):

const firebase = require("firebase-admin");
const serviceAccount = require("../service-account-key.json");
firebase.initializeApp({
  credential: firebase.credential.cert(serviceAccount)
});

module.exports = firebase;

This allows server-side operations (creating, deleting files and generating signed URLs) using your Firebase project credentials.

Upload middleware (Multer)

We use Multer with memory storage because the Firebase Admin SDK accepts a Buffer as input. It's configured to limit file size and filter file types.

Key snippet (utils/firebaseImageUpload.js):

const multer = require("multer");

const firebaseUpload = multer({
  limits: { fileSize: 12000000 }, // 12MB
  storage: multer.memoryStorage(),
  fileFilter: (req, file, cb) => {
    const allowedFileType = ["image/png", "image/jpg", "image/jpeg", "image/gif"];
    if (!allowedFileType.includes(file.mimetype)) {
      return cb(new Error("Please select a valid image file (PNG, JPG, JPEG, GIF)"), false);
    }
    cb(null, true);
  },
});

module.exports = firebaseUpload;

Note: For very large files, or to reduce memory usage, consider streaming uploads or a temporary storage hook. For the memoryStorage() approach this project uses, make sure your server memory can handle the largest eligible file and the concurrent requests you expect.

Upload route — Saving to Firebase Storage

The upload route at /firebase-image-upload accepts a POST request with a firebase-image field (single file). It performs the following steps:

Verify the file exists in req.file.
Create a random filename using crypto.randomBytes and append the original extension (via path.extname).
Save the buffer using file.save(req.file.buffer, ...) with proper metadata.
Make the file public using file.makePublic() and return a public URL.

Key snippet (routes/firebaseUploadImageRoute.js):

const firebase = require("../utils/firebase-admin-config");
const firebaseUpload = require("../utils/firebaseImageUpload");
const {islogin} = require("../utils/loginHandeler");
const path = require("path");
const crypto = require("crypto");
const firebaseImageUploadRoute = require("express").Router();

const BUCKET_NAME = "pblog-5795d.firebasestorage.app";
const bucket = firebase.storage().bucket(BUCKET_NAME);

firebaseImageUploadRoute.post(
  "/",
  islogin,
  firebaseUpload.single("firebase-image"),
  async (req, res) => {
    if (!req.file) {
      return res.status(400).json({ message: "No image selected", success: false });
    }

    try {
      const fileExt = path.extname(req.file.originalname); // Keep leading dot if any.
      const fileName = `${crypto.randomBytes(16).toString("hex")}${fileExt}`; // NOTE: Avoid double dot.
      const file = bucket.file(fileName);

      await file.save(req.file.buffer, { metadata: { contentType: req.file.mimetype } });
      await file.makePublic();

      const BASE_URL = "https://storage.googleapis.com";
      const publicUrl = `${BASE_URL}/${BUCKET_NAME}/${fileName}`;

      res.json({ success: true, publicUrl });
    } catch (er) {
      res.status(500).json({ message: er.message, success: false });
    }
  }
);

Important improvement: use fileName without an extra . in the template. The code above demonstrates the corrected string concatenation.

Note on makePublic(): Calling file.makePublic() sets object ACL to be readable by anyone, making the file publicly accessible. If you want the image to be private, consider using signed URLs generated by Firebase: file.getSignedUrl({ action: 'read', expires: '03-09-2491' }).

List images (Admin) — Reading the bucket

To list images the admin created a route at GET /admin/manage-media that calls bucket.getFiles() and passes the results to a view.

Key snippet (routes/adminManageMediaRoute.js):

adminManageMediaRoute.get("/", async (req, res) => {
  const [files] = await bucket.getFiles();
  const BASE_URL = "https://storage.googleapis.com";
  const images = files.map((file) => ({
    name: file.name,
    publicUrl: `${BASE_URL}/${BUCKET_NAME}/${encodeURIComponent(file.name)}`,
  }));
  res.render("firebase-media", { images });
});

Notes:

getFiles() returns an array for the first page of results by default. If you expect many files, implement pagination with pageToken and maxResults.
We URL-encode the file name with encodeURIComponent for safe use in the URL.

Delete images — Server-side logic

The admin view posts a delete form to /admin/manage-media/delete with imageName in the request body. The route deletes the file from the Firebase bucket.

Key snippet (routes/adminManageMediaRoute.js):

adminManageMediaRoute.post("/delete", async (req, res) => {
  const { imageName } = req.body;

  try {
    const file = bucket.file(imageName);
    await file.delete();
    req.flash("success", "Image deleted successfully");
  } catch (error) {
    req.flash("error", "Failed to delete the image");
  }

  res.redirect("/admin/manage-media");
});

Safety notes:

We use req.body.imageName rather than a path parameter because filenames may contain / characters and a request body avoids path parsing errors when filenames include slashes.
The route is protected (only admins can reach it), but you might also validate that the imageName indeed exists and is not used by active posts — see suggested improvements.

Frontend — Admin UI and confirmation UX

The admin UI template (views/firebase-media.handlebars) displays images in a gallery, provides a small preview modal, and a delete form for each image. On submit, a JS handler intercepts the form to show a delete confirmation modal. Confirming submits the original form — cancel closes the modal.

Key elements:

<form action="/admin/manage-media/delete" method="post">
  <input type="hidden" name="imageName" value="{{this.name}}" />
  <button class="btn-secondary" type="submit">Delete</button>
</form>

In our JS we intercept submit to show a modal with the filename and (optionally) an image preview. When an admin confirms, the form is submitted. This prevents accidental deletion and improves UX.

Testing the flow locally

Start your server (make sure service-account-key.json is configured):

npm start
# or
node app.js

Log in as an admin and upload an image via the upload form. The server should return a publicUrl you can paste and verify.
Go to /admin/manage-media and verify the image appears.
Click Delete and confirm: image should be removed and the admin redirected back.

You can also test the upload with curl (include the correct session cookie for authentication):

curl -i -X POST -F "firebase-image=@/path/to/img.jpg" http://localhost:8000/firebase-image-upload

Delete using a POST form (again, this example requires the session cookie for admin):

curl -i -X POST -d "imageName=uploaded-file.jpg" -b "connect.sid=<SID>" http://localhost:8000/admin/manage-media/delete

Security and Best practices

Authentication/Authorization: The upload and management routes are protected with islogin and isAdmin middleware — keep this thorough.
Public vs private: Check your application needs. If files should be private, use file.getSignedUrl(...) instead of file.makePublic().
Validate file names and prevent deletion of images used by posts. Introduce a DB check preventing delete if referenced.
Limit file types and file sizes (done via Multer). Consider antivirus scanning if your project accepts user uploads from unknown sources.
Use environment variables and secure storage for service account keys. Keep keys out of source control.

Suggested improvements and future work

Use signed URLs for private access.
Add pagination for listing images when a bucket grows large.
Add an image preview in the delete confirmation modal (improves UX and reduces accidental deletion).
Convert the delete action to AJAX to avoid full page reloads and make the admin page more responsive.
Add a trash mechanism: soft-deletes or move images to a trash/ prefix and perform a permanent delete later.
Protect soft-deleted images from being re-used and provide an audit trail for deletes.

Final notes

Implementing files in Firebase Storage via the Admin SDK is straightforward and integrates well with Node/Express via Multer. The P_Blog implementation is production-ready for small projects, and with a few of the improvements suggested above you can scale safely and add more robust functionality (privacy, pagination, auditing).

How to Upload Images to AWS S3 from Your Web App with Node.js and Multer

Madhav Pandey — Mon, 16 Sep 2024 11:00:00 +0000

I recently added another feature in my NodeJS app P_Blog to enhance the user experience. Now, users can directly upload images to an AWS S3 bucket from the app and copy the image link to use within their blog posts. This is especially convenient because P_Blog supports Markdown, making it easy for users to embed images by simply pasting the link.

Before implementing this feature, users had to rely on third-party platforms to host their images, which added unnecessary steps to the process. By allowing direct uploads to S3, the image management process becomes seamless, reducing friction and making content creation faster and more enjoyable for users. Now, they can focus more on writing and less on managing image links or worrying about image hosting.

In this blog post, I want to walk you through the process of uploading images to an AWS S3 bucket directly from your web app. I’ll explain how I implemented this feature using Node.js, Express.js, and Multer to handle file uploads, and how I integrated the AWS SDK to securely store images in the cloud. By the end of this guide, you’ll be able to seamlessly add image upload functionality to your own app, improving the user experience.

Setting Up AWS S3

Login in to the AWS Management Console
Navigate to S3 and click on Create bucket
Give the bucket a unique name and make sure to uncheck Block all public access because we will make our bucket public so that images within the bucket become public
Now, we need to add a Bucket policy that allows anyone to view images located inside the bucket. For that go to the Permissions tab and edit the bucket policy. You can use Policy generator to get the bucket policy and copy and paste the policy

{
    "Version": "2012-10-17",
    "Id": "Policy1725365190218",
    "Statement": [
        {
            "Sid": "Stmt1725365183685",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

Creating an IAM User and Policy for S3

In this process, we’ll create an IAM user that will give programmatic access to AWS resources via an access key and a secret access key. These credentials allow our application to interact with AWS services, such as S3. We’ll also attach a policy to this user, specifically allowing them to put objects into the S3 bucket—meaning they can upload images. By restricting permissions in this way, we ensure that the IAM user has only the necessary access to upload files, enhancing the security of our app.

Creating Policy for S3

Go to the IAM Dashboard
Go to the Policies section and click on Create policy and you will see Policy editor
In the Select a service section choose S3 and search and check for PutObject in Actions allowed section
In the Resources section choose Specific and click on Add ARNs Specify ARN box will open
In the Speify ARN box enter your bucket name, Resource ARN check Any object name for Resource object name lastly click on Add ARNs button
Now we are in Review and create section. In this section give a meaningful name for this policy and click on Create policy button

Creating an IAM User

Go to the Users section of IAM Dashboard
Click on Create user and give a meaningful name and click on Next
In the Set permissions section choose Attach policies directly and search and choose for the policy that we have created above. Lastly, click on Next button
In the Review and create section just need to click on Create user button
Go the the newly created user dashboard, click on Create access key and you can choose Other in Access key best practices & alternatives section. Lastly, click on Next button
In Set description tag tag you may write description of this access key but it is optional and click on Create access key
This is the final and important part, where we will get the Access key and Secret access key. You will see both keys in this Retrieve access key section. Make sure you have saved those keys somewhere safe.

Backend Setup

Multer setup to handle file uploads

First, we will set up a basic multer configuration for handling file uploads. This configuration is crucial for managing file zise limits and filtering which types of files are allowed to be uploaded. Install multer by running npm install multer command in your terminal.
I have created a file named s3ImageUpload.js inside the folder utils and the following code goes in that file:

const multer = require("multer");

const s3Upload = multer({
  limits: {
    fileSize: 12000000,
  },

  fileFilter: (req, file, cb) => {
    const allowedFileType = ["image/png", "image/jpg", "image/jpeg"];

    if (!allowedFileType.includes(file.mimetype)) {
      return cb(
        new Error("Please select a valid image file (PNG, JPG, JPEG)"),
        false
      );
    }

    cb(null, true);
  },
});

module.exports = s3Upload;

Here, we have imported multer set the file file size limit of 12MB. The fileFilter function allows us to control what types of files can be uploaded. This ensures that users cannot upload excessively large files and files that are not included in allowedFileType. In case of that multer will throw an error and our custom error handler will catch and send this error to the frontend.

const errorHandler = (error, req,res,next) =>{

const errorStatusCode = res.statusCode || 500;
let errorMessage = error.message || "Something went wrong!";
res.status(errorStatusCode).json({message: errorMessage, success: false});

}

module.exports = errorHandler

Integrating AWS SDK for Image Uploads

In this section, we will defines an Express.js route for uploading images to an AWS S3 bucket. It uses the AWS SDK, along with several utility modules for authentication and file uploads. I have created a file named s3UploadImageRoute.js inside routes folder. First, let's import the required utility modules and setup aws-sdk.

const s3UploadImageRoute = require("express").Router();
const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");
const crypto = require("crypto");
const path = require("path");
const s3Upload = require("../utils/s3ImageUpload");
const {islogin} = require("../utils/loginHandeler");
const bucketURL = "https://pblog-images-bucket.s3.ap-southeast-2.amazonaws.com";

const client = new S3Client({
  region: "ap-southeast-2",
  credentials: {
    accessKeyId: process.env.AWS_S3_ACCESS_KEY,
    secretAccessKey: process.env.AWS_S3_SECRET_ACCESS_KEY,
  },
});

In above code, first we have set up an Express Router for handling routes related to S3 image uploads. The S3Client is used to communicate with the S3 service, while PutObjectCommand represents the command to upload an object (in this case, an image) to the S3 bucket.

crypto: Used for generating unique filenames for the images by creating a random string (to avoid overwriting files with the same name).

path: Used for extracting file extensions to properly name the uploaded image files.

s3Upload: Imports a pre-configured Multer instance for handling the file upload (defined earlier).

islogin: A custom utility function that checks if the user is logged in before allowing access to the image upload route. This ensures that only authenticated users can upload images.

bucketURL: This constant stores the base URL of the S3 bucket where images will be uploaded. Once an image is successfully uploaded, you can append the image’s unique filename to this URL to create the full link for accessing the image.

client: an S3Client instance to interact with the S3 bucket configured with Region, Credentials where we have used previously created IAM user's accessKeyId and secretAccessKey stored in environment variables.

Now, let's define the POST route for uploading an image to an S3 bucket that processes the uploaded file, and send it to AWS S3.


s3UploadImageRoute.post("/", islogin, s3Upload.single("s3Image"), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({
      message: "No image selected",
      success: false,
    });
  }


const fileExt = path.extname(req.file.originalname);
  const fileName = `${crypto.randomBytes(16).toString("hex")}.${fileExt}`;

  const input = {
    Bucket: "pblog-images-bucket",
    Key: fileName,
    Body: req.file.buffer,
  };

  const command = new PutObjectCommand(input);
  try {
    const response = await client.send(command);
    if (response.$metadata.httpStatusCode !== 200) {
      throw new Error("Failed to upload image to s3 bucket");

    }

    res.json({ imageURL: `${bucketURL}/${fileName}`, success: true });
  } catch (er) {
    console.log(er);
    res.status(500).json({ message: er.message, success: false });
  }
});

module.exports = s3UploadImageRoute;

s3Upload.single("s3Image") uses Multer to handle the file upload, expecting a single file with the field name s3Image. If no file is provided, the server responds with a 400 Bad Request status and an error message stating, No image selected. fileExt extracts the file extension from the uploaded file (e.g., .jpg, .png) using path.extname(). fileName generates a unique filename by combining a random 16-byte hexadecimal string (via crypto.randomBytes()) with the original file extension. This ensures that every file has a unique name, preventing conflicts if two users upload files with the same name. command use PutObjectCommand to create a command with the input data. This command is responsible for telling AWS S3 to upload the file. client.send(command) sends the upload command to AWS S3 which returns a response object.
If the upload is successful, the server responds with a JSON object containing the URL of the uploaded image (constructed by appending the fileName to the bucketURL) and a success flag (success: true).
Lastly, we need to configure our s3UploadImageRoute in app.js file as following:

const s3UploadImageRoute = require("./routes/s3UploadImageRoute");
const errorHandler = require("./utils/errorHandler");
app.use(express.json());

app.use("/aws-s3-upload-image", s3UploadImageRoute);
app.use("/", rootRoute);

app.use("/*", (req,res)=>{
  res.render("404");
})

app.use(errorHandler);

app.listen(PORT, () => console.log(`Server is running on ${PORT} `));

Frontend Setup for Image Uploads

In this section, we will create a UI where user can choose image to upload. Once the upload is successful, user will get the image link in markdown format ([alt text](image_url)) and button to copy the URL.

<div class="image-upload-toolbar">
    <label title="Upload image" class="upload-image"><svg class="icons"
            style="width:20px;height:20px; margin:3px 0 0 2px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor"
                d="M20 5H4v14l9.292-9.294a1 1 0 011.414 0L20 15.01V5zM2 3.993A1 1 0 012.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 01-.992.993H2.992A.993.993 0 012 20.007V3.993zM8 11a2 2 0 110-4 2 2 0 010 4z">
            </path>
        </svg>
        <input type="file" id="image-upload-field" accept="image/*"></label>
    <div style="width: 90%; display:flex; align-items: center" aria-live="polite">
        <input data-testid="markdown-copy-link" type="text" style="width:80%; max-width:360px;" id="image-url"
            readonly="" placeholder="Select image to get image url" value="">
        <button type="button" id="copy-btn" title="Copy" class="btn btn-outline" style="display: none;">
            <svg class="icons" style="width:20px;height:20px; margin-right:5px;" id="copy-icon" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path fill="currentColor"
                    d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z">
                </path>
            </svg>
        </button>
    </div>
</div>

In above code, we have<input type="file"> with SVG image icon that allows users to upload an image, input field to display the URL of the uploaded image or error message if there is any and a button with copy icon for coping the image URL to the clipboard once the image is uploaded.

Now, we will write some javascript code for uploading the selected image to the backend, displaying the image URL in the text input field, allowing users to copy the URL to the clipboard and handling errors if there is any.

<script>
    const copyButton = document.getElementById("copy-btn");
    const url = document.getElementById("image-url");
    const imageInput = document.getElementById("image-upload-field");
    const uploadImage = async (URL, file) => {
        const formData = new FormData();
        formData.append("s3Image", file);
        const res = await fetch(URL, {
            method: "post",
            body: formData
        })
        const result = await res.json();
        return result;
    }
    imageInput.addEventListener("change", async (e) => {
        copyButton.style.display = "none";
        const selectedImage = e.target.files[0];
        if (!selectedImage) {
            url.value = "No image selected";
            return
        }
        url.value = "Uploading...";
        try {
            const result = await uploadImage("/aws-s3-upload-image", selectedImage);
            if (!result?.success) {
                throw new Error(result?.message || "Failed to upload")
            }
            url.value = `![Image description](${result?.imageURL})`
            copyButton.style.display = "block";
        } catch (error) {
            url.value = error.message
        }
    })
    copyButton.addEventListener("click", async () => {
        const urlValue = url?.value;
        try {
            await navigator.clipboard.writeText(urlValue);
            url.select();
        } catch (er) {
            console.log(er.message)
        }
    })
</script>

Conclusion

Adding image upload functionality to a web app is a powerful feature that enhances user experience and allows for richer content creation. By integrating AWS S3 with Node.js, Multer, and a user-friendly front end, I've streamlined the process of uploading images, generating URLs, and embedding them into blog posts. This approach not only simplifies image handling but also makes your web app more versatile and user-friendly. I hope this guide helps you implement similar functionality in your projects. Happy coding!

Find me on LinkedIn

How to upload image using multer and Express.js

Madhav Pandey — Sat, 13 Jul 2024 23:02:16 +0000

In this blog post we will learn to upload image using multer. multer is a middleware of NodeJS to handle file upload.

Instalation

npm install multer

Frontend

<div class="form-wrapper">
<h3>Upload Profile Picture</h3>

<div class="main">
<form action="/upload" method="POST" enctype="multipart/form-data">

<input type="file" accept="image/*" id="imageInput"  name="userProfile" />
<button type="submit" id="submit" class="btn btn-primary">Upload</button>
</form>

<div class="image-preview">
<img id="imageOutPut"  />
<p id="imageName"></p>
</div>

</div>

Upload preview

Following code will enable the preview of choosen image


let imageInput = document.getElementById("imageInput");
let imageOutput = document.getElementById("imageOutPut");
let imageName = document.getElementById("imageName");
imageInput.onchange = (ev)=>{
    imageOutput.alt = "preview";
    imageOutput.src = URL.createObjectURL(ev.target.files[0]);
    imageName.innerHTML = `<b> ${ev.target.files[0].name} </b>`
    imageOutput.onload = ()=>{
        URL.revokeObjectURL(imageOutput.src);
    }
}

Backend

We have to setup basic multer configuration which includes where do we want to save uploaded image, what name do we want to set up. We can filter the file as well and we can set the file size limit.

//fineName: fileUpload.js

 const multer = require("multer");
const path =  require("path");

const upload = multer({
    limits:800000,
    storage: multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,"upload/images")
},
filename:(req,file,cb)=>{
    let ext = path.extname(file.originalname);
cb(null,`${someUniqueName}.${ext}`)
}
    }),

    fileFilter:(req,file,cb)=>{
        const allowedFileType = ["jpg", "jpeg", "png"];
        if(allowedFileType.includes(file.mimetype.split("/")[1])){
            cb(null,true)
        }else{
            cb(null,false)
        }
    }

})
module.exports = upload;

Explationation of above code

multer take 3 objects limits, storage and fileFilter as a parameter. storagehave 2 parameter which are diskStorage and give full control on storing file to disk and filename.

Now, we can export this as a middleware and we can use to upload image as follow:

Route setup to handle uploaded file

As our frontend form will hit the endpoint /upload we have to setup our route to handle this endpoint which has image in it plus we need to require the middleware that we created.

//fileName: route.js

const express = require ("express");
const router = express.Router();
const upload = require("./fileUpload");


router.post("/upload/",  upload.single("userProfile"),(req,res)=>{

    if(!req.file){
        return res.redirect("/")
    }
    else{   

        let filePath = `images/${req.file.filename}`;
       res.render("image",{
        filePath
       }) 
    }
})

upload.single() will handle single image came from request and saved it to specified folder. The image is saved to upload/images folder.
Now, we have to make upload folder static so that images saved there can be served to the frontend and file path will be images/${req.file.filename} we can save this imageURL to the database as well.

//fileName:app.js

const route = require("./route");
const app = express();
const PORT = process.env.PORT || 8000

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


//router connection
app.use("/", route);



//uses of public folder

app.use(express.static(path.join(__dirname,"/public")))
//app.use(express.static(path.join(__dirname,"/upload")))
app.use(express.static(`${__dirname}/upload`))


//init handlebars
app.engine("handlebars", handlebars());

app.set("view engine", "handlebars");


app.listen(PORT,()=>console.log(`Server is running on ${PORT}`))

This way you can upload image to the server using Expressjs with the help of multer.

Thanks for reading.

How to build a Todo app with Typescript

Madhav Pandey — Tue, 09 Jul 2024 12:47:20 +0000

In this blog post, we will build a to-do app using typescript. The app allows users to add, delete, and update tasks, and users can mark completed tasks or unmark them. We will follow the Model, View, Controller (MVC) design pattern. Here is the link for the app Todo app with typescript. We will use vite to quickly set up the typescript project. Let's get started!

Setup typescript project using `vite`

Run the following command in the terminal

npm create vite@latest

It will ask you to enter the project name. we can say Typescript-todo-app. We will be using just typescript in this project so, in Select a framework prompt we need to choose Vanilla. In the next prompt, we need to choose TypeScript. Then, Vite will setup the project for us. To run the project run the following command in the terminal:

cd Typescript-todo-app
npm install
npm run dev

This will run the typescript-configured project. We can delete all unwanted files. I have used bootstrap and uuid to generate a unique id for each task item. So, let's install these packages and import them into the main.ts file

npm install bootstrap uuid

import "bootstrap/dist/css/bootstrap.min.css";
import { v4 as uuid } from "uuid";

Our project files and folders tree looks like the following:

Typescript-todo-app
├── public
├── src
│   ├── controller
│   │   └── TaskListController.ts
│   ├── model
│   │   ├── TaskItem.ts
│   │   └── TaskList.ts
│   ├── view
│   │   └── TaskListView.ts
│   └── main.ts
├── index.html
└── tsconfig.json

Creating model for TaskItem and TaskList

TaskItem

In the model folder create a file TaskItem.ts. In this file, we will define a model for a single task. A single task item will have the following properties

Unique id for that we will be using uuid library
task actual description of the task itself
completed a boolean value indicating whether the task is completed or not, which value will be false by default and can be changed latter

export interface SingleTask {
  id: string;
  task: string;
  completed: boolean;
}

export default class TaskItem implements SingleTask {
  constructor(
    private _id: string = "",
    private _task: string = "",
    private _completed: boolean = false
  ) {}
  get id(): string {
    return this._id;
  }

  set id(id: string) {
    this._id = id;
  }

  get task(): string {
    return this._task;
  }
  set task(task: string) {
    this._task = task;
  }

  get completed(): boolean {
    return this._completed;
  }
  set completed(completed: boolean) {
    this._completed = completed;
  }
}

Here, first, we have defined an interface for a SingleTask. The interface provides the syntax for classes to follow. Any classes implementing a particular interface have to follow the structure provided by that interface.
Then, we have defined a class named TaskItem that implements the SingleTask interface. This means that the TaskItem class has to have all properties defined in the interface.
The constructor allows us to set the value for id, task, and completed when creating a new TaskItem instance. Plus, we've also defined getter and setter methods for each property. Getters allow us to retrieve the current value of the property, while setters ensure that any changes to the property are handled appropriately. We will see these in action while editing tasks and toggling task status.

TaskList

TaskList.ts will be responsible for managing the collection of TaskItem which includes retrieving tasks, adding, deleting, updating tasks, saving collection of tasks in localStorage, loading tasks from localStorage, and filtering tasks.

import TaskItem from "./TaskItem";

interface AllTask {
  tasks: TaskItem[];
  load(): void;
  save(): void;
  clearTask(): void;
  addTask(taskObj: TaskItem): void;
  removeTask(id: string): void;
  editTask(id: string, updatedTaskText: string): void;
  toggleTaskChange(id: string): void;
  getTaskToComplete(): TaskItem[];
  getCompletedTask(): TaskItem[];
}

export default class TaskList implements AllTask {
  private _tasks: TaskItem[] = [];

  get tasks(): TaskItem[] {
    return this._tasks;
  }

  load(): void {
    const storedTasks: string | null = localStorage.getItem("myTodo");
    if (!storedTasks) return;

    const parsedTaskList: {
      _id: string;
      _task: string;
      _completed: boolean;
    }[] = JSON.parse(storedTasks);
    parsedTaskList.forEach((taskObj) => {
      const newTaskList = new TaskItem(
        taskObj._id,
        taskObj._task,
        taskObj._completed
      );

      this.addTask(newTaskList);
    });
  }

  save(): void {
    localStorage.setItem("myTodo", JSON.stringify(this._tasks));
  }

  clearTask(): void {
    this._tasks = [];
    localStorage.removeItem("myTodo");
  }

  addTask(taskObj: TaskItem): void {
    this._tasks.push(taskObj);
    this.save();
  }

  removeTask(id: string): void {
    this._tasks = this._tasks.filter((task) => task.id !== id);
    this.save();
  }

  editTask(id: string, updatedTaskText: string): void {
    if (updatedTaskText.trim() === "") return;

    const taskToUpdate = this._tasks.find((task) => task.id === id);
    if (!taskToUpdate) return;
    taskToUpdate.task = updatedTaskText;
    this.save();
  }
  toggleTaskChange(id: string): void {
    const taskToUpdateChange = this._tasks.find((task) => task.id === id);
    if (!taskToUpdateChange) return;
    taskToUpdateChange.completed = !taskToUpdateChange.completed;
    this.save();
  }
  getCompletedTask(): TaskItem[] {
    const completedTask = this._tasks.filter((task) => task.completed);
    return completedTask;
  }

  getTaskToComplete(): TaskItem[] {
    const taskToComplete = this._tasks.filter((task) => !task.completed);
    return taskToComplete;
  }
}

In the above code, first, we have imported the TaskItem class and then defined an interface AllTask. This interface outlines the methods a TaskList class should implement to manage tasks.
Inside the TaskList class, we have private property _tasks which holds an array of TaskItem.
The load method attempts to retrieve a serialized list of tasks from local storage with the key "myTodo".
If data is found, it parses the JSON string back into an array of objects with properties matching TaskItem's structure. It then iterates through the parsed data and creates new TaskItem objects, adding them to the internal _tasks array using the addTask method.
The save method serializes the current _tasks array into a JSON string and stores it in localStorage with the key "myTodo".

clearTask: This method removes all tasks from the internal list and clears the associated data from localStorage.

addTask: This method adds a new TaskItem object to the beginning of the internal _tasks array and calls the save method to persist the change.

removeTask: This method takes an id as input and filters the _tasks array, keeping only tasks where the id property doesn't match the provided id. It then calls save to persist the change.

editTask: This method takes an id and a updatedTaskText as input. It first checks if the updatedTaskText is empty (trimmed) and returns if so.
It then finds the task with the matching id using the find method. If no task is found, it returns. Finally, it updates the task property of the found task object with the provided updatedTaskText and calls save to persist the change.
toggleTaskChange: This method takes an id as input. It finds the task with the matching id and flips the value of its completed property (i.e., marks it as completed if pending or vice versa). Finally, it calls save to persist the change.

getCompletedTask: This method returns an array containing only the tasks where the completed property is set to true (completed tasks).

getTaskToComplete: This method returns an array containing only the tasks where the completed property is set to false (pending tasks).

Creating a controller for TaskList

Now, let's create a file named TaskListController.ts inside the controller folder. This class acts as a bridge between view and modal as it interacts with model based on user interaction through the view component which we will create later.

First of all, let's import TaskItem and TaskList classes from the model and define an interface for TaskListController.

import TaskItem from "../model/TaskItem";
import TaskList from "../model/TaskList";

interface Controller {
  getTaskList(): TaskItem[];
  addTask(newTask: TaskItem): void;
  deleteTask(taskId: string): void;
  editTask(taskId: string, updatedTaskText: string): void;
  loadTask(): void;
  clearTask(): void;
  saveTask(): void;
  toggleTaskChange(taskId: string): void;
  getPendingTask(): TaskItem[];
  getCompletedTask(): TaskItem[];
}

Now, create a class TaskListController that implements the Controller interface. This ensures the class provides all the functionalities defined in the interface.


export default class TaskListController implements Controller {
  private _taskList: TaskList = new TaskList();

  constructor() {

    this.loadTask();
  }

  getTaskList(): TaskItem[] {
    return this._taskList.tasks;
  }

  addTask(newTask: TaskItem): void {
    this._taskList.addTask(newTask);
  }

  deleteTask(taskId: string): void {
    this._taskList.removeTask(taskId);
  }

  editTask(taskId: string, updatedTaskText: string): void {
    this._taskList.editTask(taskId, updatedTaskText);
  }

  getCompletedTask(): TaskItem[] {
    const completedTask = this._taskList.getCompletedTask();
    return completedTask;
  }

  getPendingTask(): TaskItem[] {
    const pendingTask = this._taskList.getTaskToComplete();
    return pendingTask;
  }

  clearTask(): void {
    this._taskList.clearTask();
  }
  loadTask(): void {
    this._taskList.load();
  }
  saveTask(): void {
    this._taskList.save();
  }

  toggleTaskChange(taskId: string): void {
    this._taskList.toggleTaskChange(taskId);
  }
}

Inside the class, a private property _taskList is declared and initialized with a new instance of the TaskList class. This _taskList object handles the actual storage and manipulation of tasks.
The constructor gets called whenever a new TaskListController object is created.
Inside the constructor, it calls the loadTask method, to retrieve any previously saved tasks from persistent storage and populate the internal _taskList object.

The class defines several methods each of these methods simply calls the corresponding method on the internal _taskList object. For instance, getTaskList calls this._taskList.tasks to retrieve the task list, addTask calls this._taskList.
By delegating the work to the _taskList object, the TaskListController acts as a facade, providing a convenient interface for interacting with the task management functionalities.

Creating a view for TaskList

Let's create a file named TaskListView.ts inside a folder view. We will create a class HTMLTaskListView, which is responsible for rendering the tasks on the web page and managing user interactions. First, let's create an interface for this class.

import TaskItem from "../model/TaskItem";
import TaskListController from "../controller/TaskListController";

interface DOMList {
  clear(): void;
  render(allTask: TaskItem[]): void;
}

In the above interface DOMList, we only have two methods. These two methods will be public and are responsible for rendering tasks and clearing all tasks.
Now let's look at HTMLTaskListView class.


export default class HTMLTaskListView implements DOMList {
  private ul: HTMLUListElement;
  private taskListController: TaskListController;
  constructor(taskListController: TaskListController) {
    this.ul = document.getElementById("taskList") as HTMLUListElement;
    this.taskListController = taskListController;

    if (!this.ul)
      throw new Error("Could not find html ul element in html document.");
  }

  clear(): void {
    this.ul.innerHTML = "";
  }

  private createTaskListElement(task: TaskItem): HTMLLIElement {
    const li = document.createElement("li") as HTMLLIElement;
    li.className = "list-group-item d-flex gap-3 align-items-center";
    li.dataset.taskId = task.id;

    const checkBox = this.createCheckBox(task);
    const label = this.createLabel(task);
    const editTaskInput = this.createEditTaskInput();
    const [saveButton, editButton] = this.createEditAndSaveButton(
      editTaskInput,
      label,
      task
    );
    const deleteButton = this.createDeleteButton(task);

    li.append(
      checkBox,
      editTaskInput,
      label,
      editButton,
      saveButton,
      deleteButton
    );
    return li;
  }

  private createCheckBox(task: TaskItem): HTMLInputElement {
    const checkBox = document.createElement("input") as HTMLInputElement;
    checkBox.type = "checkbox";
    checkBox.checked = task.completed;
    checkBox.addEventListener("change", () => {
      this.taskListController.toggleTaskChange(task.id);
    });
    return checkBox;
  }

  private createEditTaskInput(): HTMLInputElement {
    /// input field to edit task
    const editTaskInput = document.createElement("input") as HTMLInputElement;
    editTaskInput.hidden = true;
    editTaskInput.type = "text";
    editTaskInput.className = "form-control";
    return editTaskInput;
  }

  private createLabel(task: TaskItem): HTMLLabelElement {
    const label = document.createElement("label") as HTMLLabelElement;
    label.htmlFor = task.id;
    label.textContent = task.task;
    return label;
  }

  private createEditAndSaveButton(
    editTaskInput: HTMLInputElement,
    label: HTMLLabelElement,
    task: TaskItem
  ): HTMLButtonElement[] {
    const saveButton = document.createElement("button") as HTMLButtonElement;
    saveButton.hidden = true;
    saveButton.className = "btn btn-warning btn-sm";
    saveButton.textContent = "Save";

    const editButton = document.createElement("button") as HTMLButtonElement;
    editButton.className = "btn btn-success btn-sm";
    editButton.textContent = "Edit";

    saveButton.addEventListener("click", () => {
      const updatedTaskText = editTaskInput.value;
      task.task = updatedTaskText;
      this.taskListController.editTask(task.id, updatedTaskText);
      saveButton.hidden = true;
      editButton.hidden = false;
      editTaskInput.hidden = true;
      this.render(this.taskListController.getTaskList());
    });

    editButton.addEventListener("click", () => {
      saveButton.hidden = false;
      editTaskInput.hidden = false;
      editTaskInput.value = task.task;
      label.innerText = "";
      editButton.hidden = true;
    });

    return [saveButton, editButton];
  }

  private createDeleteButton(task: TaskItem): HTMLButtonElement {
    const deleteButton = document.createElement("button") as HTMLButtonElement;
    deleteButton.className = "btn btn-primary btn-sm";
    deleteButton.textContent = "Delete";

    deleteButton.addEventListener("click", () => {
      this.taskListController.deleteTask(task.id);
      this.render(this.taskListController.getTaskList());
    });
    return deleteButton;
  }

  render(allTask: TaskItem[]): void {
    this.clear();

    allTask.forEach((task) => {
      const li = this.createTaskListElement(task);
      this.ul.append(li);
    });
  }
}

Constructor and Initialization

The constructor initializes the HTMLTaskListView class. It sets up essential properties and ensures that the necessary DOM elements are available.

constructor(taskListController: TaskListController) {
  this.ul = document.getElementById("taskList") as HTMLUListElement;
  this.taskListController = taskListController;

  if (!this.ul)
    throw new Error("Could not find html ul element in html document.");
}

The properties taskListController is an instance of TaskListController that manager the tasks and ul is a reference to the HTML unordered list element where tasks will be displayed.

Clearing the TaskList

The clear method removes all child elements from the ul element, effectively clearing the task list displayed on the webpage.

clear(): void {
  this.ul.innerHTML = "";
}

Creating Task List Elements

createTaskListElement(task: TaskItem): HTMLLIElement creates an individual task item element (li) and appends various components such as checkboxes, labels, edit inputs, and buttons and we have methods for each of these components.
createEditTaskInput(): HTMLInputElement generates an input field used for editing the task description, initially hides the input field, and will show when the user clicks on Edit button.
createLabel(task: TaskItem): HTMLLabelElement creates a label element to display the task description.
createEditAndSaveButton(editTaskInput: HTMLInputElement, label: HTMLLabelElement, task: TaskItem): HTMLButtonElement[] generates buttons for editing and saving task descriptions and manages their visibility and actions.
createDeleteButton(task: TaskItem): HTMLButtonElement creates a delete button and when clicked removes tasks from the list.

Rendering the Task List

render method takes an array of TaskItem representing all tasks to be displayed, clears the current task list, and populates it with the provided tasks.

Creating an add task form

So far, we have created a Model, View, and Controller for our Todo app. Now, it's time to look into index.html page. Where we will create a form where users can write a task and add it to our to-do app plus we will create buttons to show completed tasks, tasks to complete, and clear all tasks.

<body>
    <div class="container" style="max-width: 800px;">

<h2>Todo list app with TypeScript</h2>
<form class="m-3" id="todo-form">
  <div class="form-group p-2 d-flex">
    <input name="new-todo" class="form-control" type="text" id="new-todo" placeholder="Add new todo"/>
    <button type="submit" class="btn btn-primary mx-2">Add</button>
  </div>
</form>


<section  style="max-width: 600px;">


  <div class="btn-group my-2" role="group" aria-label="Basic mixed styles example">
    <button type="button" id="all-task" class="btn btn-danger">All Tasks</button>
    <button type="button" id="completed-task" class="btn btn-warning">Completed Task</button>
    <button type="button" id="task-to-complete" class="btn btn-success">Task To Complete</button>
    <buttonc type="button" id="clear-btn" class="btn btn-secondary">Clear All</button>
  </div>

<ul id="taskList" class="list-group">

</ul>

</section>

    </div>

  </body>

Connecting Model, View, Controller

In, MVC architecture, View captures user interaction such as new task is added, the delete button is clicked, and sends them to the Controller. Then, the Controller acts as an intermediary between the Model and the View. It updates the Model such as adding a new task to the task list, deleting a task from the list, or updating a single task. We have already created a Model, View, and Controller. Now let's connect them together.
In main.ts file let's import the required classes and initialize Controller and View.

Importing and Initializing the Controller and View

import TaskItem from "./model/TaskItem";
import TaskListController from "./controller/TaskListController";
import HTMLTaskListView from "./view/TaskListView";

const taskListController = new TaskListController();
const taskListView = new HTMLTaskListView(taskListController);

taskListController: An instance of TaskListController that manages the task data and business logic.
taskListView: An instance of HTMLTaskListView that takes the taskListController as an argument. This view will handle rendering tasks on the webpage.

Accessing DOM Elements

const todoForm = document.getElementById("todo-form") as HTMLFormElement;
const clearBtn = document.getElementById("clear-btn") as HTMLButtonElement;
const showCompletedTask = document.getElementById("completed-task") as HTMLButtonElement;
const showTaskToComplete = document.getElementById("task-to-complete") as HTMLButtonElement;
const showAllTask = document.getElementById("all-task") as HTMLButtonElement;

todoForm: The form where new tasks are added.
clearBtn: The button to clear all tasks.
showCompletedTask: The button to filter and display completed tasks.
showTaskToComplete: The button to filter and display pending tasks.
showAllTask: The button to display all tasks.

Initializing the Application

const initApp = () => {
  const allTask = taskListController.getTaskList();
  taskListView.render(allTask);
};

initApp()

initApp: A function that initializes the application by fetching all tasks from the controller and rendering them using the view. We have called the initApp function right away to ensure that the task list is rendered when the application loads.

Adding a New Task

if (todoForm) {
  todoForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(todoForm);
    const todoValue = formData.get("new-todo") as string;
    if (todoValue === null || todoValue?.toString().trim() === "") return;
    const newTask = new TaskItem(uuid(), todoValue.trim());

    taskListController.addTask(newTask);

    initApp();

    todoForm.reset();
  });
}

On submission, todoForm will do the following:

Prevent the default form submission behavior.
Extract the new task description from the form.
Validate the task description (non-empty and non-null).
Create a new TaskItem with a unique ID and the trimmed task description.
Add the new task to the controller.
Reinitialize the application to render the updated task list.
Reset the form.

Clearing All Tasks

clearBtn.addEventListener("click", () => {
  taskListController.clearTask();
  taskListView.clear();
});

Showing Completed Tasks

showCompletedTask.addEventListener("click", () => {
  const completedTask = taskListController.getCompletedTask();
  taskListView.render(completedTask);
});

Showing Tasks to Complete

showTaskToComplete.addEventListener("click", () => {
  const taskToComplete = taskListController.getPendingTask();
  taskListView.render(taskToComplete);
});

Conclusion

In Conclusion, our todo application built using the MVC architecture demonstrates a robust and maintainable structure for managing tasks. By breaking down the responsibilities into distinct components—Model, View, and Controller—the application achieves a clear separation of concerns, which enhances both scalability and maintainability.

How to Add Google Sign-In to Your Node.js Application

Madhav Pandey — Wed, 03 Apr 2024 12:09:33 +0000

I have recently added Sign in with Google feature in my NodeJS app P_Blog which allows users to quickly and easily login in using their existing Google account. Sign in with Googgle feature is very convenient as it is trusted and no need to create and memorize password. In this blog post, I would like explain how I implemented Sign in with Google feature in my nodejs app.
I have used Nodejs(Expressjs) and Express-handlebars in the app. The app already has traditional email/password login system. Now, let's get right into it.

Setup a Firebase Project

Go to the Firebase console, make sure you are signed in with your Google account
Click on "Add project" and give your project a descriptive name and follow the prompts to create the project
Navigate to the Authentication section in the sidebar and click on Sign-in method
Click on Add new provider, find Google in the list of provides and click on Enable
Go to your newly created project's Project settings, from General tab find your "SDK setup and configuration", and select "CDN"
Copy whole script, we need to download the Service Account JSON file for backend but for that we will come latter

Add `Continue with Google` button

We have set up the project, Now let's create a file googleLogin.handlebars in partials folder as we will use this button in login and signup pages. Following code will go in this file including copied project's SDK and configuration.

 <script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
  import {getAuth, GoogleAuthProvider, signOut, signInWithPopup} from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";


  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""

  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
const auth = getAuth(app)
</script>

I have used SVG google icon, here is html and css for that-


<style>
  .google-btn-container {
    background-color: rgb(66, 133, 244);
    color: rgb(255,
        255, 255);
    height: 50px;
    width: 240px;
    border: none;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
    font-size: 16px;
    line-height:
      48px;
    display: block;
    border-radius: 1px;
    transition: background-color 0.218s ease 0s, border-color 0.218s ease 0s, box-shadow 0.218s ease 0s;
    font-family:
      Roboto, arial, sans-serif;
    cursor: pointer;
    user-select: none;
    margin: .5rem 0;
  }

  .google-icon {
    width: 48px;
    height: 48px;
    text-align: center;
    display:
      block;
    margin-top: 1px;
    margin-left: 1px;
    float: left;
    background-color:
      rgb(255, 255, 255);
    border-radius: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>


<div class="google-btn-container">
  <span class="google-icon">

    <svg
      width="32px"
      height="32px"
      viewBox="0 0 32 32"
      data-name="Layer 1"
      id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      fill="#000000"
    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g><g id="SVGRepo_iconCarrier"><path
          d="M23.75,16A7.7446,7.7446,0,0,1,8.7177,18.6259L4.2849,22.1721A13.244,13.244,0,0,0,29.25,16"
          fill="#00ac47"
        ></path><path
          d="M23.75,16a7.7387,7.7387,0,0,1-3.2516,6.2987l4.3824,3.5059A13.2042,13.2042,0,0,0,29.25,16"
          fill="#4285f4"
        ></path><path
          d="M8.25,16a7.698,7.698,0,0,1,.4677-2.6259L4.2849,9.8279a13.177,13.177,0,0,0,0,12.3442l4.4328-3.5462A7.698,7.698,0,0,1,8.25,16Z"
          fill="#ffba00"
        ></path><polygon
          fill="#2ab2db"
          points="8.718 13.374 8.718 13.374 8.718 13.374 8.718 13.374"
        ></polygon><path
          d="M16,8.25a7.699,7.699,0,0,1,4.558,1.4958l4.06-3.7893A13.2152,13.2152,0,0,0,4.2849,9.8279l4.4328,3.5462A7.756,7.756,0,0,1,16,8.25Z"
          fill="#ea4435"
        ></path><polygon
          fill="#2ab2db"
          points="8.718 18.626 8.718 18.626 8.718 18.626 8.718 18.626"
        ></polygon><path
          d="M29.25,15v1L27,19.5H16.5V14H28.25A1,1,0,0,1,29.25,15Z"
          fill="#4285f4"
        ></path></g></svg>
  </span>

  <span class="google-text">
    Continue with Google

  </span>

</div>

Now, we need to add this in both Login and Signup page.


 {{> googleLogin}}

Send `userIdToken` to Backend

Once user click on Continue with Google button google displays a screen asking user to choose which account to use and outlining the permissions requested by the app. Upon user grants permission, Google provides a secure ID token which contains user information. We need to send this token to backend for verification. Once verified, we will navigate user to the home page.
Here is code for that,


const sendUserIdToken = async(userIdToken)=>{

  try{
   const res = await fetch("/googleLogin",{
    headers:{
"Content-Type":"application/json"
    },
    method:"POST",
    body: JSON.stringify({userIdToken})
  })
if(!res.ok){
  throw new Error("Error sending token")
}
const responseData = await res.json();
return responseData;

  }catch(er){
    console.log(er)
  }
}


const googleSignIn = async ()=>{

  try{
const proveder = new GoogleAuthProvider();
const result = await signInWithPopup(auth, proveder);
const userIdToken = await result.user.getIdToken();

if(userIdToken){
 const responseData = await sendUserIdToken(userIdToken);
 if(responseData?.success){
  window.location.href = "/"
 }
  }
  }catch(er){
    console.log(er)
  }


}


const googleBtn = document.querySelector(".google-btn-container");

googleBtn.addEventListener("click", googleSignIn);

In above code, we added click event in googleBtn which will initiate authentication with Google and obtain a user ID token upon successfull. sendUserIdToken sends token to the backend for verification and return response. If we have success response which we will setup in backend in a moment, user will redirect to homepage.

Token verification in the Backend

First of all, we need to download service-account-key.json file from Firebase console. For that go to your Project settings and from Service accounts tab download .json file. We need firebase-admin package as well which enables access to Firebase services from nodejs environment. To install run npm install --save firebase-admin in your terminal.

I have created googleLoginRoute inside routes folder and following code goes in that file:

const firebase = require("firebase-admin");
const serviceAccount = require("../service-account-key.json");
firebase.initializeApp({
  credential: firebase.credential.cert(serviceAccount),
});

const Users = require("../module/user");
const setUserDataInSession = require("../utils/setUserDataInSession");


const googleLoginRoute = require("express").Router();

googleLoginRoute.post("/", async (req, res) => {
  const { userIdToken } = req.body;
if(!userIdToken || typeof userIdToken !== "string"){
   return  res.status(400).json({success:false, error:"Missing or Invalid token"})
}

  try {
    const {name, picture, email} = await firebase.auth().verifyIdToken(userIdToken);

    const foundUser = await Users.findOne({email});

    if(!foundUser){
        const newUserObj ={
            name,
            email,
            authMethod:"Google",
            password:null,
            profileURL: picture
        }
    const newUser =  await new Users(newUserObj).save();
setUserDataInSession(req, newUser);
    } 
   setUserDataInSession(req, foundUser);
    res.status(200).json({ success: true, error: null });
  } catch (er) {
    console.log(er);
    res.status(401).json({ success: false, error: "Invalid Token" });
  }
});

module.exports = googleLoginRoute;

In above code, first, we setup firebase-admin. We imported Users module to save user information in database. We imported setUserDataInSession function which will set user information in session once user is verified.

When we got POST request at /googleLogin endpoint, first we validate the request body whether the userIdToken is present or not. Then, it attempts to verify the Google ID token using Firebase Authentication. If the token is valid, we extract the user's name, picture and email from the decoded token as we need these to save it to our database, if user is logging in for the first time.
If no user is found in the database with provided email, we create a new user and save user to database and set user data in the session. Finally, we send a success response to the frontend.

We are all set, now we just need to required this in app.js file to handle /googleLogin route as following

const googleLoginRoute = require("./routes/googleLoginRoute");

app.use("/googleLogin", googleLoginRoute);

Thank you for reading! I hope this guide was helpfull in integrating Google Sign-In into your Node.js application.

Building Dynamic Conversations: A Step-by-Step Guide to Implementing a Nested Comment System in Your Node.js Application

Madhav Pandey — Tue, 09 Jan 2024 06:31:43 +0000

This blog post is about adding nested comment system in nodejs application. I have built a blogging web application PBlog using Express.js and handlebar where user can create an account, login to the system and can write a post using markdown. Now, I am adding a nested comment system to this application. A nested comment system is a feature that allows users to comment on a post add replies to other comments and create a hierarchy of comments.

Now, let's create a file comment.js inside Model folder. In comment.js file we will define a schema for comments.

Comment schema

const {Schema,model} = require("mongoose");

const commentSchema = new Schema({

postedBy:{
    type: Schema.Types.ObjectId,
    required:true,
    ref:"Users"
},
postId:{
type:Schema.Types.ObjectId,
required:true,
ref:"posts"
},
text:{
    type:String,
    required:true
},
parentComment:{
    type:Schema.Types.ObjectId,
    ref:"comments",
    default:null
},
commentedAt:{
    type:Date,
default: Date.now()
}, 
replies:[{
    type: Schema.Types.ObjectId,
    ref: "comments"
}]

});
commentSchema.pre("find", function( next){
    this.populate({path:"replies",
populate:{path:"postedBy"}

})
    next()
})

const Comment = new model("comments", commentSchema);
module.exports = Comment;

In the above code:

postedBy: A reference to a user who posted that comment or reply
text: A required field representing the text content of the comment.
postId: A reference to a Post using its ObjectId.
parentComment: A reference to another comment (if it's a reply), defaulting to null for top-level comments.
commentedAt: The timestamp for when the comment was created, with a default value of the current date and time.
replies: An array of ObjectId references to other comments, forming a nested structure for comment replies.

Following code will pre-Populate Replies and user information for each reply:

commentSchema.pre("find", function( next){
    this.populate({path:"replies",
populate:{path:"postedBy"}

})
    next()
})

It is a Mongoose middleware using pre which runs before the find operation. It populates the replies field with actual comment objects, and user information for each reply when querying the database.

Finally, we create and export the Comment model to make it available for use in other parts of the application
Now, let's create a route to handle the submission of comment for a specific post. I have created a new file Comment.js in route folder. This file will handle all routes related to comments.

Route to post a comment

const commentRoute = require("express").Router()
const flash = require("connect-flash");
const {body, validationResult} = require("express-validator")
const {islogin} = require("../utils/loginHandeler")
const Comment = require("../module/comment");

commentRoute.post("/:postId",islogin,[body("comment").trim().escape().notEmpty().withMessage("Comment field can not be empty!")], async(req,res)=>{
    const errors = validationResult(req)
    const {postId} = req.params;

    if(errors.isEmpty()){
const {comment} = req.body;

let commentObj = {
    postedBy:req.session.uid,
    postId,
    text:comment, 
}
try{
 await new Comment(commentObj).save()
}catch(er){
    console.log(er.message)
}
    }else{

        req.flash("error", `Failed to post a comment`)
    }

    res.redirect(`/${postId}#comment-field`)
})

Here, we've:

Defined a route for handling comments
imported connect-flash for flash messages, express-validator for input validation, islogin is a middleware for checking user is logged in or not. Because user need to log in to post a comment, and Comment model
set up Post route to handle comment submissions
used express-validator to validate the comment input, ensuring it's not empty and escaping any potentially harmful characters
Saved comments in the database if there are no errors. If there is a validation error we've flashed an error message to be displayed Finally, the user is redirected to the same post.

Route to post a reply in a particular comment


commentRoute.post("/:commentId/reply/:postId", islogin,[body("replyText").trim().escape().notEmpty()], async(req,res)=>{
const {commentId, postId} = req.params;
    const errors = validationResult(req)
const {replyText} = req.body;
if(errors.isEmpty()){
    const replyObj = {
        postedBy:req.session.uid,
        postId,
        text:replyText,
        parentComment:commentId
    }
    try{ 
        const newReply = await new Comment(replyObj).save()
        await Comment.findOneAndUpdate({_id:commentId, postId},{$push:{replies:newReply._id}})
    } catch(er){
console.log(er.message)
req.flash("error", `Failed to post a reply`)
    }
}

res.redirect(`/${postId}#${commentId}`)

})

In the above route, we have two parameters, commentId and postId which are needed to identify where a particular reply belongs to. Again, we have used express-validator for the input validation and islogin middleware to check if the user is logged in or not. If there are no errors, first we have saved reply in a database with postId and its parentComment id. Then, replies field of the parent comment is updated. Finally, the user is redirected to the same post page.

Route to delete comment

The route to delete a comment will be similar to the route to post a reply. It will also have two parameters commentId and postId as we need to know which comment to delete.


commentRoute.post("/:commentId/delete/:postId", islogin, async(req,res)=>{
    const {commentId, postId} = req.params;

try{
    const comment = await Comment.findOne({_id:commentId, postId}).lean()

    if(comment && comment.postedBy.toString() === req.session.uid){
        await Comment.deleteMany({_id:{$in:comment.replies}})
         await Comment.deleteOne({_id:commentId})
    }else{
        req.flash("error", `Comment failed to delete`)
    }

}catch(er){
    console.log(er.message)

}

res.redirect(`/${postId}#comment-field`)

})

module.exports = commentRoute;

In the above code, first, we tried to find a comment using Comment.findOne() method with the specified commentId and postId. If the comment is found and the user who posted it matches the currently logged-in user, it proceeds with the deletion process. Because only the user who posted that particular comment can delete that comment. We will show our UI according to this later on. If the logged-in user is the owner of that comment a delete button will be shown otherwise not.
In our deletion process, it first deletes all replies associated with that particular comment
await Comment.deleteMany({_id:{$in:comment.replies}})
and then, it deletes the comment itself await Comment.deleteOne({_id:commentId}). If the deletion is successful, it redirects the user back to the post. If the comment is not found, or the user is not the owner of the post, it flashes an error message and redirects the user back to the post page.
Lastly, we have exported the CommentRoute and we will import and use it in app.js file

const commentRoute = require("./routes/comment");
app.use("/comment", commentRoute);

Now, let's look at what is happening in /${postId} route. This route is handled in route.js file.

router.get("/:postId",  async(req,res)=>{
     const{postId}  = req.params;

    try{
  const  post = await Posts.findById({_id: postId}).populate({path:"uid",select:"-password"}).lean();
const comments = await Comment.find({postId, parentComment:null}).sort({_id:1}).populate({path:"replies"}).populate({path:"postedBy", select:"-password"}).lean();
if(post){
      res.render("singlePost",{         
  post,
  comments,
 userStatus
   })
  }

}catch(er){
    console.log(er)
}

})

This route will send a single post to the user, first, it find a particular post with postId and then, It will find the top-level comment associated with that post and populate replies and postedBy a user information who posted that particular comment. userStatus will have currently logged-in user information if the user is logged-in otherwise it will return userStatus.login to false

Comment input User Interface

We have set up all routes related to comments. Now, it's time to work on frontend. First up all, we will create UI to post a comment. I've created -commentInput.handlebars inside partial folder of view directory. Following code goes inside this file:

   {{> message}}
<div class = "comment-wrapper" id="comment-field">

   <div class="user_pic">
        <img alt="user-pic" src="{{userStatus.profileURL}}" />
      </div>
  <div class = "comment-input" >
  <form action="/comment/{{post._id}}" method="post">

    <textarea rows = "5" placeholder="Enter your comment"  cols="40" name="comment"></textarea>
    <br>
    <button class="btn" type = "submit"> Submit </button>
    </form>

  </div>
</div>

Here, {{> message}} is a partial template that will show an error message if there is any, and I've used it in singlePost.handlebars as following:


{{#if userStatus.login}}
  {{> -commentInput }}
  {{/if}}

{{#if comments}}
{{> displayComment }}
{{else}}
<h5>No comments</h5>
{{/if}}

The comment input box will only be seen if the user is logged-in, and if the particular post has a comment, the comment will display. Now, we will see {{> displayComment}} partial template in detail.

Rendering comment

Let's create another file displayComment.handlebars in partial folder in view directory. displayComment.handlebars will do following:

Display comment and its reply recursively
If user is not logged-in only comment will be seen
If user is logged-in a Reply button should be there for user to put the reply
If user is logged-in and if there is any comment won by that user a Reply button as well as a Delete button should be there so that user would be able to delete that comment

Following lines of code will in displayComment.handlebars file:

<div class="comment">
{{#each comments}}

<div class = "single-cmt-card" id="{{this._id}}">
  <div class = "card-header">
   <div class="user_pic">
       <a href="/user?id={{this.postedBy._id}}">

        <img alt="user-pic" src="{{this.postedBy.profileURL}}" />
       </a>

      </div>
    <div class = "user-name">
      <b>{{this.postedBy.name}}</b>
            <span class="post_date"> {{formatDate this.commentedAt}}</span>

  </div>
  </div>
  <div class="card-body">
 {{this.text}}

    </div>



<div class = "action-btns"> 

{{#if (showBtns "reply")}}
<button class="reply-btn"> Reply 
  </button>
{{/if}}

  {{#if (showBtns "delete" this.postedBy._id)}}
  <form  action="/comment/{{this._id}}/delete/{{this.postId}}" method="post" >
  <button type="submit" class= "delete-btn"> Delete </button>
  </form>
  {{/if}}

</div>

{{#if (showBtns "reply")}}
 <div class = "reply-cmt">
  <form action="/comment/{{this._id}}/reply/{{this.postId}}" method="post">
      <textarea required class="reply-textarea" name="replyText" rows="3"  placeholder = 'Enter your reply'></textarea>
      <div class = "action-btns">
        <button type="submit"> Submit </button>
        <button type="button" class = "cancel-btn"> Cancel </button>

      </div>

  </form>
    </div>

{{/if}}
</div>



 {{#if this.replies}}
<div class="reply" style="margin-left: 5px; border-left: solid 1px var(--primary-text-color);">
    {{> displayComment comments = this.replies}}
</div>
{{/if}} 

{{/each}}

</div>

The above code will display comments and their replies recursively. formatDate and showBtns are helper functions to display the comment's relative time, and conditionally display buttons based on user permissions. Reply button triggers the display of a reply form for the comment which includes submit and cancel buttons to send or discard the reply. I've used a vanilla javascript to dynamically toggle the display of reply forms for individual comments. Delete button submits a form to delete the comment.

Helper functions

Now, let's look at these two helper functions in details. I have created helperFunctions.js file inside util folder and following code will go in that file:


const {userStatus} = require("./userStatusChecker");
const moment = require("moment");

const formatDate = (date) =>{
   return moment(date).fromNow()
}

const showBtns = (buttonType, userId) =>{
   const {uid, login} = userStatus
switch(buttonType){
   case "reply":
    return login
    case "delete":
        return login && uid === userId.toString();
        default:
        return false
}
}

module.exports = {formatDate, showBtns}

In above code, formatDate(date) formats a date into a more human-readable format, specifically using relative time expressions like "a few seconds ago", "5 minutes ago" etc. I've used moment library for that and used moment(date).fromNow() to generate a relative time.
showBtns(buttonType, userId) conditionally determines wheather to display buttons based on user login status and user ID. userStatus will retrieve user status from userStatusChecker module. For reply button type will return true if user is logged-in. For delete button type will return true if user is logged-in and current user id is matched with comment posted user id otherwise return false.
Finally, we need to register these helper functions in our app.js file

const {formatDate, showBtns} = require("./utils/helperFunctions");

app.engine("handlebars", handlebars({
  helpers:{
    formatDate,
 showBtns
  }
}));

In this way, I have added nested comment system in my app.
Finally, I would like to thank you for reading this post.

A Deep Dive into Password Reset Flows with Node.js and Express.js

Madhav Pandey — Wed, 13 Sep 2023 23:48:34 +0000

When it comes to web development and ensuring the security of user accounts, the password reset process is a critical component that should not be overlooked. Therefore, implementing a robust and secure password reset flow is a necessity for any web application that values user security and usability.

In this blog post, we will learn how to implement a robust password reset flow in your Node.js (Express.js) application. By the end, you'll have a comprehensive understanding of how to safeguard your users's accounts and provide them with a seamless password reset experience.

Below is the password reset flow diagram:

Now, let's break down what steps are involved in this process one by one:

Request for password reset: use can send a request for password reset by filling password reset form
Valid user information: The system will validate user exists or not
Send an email to the user with token: If the user exists, the system will send an email to the provided email ID with user id and a token which will expire within a certain time
Check if the token is valid or expired: When the user clicks on the sent link, the system will again verify if the token is valid or not and if the token is related to that particular user or not
Set the new password: If everything goes well, finally user will be given a password reset form where they can enter a new password
1. Request for password reset Once the user clicks on Forgot password link the server will get get request and send a form where the user can enter their email id. The following code goes in router.js file.

 //password reset route
router.get("/forgot-pass",  (req, res)=>{
    res.render("reset")
 })

Now, let's create reset.handlebars file where we will have the form

<div class="login-box">
 <div class="messages">
  {{>message}}
 </div>

  <form action="/password-reset" method="POST">
  <h2>Reset your password</h2>

    <div class="user-box">

      <input type="text" name="email" value="{{email}}" required>
      <label>Email address</label>
    </div>
<button type="submit">Send link</button>

  </form>

</div>

Once, the user enters their email id and hits Send link button the server will get post request at /password-reset endpoint.

Validating user information and sending an email with a link

This is the most time-consuming part of this process. We have to verify user information, set up nodemailer, generate a token, and save the token in the database plus send an email with the token and user id. This all process happens when the server receive post requeset from /password-reset endpoint

First, let's create tokenSchema in token.js file to save token with user information and an expiration time of 1 hour.

const mongoose = require("mongoose");
const{Schema, model}= mongoose;

const tokenSchema= new Schema({
    userId:{
        type:Schema.Types.ObjectId,
        require:true,
        ref:"Users"   
    },
    token:{
        type:String,
        require:true
    },
    createdAt:{
        type:Date,
        default:Date.now,
        expires:3600
    }
})

module.exports = new model("token",tokenSchema);

Now, let's create another file tokenHandeler.js file. Where we will write generating token, validating token and saving the token in database logic

const Token = require("../module/token");
const bcrypt = require("bcrypt");
const crypto = require("crypto");


const generateToken = async(id)=>{
let token = await Token.findOne({userId:id});
// delete already exits token
if(token){
    await Token.deleteOne({userId:id});
}

// generate token
const resetToken = crypto.randomBytes(32).toString("hex");

//hash reset token
const hashedToken =  await bcrypt.hash(resetToken,10)

// save token in database

await new Token({
    userId:id,
    token:hashedToken,
    createdAt:Date.now()
}).save()

return resetToken;

}



const isValidToken = async({token,id})=>{
    try{
        const savedToken = await Token.findOne({userId:id}).lean();
        //compare the token
        if(savedToken){
            const isValidToken = await bcrypt.compare(token,savedToken.token);
            return isValidToken;
        }else return false

    } catch(er){
        console.log("something went wrong..." )
    }

}



module.exports = {
    generateToken,
    isValidToken
}

In the above code, we have generateToken function which will generate a unique token with the help of the crypto package. We hashed that token and save it to database along with user id and we have isValidToken function which will take token and id and compare it with saved token and userID

Let's set up nodemailer. For that create a file sendEmail.js. The file will have the following code:

const nodemailer = require("nodemailer");

const sendEmail = (payload)=>{
const { email, subject, html}= payload

const transporter = nodemailer.createTransport({
    host:process.env.EMAIL_HOST,
    secure:true,
    port:465,
    auth:{
        user:process.env.EMAIL_USERNAME,
        pass:process.env.EMAIL_PASSWORD
    }
})

const mailOptions ={
from:"p.blog@pblog.online",
to:email,
subject:subject,
html:  html
}

transporter.sendMail(mailOptions,(error,info)=>{
    if(error){
        console.log(error)
    }else{
console.log(info);
    }

})

}

module.exports = sendEmail;

In the above code, we have sendEmail function. Inside that function we have set up nodemailer and using this function we can send an email to the user with the password reset link.

I have created a Zoho Mail Account. In my case host is smtp.zoho.com.au, user will be my Zoho mail and pass is Zoho application password.

Since we have set up nodemailer and token, now we are ready to handle post request came from /password-reset. In router.js file:

const express = require ("express");
const router = express.Router();
const sendEmail = require("./utils/sendEmail");
const {generateToken, isValidToken} = require ("./utils/tokenHandeler");
const flash = require("connect-flash");

// middleware fucntion to associate connect-flash on response
router.use((req,res,next)=>{
res.locals.message = req.flash();
next()
})

// password reset post route

router.post("/passport-reset", async (req,res)=>{
    const {email} = req.body;
    try{
let user = await Users.findOne({email});

if(user){
    const resetToken =  await generateToken(user._id);
    const link= `${req.protocol}://${req.get('host')}/password-reset-link?token=${resetToken}&id=${user._id}`;

// html for email
const html = `<b> Hi ${user.name}, </b>
<p> You requested to reset your password. </p>
<p> Please, click the link below to reset your password. </p>
<a href = "${link}"> Reset Password </a>
`

console.log(link);

const payload = {
    email,
    subject:"Password reset request",
    html
}

sendEmail(payload);


req.flash("success", "Check your email for the password reset link")
    res.redirect("/login")
}else{
    req.flash("error","We could not find any user, please check your email address again")
res.redirect("/forgot-pass")
}
    }catch(er){
        console.log(er);
        req.flash("error","Something went wrong, please try again later!")
        res.redirect("/forgot-pass")
    }
})

Let's break it down above code. First, we looked for user associated with an email id provided by user. If user is not found then we have redirected user to /forgot-pass route with an error message. If user is found we generate a token using generateToken function and we create a dynamic link where we have token and user_id in the link. We send an email to the user by using sendEmail function. Then, we have redirected user to /login router with success message.

The password reset link will look like this:

http://localhost:8000/password-reset-link?token=e51d95cd5feba716fbe54163275ff874795fe7b52a625404a7e5adf00d3b2c22&id=62cd89d53e61de6c5bfbfe02

On success, user will get an email where they can click to get the form where they can enter new password and send it back to server.

I have used connect-flash to send message whenever a user is redirecting to specified route. I have created message.handlebars file inside partial folder and following code is in that file:

  {{#if message.success}}
  <div class="messages success-message">
      {{message.success}}
  </div>

    {{/if }}

   {{#if message.error}}
  <div class="messages error-message">
      {{message.error}}
  </div>
    {{/if }}

This will show any error or success message to the user.

Validating the token and sending password-reset form When user clicks on that reset link, server will get get request on /password-reset-link. Let's handle this route together :)

//password reset form route
router.get("/password-reset-link",  async (req,res)=>{

if(req.query && req.query.token && req.query.id){
    //check token and id are valid
const{token,id} = req.query;

try{
   const isValid = await isValidToken({token,id});
    if(isValid){
res.render("newPasswordForm",{
    token,
    id,

})
    }else{
res.json({message:"Invalid token or link is expired"})
    }

}catch(er){
    console.log(er)
res.json({message:"something went wrong, please try again latter"})
}


}else{
    res.redirect("/login")
}

})

In the above code, we have extracted the token and user_id from the link. We validate token and user_id with the help of isValidToken function that we have created in tokenHandeler.js file. If the link is valid newPasswordForm is rendered and we have sent token and user_id as well. These are needed again when we get post request, once user enters new password and submit the form.

One important thing to remember here is that user need to click on that link within 1hour as our token expires in 1hour.
If user tried to modify the URL or click the link after 1hour, user would not be able to see the form and user will see an error message

Now, let's create a file newPasswordForm.handlebars file inside views folder.


<div class="main-wrapper">

<div class="login-box">
{{#if errorMessage}}
    <div class="messages error-message">
    {{errorMessage}}
    </div>
    {{/if}}
  <form action="/newPassword?token={{token}}&id={{id}}" method="POST">  
  <h2>Enter new password</h2>

<div class="user-box">
<input  type="password" name="password"  required>
<label > Password </label>
</div>

<div class="user-box">
<input type="password" name="repeatPassword"  required>
<label > Repeat Password </label>
</div>
<button type="submit"> Change Password</button>

  </form>

</div>

</div>

This form will only shows up if the link is valid.

Setting the new password Finally, we have reached to the final step of password reset process. Once the user clicks on the link and if the link is valid and not expired user can have access to new password form where they can enter new password and submit. Once form is submitted, server will get post request in /newPasswor route. Let's handle this post request.

//accept new password and save it to database
router.post("/newPassword",  async(req,res)=>{

    if(req.query.token && req.query.id){
const {token, id}= req.query;
let isValid;
try{

    isValid = await isValidToken({token,id});
}catch(er){
    console.log(er)
}
if(isValid){
const {password, repeatPassword}=req.body;

if(password.length<6){

   return  res.render("newPasswordForm",{
    token,
    id,
    errorMessage:"Password need to have minimum 6 characters"
   })
}
if (password!== repeatPassword){
   return  res.render("newPasswordForm",{
    token,
    id,
    errorMessage:" Password is not match."
   })
}


if(password == repeatPassword && password.length>6){
try{
    let hashedPassword = await bcrypt.hash(repeatPassword,10);
    let update_success = await Users.updateOne({_id:id},{password:hashedPassword});
    if(update_success){
        req.flash("success", "password is changed successfully.")
res.redirect("/login");
    }
}catch(er){
    console.log(er)
}
}
} else{
    res.json({message:"Invalid token or link is expired"})  

}

} else{
    res.json({message:"Something went wrong! try again latter"})  
}
    })

Let's break down above code. Again, we have extracted token and user_id that came from req.query and we have validated that token one more time. If we have a valid token, we have extracted password and repeatPassword from req.body and we have validate the password. If the password is not valid we have render the same newPasswordForm with token, id and related errorMessage.
If the password requirement is matched, new password is hashed and saved it to the database. Finally, we redirect user to login page with success message.

Now, user can login using their new password.

Thank you for taking the time to read this blog post, and I hope you find it valuable in your web development journey. If you have any questions or suggestions, please feel free to reach out. Happy coding!

Step-by-Step Guide: Hosting a Node.js App on AWS EC2 with Domain Name and SSL Certificate

Madhav Pandey — Tue, 22 Aug 2023 02:20:23 +0000

Host your nodejs application on AWS EC2 instance with Domain name

This blog post is about hosting your nodejs application on AWS EC2 instance with domain name and secured it with the help of certbot. Let's get started.

Create Ec2 instalce by choosing linux 2s
Leave everything default and click launch instance
Go to instances and click your instace and click on connect.
Then, you will see option to connect to instance. If you want to access instance terminal from web-browser you can click on Connect button of EC2 Instance Connect. Or, you can connect through SSH client. For that click on SSH client tab to see what steps to take.
As per instructions provided here, you need to open SSH client such as linux terminal or git bash.
Go to the folder where private key .pem file is located and run following command which will give read only permision to the file

  chmod 400 prevate-key-name.pem

Then, you are ready to connect instance using its public DNS or public ip address by following command

 ssh -i "node-server-key.pem" ec2-user@13.54.206.174

Here, private key name is node-server-key, user is ec2-user and public id address is 13.54.206.174. You can use public DNS as well in place of public address

 ssh -i "node-server-key.pem" ec2-user@ec2-13-54-206-174.ap-southeast-2.compute.amazonaws.com

After that you can have access to terminal through SSH client. Once you have access to the terminal,type following command

 sudo yum install -y gcc-c++ make

then, it install nodejs by typing following command
Type following command

 sudo yum install -y nodejs

To check the version of nodejs run
node -v command

Now you can clone node app from your github. Once the repo is downloaded go to that folder and run npm instal which will install all the dependency. For environmental variables, you can create a new directory and create a .env file there. You can put all environmental variables in that file:

  touch /var/app/env/.env

Edit the file by running nano /var/app/env/.env
Save the .env file and we need dotenv package to load those environmental variables. For that run following command

  npm install dotenv

Once it installed, in node.js application, we need config dotenv package on top of main application file.

 require('dotenv').config({path: 'var/app/env/.env'})

For the access type your publicIP:portNum. In my case it is http://13.54.206.174:3000/

If you want to run your sever in the background you can use pm2 which is a process manager for node.js application. pm2 can handle to start, restart and stop the server and log managmement. To install pm2 run following command

 npm install pm2 -g

To start the server use command:

 pm2 start app.js

To verify your server is running run following command

 pm2 list

This will display a list of all processes managed by pm2

To stop the server

 pm2 stop app.js

If you have a domain name and you want to use it, you need to install nginx which is a web server by following command

 sudo yum install nginx

To run nginx run the command sudo systemctl start nginx and visit EC2 instance public IP address in the browser. You will see Nginx default welcome page.
Once it installed, you need to configure Nginx to act as a reverse proxy for the application. Open the configuration file by following command

 sudo nano /etc/nginx/nginx.conf

Then, edit the nginx.conf file as following:



 http { 
     listen 80; 
     server_name pblog.online www.pblog.online; 

     location / { 
       proxy_pass http://localhost:8000; 
 proxy_http_version 1.1; 
 proxy_set_header Upgrade $http_upgrade; 
 proxy_set_header Connection 'upgrade'; 
 proxy_set_header Host $host; 
 proxy_cache_bypass $http_upgrade; 
     } 
 }

Replace pblog.online with you domain name.
Once the file edited, we need to check if it is validate or not. For that run the following command:

 sudo nginx -t 

 nginx: the configuration file /etc/nginx/nginx.conf syntax is ok 
 nginx: configuration file /etc/nginx/nginx.conf test is successful

If the test is successful, you can reload the nginx by the command sudo nginx -s reload.
You can check the nginx status by following command as well

 sudo systemctl status nginx 

 ● nginx.service - The nginx HTTP and reverse proxy server 
      Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; preset: disabled) 
      Active: active (running) since Tue 2023-05-16 03:29:05 UTC; 43min ago

## Add Domain Name
To add a custom domain name, first you need to assign Elastic IP address for you EC2 instance. You can do that from EC2 Dashbord, there you will elastic ip under Network & Security. Once you have assigned elastic ip address go to your domain name provider account and find DNS Records section. There we need to add new record. So, click on Add new record option. Select record type A, in Name section type www and value will be your elastic IP address and save it.

Now, hit your domain URL in the browser. It will take some time but you can visit your application running on EC2 instance by entering your domain name.

But the connection is not secured. To make it secured we need to add SSL certificate. We can do it for free with the help of Certbot. Run following commands to install certbot:

 sudo yum install python3 python3-venv libaugeas0

    sudo /opt/certbot/bin/pip install --upgrade pip 
    ```





    ``` 
    sudo /opt/certbot/bin/pip install certbot certbot-nginx 
    ```





    ``` 
    sudo ln -s /opt/certbot/bin/certbot /usr/bin/certbot 
    ```





    ``` 
    sudo python3 -m venv /opt/certbot/ 
    ```



    Once it's done run the following command to get `ssl` certificate for you domain



    ``` 
    sudo certbot --nginx -d pblog.online -d www.pblog.online 
    ```


 Here, replace `pblog.online` with your own domain name. 

 `certbot` will ask you to confirm your domain name and add `ssl` certificate to your domain name. It will change configuration of `nginx.conf` file as well. Once the certificated is added `nginx.conf` file looks like this:

 server { 
 server_name pblog.online www.pblog.online; 

     root         /usr/share/nginx/html; 

    # Load configuration files for the default server block. 
     include /etc/nginx/default.d/*.conf; 

     error_page 404 /404.html; 
     location / {

proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

     error_page 500 502 503 504 /50x.html; 
     location = /50x.html { 
     } 

 listen [::]:443 ssl ipv6only=on; # managed by Certbot 
 listen 443 ssl; # managed by Certbot 
 ssl_certificate /etc/letsencrypt/live/pblog.online/fullchain.pem; # managed by Certbot 
 ssl_certificate_key /etc/letsencrypt/live/pblog.online/privkey.pem; # managed by Certbot 
 include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot 
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

 server { 
 if ($host = www.pblog.online) { 
     return 301 https://$host$request_uri; 
 } # managed by Certbot 


 if ($host = pblog.online) { 
     return 301 https://$host$request_uri; 
 } # managed by Certbot 

     listen 80; 
     listen [::]:80; 

    server_name pblog.online www.pblog.online; 
 return 404; # managed by Certbot

}



 If you look at it closely, now our app is running on port 443 which is `https` connection. So, we have to make sure that port 443 is allowed in our `ec2` instance security groups. If your `ec2` instance security groups does not have `https` port enabled you can add new rule by clicking `add rule` button and select type `HTTPS`. 

 ![security-groups](https://images2.imgbox.com/d2/e0/4FjSUpJB_o.png) 

 Now, visit your site by entering `https://www.YOUR_DOMAIN_NAME`.You will be able to see your site which is now secure with ssl certificate. 

 ![ssl-certifite](https://images2.imgbox.com/5c/20/vBhFpNkr_o.png) 

 This way, you can run your `nodejs` app on `ec2` instance with custom domain name.  
 #### Thank you for reading :)

React-Redux Essentials: Navigating the Basics of State Management

Madhav Pandey — Sun, 20 Aug 2023 13:03:23 +0000

Introduction

As per official redux website, redux is a pattern and library for managing and updating application state, using events called actions. Redux serves as a centralized store for state that needs to be used across entire application.
In this blog post we will learn redux in react by building a Counter App.

Installation

To install redux in your react app run following command.

npm install @reduxjs/toolkit react-redux

Create redux store

Inside your src folder create a folder named app and inside this folder create a file named store.js. The redux store holds all state of the app in immutable object tree. Now in store.js file write a following code

import {configureStore} from "@reduxjs/toolkit";

 const store = configureStore({
reducer:{

}

 })

export default store;

Here, we have created a store which is holding empty reducer for now and exported it.
Go to our index.js file setup our redux store

import App from './App.jsx'
import store from './app/store.jsx';
import { Provider } from 'react-redux';
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

<Provider store={store}>

    <App />

</Provider>
  </React.StrictMode>,
)

We have imported store and Provider and we wrapped our <App/> component inside the provider which holds store. By doing this our store will become global state.

Creating Slice Reducers and Actions

Let's create a folder features/counter inside app where we will have counter slice. A slice is a collection of Redux reducer login and actions for a single feature in your app.
Now, create a file counterSlice.js inside counter folder.

import { createSlice } from "@reduxjs/toolkit";


const initialState = {
    count :0
}


export const counterSlice = createSlice({
name:"counter",
initialState,
reducers:{
    increment :(state)=>{
        state.count+=1;
    },
    decrement :(state)=>{
        state.count-=1;
    },
    incrementByAmount: (state, action)=>{
        state.count+=action.payload;
    }, 
    decrementByAmount:(state, action)=>{
        state.count-= action.payload
    }
}


})

export const {increment, decrement, incrementByAmount, decrementByAmount}= counterSlice.actions;
export default counterSlice.reducer;

createSlice is a function that accept slice name, an initial state, object of reducers function. We have created and exported counterSlice plus we have exported increment, decrement, incrementByAmount and decrementByAmount actions from counterSlice.actions and all reducer from counterSlice.reducer.

We have created a counter slice, it's time to import counterReducer inside our store.js file where we had empty reducer.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice"
const store = configureStore({
reducer:{
counter:counterReducer
}


});
export default store;

The React Counter Component

Inside features/counter folder create a file name Counter.jsx. The Counter.jsx file will have following code.

import { Container, Button, Card, InputGroup, Form } from "react-bootstrap";
import { useState } from "react";
import {useSelector, useDispatch} from "react-redux";
import { increment, incrementByAmount, decrement, decrementByAmount } from "./counterSlice";

const Counter = ()=>{
const [addAmount, setAddAmount] = useState("");

const count = useSelector((state)=> state.counter.count);

const dispatch = useDispatch();


const amountHandeler = (e)=>{
    if(!Number(e.target.value)){
        return setAddAmount("");
    }
    setAddAmount(e.target.value);
}

    return<>
    <Container className="d-flex justify-content-center m-2 ">
    <Card className="text-center w-50">
      <Card.Header>Counter App</Card.Header>
      <Card.Body>
        <Card.Title>{count}</Card.Title>
       <div style={{display:"flex", gap:"1rem", justifyContent:"center", alignItems:"center"}}>
        <Button variant="primary" onClick={()=>dispatch(increment())}>+</Button>
        <Button variant="secondary" onClick={()=>dispatch(decrement())}>-</Button>
       </div>

       <InputGroup className="m-2">
        <Form.Control
        onChange={amountHandeler}
         value={addAmount}
        />
        <Button variant="primary" id="button-addon2" onClick={()=>dispatch(incrementByAmount(Number(addAmount)||0))}>
        Add Amount
        </Button>
        <Button variant="secondary" id="button-addon2" onClick={()=> dispatch(decrementByAmount(Number(addAmount)||0))}>
        Subtract Amount
        </Button>
      </InputGroup>



      </Card.Body>

    </Card>

    </Container>
    </>
}

export default Counter;

Here, we have imported useSelector and useDispatch from react-redux plus we have imported all actions from counterSlice.js file. We accessed the current count value with the help of useSelector. We have dispatched action with the help of useDispatch hook.

const count = useSelector((state)=> state.counter.count);
const dispatch = useDispatch();

<Button variant="primary" onClick={()=>dispatch(increment())}>+</Button>
        <Button variant="secondary" onClick={()=>dispatch(decrement())}>-</Button>

Conclusion

We have learned a basic about react-redux and redux toolkit. I would like to mentioned some key notes from official redux website at the end.

configureStore accepts a reducer function as a named argument
configureStore automatically sets up the store with good default settings
A "slice" contains the reducer logic and actions related to a specific feature / section of the Redux state
Redux Toolkit's createSlice API generates action creators and action types for each individual reducer function you provide
Call dispatch(someActionCreator()) in a component to dispatch an action
Wrapping the app with <Provider store={store}> enables all components to use the store -Global state should go in the Redux store, local state should stay in React components

DEV Community: Madhav Pandey

How I Deployed My Node.js App on a VPS With a Custom Domain & Free SSL

2. Installing Node.js and Git

3. Cloning and running the app on a VPS

4. Running the app with pm2

5. Installing and Configuring Nginx

Usefull Nginx Commands

Creating Reverse Proxy Config

6. Connecting Domain

7. Adding Free SSL With Certbot

How to upload image to Firebase Storage from your expressjs app.

Table of contents

Overview

Key files and their roles

Firebase Admin Setup

Upload middleware (Multer)

Upload route — Saving to Firebase Storage

List images (Admin) — Reading the bucket

Delete images — Server-side logic

Frontend — Admin UI and confirmation UX

Testing the flow locally

Security and Best practices

Suggested improvements and future work

Final notes

How to Upload Images to AWS S3 from Your Web App with Node.js and Multer

Setting Up AWS S3

Creating an IAM User and Policy for S3

Creating Policy for S3

Creating an IAM User

Backend Setup

Multer setup to handle file uploads

Integrating AWS SDK for Image Uploads

Frontend Setup for Image Uploads

Conclusion

How to upload image using multer and Express.js

Instalation

Frontend

Upload preview

Backend

Explationation of above code

Route setup to handle uploaded file

Thanks for reading.

How to build a Todo app with Typescript

Setup typescript project using vite

Creating model for TaskItem and TaskList

TaskItem

TaskList

Creating a controller for TaskList

Creating a view for TaskList

Constructor and Initialization

Clearing the TaskList

Creating Task List Elements

Rendering the Task List

Creating an add task form

Connecting Model, View, Controller

Importing and Initializing the Controller and View

Accessing DOM Elements

Initializing the Application

Adding a New Task

Clearing All Tasks

Showing Completed Tasks

Showing Tasks to Complete

Conclusion

How to Add Google Sign-In to Your Node.js Application

Setup a Firebase Project

Add Continue with Google button

Send userIdToken to Backend

Token verification in the Backend

Building Dynamic Conversations: A Step-by-Step Guide to Implementing a Nested Comment System in Your Node.js Application

Comment schema

Route to post a comment

Route to post a reply in a particular comment

Route to delete comment

Comment input User Interface

Rendering comment

Helper functions

A Deep Dive into Password Reset Flows with Node.js and Express.js

Step-by-Step Guide: Hosting a Node.js App on AWS EC2 with Domain Name and SSL Certificate

Host your nodejs application on AWS EC2 instance with Domain name

React-Redux Essentials: Navigating the Basics of State Management

Setup typescript project using `vite`

Add `Continue with Google` button

Send `userIdToken` to Backend