DEV Community: Ranjan Singh

New Array Methods are Awesome

Ranjan Singh — Tue, 06 Jun 2023 18:44:02 +0000

The ECMAScript 2023 (ES2023) specification includes some new methods on the Array object that bring added benefits to our JavaScript programs. These methods provide immutability by default, offering improved predictability and maintainability. Additionally, they can help save time and enhance performance. These exciting additions empower us to write more reliable and efficient code. Let's explore these methods and see how they can elevate our JavaScript development experience. These methods are:

toSorted()
toReversed()
toSpliced()
with()

toSorted()

The toSorted() method returns a new array that is a sorted copy of the original array. The sort order is determined by the compareFn argument, which is a function that takes two elements of the array and returns a negative number, zero, or a positive number, depending on whether the first element is less than, equal to, or greater than the second element.

For example, the following code sorts an array of numbers in ascending order key here is the original array never mutates:

const numbers = [10, 5, 2, 7, 3];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); // [2, 3, 5, 7, 10]
console.log(number) = // [10, 5, 2, 7, 3] no changes in original array

toReversed()

The toReversed() method returns a new array that is a reversed copy of the original array.

For example, the following code reverses an array of strings:

const strings = ["hello", "world"];
const reversedStrings = strings.toReversed();
console.log(reversedStrings); // ["world", "hello"]
console.log(strings); // ["hello", "world"] no changes in original array

toSpliced()

The toSpliced() method returns a new array that is a copy of the original array with the specified elements removed or inserted. The first argument to toSpliced() is the index at which to start removing or inserting elements. The second argument is the number of elements to remove or insert. The third argument is an iterable of elements to insert.

For example, the following code removes the first two elements from an array and then inserts a new element at the end:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toSpliced(0, 2, 6);
console.log(newNumbers); // [3, 4, 5, 6]
console.log(numbers); // [1, 2, 3, 4, 5] no changes in original array

with()

The with() method returns a new array that is a copy of the original array with the specified element replaced with a new value. The first argument to with() is the index of the element to replace. The second argument is the new value.

For example, the following code replaces the first element in an array with a new value:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.with(0, 6);
console.log(newNumbers); // [6, 2, 3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] no changes in original array

These new array methods are a welcome addition to the JavaScript language. They make it easier to work with arrays in a predictable and maintainable way.

Snap Scroll in React in Less than a Minute

Ranjan Singh — Sat, 01 Oct 2022 17:56:39 +0000

Motivation:

We all have seen website which uses snap scrolling from one section to another traditionally we can do Animation in CSS and write a ton styles to achieve that Let's do that within a Minute with help of react-use-scroll-snap.

Installation:

we just need to create a new react app and install react-use-scroll-snap.

npx create-react-app test-app
yarn add react-use-scroll-snap

Usage:

Import useScrollSnap hook and pass the ref of the component.
I'm using default react app duplication header and just changing the page name for simplicity you can use your components.

import { useRef } from "react";
import useScrollSnap from "react-use-scroll-snap";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const scrollRef = useRef(null);
  useScrollSnap({ ref: scrollRef, duration: 50, delay: 20 });
  return (
    <div className="App" ref={scrollRef}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 1</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>page 2</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 3</p>
      </header>
    </div>
  );
}

export default App;

That's it we have snap scroll in our app. This post is focust on react you can do same thing for Vanilla JS with scroll-snap Cheers.

Animating React App in Less than a Minute

Ranjan Singh — Sat, 17 Sep 2022 15:21:00 +0000

Motivation:

Building any kind of Web app requires Animations to look good we can add Animation by either third-party Libs like Framer motion or plain old CSS but problem is all of these options needs us to write a ton of code and define all animation timing and stuff we are going to skip all of those today and use Autoanimate to do the animation for us.

Introduction :

Autoanimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, Svelte, or any other JavaScript application.

Installation :

yarn add @formkit/auto-animate
that's all to install and config.

Usase :

Just import autoanimateform @formkit/auto-animate and pass refrence of the parent element using useRef.
Now all children element will be animated whenever the are added, removed, or moved.

import { useState, useRef, useEffect } from 'react'
import autoAnimate from '@formkit/auto-animate'

