DEV Community: Morshedul Munna

Common Deployment Strategies with Kubernetes

Morshedul Munna — Sat, 23 Nov 2024 10:50:50 +0000

Common Deployment Strategies with Kubernetes

✡️ Recreate Deployment
Replaces the old version with the new one by terminating all old pods before starting new ones.

When to Use:
➤ Use when zero downtime isn’t critical and a clean slate of application state is required. Not so common.

Kubernetes Implementation:
➤ Set strategy.type to Recreate in the deployment manifest.

✡️ Rolling Deployment
Gradually replaces old instances with new ones without downtime.

When to Use:
➤ Use when high availability is essential and gradual rollouts are needed to prevent downtime. This is the most common strategy.

Kubernetes Implementation:
➤ Default strategy in Kubernetes.
➤ Controlled by maxSurge and maxUnavailable parameters in the deployment spec.

✡️ Blue-Green Deployment
Involves two environments (Blue for current, Green for new). Traffic switches to Green after testing, with easy rollback to Blue.

When to Use:
➤ When quick, risk-free rollback is needed if the new release fails.
➤ For critical applications requiring stability and controlled validation before going live.

Kubernetes Implementation:
➤ Maintain separate deployments for Blue and Green environments.
➤ Use Kubernetes services to route traffic between the two environments.

✡️ Canary Deployment
Gradually rolls out the new version by directing a small percentage of traffic to the canary while the rest goes to the stable version.

When to Use:
➤ Test new features with real traffic before a full rollout.
➤ Ideal for feature flags and gradual rollouts to minimize user impact and catch issues early.

Kubernetes Implementation:
➤ Use multiple replica sets with a smaller number of canary pods.
➤ Leverage Ingress, service meshes (Istio/Linkerd), or Argo CD for gradual rollouts.

Creating a real-time notification system

Morshedul Munna — Sun, 08 Sep 2024 05:09:15 +0000

Creating a real-time notification system involves setting up a server that can push notifications to clients as events occur. Using Express.js for the backend server, MongoDB for data storage, Socket.io for real-time communication, and React for the frontend provides a robust stack for building such a system.

Below is a step-by-step guide to creating a notification system with these technologies.

Prerequisites
Setting Up the Backend

