DEV Community: Jeetendra

How messages get exchanged between Docker containers

Jeetendra — Sat, 17 Jun 2023 07:57:40 +0000

Now-a-days Since almost all applications employ containers, it goes without saying that they will need to communicate with one another. In this article, we will cover how messages may be easily sent and received between containers.

I’m assuming that your environment already has Docker installed. Next, we’ll build two apps with flask and node js and attempt to communicate between them.

Let’s start with a Python app that uses Flask.
Create a folder called “ping-app” and create app.py file, place the following code in it.

from flask import Flask
from redis import Redis

app = Flask(__name__)
redis = Redis(host='redis', port=6379)

@app.route('/')
def home():
    redis.incr('pageviews')
    return 'This app has been viewed %s time(s).' % redis.get('pageviews')

@app.route('/get-redis-count')
def count():
    return redis.get('pageviews')


if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

We can see from the code above that Redis is being used as a key-value pair database. and on the root route, we are returning a message with the count to print on the screen while also increasing the number of pageviews in redis by 1.

Since this application uses two packages, let’s make a requirements.txt file and include the following dependencies:

flask
redis

Now Create a file called Dockerfile and add the following code to begin dockerizing this application:

FROM python:3.7
ADD . /code
WORKDIR /code
RUN pip install -r requirements.txt
CMD python app.py

For the next step, we will need a docker-compose file with the following code in order to properly execute this application: Create a docker-compose.yaml file and add the following code:

version: "3.9"
services:
    web:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
            - "5000:5000"
        volumes:
            - .:/code
        depends_on:
            - redis
    redis:
        image: redis

In this code we can see that we have 2 services, 1 is web which is basically using our docker file to run our already created flask app and another service is redis, which basically runs on 6379 port by default. So lets run the app now using following command in your workspace terminal.

docker-compose up

Your redis and web services will both become operational as a result.
Using http://localhost:5000, let’s open your flask application now on browser. and whoohoo, the results are displayed as shown.

Now Reload this app in your browser now a number of times to observe if the count increases each time the page loads.

Also Check out the other endpoint in the same app, http://localhost:5000/get-redis-count, which simply returns the screen count number value.

So far, everything has been rather simple. Let’s assume that you have another Node.js application that wishes to receive the pageview count.

let’s make that Node App as well utilising the techniques below:
Make a new folder called pong-app as a sibling to ping-app, and then place a package.json file containing the following information:

{
    "name": "pong-app",
    "version": "1.0.0",
    "description": "",
    "author": "Jeetendra Singh <jeetendra.apps@gmail.com>",
    "main": "app.js",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "axios": "^1.1.2",
        "express": "^4.16.1"
    }
}

After this lets create app.js file parallel to package.json file with following code:

const express = require('express');
const axios = require('axios');
// Constants
const PORT = 8000;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
  res.send('Hello Node');
});

app.listen(PORT, HOST, () => {
  console.log(`Running on http://${HOST}:${PORT}`);
});

The code above is simply the beginning of a small express application. Hello Node, let’s first dockerize this application. thus make a Dockerfile file with the following information in it.

FROM node:16 
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
CMD node app.js

Lets create a docker-compose.yaml file for this app with following information:

version: "3.9"
services:
    server:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
            - "8000:8000"
        volumes:
            - .:/usr/app
            - /usr/app/node_modules

You are now prepared for this app, docker-compose up can be used to start an application, which will then run on http://localhost:8000. and on the root route, it will output Hello Node.

Now that both apps are operating in separate containers, the easiest approach to display the number of pageviews for the Python app in the node js app is to access the /get-redis-count API on the existing Flask app.
Let’s create a function in Node.js to retrieve the pageview count from a Flask application using the existing Flask api.

app.get("/get-data-from-ping-app",async (req,res)=>{ 
  //call flask based api
  try{
    const response= await axios.get('http://web:5000/get-redis-count')
    console.log('redis count in flask app is ',response.data)
    res.json({count:response.data})
  }catch(err){
    const error='Node App is not able to connect with flask app';
    console.log(error)
    res.send(error)
  }
})

We are attempting to call the departing endpoint /get-redis-count running inside the Flask app in the aforementioned code.

