DEV Community: Kalpit Rathore

Introducing Adashta: Server-Side Real-Time Charting & More

Kalpit Rathore — Wed, 05 Jun 2024 22:10:59 +0000

We are thrilled to announce the launch of Adashta, an advanced SDK designed to simplify real-time communication for developers. With Adashta, you can focus on your core business logic while we handle the intricacies of real-time data streaming. Our goal is to make it easier than ever to integrate real-time functionalities into your applications.

Why Adashta?

In the ever-evolving landscape of web development, real-time communication has become a critical component for delivering dynamic and responsive user experiences. Whether you're building a live data dashboard, a collaborative tool, or a real-time notification system, Adashta has you covered.

Adashta Charts

One of Adashta's standout features is Adashta Charts, a server-side charting solution that enables you to create real-time charts with little to no frontend coding. With Adashta Charts, you can:

Generate various chart types, including line, bar, and pie charts.
Update charts in real-time with new data from server.

Getting Started

Server-Side Installation and Initialization

To get started with Adashta on the server side, follow these simple steps:

Install Adashta via npm:
```
npm install adashta
```

Initialize Adashta:

const { Adashta } = require('adashta');

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: '3011'
});

const loadAdashta = async () => {
  adashta.on('connection', async (clientId) => {
    console.log('Client connected', clientId);
  });

  adashta.on('disconnection', async (clientId) => {
    console.log('Client disconnected', clientId);
  });
};

loadAdashta();

Client-Side Integration

Include Adashta SDK in Your HTML:

<script type="module">
  import { Adashta } from 'https://cdn.skypack.dev/adashta-js';
</script>

Initialize Adashta in the Client:

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: 3011
});

No extra configuration is needed on the client side. Adashta will automatically connect to the server and handle real-time communication between the server and client.

Creating Real-Time Charts

Wooho! You're all set up with Adashta on the server and client sides. Now, let's see how you can create real-time charts with Adashta Charts.

Define Your Chart:

const chart = {
  chartId: 'dummy-company-stock-chart',
  querySelector: '.chart',
  chartData: {
    type: 'line',
    data: {
      labels: ['Day 1'],
      datasets: [{
        label: 'Dummy Company Stock Price',
        data: [350],
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          title: {
            display: true,
            text: 'Share Price ($)'
          }
        },
        x: {
          title: {
            display: true,
            text: 'Days'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 10,
          }
        }
      }
    }
  }
};

Send Chart Data to Client:

await adashta.charts().produce(clientId, chart);

Update Chart Data:

chart.chartData.data.labels.push(`Day ${days}`);
chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
await adashta.charts().produce(clientId, chart);

Complete Example:

const { Adashta } = require('adashta');

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: '3011'
});

const loadAdashta = async () => {
  const clientIdInterval = {};
  adashta.on('connection', async (clientId) => {
    const chart = {
      chartId: 'dummy-company-stock-chart',
      querySelector: '.chart',
      chartData: {
        type: 'line',
        data: {
          labels: ['Day 1'],
          datasets: [{
            label: 'Dummy Company Stock Price',
            data: [350],
            borderWidth: 2
          }]
        },
        options: {
          scales: {
            y: {
              title: {
                display: true,
                text: 'Share Price ($)'
              }
            },
            x: {
              title: {
                display: true,
                text: 'Days'
              },
              ticks: {
                autoSkip: true,
                maxTicksLimit: 10,
              }
            }
          }
        }
      }
    };

    await adashta.charts().produce(clientId, chart);
      let days = 2;
      clientIdInterval[clientId] = setInterval(async () => {
        chart.chartData.data.labels.push(`Day ${days}`);
        chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
        await adashta.charts().produce(clientId, chart);
        days++;
      }, 2000);
  });

  adashta.on('disconnection', async (clientId) => {
    clearInterval(clientIdInterval[clientId]);
    delete clientIdInterval[clientId];
    console.log('Client disconnected', clientId);
  });
};

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

loadAdashta();

Run Your Adashta Server:
```
node index.js
```
Open Your HTML File in a Browser: HTTP server is required to serve the HTML file. You can use http-server or any other HTTP server of your choice.

With Adashta, integrating real-time charts into your application has never been easier. You can dynamically update charts with new data, providing users with up-to-the-minute information.

Join the Adashta Community