const Dropdown = () => {
  const [show, setShow] = useState(false)
  const parent = useRef(null)

  useEffect(() => {
    parent.current && autoAnimate(parent.current)
  }, [parent])

  const reveal = () => setShow(!show)

  return <div ref={parent}>
    <strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
    { show && <p className="dropdown-content" >Lorum ipsum...</p> }
  </div>
}

export default Dropdown

that's it your Dropdown is animated.
you can pass any element's ref and all child Elements will be animated like List as well.

Customization :

Autoanimate also provides useAutoAnimate hook to customise animation if we need it.


App.jsx
import { useState } from 'react'
import { useAutoAnimate } from '@formkit/auto-animate/react'

const App = function () {
  const [items, setItems] = useState([0, 1, 2])
  const [parent] = useAutoAnimate({ duration: 500 })
  const add = () => setItems([...items, items.length])
  return <>
  <ul ref={parent}>
    {items.map(
      item => <li key={item}>{ item }</li>
    )}
  </ul>
  <button onClick={add}>Add number</button>
  <button onClick="{() => enableAnimations(false)}">Disable</button>
</>
}

export default App

this is post is focussed on React it's even easier on Vanilla JS basically you can use this on Virtually any JS project.

Here is the Link for official Website Cheers.

Resizing & adding watermark on images with Nodejs and sharp-multer

Ranjan Singh — Mon, 05 Sep 2022 10:03:03 +0000

Motivation :

Whenever we start working with images upload Resizing comes firs and often we need to put watermark as well on last post we learned how to setup basic resizing and optimisation of the images with sharp-multer. Here we are going to add advance Resizing and adding Watermark to all uploaded images.

Prerequisites:

Please Read Part 1 of the series here.

Setup & Configuration :

on last part we have setup a simple NodeJS app with these files containing following code

Server.js

const express = require("express");
const path = require("path");
const multer = require("multer");
const SharpMulter = require("sharp-multer");
const app = express();

const storage = SharpMulter({
  destination: (req, file, callback) => callback(null, "images"),
  imageOptions: {
    fileFormat: "png",
    quality: 80,
    resize: { width: 500, height: 500 },
  }
});
const upload = multer({ storage });

app.post("/upload", upload.single("avatar"), async (req, res) => {
  console.log(req.file);
  return res.json("File Uploaded Successfully!");
});
app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "/index.html"));
});

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>File Upload</title>
</head>
<body>
    <div class="container">
        <h1>File Upload</h1>
<!--Create a form to send the file to a route  "upload"-->
<!--Set the request method to POST-->
<!--Set the encytype to "multipart/form-data" in order to send files and not just text-->
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div class="file-field input-field">
              <div class="btn grey">
                <input type="file" name="avatar">
              </div>
            </div>
            <button class="btn" type="submit">Submit</button>
          </form>
    </div>
</body>
</html>

we have our basic resizing and optimisation in place but now with sharp-multer 0.2.1 we have few advance resizing options available to us we can now define what kind of resize mode to use for images

ResizeMode

resize.resizeMode

cover: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit.
contain: Preserving aspect ratio, contain within both provided dimensions using "letterboxing" where necessary.
fill: Ignore the aspect ratio of the input and stretch to both provided dimensions. i.e images will be strached to match size provided
inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified. i.e width will be fixed to max value you provide and height will be adjusted to a lower value than provided according to Aspect Ratio .
outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified. i.e height will be fixed to value you provide and width will be adjusted to a higher value than provided according to Aspect Ratio.

to use it we need to provide resizeMode key in imageOptions resize object ex :


imageOptions: {
    fileFormat: "png",
    quality: 80,
    resize: { width: 500, height: 500, resizeMode: "outside" },
  }

Add Watermark

With new sharp-multer adding watermark is quite easy we can just provide the input image path and the place we want to put the watermark at.
Currently we can put watermark at these location: "center","top-left","top-right","bottom-left","bottom-right" and also the opacity of the watermark can be defined by passing opacity prop in the watermarkOptions so to add a watermark our storage configuration will look like this

const storage = SharpMulter({
  destination: (req, file, callback) => callback(null, "images"),
  imageOptions: {
    fileFormat: "png",
    quality: 80,
    resize: { width: 500, height: 500, resizeMode: "outside" },
  },
  watermarkOptions: {
    input: "./images/logo.png", // watermark image location
    location: "top-right",
    opacity:50 // optional 
  },
});

you can find whole code in this repo try it out cheers.

