DEV Community: Ubani Friday

Understanding Dependency Versioning and Updating

Ubani Friday — Sun, 13 Feb 2022 16:27:22 +0000

This tutorial will focus on everything you need to know within your package.json as regards versioning and how your dependency update works but before we get started, let's take a road map to achieving this.

What Is Dependency Version?
Major, Minor and Patch.
Updating Dependency.
The Charet (^) Character & how It works.
The Tildle (~) Character & How It Works.

What is Dependency Versioning?

Dependency version represents the three(3) digits separated with a period(.) that is mapped to the actual dependency name. See sample file below:

{
  "name": "night",
  "version": "1.0.0",
  "description": "a simple REST API with express",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "Dev": "nodemon server.js"
  },
  "keywords": [
    "nodejs",
    "express",
    "nodemon"
  ],
  "author": "Ubani Friday",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Look closely at the sample above, you will see two dependencies express and nodemon installed. We would focus on the express library.
"express": ^4.17.2
express signifies the dependency name while ^4.17.2 signifies the version. The three digits signifies Major, Minor and Patch. Let me take you on a ride on what these three digit really means.

MAJOR

This is the first digit from the version number representing a change in the API of the dependency. This means that if there is a change in the API of the dependency, the value of the major version increases.

MINOR

This is the second digit from the version number representing a change in features/functionality of the dependency. This implies that if there is a change in features/functionality of the dependency, the value of the minor version increases.

PATCH

Patch is the last digit of the version number representing any change in bug fixing. This implies that once a bug is detected in a dependency and was fixed, there will be an increase in the value of the patch version.

Updating Dependency

Updating a dependency is the change that occurs in the value of the dependency version and this is triggered by two factors which are:

Charet(^) Character
Tildle(~) Character

Charet (^) Character

The charet (^) character is used to prefix dependency version in order to bypass code breaking when there is a change in the version of that dependency. It also allows node package manager(npm) to install updates of both MINOR and PATCH versions.
Let's say we install express version of 4.16.0 using npm i express@4.16.0 we would have our dependency looking like the sample below.

{
  "name": "night",
  "version": "1.0.0",
  "description": "a simple REST API with express",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "Dev": "nodemon server.js"
  },
  "keywords": [
    "nodejs",
    "express",
    "nodemon"
  ],
  "author": "Ubani Friday",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

If the latest version of express was considered to be used, we then run this command to show the old and latest versions npm outdated see sample image below.

You will notice that the wanted version and updated versions is the same signifying that there was a change in the MINOR and PATCH versions. We can now update the dependency to the latest version by entering the command npm update. At complete installation, the version of express will be changed/updated to the latest version as show below.

{
  "name": "night",
  "version": "1.0.0",
  "description": "a simple REST API with express",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "Dev": "nodemon server.js"
  },
  "keywords": [
    "nodejs",
    "express",
    "nodemon"
  ],
  "author": "Ubani Friday",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Tildle (~) Character

The tildle (~) character is used to prefix dependency version in order to bypass code breaking when there is a change in the version of that dependency. It only accept a change in the PATCH version of the dependency.
Let's understand this better by changing the charet (^) character of the express version installed earlier to tildle (~) character. see sample below.