Adashta is an open-source project, and we welcome contributions and feedback from the developer community. If you have any questions or suggestions, please feel free to reach out to us at hello@adashta.co. You can also contribute to the project by visiting our GitHub repository.

We are excited to see how you will use Adashta to create engaging, real-time experiences for your users. Thank you for choosing Adashta, and happy coding!

Feel free to share your thoughts and experiences with Adashta in the comments below. We're eager to hear how Adashta is making a difference in your projects!

How to get time spent by users on a webpage using Node.js?

Kalpit Rathore — Sat, 08 May 2021 17:24:28 +0000

Introduction

As the internet users increasing exponentially, It is very important for enterprises to know how a user interacts with their website so that they can improve user experience accordingly.

In this article, We will be going to talk about how to get time spent by users on a webpage using simple Javascript and Node.js. At first, We will try to understand the concept or working behind it then will implement it using code.

Working

Before deep dive into the code, Let's try to understand the working behind it with the help of the below flow chart.

Implementation

Let's get some hands dirty on code.

1) Create a project folder.

mkdir time-spent-by-user && cd time-spent-by-user

2) Initialize npm in the folder.

npm init -y

3) Install the required dependencies.

npm install --save express
npm install --save ejs

4) Create an "app.js" file & write some code in it.

//app.js
const express = require('express');
const ejs = require('ejs');
const bodyParser= require('body-parser');
const app = express()
const port = 80

app.set('view engine', 'ejs');
app.use(bodyParser.json());

var analytics = {};

// It will render home page
app.get('/', (req, res) => {    
    res.render('index');
})
// ------------------------

// It will render dashboard page
app.get('/dashboard', (req, res) => {
    res.render('dashboard', {"analytics": analytics});
})
// ------------------------

