Forem: Rakib Hasan

Dockerize MERN Application

Rakib Hasan — Tue, 12 Nov 2024 15:58:55 +0000

In this blog, I’ll guide you through setting up a Docker environment for a MERN application. This setup will include a React (Vite) frontend, an Express backend, and MongoDB, all configured in a Dockerized environment. Let’s walk through each step in simple terms.

Step 1: Folder Structure

Here's how our project folder, named mern-docker, is organized:

mern-docker/
├── frontend/
│   ├── Dockerfile
│   └── docker-compose.yml
├── backend/
│   ├── Dockerfile
│   └── docker-compose.yml
└── docker-compose.yml  (Main configuration file for Docker)

This structure helps separate the frontend and backend applications, allowing each to have its Docker configuration.

Step 2: Dockerizing the Frontend (React Vite Application)

The frontend folder contains a React app created with Vite. Let’s add a Dockerfileto this folder to prepare it for Docker.
2.1 Dockerfile for Frontend

In the frontend folder, create a file named Dockerfile and add the following code:

# Use an official node image as the base image
FROM node:18-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5173

# Command to run the application
CMD ["npm", "run", "dev"]

2.2 Docker-Compose Service for Frontend

Also In the frontend folder, create a file named docker-compose.yml and add the following code:, define the service for our React frontend:

version: '3.8'
services:
  react-vite-app:
    image: react-vite-app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '5173:5173'
    container_name: react-vite-container
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - .:/app
      - /app/node_modules

Step 3: Dockerizing the Backend (Express and MongoDB)

The backend folder holds the server code using Express and MongoDB. Let’s set it up in Docker.

3.1 Dockerfile for Backend

In the backend folder, create a Dockerfile:

# Use the official Node.js image as the base image
FROM node:18-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5000

# Command to run the application
CMD ["npm", "run", "dev"]

3.2 Docker-Compose Service for Backend and MongoDB

Also In the backendfolder, create a file named docker-compose.yml and add the following code. add the backend and MongoDB services:

version: '3.8'

services:
  # MongoDB service
  mongo:
    image: mongo:latest
    container_name: mongo-container
    ports:
      - '27017:27017'
    volumes:
      - mongotestData:/data/db
    networks:
      - app-network
    environment:
      - MONGO_INITDB_ROOT_USERNAME=root
      - MONGO_INITDB_ROOT_PASSWORD=secret

  # Backend service
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    image: mern-backend-image
    container_name: mern-backend-container
    ports:
      - '5000:5000'
    depends_on:
      - mongo
    env_file:
      - ./backend/config/config.env
    stdin_open: true
    volumes:
      - ./backend:/app
      - /app/node_modules
    networks:
      - app-network

# Define volumes for persistent data storage
volumes:
  mongotestData:

# Define networks
networks:
  app-network:

Step 4: Composing frontend and backend together.

In mern-docker folder, create a file named (main compose file) docker-compose.yml and add the following code.

version: '3.8'

services:
  frontend:
    extends:
      file: ./frontend/docker-compose.yml
      service: react-vite-app

  backend:
    extends:
      file: ./backend/docker-compose.yml
      service: backend

  mongo:
    extends:
      file: ./backend/docker-compose.yml
      service: mongo

volumes:
  mongotestData:

networks:
  app-network:

Step 5: Running the Dockerized Applications

Now that the Docker configuration is ready, let’s start the services.

Open a terminal in the mern-docker directory.
Run the following command to start both the frontend and backend services:

docker-compose -f docker-compose.yml up --build

or run this command

docker-compose -f frontend/docker-compose.yml -f backend/docker-compose.yml up --build

This command will combine the configurations in frontend/docker-compose.yml and backend/docker-compose.yml and launch the services. This approach is quick and doesn’t require a new parent docker-compose.yml file.

After running the command Docker will start downloading necessary images, building services, and launching containers. Once completed:

Visit http://localhost:5173 to see the React frontend.
Your backend API will be available on http://localhost:5000.
MongoDB will be running and accessible within the network. To Stop the containers run this command