* [Initialize the Project](#initialize-the-project)

* [Set Up Express Server](#set-up-express-server)

* [Integrate Socket.io](#integrate-socketio)

* [Connect to MongoDB](#connect-to-mongodb)

* [Create Notification Schema](#create-notification-schema)

* [API Endpoints](#api-endpoints)

Setting Up the Frontend

* [Initialize React App](#initialize-react-app)

* [Install Dependencies](#install-dependencies)

* [Set Up Socket.io Client](#set-up-socketio-client)

* [Display Notifications](#display-notifications)

Testing the Notification System
Conclusion

Prerequisites

Node.js and npm installed on your machine.
MongoDB installed locally or have access to a MongoDB Atlas cluster.
Basic knowledge of JavaScript, Node.js, Express.js, MongoDB, Socket.io, and React.

Setting Up the Backend

Initialize the Project

Create a new directory for your project and initialize it with npm:

bashCopy codemkdir notification-system
cd notification-system
npm init -y

Set Up Express Server

Install Express and other necessary dependencies:

bashCopy codenpm install express cors mongoose socket.io

Create an index.js file for your server:

javascriptCopy code// index.js
const express = require('express');
const http = require('http');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const server = http.createServer(app);

server.listen(5000, () => {
  console.log('Server is running on port 5000');
});

Integrate Socket.io

Install Socket.io:

bashCopy codenpm install socket.io

Modify your index.js to include Socket.io:

javascriptCopy code// index.js
const socketIo = require('socket.io');
const io = socketIo(server, {
  cors: {
    origin: 'http://localhost:3000', // React app domain
    methods: ['GET', 'POST'],
  },
});

io.on('connection', (socket) => {
  console.log('New client connected');

  // Handle disconnection
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// Export io for use in routes
module.exports = io;

Connect to MongoDB

Install Mongoose:

bashCopy codenpm install mongoose

Update index.js to connect to MongoDB:

javascriptCopy code// index.js
const mongoose = require('mongoose');

mongoose
  .connect('mongodb://localhost:27017/notifications', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log('MongoDB connected'))
  .catch((err) => console.log(err));

Create Notification Schema

Create a models directory and add a Notification.js file:

javascriptCopy code// models/Notification.js
const mongoose = require('mongoose');

const NotificationSchema = new mongoose.Schema({
  message: String,
  date: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Notification', NotificationSchema);

API Endpoints

Create a route to handle creating notifications:

javascriptCopy code// routes/notifications.js
const express = require('express');
const router = express.Router();
const Notification = require('../models/Notification');
const io = require('../index'); // Import io instance

// Create a new notification
router.post('/', async (req, res) => {
  const { message } = req.body;
  try {
    const notification = new Notification({ message });
    await notification.save();

    // Emit the notification to all connected clients
    io.emit('notification', notification);

    res.status(201).json(notification);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Update index.js to use the route:

javascriptCopy code// index.js
const notificationRoutes = require('./routes/notifications');

app.use('/notifications', notificationRoutes);

Setting Up the Frontend

Initialize React App

Use create-react-app to bootstrap your React application:

bashCopy codenpx create-react-app client
cd client

Install Dependencies

Install Socket.io client:

bashCopy codenpm install socket.io-client axios

Set Up Socket.io Client

In your App.js, set up the Socket.io client to listen for notifications:

javascriptCopy code// src/App.js
import React, { useEffect, useState } from 'react';
import socketIOClient from 'socket.io-client';
import axios from 'axios';

const ENDPOINT = 'http://localhost:5000';

function App() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // Fetch existing notifications
    axios.get(`${ENDPOINT}/notifications`).then((response) => {
      setNotifications(response.data);
    });

    // Set up Socket.io client
    const socket = socketIOClient(ENDPOINT);

    socket.on('notification', (data) => {
      setNotifications((prevNotifications) => [data, ...prevNotifications]);
    });

    // Clean up the connection when the component unmounts
    return () => socket.disconnect();
  }, []);

  return (
    <div>
      <h1>Notifications</h1>
      {notifications.map((notif) => (
        <div key={notif._id}>
          <p>{notif.message}</p>
          <small>{new Date(notif.date).toLocaleString()}</small>
        </div>
      ))}
    </div>
  );
}

export default App;

Display Notifications

The above code in App.js will display the list of notifications and update the list in real-time when a new notification is received.

Testing the Notification System

To test the notification system:

Start the backend server:
```
bashCopy codenode index.js
```
Start the React app:
```
bashCopy codecd client
npm start
```
Send a notification:

Use a tool like Postman or curl to send a POST request to the /notifications endpoint:
```
bashCopy codecurl -X POST -H "Content-Type: application/json" -d '{"message": "New notification"}' http://localhost:5000/notifications
```
Alternatively, you can create a simple form in your React app to send notifications.
Observe the React app:

The new notification should appear instantly in your React application without a page refresh.

Conclusion

You've now set up a basic real-time notification system using Express.js, MongoDB, Socket.io, and React. This system can be expanded and customized to fit more complex use cases, such as user-specific notifications, different notification types, and persistent user sessions.

Next Steps:

Authentication: Implement user authentication to send notifications to specific users.
Notification Types: Categorize notifications and add filtering options.
Persistent Connections: Handle reconnection logic for Socket.io in case of network issues.
UI Enhancements: Improve the frontend with better styling and user experience.

Resources:

Express.js Documentation
MongoDB Documentation
Socket.io Documentation
React Documentation

How to detect a click outside a React component

Morshedul Munna — Thu, 08 Dec 2022 17:46:54 +0000

How to detect a click outside a React component

import React, { useEffect, useRef } from 'react';
import { FiSearch } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { focusToggle } from '../Redux/actionsCreators/searchAction';

const SearchAutoComplete = () => {
    const state = useSelector((state) => state.searchReducer);
    const dispatch = useDispatch();

    const { suggestions, isFocus } = state;

    console.log(isFocus);

    const ref = useRef(null);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                dispatch(focusToggle(false));
            }
        };
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        };
    }, [dispatch]);

    return (
        <>
            <div className="flex justify-center items-center direction flex-col ">
                <p className="text-[20px] mb-6 font-bold">Search Product</p>
                <div className=" relative ">
                    <div ref={ref} className="flex items-center relative">
                        <FiSearch className=" absolute left-2 text-white-700 " />
                        <input
                            autocomplete="off"
                            onFocus={() => dispatch(focusToggle(true))}
                            className="bg-white-500 py-2 text-[14px] p-[5px] pl-7 min-w-[500px] shadow-boxSad rounded-sm px-6 outline-none"
                            type="text"
                            name="search"
                            placeholder="search..."
                        />
                    </div>
                    <div className=" shadow-boxSad bg-white-100 absolute w-full">
                        {suggestions.map((item, i) =>
                            isFocus ? (
                                <div className="px-7 text-[14px] py-2 bg-white-500 hover:bg-white-100 duration-300 ease-in-out cursor-pointer rounded-sm" key={i}>
                                    {item}
                                </div>
                            ) : null
                        )}
                    </div>
                </div>
            </div>
        </>
    );
};

export default SearchAutoComplete;

How to Connect Rust lib + Web Assembly + React.js(typescript)

Morshedul Munna — Sat, 29 Oct 2022 14:27:51 +0000

Summary

In this article, I’ll introduce followings through creating simple demo application.

How to create a React app quickly with create-react-app.
How to create a Wasm library with Rust.
How to create a Wasm library with Rust.

Create a React App with create-react-app

yarn create react-app myApp --template typescript

npx create-react-app myApp --template typescript

then you can run this App in your Local Mechine

cd myApp
npm start or yarn start

Starting the development server...
Compiled successfully!

You can now view react-wasm-tutorial in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.0.153:3000

Create Rust library for Wasm

To Connected Wasm to the React app, you need to follow these steps.

Create Rust library with cargo.

cargo new myApp-lib --lib

Now Implement a Rust function that you want to call from JavaScript.

Simply, we’ll implement add function and call it from JavaScript.

// lib.rs

fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[test]
fn add_test() {
    assert_eq!(1 + 1, add(1, 1));
}

Wrap the function with wasm-bindgen to export it as Wasm.

wasm-bindgen is Rust library that facilitate high-level interactions between Wasm and JavaScript. For example, you can call Rust(Wasm) from JavaScript, and vice versa.

To add wasm-bindgen dependency, you need to add it to Cargo.toml.

[package]
name = "wasm-lib"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.78"

Then, Let’s wrap the function with wasm-bindgen.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[test]
fn add_test() {
    assert_eq!(1 + 1, add(1, 1));
}

Build as Wasm library with wasm-pack

By using wasm-bindgen, you can build Rust as Wasm. However, To load and run Wasm from JavaScript, You need some JavaScript boilerplate codes (like WebAssembly.instantiate).

To do that, you can use wasm-pack!

At first, you need to install it.

cd ..
cargo update
wasm-pack --version
=> wasm-pack 0.10.2

Then, let’s add npm script to call it by npm run build-lib.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
   "build-lib:wasm": "cd myApp-lib && wasm-pack build --target web --out-dir pkg",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Let’s check the output directory generated by wasm-pack.

You noticed package.json file was generated.

$ tree wasm-lib/pkg
├── package.json
├── wasm_lib.d.ts
├── wasm_lib.js
├── wasm_lib_bg.wasm
└── wasm_lib_bg.wasm.d.ts

So you can install the Wasm library to other project easily. Let’s install it to the React app.

npm install ./wasm-lib/pkg

yarn add ./wasm-lib/pkg

Call the Wasm function from the React app.

import and call
import React, { useEffect, useState } from 'react';
+import init, { add } from "wasm-lib";
import logo from './logo.svg';
import './App.css';

function App() {
+  const [ans, setAns] = useState(0);
+  useEffect(() => {
+    init().then(() => {
+      setAns(add(1, 1));
+    })
+  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
+        <p>1 + 1 = {ans}</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Finaly, you can see this screen.

Advanced topics

In this article, I provided the quick introduction for Rust and Wasm. To use Wasm in production, you should think about the following topics.

Logging
Multi-Threading
Exception handling
Call JavaScript from Rust
Call Rust struct from JavaScript
Testing
Cross platform

Backend-Development Learning Roadmap - Step by Step

Morshedul Munna — Thu, 13 Oct 2022 16:54:46 +0000

Hard Part for Backend : Row Requirement Analysis to thinking Data Modelling and Database Design.

We need to learn Data Modeling and Database Design....... see Next article.

API Design
- Rest APi
- GraphQL
- gRPC
- Web Socket
- Message Broker
Api Security
- JWT Token
- Refresh Token
- OAuth2
- SAML
- Identity Proviiders
  - Cognito
  - Auth0
  - Firebase
  - Okta
- Role Base Authorization
API Testing
- Unit Testing
- Acceptance Testing
- Load Testing
API Documentation
- Swagger
- Postman

— Concept Must Need for Backend Developer

Database
- ORM ( Object Relational Model)
- SQL
  - PostgreSQL
  - mySQL
  - MSSQL/ Oracle
- NoSQL
  - MongoDB
  - AWS DynamoDB
- In Memory*** - (for Cashing)
  - Redis**
  - Mem Cashed
- Graph Database
  - Neo4j
Linux server
Cloud Computing
DevOps

Server Application Responsibility

Listen Request
Process
- Algorithm
- Data Structure
- Database
- Problem Solving
- CURD Operation
Response

HTTP Knowladges: - Stateless communication

Get Request - ( Want to Read from server)
POST - ( Create new Data )
PUT/PATCH - ( Update Existing Content)
DELETE - (Delete Data from Database)

Learn Rust Programming Language

Morshedul Munna — Fri, 07 Oct 2022 18:37:49 +0000

Lets Start Learning Rust Programming Language

Installing rustup on Windows

Go To the Link and Downloads Rustup exe file.
https://www.rust-lang.org/tools/install

Run The exe File and Type 1 Then Press Enter. installing...................

Installing rustup on Linux or macOS

Run The Bellow Commend in your terminal.

curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh

To check whether you have Rust installed correctly, open a shell and enter this line:

rustc --version

Updating and Uninstalling
Once Rust is installed via rustup, when a new version of Rust is released, updating to the latest version is easy. From your shell, run the following update script:

rustup update

To uninstall Rust and rustup, run the following uninstall script from your shell:

rustup self uninstall

learn more From official Book
Rust Book

DEV Community: Morshedul Munna

Common Deployment Strategies with Kubernetes

Creating a real-time notification system

Table of Contents

Prerequisites

Setting Up the Backend

Initialize the Project

Set Up Express Server

Integrate Socket.io

Connect to MongoDB

Create Notification Schema

API Endpoints

Setting Up the Frontend

Initialize React App

Install Dependencies

Set Up Socket.io Client

Display Notifications

Testing the Notification System

Conclusion

How to detect a click outside a React component

How to Connect Rust lib + Web Assembly + React.js(typescript)

Summary

Create a React App with create-react-app

Create Rust library for Wasm

Now Implement a Rust function that you want to call from JavaScript.

Wrap the function with wasm-bindgen to export it as Wasm.

Build as Wasm library with wasm-pack

Call the Wasm function from the React app.

Advanced topics

Backend-Development Learning Roadmap - Step by Step

Hard Part for Backend : Row Requirement Analysis to thinking Data Modelling and Database Design.

Server Application Responsibility

HTTP Knowladges: - Stateless communication

Learn Rust Programming Language

Lets Start Learning Rust Programming Language

Installing rustup on Windows

Installing rustup on Linux or macOS