// It will catch the data sent from "sendBeacon" method on home page
app.post('/updatetimespentonpage', bodyParser.text(), function(req,res){  
    var body = JSON.parse(req.body)    
    analytics[body["uid"]] = (analytics[body["uid"]]) ? (analytics[body["uid"]] + body["timeSpentOnPage"]) : (body["timeSpentOnPage"]);
    res.send({"status": "done"});
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`)
})

5) Create a "views" folder.

mkdir views && cd views

6) Create an "index.ejs" file in the views folder & write some code in it.

<!--index.ejs-->
<html>
   <head>
      <title>Home page</title>
   </head>
   <body>
      User Id: <span id="uid"></span> </br>
      Time spent on this page: <span id="time-spent">0s</span>
   </body>
   <script type="text/javascript">

    // Check if uid already exist in cookie.     
    if (!getCookie("uid")) {

        // if not, then create a new uid and store it in cookie.
        document.cookie = "uid=U" + (Date.now().toString(36)).toUpperCase() + "; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/";
    }
    // -------------------------------------------

    document.getElementById('uid').innerHTML = getCookie("uid");


    // This setInterval function increment the value of "timeSpent" variable each second.
    var timeSpent = 0;
    var timeSpentInterval = setInterval(
        function() {
            timeSpent++;
            document.getElementById('time-spent').innerHTML = timeSpent + "s";
        }, 1000);
    // ---------------------------------------------

    // The beforeunload event triggers right before unloading of the window has begun
    window.addEventListener("beforeunload", function() {

        // When user close or refresh the web page, sendBeacon method asynchronously sends a small amount of data over HTTP to a web server.
        navigator.sendBeacon('http://localhost/updatetimespentonpage', JSON.stringify({
            uid: getCookie("uid"),
            timeSpentOnPage: timeSpent
        }))
    });
    // ---------------------------------------------

    // Method used to get cookie
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    // -----------------------------------
   </script>
</html>

7) Create "dashboard.ejs" file & write some code in it.

<!--dashboard.ejs-->
<html>
    <head>
        <title>Dashboard</title>
        <style type="text/css">
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Dashboard</h2>
        <table>
            <tr>                
                <th>User Id</th>
                <th>Time Spent</th>
            </tr>            
                <%  
                    var total_time_spent = 0                    
                    for(i in analytics)
                    {
                        %>
                        <tr>
                            <td><%= i %></td>
                            <td><%= analytics[i] %>s</td>
                        </tr>
                        <%
                            total_time_spent = total_time_spent + analytics[i];
                    }
                %>
                <tr>
                    <%
                        if(Object.keys(analytics).length>0){
                    %>
                        <th>Total Users: <%= Object.keys(analytics).length %></th>
                        <th>Avg Time Spent: <%= (total_time_spent/Object.keys(analytics).length).toFixed(2) %>s</th>
                    <%
                        }
                        else{
                    %>
                        <td>NA</td>
                        <td>NA</td>
                    <%
                        }
                    %>
                </tr>            
        </table>
    </body>
</html>

8) Execute the "app.js" file.

//if you are inside the views folder
cd ..
node app.js

9) Open a browser & point to http://localhost, It will show you "UID" & time spent by you on the webpage.

10) Now, Close the browser tab & point to http://localhost/dashboard

11) Here you can see the list of all the users with their corresponding time spent on the page.

Conclusion

When the user closes or refreshes the home page, It fires the "beforeunload" event & lets the "sendBeacon" method send the time spent data to the server asynchronously. The server catches the data & store it in a variable (You can use a traditional database as well).

sendBeacon is intended to be used for sending analytics data to a web server, & avoids some of the problems with legacy techniques for sending analytics, Such as the use of XMLHttpRequest, Read more here

Check out the github code if you'd like to get sample implementation.

For more updates, follow me on Twitter.

Working with extremely large numbers in JavaScript

Kalpit Rathore — Sat, 13 Mar 2021 13:55:30 +0000

Introduction

In this article, we will going to work on extremely large numbers to get precise answers

The problem

JavaScript has a limitation it only allows precision of about 16 digits for the number format.

Minimum & maximum value that a number can go to without losing precision is -2^53<= x <=2^53, where 2^53 = 9007199254740992.

If we go beyond this limit then we'll lose precision.



console.log(1000000000000011112); // => 1000000000000011100

This impreciseness affect arithmetic operations as well.



console.log(10000000000000001+1) // => 10000000000000000
console.log(10000000000000002-1) // => 10000000000000000
console.log(10000000000000002*3) // => 30000000000000010
console.log(10000000000000001==10000000000000000) // => true

It is difficult to get answers from arithmetic operations of large integers.

The Solution

To solve this impreciseness, We have created a library called sateek.js

The word sateek means exact or precise in hindi language.

To use this library, Encode your large integer in a string format & call the functions provided by sateek.js



sateek.add("10000000000000001", "1"); // => 10000000000000002
sateek.subtract("10000000000000002", "1"); // => 10000000000000001
sateek.multiply("10000000000000002", "3"); // => 30000000000000006

It returns output in string format.

Installation

Sateek.js is available on github & npm or you can simply add it's CDN to your JavaScript file.

Node.js

1) To use this library, You need to install Node.js & npm.
2) Now run the following command in your project directory.



npm install --save sateek

3) Import sateek.js library in your project.



var sateek = require('sateek')();

JavaScript

1) Create a HTML file & write some code in it.



<html>
    <body>

    </body>    
    <script type="module">
        import sateekModule from 'https://cdn.skypack.dev/sateek';
        const sateek = sateekModule();
        console.log(sateek.add("10000000000000002", "3"));
    </script>
</html>

Usage

Sateek.js offers 5 functions.
1) add(n1,n2);
2) subtract(n1,n2);
3) divide(n1,n2);
4) compare(n1,n2);

Where n1 & n2 are two numbers encoded in string format.

Add



sateek.add("10000000000000001", "1"); // => 10000000000000002

Subtract



sateek.subtract("10000000000000002", "1"); // => 10000000000000001

Multiply



sateek.multiply("10000000000000002", "3"); // => 30000000000000006

Divide



sateek.divide("20000000000000022", "2"); // => 10000000000000011

Compare



sateek.compare("10000000000000001", "10000000000000000"); // => 1

sateek.compare("10000000000000000", "10000000000000001"); // => -1

sateek.compare("10000000000000001", "10000000000000001"); // => 0

if n1>n2, it returns 1
if n1<n2, it returns -1
if n1==n2, it returns 0

The Conclusion

Every library has it's own advantages & limitations. Here are some limitations of sateek.js library.

1) Sateek.js focuses more on precision as compare to efficiency.
2) It only work with integers.
3) Division operation only work when dividend is greater than divisor.
4) Division operation only returns quotient.

We have tested this library with large test cases, Still if you found any issue feel free to report it on github/npm or mail me at kalpitrathore@gmail.com.

Thank you for reading.

// Detect dark theme var iframe = document.getElementById('tweet-1367702764201992194-105'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1367702764201992194&theme=dark" }
For daily updates like this, Follow me on twitter.

Various Ways of Real-Time Data Communication in Node.js

Kalpit Rathore — Sat, 06 Feb 2021 16:17:33 +0000

Introduction

In this article, We will going to talk about various ways of Real-Time Data Communication techniques.

Real-Time Communication is a mode of telecommunication where all the connected clients can exchange information instantly or with negligible transmission delay. There are various techniques by which, We can exchange information between client & server in real-time, Some are:-

Techniques

Polling
Server Sent Events
Web Sockets

1. Polling

It is a type of "Client Pull" architecture where client constantly request the server for updates at certain regular intervals.
Client waits for a particular time, then request the server for new updates.
It is kind of half-duplex or unidirectional communication, Where only one direction transmission is allowed at a time.
It is based on HTTP protocol.
High latency transmission.
Browser Support: To receive or send "Polling" updates at the client side, We will use XMLHttpRequest JavaScript API whose browser support can be found on caniuse.

Let's implement this technique in Node.js

1) Open a terminal & create a folder polling

mkdir polling && cd polling

2) Now initialize npm in the folder

npm init -y

3) Create app.js file & write some code in it.

const express = require('express')
const app = express()
const port = 80

app.use('/', express.static('public'));

var data = "Real-Time Update 1";
var number = 1;

app.get('/', (req, res) => {
  res.send({"update": data})
});

var interval = setInterval(function(){
    data = "Real-Time Update "+number;
    console.log("SENT: "+data);
    number++;
}, randomInteger(2,9)*1000);

function randomInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}  

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`)
})