docker-compose down

Note: If you find problem dockerizing react-vite application or backend express-mongo application you can check my these blog the come back to this blog.

Dockerize vite-react application: click here
Dockerizing an Express App with MongoDB Database: click here

Happy Coding !!!

Dockerizing an Express App with MongoDB Database

Rakib Hasan — Fri, 08 Nov 2024 16:21:21 +0000

In this blog post, we'll walk through the process of dockerizing an Express.js application with a MongoDB database. We'll create Docker images, set up a Docker Compose file, and run the application using Docker Compose.

Step 1: Set Up the Project Files

Create Project Structure

In the root of your project directory, express-mongo-docker, create the following files:

express-mongo-docker/
├── Dockerfile
├── .dockerignore
├── package.json
├── server.js
├── docker-compose.yml
└── config/
    ├── mongodb.js
    └── config.env

Express App Code

Add the Express server code in file index.js

const express = require('express');
const app = express();
const dotenv = require('dotenv');
const cors = require('cors');
const bodyParser = require('body-parser');
const connectDatabase = require('./config/mongoDb');
const port = process.env.PORT || 5000;

//setting up config file
dotenv.config({ path: 'config/config.env' });

// middleware
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.urlencoded({ extended: true }));

// handle uncaught excepion

process.on('uncaughtException', (err) => {
  console.log(`ERROR: ${err.message} \n ${err.stack}`);
  console.log('Shutting down the server due to uncaught exception');
  process.exit(1);
});

// console.log(a); // reference error: uncaught error

// connecting to Database
connectDatabase();


// Api routes
app.get('/', (req, res) => {
  res.json({
    message: 'API is running',
    docker: 'Docker is running'
  });
});



const server = app.listen(port, () => {
  console.log(
    `Server is running at port ${port} in ${process.env.NODE_ENV} mode`
  );
});

// Handle unhandle Promise rejection

process.on('unhandledRejection', (err) => {
  console.log(`ERROR : ${err.message}`);
  console.log('Shutting down the server due to unhandle promise rejection');
  server.close(() => {
    process.exit(1);
  });
});

Connection To Mongodb Connecting to Mongodb database from file ./config/mongoDb

const mongoose = require('mongoose');

const connectDatabase = async () => {
  console.log('db uri', process.env.DB_LOCAL_URI);
  try {
    await mongoose.connect(process.env.DB_LOCAL_URI).then((con) => {
      console.log(
        `MongoDb database connected with host: ${con.connection.host}`
      );
    });
    console.log('MongoDB is connected');
  } catch (error) {
    console.log('MongoDB connection failed', error);
  }
};

module.exports = connectDatabase;

Add env file Create .env file from file: ./config/config.env

DB_LOCAL_URI=mongodb://<your-username>:<your-password>@mongo:27017/test-app?authSource=admin
MONGO_INITDB_ROOT_USERNAME=<your-username>
MONGO_INITDB_ROOT_PASSWORD=<your-password>

Step 2. Creating Docker Images

First, let's create a Dockerfilefor our Express application:

# Use the official Node.js image as the base image
FROM node:18-alpine

# Set the working directory
WORKDIR /app

COPY package*.json ./

RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5000

# Command to run the application
CMD ["npm", "run", "dev"]

Next, create a .dockerignore file to exclude unnecessary files and directories:

node_modules
npm-debug.log
.git
.gitignore
.dockerignore
Dockerfile
docker-compose.yml

Modify package.json scripts with Express and Mongoose:

"scripts": {
    "start": "node index.js",
    "dev": "SET NODE_ENV=DEVELOPMENT& nodemon -L index.js --host",
    "prod": "SET NODE_ENV=PRODUCTION& nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Step 3. Creating a Docker Compose File

Now, let's create a docker-compose.yml file to define and run our multi-container Docker application:

version: '3.8'

services:
  # MongoDB service
  mongo:
    image: mongo:latest
    container_name: mongo-container
    ports:
      - '27017:27017'
    volumes:
      - mongotestData:/data/db
    networks:
      - app-network
  # For environment variable it'll be beter if you use env file path here
    environment:
      - MONGO_INITDB_ROOT_USERNAME=<your-username>
      - MONGO_INITDB_ROOT_PASSWORD=<your-password>

  # Backend service
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    image: mern-backend-image
    container_name: mern-backend-container
    ports:
      - '5000:5000'
    depends_on:
      - mongo
    env_file:
      - ./config/config.env
    stdin_open: true
    volumes:
      - .:/app
      - /app/node_modules
    networks:
      - app-network

# Define volumes
volumes:
  mongotestData:

# Define networks
networks:
  app-network:

This Docker Compose file defines two services:

backend: Our Express application
mongo: MongoDB database

The backend service builds from our Dockerfile, maps port 5000, and depends on the mongo service. We also set an environment variable for the MongoDB connection string.

The mongo service uses the official MongoDB image, maps port 27017, and uses a named volume to persist data.( you can also bind local file path to store mongo data)

Step 4. Running the Application

To run the application using Docker Compose, follow these steps:

Open a terminal and navigate to your project directory.
Build and start the containers:

docker-compose up --build

Your application should now be running. Access it at http://localhost:5000.
To stop the application, use:

docker-compose down

Congratulations !!!

We've successfully dockerized an Express application with a MongoDB database. This setup allows for easy deployment and scaling of your application. Remember to adjust the configuration as needed for your specific project requirements.

Happy coding!

Effortlessly Dockerize Your Vite-React Application

Rakib Hasan — Tue, 05 Nov 2024 15:22:29 +0000

Steps to Dockerize a Vite + React App

1. Create a Dockerfile

Create a file named Dockerfile in the root of your project with the following content:

# Use an official node image as the base image
FROM node:18-alpine


WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

RUN npm install

COPY . .

# Expose the port the app runs on
EXPOSE 5173

# Command to run the application
CMD ["npm", "run", "dev"]`

Create a .dockerignore file Create a .dockerignore file in the root of your project to exclude unnecessary files:

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

3. Build the Docker image

Run the following command in your terminal to build the Docker image:

docker build -t vite-react-app .

4. Run the Docker container

After the image is built, run the container using:

docker run -p 5173:5173 vite-react-app

Your Vite + React app should now be accessible at http://localhost:5173.

5. Give name Docker container and run in detached mode

After the image is built, run the container using:

docker run -d -p 5173:5173 --rm --name vite-react-container vite-react-app

Now if we stop the container it will be deleted automatically.

6. Using Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications. Here's how to use it with your Vite + React app:

6.1. Create a `docker-compose.yml` file

Create a file named docker-compose.yml in the root of your project with the following content:

version: '3.8'
services:
  react-vite-app:
    image: react-vite-app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '5173:5173'
    container_name: react-vite-container
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - .:/app
      - /app/node_modules

This docker-compose.yml file sets up a Docker container for a React project built with Vite. It mounts the project directory to /app for live code updates and ignores /app/node_modules to prevent conflicts with the host's node_modules. As a result, any changes in the code will be reflected in the running container at http://localhost:5173.

6.2. Run the container using Docker Compose

To start your application using Docker Compose, run the following command in your terminal:

docker-compose up

This command will build the image if it doesn't exist and start the container. Your Vite + React app should now be accessible at http://localhost:5173.

6.3. Stop the container

To stop the container, you can use:

docker-compose down

This will stop and remove the containers defined in your docker-compose.yml file.

Using Docker Compose provides several advantages, including easier management of environment variables, volume mounting for live code updates, and the ability to define and run multi-container applications.

Docker: Images Vs Containers

Rakib Hasan — Sun, 14 Jul 2024 16:29:56 +0000

In technologies like Docker, Images and Containers are fundamental concepts in containerization. People how are new to this technology often get confused about different between Images and Containers. Hope fully you will learn key difference between them in the blog post.

Images

Definition: An image is lightweight, standalone, and executable package that include everything needed to run a piece of software, including code, runtime, libraries, environment variables, and configuration files.
State: Images are static, Once created, they do not change.
Creation: Images are built from a set of instructions (e.g., a Dockerfile). They are created using the docker build command.
Storage: Images are stored in image registries (e.g., Docker hub, Amazon ECR. Google Container Registry).
Usage: Images serve as the blueprint for a containers. They are used to create containers but cannot be executed directly.

Containers

Definition: A container is a runnable instance of an image. Containers include the application and all its dependencies, running in an isolated environment.
State: Containers are dynamic. They can be started, stopped, moved, and deleted. Their state can change over time as the application runs.
Creation: Containers are created from images using the docker run command.
Storage: Containers are temporary by nature. Their data can be lost if they are not configured to persist (e.g., using volumes for data persistence).
Usage: Containers are the actual instances where applications run. They provide the runtime environment for applications and can be managed (e.g., started, stopped) using Docker commands.

Summary

Images are immutable templates that define what the containerized application looks like, including all dependencies and configurations.
Containers are the live, running instances of those images, providing the execution environment for applications.

Docker Installation in Windows: Easy for beginners

Rakib Hasan — Fri, 12 Jul 2024 18:33:32 +0000

Docker is a powerful platform that enables developers to create, deploy, and run applications in containers. Containers allow you to package an application with all its dependencies, making it portable and consistent across different environments. If you're new to Docker and want to get started on Windows, this beginner step-by-step guide will help you through the installation process.

Step 1: Check System Requirements

Before installing Docker, ensure your system meets the following requirements:

To check your requirement go to docker documentation site [ Link ] and see whether it matches with your machine.

to check your windows system info press win + r and search for winver you will see your windows version and OS build number.

Step 2: Turn on the WSL 2 feature on Windows

if wsl-2 is not installed, install by command wsl --install .
Hyper-V and Containers Windows features must be enabled.

Hardware virtualization must be enabled in the BIOS. To avoid any issues or error enable Virtual Machine Platform and Windows Subsystem for Linux

Check if the virtualization is enable of disabled for windows task manager.

Step 3: Download Docker Desktop

Go to docker official web site [ Link ]. Click on “Docker Desktop for windows”
Install downloaded Docker exe file and run it.

Step 4: Verify the Installation

Run Docker Commands:

Type docker --version to verify that Docker is installed and running.
Run docker run hello-world to check if Docker can pull and run containers.

If everything is set up correctly, you should see a message saying "Hello from Docker!" indicating that your Docker installation is successful.

Conclusion

You've now installed Docker on your Windows machine and verified that it's working correctly. With Docker, you can start exploring containerization, creating your own containers, and simplifying your development workflow. Happy Dockering!

Feel free to leave a comment below if you have any questions or run into any issues during the installation process.

Understanding Docker Architecture: A Beginner's Guide

Rakib Hasan — Mon, 08 Jul 2024 18:50:48 +0000

For most beginners, Docker's architecture is hard to understand. In this blog post, you will learn everything about Docker architecture and how it works, as easily as possible, with proper visual aids.

What is Docker?

Docker is a platform for building, running and shipping application in consistent manners. Docker Solve the famous problem “It works on my machine!”

Now let’s talk about Docker Engine

Docker uses client-server architecture. That means docker has its client component that to the server component using the REST API .

Server is called Docker Engine, set in the background and takes care of building and running the docker containers.

Take a look at the image below

Technically a container is a process. It’s a special process, we are not going to discuss about this process in this blog, For now we should now that unlike virtual machines (VM), containers don’t contain full-blown ‘operating system’. Instead, All containers on a host shared the operating system (OS) of the host. More accurately, All its container share kernels of the host.

What is Kernel ?

A kernel is a core of a operating system (OS), like engine of car. A kernel manages applications and hardware resources.

Every OS (mac, windows ,Linux) has its won kernels/engines. And this kernels has different API’s. That’s why we can not run mac application on windows or Linux. Because, under the hood this applications is to talk to the kernel underline “OS”. So that means on Linux machines, we can only run Linux containers, Because this container need Linux. On a windows machine however, we can run both ( windows + Linux) container because windows 10 shift with a custom build Linux kernel. Docker on mac uses light weight Linux virtual machine (VM).

Now let’s see docker architecture all together

Let's explain some terms that we have seen in the docker architecture.

What is docker daemon ?

The Docker daemon (dockerd) listens for Docker API requests and manages Docker objects such as images, containers, networks, and volumes. A daemon can also communicate with other daemons to manage Docker services.

What is docker client ?

The Docker client (docker) is the primary way that many Docker users interact with Docker. When you use commands such as docker run, the client sends these commands to docker daemon dockerd, which carries them out. The docker command uses the Docker API. The Docker client can communicate with more than one daemon.

Docker registries

A Docker registry stores Docker images. Docker Hub is a public registry that anyone can use, and Docker looks for images on Docker Hub by default. You can even run your own private registry.

When you use the docker pull or docker run commands, Docker pulls the required images from your configured registry. When you use the docker push command, Docker pushes your image to your configured registry.

Containers vs. Virtual Machines: A Beginner’s Journey

Rakib Hasan — Fri, 05 Jul 2024 19:10:47 +0000

Containers: A containers is an isolated environments for running an application. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

Pros of Containers:

Lightweight: Containers share the host OS, making them much lighter and faster to start than VMs.
Efficiency: They use fewer resources, allowing more containers to run on the same hardware compared to VMs.
Scalability: Ideal for microservices and scaling applications quickly.

Cons of Containers:

Shared Kernel: Since containers share the host OS kernel, they offer less isolation than VMs.
Compatibility: Containers are limited to the OS of the host system.

Virtual Machine(VM): VM is a abstraction of machines (physical hardware). A virtual machine is a digital copy of a physical machine. You can have multiple virtual machines with their own individual operating systems running on the same host operating system.

Pros of Virtual Machines:

Isolation: VMs offer strong isolation, as each VM runs its own OS.
Versatility: They can run different OSes on the same physical hardware.
Security: Enhanced security due to complete OS separation.

Cons of Virtual Machines:

Resource Intensive: VMs are heavy, consuming significant CPU, memory, and storage resources.
Slower Startup: VMs take longer to boot up due to their complete OS stack.

When to Use What?

Use VMs if: You need strong isolation for security purposes, need to run multiple different OSes, or are dealing with legacy applications that require a full OS environment.
Use Containers if: You’re developing microservices, need rapid scaling, or want to maximize resource efficiency.

Different between Containers and Virtual Machines

Containers

A containers is an isolated environments for running an application.
Allow running multiple apps in isolation.
More lightweight.
Use "OS" of the host.
Need less hardware resources.
containers does not container full-blown operating system.

Virtual Machines(VM)

VM is a abstraction of machines (physical hardware).
on same physical machine we can have two different machine, where each running completely different application and each application has exact dependencies.
More heavyweight
Slow to start (Entire apps needs to be loaded).
Resource intensive (Each machine takes actual hardware. resources).
Each VM needs a full-blown OS.

React Higher Order Component

Rakib Hasan — Wed, 08 Nov 2023 17:01:43 +0000

Definition

If a component takes another component as an argument and returns completely new component is called a higher-order component. Higher-order components are mainly wrapper components.

Example details:

suppose 2 component named ClickCounter **and **HoverCounter shares the same kind of state in there component. We can separate states from both counter and put them in Higher-order component and wrap them with **ClickCounter **and **HoverCounter **to share their state.

ClickCounter.js

import React from 'react';
import withCounter from './withCounter';

function ClickCounter({ count, incrementCount }) {
        return (
          <div className="w-full flex justify-center ">
            <button
              onClick={incrementCount}
              type="button"
              className="px-6 py-2 bg-green-500 rounded-lg text-white"
            >
              Clicked
              {' '}
              {count}
              {' '}
              times
            </button>
          </div>
        );
}

export default withCounter(ClickCounter);

HoverCounter.js

import React from 'react';
import withCounter from './withCounter';

function HoverCounter({ count, incrementCount }) {
        return (
          <div className="w-full flex justify-center mt-8">
            <h1
              onMouseOver={incrementCount}
              className="text-green-600 tex-2xl font-bold border-2 border-solid border-gray-600 p-2"
            >
              Hover
              {' '}
              {count}
              {' '}
              times
            </h1>
          </div>
        );
}

export default withCounter(HoverCounter);

Higher Order Function: withCounter.js

import React, { Component } from 'react';

const withCounter = (OrginalComponent) => {
    class NewCounter extends Component {
        state = { count: 0 };

        incrementCount = () => {
            this.setState((prevState) => ({ count: prevState.count + 1 }));
        };

        render() {
            const { count } = this.state;
            return (
              <OrginalComponent count={count} incrementCount={this.incrementCount} />
            );
        }
    }
    return NewCounter;
};

export default withCounter;

Tailwindcss Breakpoint indicator for development! Super Useful

Rakib Hasan — Tue, 07 Nov 2023 19:23:12 +0000

In this blog post, I'm going to show you one of my favourite helpers for developing with tailwindcss.

How do you know the current breakpoint with Tailwindcss ?

You can look up the pixels on each one and slowly try and move your screen width to that amount of pixels... This is slow and kind of annoying! I recently discovered this trick inside of a Next.js template, and have added it to every project since! I felt compelled to write and share this to people that may not have seen it before!

Here is a code snippet you're going to love! This will display the current tailwindcss breakpoint while you're in development, so you can quickly adjust the width and always see what breakpoint you should be targeting.

Create the component

export function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null;

  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
}

Include the component at the highest level in your app

For example, I'm using Next.js app router, so I would include this in the app router.

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
    >
      <head />
      <body>
        <div>
          <Header />
          <main>{children}</main>
        </div>
        <TailwindIndicator />
      </body>
    </html>
  );
}

Now, whenever you are developing you will see a handy indicator in the button right of the screen, stating the current Tailwindcss breakpoint!

Exploring Backend

Rakib Hasan — Fri, 24 Dec 2021 17:05:50 +0000

Node js

Node Js is not a programming language, It is a javascript runtime which runs on the server side. It provides an event driven, non-blocking(asynchronous) input-output and cross-platform runtime environment for building highly scalable server-side applications using javascript.

SQL and Nosql database

Differences between sql and nosql database:
SQL database relational database, NoSQL database is non-relational
SQL database uses structured query language and it has predefined schema, NoSQL database has dynamic schemas for unstructured data.
SQL databases are vertically scalable, NoSQL databases are horizontally scalable.
SQL databases are better for multi-row transaction, NoSQL databases are better for unstructured data documents or JSON

Relational Database

A relational database is a collection of data items with pre-defined relationships between them. RDMS tables with columns and rows. Tables are used to hold information about the objects to be represented in the database. Each column in a table holds a certain kind of data and a field stores the actual value of an attribute. The rows in the table represent a collection of related values of one object or entity. Each row in a table could be marked with a unique identifier called a primary key, and rows among multiple tables can be made related using foreign keys. This data can be accessed in many different ways without reorganizing the database tables themselves.

Express js

Express. js is a Node. js web application server framework, designed for building single-page, multi-page, and hybrid web applications. Express is a node js framework that makes using node js easy. It helps to navigate routes so easily that we can run all the data easily. Express gives us different types of middleware to integrate with json data and make node file module systems easy.

CRUD Operation

CRUD stands for Create, Read, Update, and Delete, which are four primitive database operations. This operation is most frequently used.

Create: Create operation makes new data in database.
Read : This data is visible to the website view. Use pagination, sorting and filtering to navigate big lists
Update: This operation helps to update an existing data in the database and sometimes creates new one.
Delete: Delete operation removes data from the database.

React Core Concepts

Rakib Hasan — Fri, 24 Dec 2021 15:52:04 +0000

React core concept

React Js

React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling the view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.
React js features and benefits;

React JS gives excellent cross platform support
it provides single page application
Makes JavaScript code faster
User interface focus design
Support server side rendering
React supports its virtual DOM instead of browser DOM, react virtual Dom is faster.
It built reusable component
React follows one directional data flow or unidirectional data binding.
React is backed by strong community support

Props and State

Props and state both are javascript objects. Both holes data that influence the output of the rendered component. Props get passed to the components as function parameters. On the other hand, State is managed within that component like a variable declaration within a function.

React props are read only because they don't attempt to change their inputs and always return the same result for the same inputs. Though React is pretty flexible it has some stick rules, All functions must act like pure function with respect to their props.

JSX

JSX is a syntax extension to javascript. Basically it provides syntactic sugar to the React.createElement() function. It gives us the expressiveness of JavaScript along with HTML like template syntax.
The code we write in jsx code are react elements.

React Component lifecycle

Component lifecycle: In class component each component has several lifecycles that can be override at a particular time at time of processing. Components can be removed, modified or override with lifecycle methods.
There are some life cycle methods like: componentDidMount() ,ComponentDidUpdate(), componentWillUnmount(), componentDidCatch()

React Virtual DOM

React virtual DOM: Virtual DOM is an in-memory representation of Real DOM. The representation of the UI is kept in memory and syncs with the real-DOM. It’s a step that happens when the render function is called or a function executes and displays elements on the screen.
Virtual Dom uses diff algorithms in 3 simple steps;
When some data changes, the entire UI re-renders in the Virtual DOM.
Then the difference between the previous DOM re-presented and the new one is calculated.
Once the calculation is done, the real Dom will be updated, with the thing actually being changed.

React Context API

Context API: context api is a global way to pass data to any component in a React app without having to pass props down manually at every level.
React createContext() returns a consumer and providerName. Provider is a component that passes data within its consumer child components.

React Custom Hook
Custom hooks are a mechanism to reuse stateful logic. When we use this hook all its states and effects are fully different. Custom hooks give flexibility to share logic that react doesn’t provide. Custom hooks cover a wide range of use cases.

*Example: *


const function useProduct = ()=>{
const [products,setProducts] = setProducts([])
useEffect(()=>{
fetch('https://fakestoreapi.com/products')
.then(res=>res.json())
.then(data=>setProducts(data))
},[])
Return  [products,setProducts];
}

Forem: Rakib Hasan

Dockerize MERN Application

Step 1: Folder Structure

Step 2: Dockerizing the Frontend (React Vite Application)

Step 3: Dockerizing the Backend (Express and MongoDB)

Step 4: Composing frontend and backend together.

Step 5: Running the Dockerized Applications

Dockerizing an Express App with MongoDB Database

Step 1: Set Up the Project Files

Step 2. Creating Docker Images

Step 3. Creating a Docker Compose File

Step 4. Running the Application

Congratulations !!!

Effortlessly Dockerize Your Vite-React Application

1. Create a Dockerfile

3. Build the Docker image

4. Run the Docker container

5. Give name Docker container and run in detached mode

6. Using Docker Compose

6.1. Create a docker-compose.yml file

6.2. Run the container using Docker Compose

6.3. Stop the container

Docker: Images Vs Containers

Images

Containers

Summary

Docker Installation in Windows: Easy for beginners

Step 1: Check System Requirements

Step 2: Turn on the WSL 2 feature on Windows

Step 3: Download Docker Desktop

Step 4: Verify the Installation

Conclusion

Understanding Docker Architecture: A Beginner's Guide

What is Docker?

Now let’s talk about Docker Engine

What is Kernel ?

Now let’s see docker architecture all together

What is docker daemon ?

What is docker client ?

Docker registries

Containers vs. Virtual Machines: A Beginner’s Journey

When to Use What?

Different between Containers and Virtual Machines

Containers

Virtual Machines(VM)

React Higher Order Component

Definition

Example details:

Higher Order Function: withCounter.js

Tailwindcss Breakpoint indicator for development! Super Useful

How do you know the current breakpoint with Tailwindcss ?

Create the component

Include the component at the highest level in your app

Exploring Backend

React Core Concepts

6.1. Create a `docker-compose.yml` file