Also, I would assume here that you are a programmer and have basic understanding of JavaScript. I would not explain simple things. Also , most important you need interest to learn.
STEP 1 : INSTALLING Node.Js
This is probably most easy step. You can download the Node.js from this official website
https://nodejs.org/en/ . Node.js comes with Node Package Manager (NPM) which would allow us to install other necessary built in packages to build our app. Installer will detect your system by itself.
I am using Windows, so ill be talking in terms of Windows.
Search for Node.js command Prompt. You can run your all node.js command from here on windows. You can make sure you have installed by running this command :
node --version Thanks to Node.js , you won't need to install this anymore, just because Node.js can start your web server on localhost by writing just 10 or so lines. A basic example shown below
//require is function in nodejs which tells node.js that to run this, i need http package.
// any require statement will go on top
var http = require('http');
function onRequest(request, response){
console.log("A user made a request" + request.url);
response.writeHead(200, {"Context-Type":"text/plain"});
//passing 200 for successful request.
response.write("here is returned data");
response.end();
}
http.createServer(onRequest).listen(3000);
console.log("Server is running...");
Now simply, copy the above code, and save it with any name with .js extension. I am giving it app.js. now go to your Node.js command prompt, and reside to directory your file.
which means, server is running. Now you can actually go to your browser and
type : localhost:3000 to see your website running.
This is sure will impress you knowing that Node.js can create server with just few lines of code.
Step 2 : Install EXPRESS GENERATOR
Express generator is quick way to create a simple application skeleton.
You can visit documentation here : http://expressjs.com/en/starter/generator.html
Go to your Node.js command prompt and run :
$ npm install express-generator -g //where G stands for Global install This will install the Express package in node.js.
Step 3 : Create a Project with Express
Now, you have Express, which would allow us to create a express project.
You can check it by running : express --version command.
now go to your desired directory to create your project. Lets say, i am creating my project in C:\myproject. and run following command to create the project in that directory :
C:\myproject> express nodetest1
//this will display message somewhat like below
C:\myproject>express nodetest1
create : nodetest1
create : nodetest1/package.json
create : nodetest1/app.js
create : nodetest1/public
create : nodetest1/public/javascripts
create : nodetest1/public/images
create : nodetest1/public/stylesheets
create : nodetest1/public/stylesheets/style.css
create : nodetest1/routes
create : nodetest1/routes/index.js
create : nodetest1/routes/users.js
create : nodetest1/views
create : nodetest1/views/index.jade
create : nodetest1/views/layout.jade
create : nodetest1/views/error.jade
create : nodetest1/bin
create : nodetest1/bin/www
install dependencies:
> cd nodetest1 && npm install
run the app:
> SET DEBUG=nodetest1b:* & npm start
you will see following files created in your project directory
now, you will see package.json file. This is where you can add your new package dependencies in your project.
Open the package.json file. it would look as follows :
{
"name": "nodetest1",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "*",
"cookie-parser": "*", //* means simply install the latest version
"debug": "~2.2.0",
"express": "*",
"jade": "~1.9.2",
"morgan": "~1.5.3",
"serve-favicon": "~2.2.1"
}
}
now, we require some more packages to make our app work. so we can do that by installing new dependencies. replace the dependencies with following packages"dependencies": {
"body-parser": "~1.12.4",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "*",
"jade": "*",
"morgan": "*",
"serve-favicon": "*",
"mongodb": "*",
"monk": "*"
}
You can do that by following command on Node.js command prompt
C:\myproject\nodetest1>npm install
//npm install will check the package.json file. If file has dependencies added which are not installed,
//then it will add those packages. In our case, we replaced dependencies. So it will add those packages in our project. after installing the dependencies, you are ready to run your application.This is just a basic application with server built in. So you can start it by following command,
//on command prompt
C:\myproject\nodetest1> npm start
//npm start will start the server > application-name@0.0.1 start C:\myproject\nodetest1
> node ./bin/www go to your browser and type : localhost:3000
you should see following screen
Step 4 : Intro to Jade
you can visit documentation of Jade Here : http://jade-lang.com/reference/
We are going to use Jade for rendering data to webpage. Its similar to HTML.
Jade is able to do :
- Produces HTML
- Supports dynamic code
- Supports re-usability (DRY)
In our app, we are using Jade to render the html webpages. One of the crucial thing i want to mention about Jade is, you really need to be consistent with your spacing and indentation.
In every .jade file, you must use same indentation, or spaces while writing jade script.
in jade following versions are different.
body
h1
ul
li
... is VERY different from:
body
h1
ul
li
STEP 5 : LET'S Show "Hello World on App"
Before you start, you might want to have a nice editor for handling project. I would personally recommend https://code.visualstudio.com/b?utm_expid=101350005-21.ckupCbvGQMiML5eJsxWmxw.1 (Visual Studio Code), and https://www.sublimetext.com/ (Sublime Text Editor). Personally i find Visual Studio Code pretty cool and the best.
Now in your project directory, open the app.js file. I would like to give you a basic information about what contains in that file.
At the very top, you will see something like this...
C:\myproject\NODETEST1\APP.JS
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');This require says to the app.js to make sure, you have this packages initialized and installed before you do any task. require simply means you need this in order to go ahead.
now following..
C:\myproject\NODETEST1\APP.JS
var app = express();C:\myproject\NODETEST1\APP.JS
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
Now, next in app.js file, you will see like this
C:\myproject\NODETEST1\APP.JS
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
in the end of app.js file, you will see something like this :
C:\myproject\NODETEST1\APP.JS
module.exports = app;Now lets print hello world (From Here You need to make changes)
Now, find the section in app.js file
C:\myproject\NODETEST1\APP.JS
app.use('/', routes);
app.use('/users', users);now this index.js file handles routing on your web server. so lets open this file, you would see like this..
C:\myproject\NODETEST1\ROUTES\INDEX.JS
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
module.exports = router;
so we can add new page by adding /helloworld , which would route our webserver to print "hello world" message. So , you can edit the index.js file by adding this into file..
C:\myproject\NODETEST1\ROUTES\INDEX.JS
/* GET Hello World page. */
/* this says localhost:3000/helloworld , will redirect it to render a page
and passing title as 'Hello, World!' */
router.get('/helloworld', function(req, res) {
res.render('helloworld', { title: 'Hello, World!' });
//NOTE: render('filename', {json_data_passed!});
//it means , you need this file helloworld in order to render that page.
});This is where the JADE comes into the play.
Now, create a file with helloworld.jade under the views folder of your project
C:\myproject\NODETEST1\VIEWS\HELLOWORLD.JADE
extends layout
block content
h1= title
p Welcome to #{title}But let's change it anyway to:
p Hello, World! Welcome to #{title} COMMAND C:\myproject\NODETEST1\
npm starttype in your browser : localhost:3000/helloworld it should show you something like this
Step 6 : Connect to MongoDB and Add data to MongoDb
Let's install the MongoDB from https://www.mongodb.com/ .
MongoDB is no sql database. It has JSON based database structure. Its one of the most popular no sql database. So lets get started
First of all, MongoDB requires data directory to store the database. The great thing about mongoDB is that you can create your database anywhere.
we can set the database file path to our projects data directory. Lets create a new directory data in our project. Structure would be like this : C:\myproject\nodetest1\data
now you can tell mongoDB to create a database there in directory by following command (NOTE: you need to set environment var to your windows in order to use it from Command Promot)
mongod --dbpath c:\myproject\nodetest1\data\You will see the message saying , your db server is running on port 27017. It means you have successfully initialized the database.
Two commands of mongoDB you should be aware of on command line :
mongod : initializes the database to specified directory (in our case c:\myproject\nodetest1\data )
mongo : this is the command to handle the database. in other words, to create database, tables, deleting and every operations you can imagine to do with database.
You have to keep the database running , in order to retrieve the database to our web server. So open another command prompt and type : mongo to handle the database.
you will see screen similar to this :
This means, you are ready to create your database. Now what we need is data, to show in our web application.
To create a database, you can do as follows :
//on mongod command prompt
use nodedb
// use command creates a database or uses the existing database in mongodb
db.createCollection("userCollection") 
lets add some data in this collection, you can do it by following..
db.usercollection.insert(
{ "username" : "testuser1", "email" : "testuser1@testdomain.com" }) // to add one row
//to add multiple
db.usercollection.insert([
{ "username" : "testuser1", "email" : "testuser1@gmail.com" }
{ "username" : "testuser2", "email" : "testuser1@hotmail.com" }
{ "username" : "testuser3", "email" : "testuser1@yahoo.com" }
)
])
// will add three rows in collection
Now we have database nodedb with userCollection. Inside collection, we have data of three testusers. We are done from database side.
Step 7 : Read and Write to MongoDB (LAST and Best Part )
This is the step where everything comes together to make it really functioning web app. We are doing just simple data read and write in this tutorial. Now lets get right into it,
Open the C:\myproject\nodetest1\app.js file, you will see like this
C:\NODE\NODETEST1\APP.JS
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');Now add these lines to the code
C:\NODE\NODETEST1\APP.JS
var express = require('express'); var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodedb');
// Remember? Our db name is nodedb.two packages we have added
1. mongodb : The official MongoDB driver for Node.js. Provides a high-level API on top of mongodb-core that is meant for end users. https://www.npmjs.com/package/mongodb
2. monk : https://www.npmjs.com/package/monk - provides tiny layer of usability between mongodb and Node.js .
variable db now holds the connection of mongodb.
Now, we need to add some code to make this db variable available outside the app.js.
to make it happen, open the app.js file. look at the file where you have this
app.use('/', routes);
app.use('/users', users);
// Make our db accessible to our router
app.use(function(req,res,next){
req.db = db;
next();});
so after everything you have done, your app.js full file, should be look like this
C:\myproject\NODETEST1\APP.JS
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodedb'); //Our database name with mongodb running port
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// Make our db accessible to our router
app.use(function(req,res,next){
req.db = db;
next();
});
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
Now Pull the data from Database and Display it
Open up the C:\myproject\nodeteset1\routes\index.js file, and add the following
C:\NODE\NODETEST1\ROUTES\INDEX.JS
/*. GET Userlist page. */
router.get('/userlist', function(req, res) {
var db = req.db;
var collection = db.get('usercollection');
collection.find({},{},function(e,docs){
res.render('userlist', {
"userlist" : docs
});
});
});
Now, res.render('userlist',{"userlist" : docs}) this says, that we need userlist file to render the data we get from database.
So, lets create a userlist.jade file under the C:\myproject\nodetest1\views.
C:\NODE\NODETEST1\VIEW\USERLIST.JADE
extends layout
block content
h1.
User List
ul
each user, i in userlist
li
a(href="mailto:#{user.email}")= user.username
//Please be careful with spaces, be consistent as i mentioned in step 4
value from userCollection. we had two fields in our collection namely
1. username
2. email
we are using those references to render the name on webpage. save this file.
Now, lets go to command prompt and start the sever :
COMMAND C:\myproject\NODETEST1\
C:\myproject\nodetest1>npm start
//if you get message like this
Getting the following error?
{ [Error: Cannot find module '../build/Release/bson'] code: 'MODULE_NOT_FOUND' } js-bson: Failed to load c++ bson extension, using pure JS version
--> its nothing major, you can avoid it.
now lets test it out.
Go to your localhost:3000\userlist will show something like this (Make sure your MongoDb server is also running on port 27017)
Now, we are not far from finish!!!
Lets do final step of writing to MongoDB ,
lets open index.js file from routes directory, and add following..
/* GET New User page. */
router.get('/newuser', function(req, res) {
res.render('newuser', { title: 'Add New User' });
});
now we need newuser.jade file in the views directory to render the webpage,
create the file with that name , and add following,.
extends layout
block content
h1= title
form#formAddUser(name="adduser",method="post",action="/adduser")
input#inputUserName(type="text", placeholder="username", name="username")
input#inputUserEmail(type="text", placeholder="useremail", name="useremail")
button#btnSubmit(type="submit") submit
to our index.js file in routes directory.
C:\myproject\NODETEST1\ROUTES\INDEX.JS
/* POST to Add User Service */
router.post('/adduser', function(req, res) {
// Set our internal DB variable
var db = req.db;
// Get our form values. These rely on the "name" attributes
var userName = req.body.username;
var userEmail = req.body.useremail;
// Set our collection
var collection = db.get('usercollection');
// Submit to the DB
collection.insert({
"username" : userName,
"email" : userEmail
}, function (err, doc) {
if (err) {
// If it failed, return error
res.send("There was a problem adding the information to the database.");
}
else {
// And forward to success page
res.redirect("userlist");
}
});
});
Save the index.js file.
Now, we have everything we need,
just start the server (make sure mongodb is also running on another cmd terminal)
COMMAND C:\NODE\NODETEST1\
C:\node\nodetest1>npm start now lets go to localhost:3000\newuser
and add the values to webpage
You can confirm it by displaying database on your mongo console .
Now, if you open the localhost:3000\userlist , it will fetch the rows from userCollection, and will show the new record we added
Now the code is available on github. you can download it from below link
https://github.com/apprajapati9/Node_Projects/tree/master/up_and_running_with_nodejs_mongodb_express (you must have to clone whole node_projects repository - you will get all tutorials i have wrote)
also please read file Read.me file for more info on how to get it up and running.
If you have any difficulties, or problems please leave a comment below.
will reach out to you ASAP.
References :
1. http://webapplog.com/intro-to-express-js-simple-rest-api-app-with-monk-and-mongodb/
2. http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
0 Comments