4) Install the required dependencies or libraries.

npm install --save express

5) Create public folder.

mkdir public && cd public

6) Create html folder inside public folder.

mkdir html && cd html

7) Create index.html file inside the public folder & write some code in it.

<html>
    <head>
        <title>Polling</title>
    </head>
    <body>
        <div id="updates"></div>
    </body>
    <script type="text/javascript">

        var interval = setInterval(function(){
            getUpdates();
        }, 5000);

        function getUpdates()
        {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/", true);
            xhr.onload = function (e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {                    
                    document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+JSON.parse(xhr.responseText).update+"</br>";
                }
            }
            };
            xhr.onerror = function (e) {
                console.error(xhr.statusText);
            };
            xhr.send(null);
        }
    </script>
</html>

8) Execute app.js file

//if you are inside html folder then go to your root project directory
cd ../..

//Now execute the app.js file
node app.js

9) Open a browser & point to http://localhost/html/index.html

We have successfully implemented the Polling technique in Node.js. As you can see it's transmission latency is very high.

2. Server Sent Events

It is a type of "Server Push" architecture, Where server instantly pushes the updates to client whenever it receives new information.
Initially client sends the handshake request to server, After handshaking or establishing the connection, Client is not allowed to send data to server, Only server can push updates to client.
It is a kind of half-duplex or unidirectional communication. But after handshaking, only server is allowed to send data.
It is based on HTTP protocol.
Provide low latency transmission.
To receive or send "Server Sent Events" updates at client side, We will going to use EventSource JavaScript API whose browser support can be found on caniuse.

Let's implement this technique in Node.js

1) Open a terminal & create a folder server-sent-events

mkdir server-sent-events && cd server-sent-events

2) Now initialize npm in the folder

npm init -y

3) Create app.js file & write some code in it.

const express = require('express')
const app = express()
const port = 80

app.use('/', express.static('public'));

var data = "Real-Time Update 1";
var number = 1;

app.get('/server-sent-events', function(req, res) {

    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    var interval = setInterval(function(){
        data = "Real-Time Update "+number;
        console.log("SENT: "+data);
        res.write("data: " + data + "\n\n")
        number++;
    }, randomInteger(2,9)*1000);

    // close
    res.on('close', () => {
        clearInterval(interval);
        res.end();
    });
})

function randomInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}  

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`)
})

4) Install the required dependencies or libraries.

npm install --save express

5) Create public folder.

mkdir public && cd public

6) Create html folder inside public folder.

mkdir html && cd html

7) Create index.html file inside the public folder & write some code in it.

<html>
    <head>
        <title>Server Sent Events</title>
    </head>
    <body>
        <div id="updates"></div>
    </body>
    <script type="text/javascript">    

        var source = new EventSource('/server-sent-events')

        source.addEventListener('message', function(e) {            
            document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+e.data+"</br>";
        }, false)

    </script>
</html>

8) Execute app.js file

//if you are inside html folder then go to your root project directory
cd ../..

//Now execute the app.js file
node app.js

9) Open a browser & point to http://localhost/html/index.html

We have successfully implemented the Server Sent Events technique in Node.js. We can use this protocol where "Server to Client Transmission" is our only concern.

3. Web Sockets

It is a type of "Server Push" architecture.
After handshaking, both client & server are allowed to send or receive information at any time.
It is a kind of full-duplex or bidirectional communication where both client & server transmit & receive information simultaneously.
It is based on HTTP & TCP/IP Protocol.
Provide low latency transmission.
To receive or send "Web Sockets" updates at client side, We will going to use WebSocket JavaScript API whose browser support can be found on caniuse.

Let's implement this technique in Node.js

1) Open a terminal & create a folder websockets

mkdir websockets && cd websockets

2) Now initialize npm in the folder

npm init -y

3) Create app.js file & write some code in it.

const http = require('http')
const express = require('express')
const WebSocket = require('ws')
const app = express()
const port = 80

app.use('/', express.static('public'));

const server = http.createServer(app);
const wss = new WebSocket.Server({ server })

var data = "Real-Time Update 1";
var number = 1;

wss.on('connection', ws => {

  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })

  var interval = setInterval(function(){
    data = "Real-Time Update "+number;
    console.log("SENT: "+data);
    ws.send(data)
    number++;
  }, randomInteger(2,9)*1000);  

  ws.on('close', function close() {
    clearInterval(interval);
  });
})

function randomInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}  

server.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`)
})

4) Install the required dependencies or libraries.

npm install --save express
npm install --save ws

5) Create public folder.

mkdir public && cd public

6) Create html folder inside public folder.

mkdir html && cd html

7) Create index.html file inside the public folder & write some code in it.

<html>
    <head>
        <title>Server Sent Events</title>
    </head>
    <body>
        <div id="updates"></div>
    </body>
    <script type="text/javascript">    

        const connection = new WebSocket('ws://localhost:80')

        connection.onmessage = e => {
            document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+e.data+"</br>";
        }

    </script>
</html>

8) Execute app.js file

//if you are inside html folder then go to your root project directory
cd ../..

//Now execute the app.js file
node app.js

9) Open a browser & point to http://localhost/html/index.html

We have successfully implemented the Web Socket technique in Node.js.

Summary

Conclusion

There are the most used techniques we have disscussed, Apart from these there are hundreds of techniques available for real-time data transmission.

You can find whole project on GitHub.

For more update, Follow me on Twitter or GitHub.

What the node.js project structure should look like?

Kalpit Rathore — Fri, 08 Jan 2021 18:49:09 +0000

Introduction

In this article, we will going to talk about organizing node.js project in a structured way.

Organized project structure reduces bugs & delicacy, Increases the stability & scalability of the code.

The Structure

|--app.js
|--api-routes
|--config
|--data
|--jobs
|--loaders
|--node_modules
|--public
|--secrets
|--services
|--views
|--package-lock.json
|--package.json

1. app.js

app.js is the entry point or heart of the node.js application

//app.js
const express = require('express');
const app     = express();

require('./loaders/network-information.js');
require('./api-routes/home.js')(app);
require('./jobs/say-hello.js');
var config = require('./config/config.js');

app.set('view engine', 'ejs');
app.use(express.static('public'))

app.listen(config.port, () => {
  console.log(`App listening at http://localhost:${config.port}`);
})

2. api-routes

api-routes contain URL endpoints, which help users to interact with the application.

|--api-routes
   |--home.js

//home.js
var analytics = require('../services/analytics.js');
module.exports = function(app, network_information){    
    app.get('/', function(req, res){
        res.render('home.ejs', {key: "You have visited this page "+analytics.visitCounter()+" times"});
    });    
}

3. config

This folder contains files that are used to configure the parameters & initial settings for application. They can be overridden & extended by Environment Variables, Command Line Parameters, or External Sources

|--config
   |--config.js

//config.js
module.exports = {    
    port: process.env.PORT || 80
};

4. data

