Creating a Simple Node.js project with MongoDB connectivity (Part 1)

For beginners who would love to have a short intro about why Node has become a raving feature lately, let's start off with elucidating its basic features here.

Node.js

As defined by the official site for Node.js, it is a JavaScript runtime built on Chrome's V8 JavaScript engine. It utilizes an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js is packaged and retrieved from npm which is the largest ecosystem of open source libraries in the world.
  • It's an open source server framework that enables developers to obtain full certification to modify the script as desired.
  • Totally free - Talk about not having to input all that messy credit card info to have access to the script.
  • No need to hassle about platform prerequisites. Node has been proven to run on  most of the renowned platforms such as- 
    • Windows
    • Linux
    • Unix
    • Mac OS X
    • etc.
  • As obviously known, Node.js utilizes JavaScript on the server.
There's just a vast arena of facts which can be discussed under node.js. But let's pause here and move onto the actual implementation of Node on your machine.

Installing Node.js

I've taken a simple example on creating a system called "studentSystem" which we'll be developing to create, update, view and delete student records. The following installation of Node.js will be focused on this studentSystem directory, though within this blog's scope, we'll be focusing on the installation of Node.js itself. You can refer to more information on how to format and create pages for your studentSystem in my next blog.

  • Download Node.js and simply execute the installer.
  • Create a folder into which you choose to store all your node project related files
    • I have created a folder named node inside my F:\NodeJS directory.
  • Install Express-Generator
    • This is an application generator tool application generator tool which can be used to quickly create an application skeleton.
    • In order to install this application generator tool, 
      1. cd into the node folder that you just created and execute the following command
        •  F: \NodeJS\node>npm install –g express-generator
  • Create an Express Project (Here we will create an express project called studentSystem.
    • F: \NodeJS\node>express studentSystem
  • Edit the dependencies in the package.json file.
    • If you check out the package.json file, most of the dependencies will have been already created for you. Now since we're trying to manipulate data using mongo db, we need to add this dependency to the package.json dependencies as well.
{
  "name": "studentsystem",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "mongodb": "^2.2.25",
    "monk": "^4.0.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}
  • Install dependencies
    • cd to the studentSystem directory and execute the following command.
      • “F: \NodeJS\node\studentSystem>npm install”
    • Create a new data folder inside studentSystem directory using the mkdir command on the command prompt.
      • “F: \NodeJS\node\studentSystem >mkdir data”
    • Then type “F: \NodeJS\node\studentSystem>npm start”

  • Once this page is displayed, you can be assured that you have successfully installed Node. CONGRATULATION!
  • Now you can proceed onto creating your actual student System.












Comments

Post a Comment

Popular posts from this blog

Creating connections between Elements in jsPlumb

In my previous posts we've gone through creating a toolbox and canvas from which elements can be dragged from and dropped onto. Then we took a look at eliminating the replication of elements whenever a dropped clone was dragged within the canvas. So now let's move onto creating basic connections between these dropped elements using jsPlumb and jQuery-UI. Starting off with the code previously dealt with, creating connections requires only the addition of a few lines of code to your JS code. The droppable function part of the code has been shown below. Step 1: Assign a unique ID for each element being dropped on the canvas. Though jsPlumb will automatically assign an ID when you don't supply one, it is easier to manipulate the elements when you define an ID. This ID can be a simple digit or even a complex string( But remember, jsPlumb treats all IDs as strings). //Set a unique ID for each dropped Element var indexer = 0 ; function setId (element){ indexer ++;
Read more

AngularJS vs ReactJS

Image
Today I just came across an interesting question and thought of creating this. At many occasions, developers try to render ReactJS as the best over AngularJS. But, according to my personal opinion, this is purely opinionated and also strongly depends on the type of the project in context. First of all, here's a very brief definition of what AngularJS & ReactJS according to their documentations. AngularJS AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write." Here's a perfect example to try out this. ReactJS   React.js is a JavaScript library for building user interfaces. (Famously used by Facebook) The comparison between the two has been jotted out in the following table
Read more

jsPlumb - Drag and Drop Multiple Elements

Hi there, We' ve discussed the jsPlumb facility to Drag and drop objects in my previous post.  Here I've jotted out the way to manipulate the elements dropped onto a canvas without creating replicates of itself. In order to do so, firstly create an additional class definition in your CSS file or simply add the following to the <style> segment in the in the <head> section of your view. . ch { position : absolute ; cursor : pointer ; width : 72 px ; height : 80 px ; background-image : url ( "../dist/img/bigdot.png" ); }   The next and the final step is to squeeze in a few lines of code to your JS file. Within the droppable function, first we create the clone of the tool/ image as discussed in this context, as the 'droppedElement'. Then we add these following lines of code.   Since jsPlumb does not provide support for jQuery, the ui.helper class needs ti be removed. By adding the class "ch" to the drop
Read more