Also, if you’ve observed, we used web:5000 instead of localhost:5000 when creating the url for the flask app (http://web:5000/get-redis-count). Therefore, in order to access resources within containers using the http protocol, we must utilise the container service name defined in the compose file. The service name for this Flask app is web, which is why the url is web:5000.

Now let’s restart our node app and test whether we still obtain the desired results by accessing http://localhost:8000/get-data-from-ping-app.

Currently, the output message will read: Node App is unable to connect with Flask App.

But why? Because there is no networking between the two apps, which are running independently. Therefore, we need to make a few changes to both apps in order to create a network between them.

Just before services, add the network my-local-net with a driver bridge to the docker-compose.yaml file of both apps(ping & pong).

networks:
 my-local-net:
  name: my_local_net
  driver: bridge

Add the following code to the services section of both docker-compose files to connect the created network to each service.

networks:
       - my-local-net

Let’s take a last glance at the docker-compose files:

Ping App’s docker-compose.yaml file(Flask based app)

version: "3.9"
networks:
 my-local-net:
  name: my_local_net
  driver: bridge
services:
    web:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
            - "5000:5000"
        networks:
            - my-local-net
        volumes:
            - .:/code
        depends_on:
            - redis
    redis:
        image: redis
        networks:
            - my-local-net

Pong App’s docker-compose.yaml file(Node.js based app)

version: "3.9"
networks:
 my-local-net:
  name: my_local_net
  driver: bridge
services:
    server:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
            - "8000:8000"
        networks:
            - my-local-net
        volumes:
            - .:/usr/app
            - /usr/app/node_modules

Restart both apps now, then try to access the following URL to view pageviews for the flask app in Node.js:

http://localhost:8000/get-data-from-ping-app

It will respond with something like

{“count”:x}

Note: that x is merely a stand-in for count, which will be an integer value.

Finally, since they are all declared under the same network, separate apps running in Docker containers can connect with one another using Network Driver Bridge.

you can get the complete source code from our download center. Additionally, if you have any questions, please comment below or email me on jeetendra.apps@gmail.com

Create Custom PopUp Component in React

Jeetendra — Fri, 09 Jul 2021 10:54:49 +0000

This blog is originally published at My Blog

Sometimes we fade up with using various modal box provided by Bootstrap or material or suppose we are not using any of these frameworks. then in such case we need to create our own component for Popups and Modal boxes, I created this for one of such requirement.

Before reading it if you want to take a look then try this demonstration

This will be a fully Reusable Component that we can Invoke from any of the component entire our project.

Step 1: Create a file named custom-popup.module.css with following code :

.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  cursor: pointer;
  color: #000;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px) {
  .popup {
    width: 70%;
  }
}

Step 2: Now create Popup Component with name CustomPopup.jsx with following code

import { useEffect, useState } from "react";
import popupStyles from "./custom-popup.module.css";
import PropTypes from "prop-types";
const CustomPopup = (props) => {
  const [show, setShow] = useState(false);

  const closeHandler = (e) => {
    setShow(false);
    props.onClose(false);
  };

  useEffect(() => {
    setShow(props.show);
  }, [props.show]);

  return (
    <div
      style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? "1" : "0"
      }}
      className={popupStyles.overlay}
    >
      <div className={popupStyles.popup}>
        <h2>{props.title}</h2>
        <span className={popupStyles.close} onClick={closeHandler}>
          &times;
        </span>
        <div className={popupStyles.content}>{props.children}</div>
      </div>
    </div>
  );
};

CustomPopup.propTypes = {
  title: PropTypes.string.isRequired,
  show: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired
};
export default CustomPopup;

This component using PropTypes, if you havent installed PropTypes in your project then do install that first using

npm install prop-types --save

Step 3: Invocation from another component

<CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>

It will need 3 props :
1: onClose – need a handler to do some activity after close
click in popup itself
2: show – pass the visibility of popup using boolean
3: title – provide the popup title

and Inside the you may pass any valid JSX that you want to render as content of popup

If you need a complete example how can we do utilise this PopUp Component then you may look into following code

import { useState } from "react";
import CustomPopup from "./CustomPopup";
import "./styles.css";

export default function App() {
  const [visibility, setVisibility] = useState(false);

  const popupCloseHandler = (e) => {
    setVisibility(e);
  };

  return (
    <div className="App">
      <button onClick={(e) => setVisibility(!visibility)}>Toggle Popup</button>

      <CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>
    </div>
  );
}

Thats it for this blog. you may reach out to me in case you have any doubts and suggestions please let me know in comments section.