Here you can store your small data or can use it as a local database
Note: Don't store any sensitive or confidential data here, Always use secure database for that kind of data.

|--data
   |--users.json

//users.json
[
    {
        "name": "Mario Curtis",
        "city": "San Francisco",
        "contact number": "4949494949780",
        "type": "Admin"        
    }
]

5. Jobs

jobs folder contains scripts that will execute themselves automatically at a particular time
Just like, Here we have created a script which prints "Hello" every hour a day.

|--jobs
  |--say-hello.js

//say-hello.js
var schedule = require('node-schedule');     

schedule.scheduleJob('00 * * * *', function(){
    console.log('Hello World, This scheduler will say "Hello" every hour to you');
});

6. loaders

loaders contains the type of scripts that will execute at the time server starts.
Just like, Here we are fetching user's IP Address whenever server starts

|--loaders
   |--network-information.js

//network-information.js
const http = require('http');

http.get('http://api.ipify.org?format=json', (resp) => {
  let data = '';

  resp.on('data', (chunk) => {
    data += chunk;    
  });

  resp.on('end', () => {    
    console.log("Your IP address is "+JSON.parse(data).ip)
  });

}).on("error", (err) => {
  console.log("Error: " + err.message);
});

7. public

public folder contains all the files that have to be served "statically" (JS, CSS, Image File).

|--public
   |--css
   |  |--home.css
   |--js
   |  |--home.js

//home.css
body{
    background-color: #f3f7fa;
}

div{
    text-align: center;
    padding-top: 200px;    
}

console.log('Hello from javascript');

8. secrets

You can store all your secrets related to web application such as API-KEY, AUTHENTICATION-KEY, etc.

|--secrets
   |--keys.json

//keys.json
{
    "api-key": "HUH121NVYTB091BHHBCR121DR"
}

9. services

services contains set of modules which performs a specific task. They can be used over & over again.

|--services
   |--anaytics.json

//analytics.json
var i = 0;
function visitCounter()
{
    i = i + 1;
    return i;
}

module.exports = {
    visitCounter: visitCounter
}

10. views

It contains HTML Template files, Which later rendered "dynamically" by Templating Engine & serve HTML response to user.
Here we are using EJS templating engine, You can use any templating engine(pug, ejs) as per your convenience.

|--views
   |--home.ejs

//home.ejs
<html>
    <head>
        <title>Node.js Project Structure</title>
        <link rel="stylesheet" href="/css/home.css"/>
    </head>
    <body>
        <div><%= key %></div>
    </body>
    <script src="/js/home.js"></script>
</html>

Conclusion

Organized folder structure reduces the code complexity & increases the scalability of application.

You can find whole project on GitHub.

For more update, Follow me on Twitter or GitHub.

Serving HTML files using Node.js on Ubuntu

Kalpit Rathore — Thu, 07 Jan 2021 15:07:57 +0000

In this article, We'll going to host a Node.js Application on Ubuntu.

Node.js is an open source, javascript runtime environment used to create of backend of any application.

To get started

Install Node.js

sudo apt-get install nodejs

Install NPM (NPM is a package manager for Node.js packages)

sudo apt-get install npm

Create new project directory

mkdir node_application && cd node_application

Initialize NPM in your project directory

npm init

It will ask some details related to your application.

Install Express.js It is a standard server framework for node to create single-page, multi-page & hybrid applications

npm install express --save

Create "app.js" file inside in your project directory and add some code in it

var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/views/index.html'));
});
app.listen(80);

Create a new folder inside your root project directory.

mkdir views && cd views

Create a new file "index.html" inside "views" folder and add some code in it.

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
      <title>Hello, world!</title>
   </head>
   <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                     <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     Dropdown
                     </a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                           <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                     </ul>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
               </ul>
               <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
               </form>
            </div>
         </div>
      </nav>
      <h1>Hello, world!</h1>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
   </body>
</html>

Now run this command in your root project directory

//if you are inside views folder
cd ..
//else simply run
node app.js

We can see our website in our browser :)
Our project directory will look like this

app.js
node_modules
package.json
package-lock.json
views -> index.html

Concusion

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.

For more update, Follow me on twitter

AWS EC2: Launching an Amazon EC2 instance

Kalpit Rathore — Tue, 29 Dec 2020 18:56:01 +0000

