Forem: Harish Soni

Deploying Node.js with TypeScript + MongoDB App on Vercel as a Serverless Function

Harish Soni — Wed, 19 Feb 2025 07:00:27 +0000

Hello Devs,

We all have faced a situation where we need an end point API, which will perform as per our need but we were not able to find what we wanted.

So, here is one of many solutions I have used

Let's Deploy a Node.js Application on Vercel for free

Introduction

Security is a critical aspect of modern web applications. In this blog, we will walk through building a secure Node.js application using TypeScript, MongoDB, and JSON Web Token (JWT) authentication.

Prerequisites

Before we start, make sure you have the following installed:
Node.js (v18 or later)
MongoDB (local or cloud-based, e.g., MongoDB Atlas)
TypeScript
A code editor (VS Code recommended)

Project Setup:

mkdir node-app && node-app
npm init -y
npm install typescript ts-node @types/node --save-dev
npx tsc --init

Modify the tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["./**"],
  "exclude": ["node_modules"]
}

Install the required packages:

npm install express mongoose jsonwebtoken bcryptjs dotenv cors
npm install --save-dev @types/express @types/jsonwebtoken @types/bcryptjs @types/cors
npm i -g nodemon

From here we will go and create two routes for our app, and then we will deploy our app to vercel:

here is my index.ts file:

import express, { Express, Request, Response } from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import mongoose from "mongoose";


// Load environment variables from .env file
dotenv.config();

const app: Express = express();
const PORT= Number(process.env.PORT) || 3000;

// Connect to MongoDB

mongoose.connect(process.env.MONGO_URI as string)
    .then(() => console.log("MongoDB connected"))
    .catch(err => console.error("MongoDB connection error:", err));

// Middleware to parse JSON bodies
app.use(express.json());

// CORS configuration
app.use(cors());

// Basic route
app.get('/', (req: Request, res: Response) => {
  res.json({ message: 'Hello from TypeScript Express!' });
});

app.get('/health', (req: Request, res: Response) => {
  res.json({ message: 'Application Running' });
});

console.log(process.env);

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

Create a .env file

PORT=5000
MONGO_URI=your_mongodb_connection_string

Now on local run the following command:

nodemon index.ts

It should result in

Server is running on port ${PORT}

Let's Get to the interesting part now, deploying the application on Vercel

If you don't have any Vercel Account, login with Github then.

The main thing is to create the vercel config which will tell vercel how our application should behave:

Add vercel.json file in the root for the application:

{
  "version": 2,
  "builds": [
    {
      "src": "src/index.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/index.ts"
    }
  ]
}

Let's Create and deploy the app using our terminal:

vercel --prod

Once deployed you can connect your Vercel app to your Github Repo and deploy the code on each push on your desired branch.

Open your application Logs on vercel.com/{your_username}/{app_name}/logs
I have added more on my Github Repository for this here:

GIT: https://github.com/harish9312/node-vercel

BASE_URL: https://node-vercel-ts-mongo.vercel.app/

Open for corrections/suggestion do comment and share your feedbacks

Easy Icons using iconify.design

Harish Soni — Tue, 30 Jan 2024 07:44:36 +0000

As long as we are building a UI Components in any framework we come across situations where we need the icons to get the interest of the user, but we get stuck on choosing which library or which tool to use.

Here comes https://iconify.design/ which is far better then every icon package I have used, it is ok to use the icons from the design pattern installed eg: MUI, ANTD etc. But when there is a need of creating your own custom components with the icons you can take the iconify as your primary choice, because it is::

Easy to setup
Easy to use
Light weight component
You can get the ready to use Source code
TypeScript Supported

I have been using the Icons from https://iconify.design/ in almost every project I have worked on.

Installation

Super easy,

if you use npm:

npm install --save-dev @iconify/react

if you use yarn

yarn add --dev @iconify/react

Importing

import { Icon } from '@iconify/react';

Usage

import React from 'react';

import { Icon } from '@iconify/react';

export default function App() {
  return (
    <div>
      <div className="light-blue-block">
        <Icon style={{ fontSize: '54px' }} icon="mdi:user" />
      </div>
    </div>
  );
}

You can modify anything you want using the style or className props.

Advantages

Even if you don't want to install the package, there is the SVG Code of the icon which you can use directly in your component

You can even modify this SVG Image according to your need.


import React from "react";