How to Deploy NextJS App on a Custom VPS

Ranjan Singh — Fri, 26 Aug 2022 16:47:00 +0000

Motivation

Whenever we develop any Next JS app and start deployment the first thing that comes in mind is Vercel. Now days there are a ton of Hosting providers also supporting Next JS on there platform But recently I was working on a project where I needed to deploy A NextJS SSR App on a VPS server due to the client was not comfortable deploying any where else so I looked it up and there was no proper instruction how to do it.

Prerequisites

Before we start deploying anything First we need a VPS ready for that Please Read Part 1 of the Node js Server Setup series here.

Step 1 - Creating The APP

First we are creating a New Next JS APP on server with

npx create-next-app@latest awesome-app

or you can clone an existing repo from git

git clone awesome-app.git

then we need to get into the folder we just created with

cd awesome-app

if you cloned the app from git you need to do an additional app to install the dependencies

npm install 
#or 
yarn

Step 2 - Building For Production

NextJS comes with build scripts so we just need to run it

npm run build
#or 
yarn build

it will take a while to generate production build of your project like it will Generated all static pages for you in advance.

Step 3 - Setting Port (Optional)

By default Next JS will run at port 3000 but on this server we are already running a app on 3000 so we need to update the package.json to start the Production app on new port like 4400

{
  "name": "awesome-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 4400", // or whatever port you want 
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

Step 4 - Starting App With PM2

to start the app with PM2 we need to run

pm2 start npm --name "awesome-app" -- start

this will start the app at port 4400 if you wish to add SSL and reverse proxy with NGINX we need to add New app to Our existing NGINX config form VPS Setup.

Step 5 - Adding Reverse Proxy With NGINX

To update server First open the config

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

and add this new block in location part of the server block

    server_name awesomeapp.com.com www.awesomeapp.com.com;

    location / {
        proxy_pass http://localhost:4400; 
        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;
    }

if you are planing to host secound app on subdomain just replace yourdomain2.com with subdomain like api2.yourdomain.com

then check and restart the NGINX

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

if domain is pointed you should see your app live on port 80 there is one more step to go adding SSL.

Step 6 - Adding SSL for Second APP

we already have certbot installed so adding additional domains are not an issue

sudo certbot --nginx -d awesomeapp.com -d www.awesomeapp.com

that's all your New app also should be Live on New domain with SSL.

Please Let me Know if you encounter any issues Thanks.

Deploy Multiple NodeJS Apps on single Server with SSL, Nginx, PM2 - Part 2

Ranjan Singh — Mon, 22 Aug 2022 19:23:00 +0000

Prerequisites

Please Read Part 1 of the series here.

We have already setup NGINX, PM2 and SSL for the First APP and we are going to setup a new NodeJS APP.
There is very few steps we need to do to get the new app up and running

Step 08 - Clone New Project Or Create New with file

It's quite similar to the step 02 we are just going to create a new folder and create new app and run it on different Port No.

mkdir App2
cd App2

now just create a new file called index.js

nano index.js

now paste following code in index.js

const http = require('http');

const hostname = 'localhost';
const port = 4000; //make sure this port no is different from the first one

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Everyone from APP 2 !\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Step 09 - Start the App With PM2

we are going start the app with PM2 and give it a Name that is optional

pm2 start index.js --name "APP 2"

this will start the app at port no 4000 we can also see all running app with PM2 by following

pm2 list

this will give you list of all running apps you can start/stop/restart using id or Name aswell.

Step 10 - Adding Reverse Proxy with NGINX

we need to add server config one more time for this app aswell.
To update server First open the config

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

and add this new block in location part of the server block

    server_name yourdomain2.com www.yourdomain2.com;

    location / {
        proxy_pass http://localhost:4000; 
        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;
    }

if you are planing to host secound app on subdomain just replace yourdomain2.com with subdomain like api2.yourdomain.com

then check and restart the NGINX

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

if domain is pointed you should see your app live on port 80 there is one more step to go adding SSL.

Step 11 - Adding SSL for Second APP

we already have certbot installed so adding additional domains are not an issue

sudo certbot --nginx -d yourdomain2.com -d www.yourdomain2.com

or for Subdomain

sudo certbot --nginx -d api2.yourdomain.com

that's all your New app also should be Live on New domain with SSL.

Thanks for reading Cheers.

Deploy Multiple NodeJS Apps on single Server with SSL, Nginx, PM2 - Part 1

Ranjan Singh — Sun, 21 Aug 2022 12:04:00 +0000

Motivation

Greatings, Let's say you finished coding your awesome NodeJS app ready to deploy to server and wanted to host it on a VPS or you have more than one app to host to single VPS how would you do that.

Introduction

Nginx: Webserver or reverse proxy to handle incoming requests.
PM2 : Process Manager to manage your NodeJS Apps Like making sure it's running all the time even it catches an error or making sure to create multiple instance of the same app to utilise app available cores/threads (Cluster Mode) last part is optional.
Certbot : Managing App SSL for your domains using Let's Encrypt SSL for Free.

Prerequisites

An Ubuntu 20.04 server with SSH access and a non-root user with sudo privileges.

Step 01 - Installing Node.js

Firstly to install the node js we need to add the PPA for the most recent LTS Version

cd ~
curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh

# and then 

sudo bash nodesource_setup.sh

after this the PPA is added we can Simple install the Node js

sudo apt install nodejs

for checking the version of Node we installed simply type

 node -v

and it will show you exact version of the installation in my case it's 16.17.0.

Most likely we gona need build-essentials for compiling any package from source code so let's install that as well

sudo apt install build-essential

Step 02 - Clone the project & Install Dependencies

git clone awesomeproject.git

cd awesomeproject
npm install
npm start (or whatever your start command)
# stop app
ctrl+C

or you can create simple app

cd ~
nano app.js

insert the following into the file

const http = require('http');

const hostname = 'localhost';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Everyone!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

and then run it

node app

you will receive following as output

Output
Server running at http://localhost:3000/

Step 03 - Setup PM2

firstly we need to install the PM2

sudo npm i pm2 -g

and for starting the app

pm2 start app  #(or whatever your file name)

#for Cluster mode 
pm2 start app -i max 
#it will create an instance for every available thread 
#optionally you can also pass Number like 2,3 for instances count

# Other pm2 commands
pm2 show app
pm2 status
pm2 restart app
pm2 stop app
pm2 logs (Show log stream)
pm2 flush (Clear logs)

# To make sure app starts when reboot
pm2 startup ubuntu

the app should be accessible using the IP and port defined.

Step 04 - Setup UFW Firewall

Now we want to setup a firewall blocking that port and setup NGINX as a reverse proxy so we can access it directly using port 80 (http) or port 443 (https)

sudo ufw enable
sudo ufw status
sudo ufw allow ssh (Port 22) # for SSH
sudo ufw allow http (Port 80)
sudo ufw allow https (Port 443)

Step 05 - Install NGINX and Configure

installing Nginx is pretty easy just type following

sudo apt install nginx

and open default config to edit

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

Add the following to the location part of the server block

    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; #whatever port your app runs on
        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;
    }