{
  "name": "night",
  "version": "1.0.0",
  "description": "a simple REST API with express",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "Dev": "nodemon server.js"
  },
  "keywords": [
    "nodejs",
    "express",
    "nodemon"
  ],
  "author": "Ubani Friday",
  "license": "ISC",
  "dependencies": {
    "express": "~4.16.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

If we try to check the latest version of the dependency on the terminal of our VSCode by entering the command npm outdated
see sample image below.

we will notice that we the wanted version is different from the latest version unlike the result shown when we ran the outdated command earlier on a charet(^) version of express. Therefore, we can update to the wanted version by entering the command npm i express@4.16.4
see final sample below.

{
  "name": "night",
  "version": "1.0.0",
  "description": "a simple REST API with express",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "Dev": "nodemon server.js"
  },
  "keywords": [
    "nodejs",
    "express",
    "nodemon"
  ],
  "author": "Ubani Friday",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

After which you can now change the charet character "express": "^4.16.4" to tildle character "express": "~4.16.4"
If you find this tutorial useful, do well to click like and follow me to get my future articles.
Socialize with me on:
Twitter
LinkedIn

Am also open to being your guest on virtual training on this stack (MERN)
Thanks for your time.

Protecting your files on GitHub

Ubani Friday — Sun, 12 Dec 2021 08:39:32 +0000

I made a tutorial on how to create a Simple Node.js Server which will serve as a basis for this tutorial as this tutorial will focus mainly on how to protect our files on GitHub.

Let's get started.
Adding protection to our files makes it safe from hackers on the web whose intentions are in a negative direction. To get rid of such people, there is need to protect our files on the local repository before pushing them to GitHub using Git.

To do this, we would need to add a file to the previous application whose GitHub link is provided above.

Adding .gitignore file

Create a file and name it ".gitignore" without the quote.
Open the file.
Enter the name of the file you want to save.

See sample code and image below:

node_modules

.gitignore is a directory that hides whatever file that is placed in it. Here we will hide the node_modules file from the viewers so as to reduce the size of our app when pushed to GitHub. By doing so, the file(node_modules) will no longer be visible to viewers who try to access the public repository on GitHub.

When all is done you can now push your local repository to GitHub.

From the sample image above you will notice that the node_modules directory on your local repository is no longer on remote repository.

Get the sample code on GitHub.

I look forward to hearing from you by leaving a message on the comment tag.
Drop a like if this tutorial was helpful and follow me to get all my tutorials.

Thanks for reading.

Simple NodeJS Server

Ubani Friday — Fri, 10 Dec 2021 16:21:58 +0000

In this tutorial, you will learn how to create a simple server with node.js. Bellow is a brief definition of a Server and NodeJS.

Server is a computer program or device that provides a service to another computer program and its user, also known as the client.

NodeJS is simply an open source, cross-platform runtime environment that runs on a V8 engine for developing server-side, networking applications thereby allowing JavaScript to run outside the web.

The following technology will be used in the cause of this tutorial.

JavaScript (An object oriented programming language)
Node.js (A runtime environment)
VSCode (An Integrated Development Environment-IDE)
POSTMAN (A application to run our request)

Let's get started.

Initiating Node.js

To create a server on node.js, you must first launch the IDE of your choice (VSCode in my case), then you will need to run the command below:

npm init --y

npm is a short for Node Package Manager which helps to install node packages. Some packages will be installed as soon as you hit the enter key after entering the above command. see sample below.

Now that we have successfully set up our node environment, the next thing is to create a server on this environment.

Creating a server

Create a new file and name it server.js at the left pane(Explorer) of VSCode. If all is done as directed, you will have a replica of the below sample image.

now that we have the server.js file created it does nothing because it is currently an empty file. Let dive in to the code base bellow.

First we install a package called "express" with the command

npm i express.

OOPS!!! just remembered i haven't gave a brief on what express is. Express is a back end web application framework for Node.js.

const express = require('express');
const port = 2021;

const app = express();
app.get('/', (req, res) => {
    res.send('A Simple Node.js Server is Up and Running.......')
})
app.listen(port, ()=>{
    console.log(`Server is listening on port ${port}`)
});

First we imported the express module. After importing express, we set a port at which our server will run on, next created an instance of the express module imported. The essence of creating that instance is to help us utilize everything express has to offer us(say its functions).

We use the instance app created to fire our first request(GET METHOD) so as to look for a route that matches "/", after which a response follows up rendering the required content to our client/browser using the res.send() method.

Now that we have all our lines of code, we are left with running this application so as to completely confirm that our server is really up and running.

Running the server

To run our server, we need to first lunch a terminal by clicking on the terminal option at the menu or use a shortcut (ctrl + j) then enter the command below inside the terminal:

node server.js

Once this is done, we would see a message on the terminal showing that our server is up running on port 2021 but the content of the response isn't displayed. This is because we only ran our server but haven't sent a request so if we are to see the response, we need to use either a Browser, POSTMAN or Thunder Client(an extension provided by VSCode) to send a request that is based on the endpoint created which is "/" in our case.

Sending a request

Lunch POSTMAN
Enter this URL in the URL address bar: http://localhost:2021/
Change the request method to GET
Click on the SEND button.

This sample image shows that all is done and dusted as our server is running and our first response was gotten.

You can get the full code to this tutorial here

Trust you've learnt how to create a simple server with node.js.
Give me a like or follow to get all my tutorials.

Simple Query Search in Node Express API

Ubani Friday — Tue, 16 Nov 2021 08:42:07 +0000

REST API has become one of the most use protocol for building and integrating application software. It is most refer to as RESTful API which stands for REpresentational State Transfer Application Programming Interface.

My interest is to show how we can create a search query in a REST API. Let me take you on a ride

Installing Node

Launch your preferred IDE, am using VSCode in my case and enter the code to initiate a node package.
npm init --y
After a successful installation of node package, next we have to install the necessary dependencies. The code below installs our needed dependencies.
npm i express
npm i nodemon --save-dev
You might want to know why the nodemon has a different installation command, YES that's because we only need it just for development purpose but if our application is to be hosted it won't be needed as the keyword node will be used as a command to run our application.

We have successfully install node and the necessary dependencies that is need, lets dive to our main focus.

Creating a Server

The first thing to do is to create a file that our codebase would will live. Get to the terminal and create a file named "server.js".
touch server.js
The file will be created at the explorer nav of your VSCode, all you need is to double click on it to open.

We required our express library in our file so as to make use of its handle helper functions. Next we created a port on which our server will run on. Now that we have access to the express library an instantiation of it with a variable name "app" was declared to make usage appealing but note the variable name is self define which means you can make a declaration of your choice of name.
An array of dummy/static data was created for the students containing their information then we created a default routed that throws a welcome message as respond to the user.

Finally, we used the instance of express declared as "app" to point to the listen() method to make sure that server is successfully up and running.

Let's run our server to make sure we are on the right track.
npm start
The above code was made possible because we edited the scripts in package.json file as follows:




"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },

Next we have to request to the server using POSTMAN. Enter http://localhost:2021 in the url provided and make sure the method is set to GET then hit enter or click on the send button. Result is shown below.

Query Search

Now that we have our server and responds running, it is time to write our route for searching specific information.




app.get("/student", async (req, res) => {
  try{
    const userQuery = await req.query;
        const filteredStudent = await studentInformations.filter((info)=>{
            let isValid = true;
            for(key in userQuery) {
                isValid = isValid && info[key] === userQuery[key];
            }
            return isValid;
        });
        res.json({data: filteredStudent})
  }catch(err){
    res.send(err.message)
  }
});

Brief explanation of sample code: First we get the user request passed as a parameter on the url then filter the database objects based on key after which we loop through the database objects and check if any of the object key from the loop matches what is passed by the user in the url and finally every matched object is now filtered and returned as a responds to the user.

Result

We want to show all student that took a "Frontend" course. This request would be sent http://localhost:2021/student?course=Frontend

That's all.
Hope this helps you hit the like icon and comment for clarity if there is any.
You can get the complete source code from my GitHub repo here

Click on the follow button to always get my posts.

Difference between var, let and const

Ubani Friday — Tue, 09 Nov 2021 17:16:48 +0000

The word var, let and const are keywords for declaring JavaScript variables. Var is an earliest way for declaring variables and still in use by many while let and const is a modern way of declaring variables but there is a difference in using any of them. I will use JavaScript block scope to explain them.

VAR: When a variable is declared using the keyword 'var', it does not follow JavaScript block scope.

From the code base above, you will observe that the program ran because the keyword "var" does not obey JavaScript block scope. The program was able to compile the global variables which are age = 45, name = 'Malush' and address = '23' despite that the variable 'address' was in a local scope.

LET and CONST: Unlike the 'var' keyword, the 'let' and 'const' obeys JavaScript block scope therefore making the program to fail and throw a ReferenceError of "address is not defined".

This error just as it were above shows that the variable address declared with the keyword 'let' could not be reached because the variable address was declared within a local scope.

In summary, variable declared with "var" are exposed globally irrespective of its local block, "let" is used to declare a variable which can change at anytime and "const" is used to declare a variable which you don't want to change in the course of that program.

If this was educating please drop a comment and follow me on twitter: https://twitter.com/callmefarad