export default function App() {
  return (
    <div>
      <div className="light-blue-block">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="10em"
          height="10em"
          viewBox="0 0 24 24"
        >
          <path
            fill="gray"
            d="M12 4a4 4 0 0 1 4 4a4 4 0 0
             1-4 4a4 4 0 0 1-4-4a4
             4 0 0 1 4-4m0 10c4.42 0 8
              1.79 8 4v2H4v-2c0-2.21 
             3.58-4 8-4"
          />
        </svg>{" "}
      </div>
    </div>
  );
}

You can get the icons from here: https://icon-sets.iconify.design/

Thanks if you read till here, let me which sets of icons you have used in your code?

If you like this and starting to use https://iconify.design/ then give a heads up.

React + TypeScript + Webpack + Module Federation Plugin - MicroFrontend Application

Harish Soni — Fri, 16 Dec 2022 08:18:16 +0000

Hello DEV,

Let's get to the point straight, I am writing this to learn and build a MicroFrontend Application using React + TS.

We will be using the below npm packages:

React.js
TypeScript
Webpack - Module Federation Plugin.
create-mf-app (https://www.npmjs.com/package/create-mf-app)

So if you are here, searching for a microfrontend using React.js, then I assume you already know what is React and how does it works with TypeScript.

So let's do it step by step:
Steps:

To know about what is module federation plugin?
How it helps in creating a microfrontend application.
What we need to configure to make the core app, import from the other services which are running on the different PORTS.
How to write export and import component on the one go?

Step 1::

According to Google:

Module Federation is one of the most exciting features in Webpack 5 and is considered a game-changer in JavaScript architecture. It supports more independent and straightforward code sharing at runtime among JavaScript applications, making the applications more adaptive and dynamic.

Step 2::

So we have configuration in the Module Federation which we use to connect the different application on a single container and access those application according to the concerns.

Step 3::

Below is the least example how how we export and import the components from the different application:

   new ModuleFederationPlugin({
      name: "home", // Application Name to use
      filename: "homeEntry.js", // Filename to use when we remote this application from other app.
      remotes: {
      },
      exposes: {
        "./Home": "./src/Components.tsx" // Components to export/expose
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

So let's learn the things one by one.

name - This is a unique value which we will use when we will import/remote this application on other application let's call this as container?

filename - It will be the bundled filename which will be loaded when the container application is loaded, as part of the page, and provides the exposed/exported code.

remotes - This is the part where in the application, we import the code from other application, the basic syntax for this is

{nameOfTheRemoteApplication}@http://{urlOfthe RunningApp}/{fileNameProvidedInWebpackOfTheRemoteApp}.js
login@http://localhost:3003/loginEntry.js
login: the Login Application where the name is provided as login.

http://localhost:3003: The URL of the Remote App running, with the PORT For local development

remoteEntry.js: The fileName which is provided in the remote application.

Below if how the Login Application webpack.config.js would look like.

   new ModuleFederationPlugin({
      name: "login",
      filename: "loginEntry.js",
      remotes: {

      },
      exposes: {
        './Login': './src/ExportedComponents.tsx'
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

Step 4::

Once the application is created and the setup is done, we move to create the ExportedComponents.tsx file, for explaining simple here is what I have in my ExportedComponents.tsx

import React from 'react'

const LoginMain = () => {
    return <div> New Deployment</div>
}

const LoginHome = () => {
    return <div>The new era is coming here </div>
}

export {
    LoginHome,
    LoginMain
}

NOTE: HERE WE CANNOT EXPORT THE COMPONENT AS DEFAULT.

Named export would work for us, now let's use this LoginHome and LoginMain in our container application:

here is how the container/webpack.config.js would look like

 new ModuleFederationPlugin({
      name: "container", // Current App name
      filename: "remoteEntry.js", // filename
      remotes: { // the micro frontends to use in container the things which we want import from other service.
        login: 'login@http://localhost:3003/loginEntry.js',      }, 
      exposes: {}, // to give components to other services
      shared: { 
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

You can learn what is shared in this config on the ModuleFederationPlugin docs.

Now let's move to importing the component, the syntax will be:

import { ComponentName } from 'NameOfTheApplication{from ModuleFederationPlugin config of the remote app}/KeyFromExposes{{from ModuleFederationPlugin config of the remote app}}'
example:

import { LoginMain, LoginHome } from 'login/Login'
Now this will simply render the component from the Login App.

Let's try creating a simple Micro Frontend Applllication.

Create a container application using the below command:

npx create-mf-app container - Use PORT 3000

It will ask you some configs, do it accordingly.

Create a simple Home App.

npx create-mf-app home Use PORT - 3001

Create a Components.tsx file in Home/src/Components.tsx

Paste the below code:

import React from "react"

const HomePage = () => {
    return <div>Homepage from the Home App</div>
}

export {
    HomePage
}

Open the home/webpack.config.js from the home app:

Replace the code for ModuleFederationPlugin

  new ModuleFederationPlugin({
      name: "home", // name
      filename: "homeEntry.js",
      remotes: {
      },
      exposes: {
        "./Home": "./src/Components.tsx"
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

Open the container/webpack.config.js from the container app.

Replace the code for ModuleFederationPlugin

    new ModuleFederationPlugin({
      name: "container", // name
      filename: "remoteEntry.js",
      remotes: {
        home: "home@http://localhost:3001/homeEntry.js"
      },
      exposes: {
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    })

Open the App.tsx file from the container Application.

Add the import:

import { HomePage } from 'home/Home'
use as

Go to the container application folder, do yarn && yarn start
Go to the home application on the different tab of the terminal, do yarn && yarn start
Locate to http://localhost:3000
See if working if not add a comment with your doubt.

I have made a sample application here:

https://github.com/harish9312/microfrontend-example/tree/master

Thanks

NodeJS + Postgres DB + Passport JWT + Passport Local Login and Authentication

Harish Soni — Wed, 20 Jul 2022 06:31:16 +0000

Hi,

Here I am writing my first blog 😇 about how do we connect a simple [NodeJS Application] 😎(https://www.npmjs.com/package/express) to Postgres and use PassportJS for authentication and authorization.

So the basic machine setup would look like this:

Node JS - v12 or above
pgAdmin for DB Connectivity
npm for creating and installing the dependencies

Step 1:

Let's create a simple npm module using npm init in the directory you want to create your application.

> npm init

It will ask you the below questions for the configuration of the

You can hit enter for every question or you can add your own configs, I am using the default ones.

Step 2:
Now we need the dependencies which needs to be installed for our application to use while we compile the code:

Here is how my package.json looks like:

Here is the command you can run to install the dependencies:

npm i --save bcrypt-nodejs cors express jsonwebtoken nodemon passport passport-jwt passport-local pg pg-hstore sequelize

Let's catch all the dependencies and their work for us:

bcrypt-nodejs: It will help us to encrypt and decrypt the password when we create a new user.
cors: To allow CROSS ORIGIN REQUESTS install if you want or need.
express: It will create a server for us to use it's routes.
jsonwebtoken: To create the JWT Token for the API Authorizations.
passport: For easy authentication of the User.
passport-jwt: For JWT Authorization.
passport-local: For LocalStrategy of the Login Authentication
pg pg-hstore sequelize: For Accessing the Postgres DB

Step 3:

Let's create a simple server to kick start our project:

here is what I have in my index.js file:

// project/index.js 


const express = require('express')
const db = require('./models')
var cors = require('cors')
const app = express()
const port = 3000
app.use(express.json());
app.use(cors())

db.sequelize.sync().then(() => {
    console.log("Synced")
}).catch(err => console.err(err))

app.get('/', (req, res) => {
    res.send('Hello World!')
})

require('./routes/user.route')(app)

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

What this statement does is:

db.sequelize.sync().then(() => {
    console.log("Synced")
}).catch(err => console.err(err))

to check if the Postgres DB has been connected and is sequelizing it.

And then the routes which we are going to create on the very next step.

And our server start:

Comment out this line

require('./routes/user.route')(app)

and run npm run dev and see if the application is Synced and is running on Port 3000

if it shows below:

YAYYYY....!!! You have created a express server now.

Step 4:

The fun part begin here:

Let's create the routes

// project/routes/user.route.js


module.exports = app => {

    // Import of the controller
    const user = require('../controller/user.controller')

    // Creating the router instance
    const router = require('express').Router();

    // TO create the user
    router.post('/user', user.create)

    // To Login the user using Passport Local Strategy
    router.post('/user-passport-login', user.loginWithPassport)

    // Pass the router instance to the App.
    app.use('/api/v1', router)
}

Each route has it's own defination, let's create our very first controller now:

// project/controller/user.controller.js

const db = require("../models");
const User = db.user;
const passportLocal = require('../config/passportLocal')

// To create a new user in the DB

function create(req, res) {
    const userdata = {
        username: req.body.username,
        password: req.body.password
    }
    User.create(userdata).then(data => {
        return res.send(data)
    }).catch(err => {
        console.warn(err)
    })
}


// To Login the user using Passport

async function loginWithPassport(req, res) {
    return await passportLocal.authenticate('local', function (err, response) {
        if (response) {
            return res.send({
                msg: "Login Success",
            })
        }
        if (!response) {
            return res.send({
                msg: "Failed"
            })
        }
    })(req, res)
}

wait wait...!!

why this line:

    })(req, res)

The loginWithPassport is a self calling function which would have the req and res as the parameters, since we need to return the calculated response from the controller to the API, we also need the request params.

Step 5:

Let's create our Models now:

// project/models/user.model.js

var bcrypt = require('bcrypt-nodejs');

module.exports = (sequelize, DataTypes) => {

    // To get the feasiblity of the Sequelize ORM
    const User = sequelize.define("user", {
        username: {
            type: DataTypes.STRING,
            primaryKey: true
        },
        password: {
            type: DataTypes.STRING
        },
    });

    // It will convert each password into the Hashed String for maintaining the security
    User.beforeSave((user) => {
        if (user.changed('password')) {
            user.password = bcrypt.hashSync(user.password, bcrypt.genSaltSync(10), null)
        }
    })

    // It will compare the password to the passed string using the bcrypt algo, and will return the result
    User.prototype.comparePassowrd = function (pass, cb) {
        bcrypt.compare(pass, this.password, function (err, isMatch) {
            if (err) {
                return cb(err)
            }
            cb(null, isMatch)
        })
    }
    return User;
};

We have created the Model but right now it is not being used it is just a kind of Schema, now let's do the tricky part, let's create a DB Table in the pgAdmin using the below code:

// project/models/index.js

const dbConfig = require('../db.config')
const Sequelize = require('sequelize')

const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
    host: dbConfig.HOST,
    operatorAliases: false,
    dialect: dbConfig.dialect,
    pool: dbConfig.pool
})

const db = {}

db.Sequelize = Sequelize
db.sequelize = sequelize
db.user = require('./user.model.js')(sequelize, Sequelize)

module.exports = db;

dbConfig.js

// project/dbConfig.js

module.exports = {
    HOST: "localhost",
    USER: "harishsoni",
    PASSWORD: "admin",
    DB: "testDB",
    dialect: "postgres",
    pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 10000
    }
}

Here is the line from the index.js, which is using the above Sequelization and Syncing the DB:

const db = require('./models')

Step 3:

Now the final Part let's create the passportLocal.js file which will contain the main business logic to check the use authentication.

// project/config/passportLocal.js

const passport = require('passport')
const LocalStratery = require('passport-local').Strategy
const db = require('../models')

// Creating the passport instance to be used from the controller.

passport.use(new LocalStratery({

    // if you use any different name for the username field, you can pass the key here
    usernameField: 'username'
}, async function (username, password, done) {
    // findByPk is a Sequelize function which returns the data if it finds the primary key with the value passed
    return await db.user.findByPk(username).then(async data => {

        // Check if the user is there in the DB:
        if (!data) {
            return done(null, null)
        }

        // If the user is correct, then let's see if he has entered the correct password.
        await data.comparePassowrd(password, (err, userData) => {
            return done(null, userData)
        })
    }).catch(err => { throw err })
}))


// For Storing the user id in the session {req.session.passport.user = {id: '..'}}
passport.serializeUser(function (user, cb) {
    cb(null, user)
})

// For checking if the user has an active session.
passport.deserializeUser(function (obj, cb) {
    cb(null, obj)
})

module.exports = passport

Here is how the passport configuration will look to login the user

So combining all we will have something like this:

project
│   index.js
│   db.config.js
│   package.json
│
└───models
│    user.model.js
│    index.js
│   
└───config
│    passportLocal.js
│   
└───controller
│    user.controller.js
│   
└───routes
      user.route.js

🥳🥳🥳 We are done with the setup now the time to run and see if the code works (If works god knows how, and if not we need to know why 😂 😂 😂 😂 😂)

🤞🤞 Here we gooooooo.....!!!!

🧐🧐🧐 It Worked::::::::::::

Let's check the API's NOW:

🤞🤞🤞🤞🤞🤞🤞🤞🤞🤞

Yeah, it worked: 😎😎😇😇

Any suggestion are welcome:

Repo Link: https://github.com/harish9312/passport-auth-node