then check and restart the NGINX

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

You should now be able to visit your IP with no port (port 80) and see your app.

Step 06 - Adding Domain

Adding a domain to Any VPS is very different on each provider first you need to register and add a A record to point that to the IP address of the VPS or If your VPS Provider Supports you can also add Custom Nameservers it may take a while to show up.

Step 07 - Add SSL with Lets Encrypt

Lets Encrypt provides free SSL with certbot package so first we need to install the package

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python3-certbot-nginx

and then add certificates for the domains we have added

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

and your app should be live on https://yourdomain.com.

please note we have to renew these certificates every 90 days
to renew run

certbot renew

we will add another app in next part stay tunned for that 😃

Fixing Firebase Firestore Queries with firestore-db for web and react-native-firebase

Ranjan Singh — Fri, 19 Aug 2022 20:29:38 +0000

Motivation :

I have been working with firestore for almost 4 years now for Web and and Native apps with React Native and also been annoyed by few of the quarks of the firestore because I mainly used Mongodb or SQL.

Channing every single condition with another where function
Like : dbref.where("name","==","John").where(....) and so on and then orderBy for each one as well as limit.
Everytime it returns you have to do doc.data() to get the actual data if It's an query then map each item and do .data() on them.
Doing anykind of search is Nightmare doesn't supports full text search but partial search is also annoying.

Solution:

Firestore-db : A utility package for firebase firestore and react-native-firebase to perform firestore queries easily with syntax inspired by mongoose like find,fineOne and also enable limited search options aswell.