In this post, We are going to create a Linux virtual machine hosted on the cloud (also known as Instance) using Amazon EC2. Amazon Elastic Compute Cloud (Amazon EC2) is an IaaS (Infrastructure as a Service) that provides secure, resizable compute capacity in the cloud.

To launch an EC2 Instance

Sign in to the Amazon Management Console.
From the navigation bar, choose a suitable geographic region that meets your requirements.
Tip: Choose a nearer geographic region from your location to get faster responses
Choose EC2 inside the Compute section of All services, It will redirects you to the Amazon EC2 Console
From the EC2 dashboard choose Launch Instance
Choose an Amazon Machine Image (AMI)
Select an appropriate Amazon Machine Image(AMI). An AMI is a template that contains the software configuration (operating system, application server, and applications) required to launch your instance
Tip: Choose Ubuntu if you are not familiar with other machine images
Choose an Instance Type
Choose a suitable Instance type as per your needs. An Instance type describes the hardware specifications of the virtual machine (i.e. CPU, memory, storage, and networking capacity) and then click next.
Tip: Choose t2.micro, Because it is the only instance type which is eligible for free tier
Configure Instance Details
In this step, We can configure our instance i.e Network type, IP allocation, Monitoring, IAM role, etc. If you don't have any prior knowledge of cloud computing then I would recommend you to not change any setting and simply click next.
Add Storage
An Amazon EBS Volume is similar as physical hard drive. In order to store data, We need to attach EBS volume to an instance. You can attach any size of disk space as per your needs. Free tier eligible customers can get up to 30 GB of EBS. We are choosing 25 GB disk space with General Purpose SSD (GP2) instance type.
Enable "delete on termination" checkbox. It will delete the disk space associated with the server, whenever the server will terminate.
Add Tags
A tag is a key-value pair that you assign to an instance to uniquely identify them from a group. It doesn't alter instance's functionality. Click on add tag button, Enter "Name" in key field and "myserver" in value field. then click next.
Configure Security Group
A security group controls inbound and outbound traffic from the server. There are set of protocol by which we can access the instance server i.e. HTTP, HTTPS, SSH.
- Click on Create a new security group in assign a security group section.
- Enter a security group name and description.
- Now you need to define some protocol by which you are going to access the server. SSH protocol is added automatically, so you don't need to add it manually. Choose anywhere in source drop-down box of SSH protocol. This makes your server accessible from anywhere. Alternatively, You can bound the server with custom IP address as well.
- Now click review and launch.
Review Instance Launch
Review your instance launch details. You can go back to edit changes for each section. If all details are correct then you can click on launch.
- It will ask you to select an existing key pair or create new key pair. A key pair, consisting of a private key and a public key which is used to access instance server securely. Creating a new security group for individual server is the best practice.
- Enter key pair name and click on Download Key Pair button, Once you are done downloading, Save this key in a secure folder and then click on Launch Instance button. Note:- If you lost your key pairs, then you will not able to download it again.
It takes 2–3 minutes to create an instance, Now click on the instance button in the left panel. It will redirect you to the page where you can see list of instances created by you.
Wait until the instance state of "myserver" is changed from pending to running.
We have successfully created an instance server. Now, We need to access it using SSH. Click on instance go to details tab, there we can see Public IP, Just copy it.
Open Terminal or Command Prompt, Go to the folder where you store the key pair file and type the command
ssh -i key-pair.pem ubuntu@public_ip
replace "key-pair.pem" with your key-pair file name and public_ip with your instance's public ip.
It will ask you to add server's fingerprint, then simply type yes and press enter
Type

sudo su -
sudo apt-get update

So we have successfully created and accessed an instance server. With the help of ec2 instance we can build web server, database server, vpn server, game server, data analysis server, geolocation or map server and lot more.

We'll going to build or experiement all of this with our EC2 Server.

For more update, Follow me on twitter or instagram

10 Funny App Loading Messages for App Developers

Kalpit Rathore — Tue, 22 Dec 2020 14:39:05 +0000

Discovering new ways of making you wait.
Your time is very important to us. Please wait while we ignore you.
Still faster than Windows update.
We are not liable for any broken screens as a result of waiting.
Bored of slow loading spinner?, buy more RAM!
Kindly hold on until I finish a cup of coffee.
We will be back in 1/0 minutes.
Why don't you order a sandwich?
Don't panic, Just count to infinite.
Please wait, Your PC is not a superman!