Installation

npm install firestore-db
or
yarn add firestore-db

Examples

importing queryBuilder and creating an instance for web or node js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import { queryBuilder } from 'firestore-db';

const Users = queryBuilder(firebase.firestore().collection("users"));

for react native

import firestore from '@react-native-firebase/firestore'; 
import { queryBuilder } from 'firestore-db';
const Users = queryBuilder(firebase.firestore().collection("users"));

Queries

find() : find can take an object containing key value pair where query can be string, array or object with operator and value. the param bjects can also take orderBy and limit and returns and array of results no need to call data() functions to get the results.
ex :

Users.find({
    firstName:"John",
    city :["New York","Los Angeles"],
    age : {">=",18},
    limit:10,
    orderBy:"createdAt",
    //or  orderBy: ['createdAt', 'asc']  // with acs/desc
    //or orderBy: [['userId', 'desc'], ['createdAt', 'asc']] // multiple orderby
    })

here are all available functions and request params

Function name	Description	Params	Return
`findOne()`	returns First Matching result	same as `find()`	object Ex: `{name:"",age:"",id:""}`
`findById()`	Finds Matching doc with id	id	object Ex: `{name:"",age:"",id:""}`
`create()`	Creates New Doc	object Ex: `{name:"",age:"",}`	Resove/Reject
`update()`	Updates Existing Doc	id,updatedObject Ex: `"uudefdsds",{name:"",age:""}`	updatedObject
`deleteOne()`	Delete one Doc with id	id Ex: `"uudefdsds"`	Resove/Reject
`deleteMany()`	Deletes all docs from list of ids	Array Ex: `[id1,id2,...]`	Resove/Reject
`search()`	Simple Text Search with matching Prefix or Whole Text	key and searchterm Ex: `"name","Joh"`	updatedObject

Thanks for reading try it out once.

Simple Node JS Resize Image Before Upload using Sharp Multer

Ranjan Singh — Fri, 05 Aug 2022 23:05:00 +0000

Motivation :

Every time we upload an image to NodeJS server there are a lot of possibility we also need to optimise or resize the image or both that's why I made a simple package to handle both of the operations at same time called sharp-multer.

Introduction :

Multer : Multer is a Express.js middleware which is used for handling multipart/form-data, which is mostly used library for uploading files.
Sharp : Sharp high is a speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.

Sharp-Multer : Node js Utilty package to use with Multer as storage engine to optimise images on the fly using Sharp.

Installation & Configuration:

1. Create Node JS App

mkdir test-app
cd test-app
npm init

2. Install Modules

npm install express multer --save
npm install sharp --save
npm install sharp-multer --save

3. Create Server.js File and Import Modules

const express = require("express")
const path = require("path")
const multer = require("multer")
const SharpMulter  =  require("sharp-multer");
const app = express()

4. Setup Sharp Multer to handle Images
Here we are creating a storage engine for Multer.
destination : you can return any directory you want to store the image make sure the directory is created.
imageOptions : we can pass the size height, width for resizing as well as quality and fileformate (jpg,wep,png) to convert the incoming image for optimisation.

const storage =  
 SharpMulter ({
              destination:(req, file, callback) =>callback(null, "images"),
              imageOptions:{
               fileFormat: "jpg",
               quality: 80,
               resize: { width: 500, height: 500 },
                 }
           });
const upload  =  multer({ storage });

5. Create Route with Multer Middleware

app.post("/upload", upload.single("avatar"), async  (req, res)  => {
console.log(req.file);
return  res.json("File Uploaded Successfully!");
}

6. Add HTML file to render the Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>File Upload</title>
</head>
<body>
    <div class="container">
        <h1>File Upload</h1>
<!--Create a form to send the file to a route  "upload"-->
<!--Set the request method to POST-->
<!--Set the encytype to "multipart/form-data" in order to send files and not just text-->
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div class="file-field input-field">
              <div class="btn grey">
                <input type="file" name="avatar">
              </div>
            </div>
            <button class="btn" type="submit">Submit</button>
          </form>
    </div>
</body>
</html>

7. Serving File and defining Port

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});


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

8. Running the Server

node Server

After that you can open your browser and start uploading the images will be automatically optimised and stored in the destination you defined on setting up sharp multer.

For more advance options and watermark check out next part

Thanks for reading try it out once 😃