Getting started with building Node.js, Express, Ejs, Mongodb servers and application development from scratch_node.js

This article is adapted from Feiyu’s "[Translation] Getting Started Guide for Front-end Developers, Building Node.js, Express, Jade, Mongodb Server from Scratch". The reason why I changed Jade to Ejs is because I think ejs is more suitable. The habits of WEB programmers, more precisely, should be more in line with the usage habits of PHP and ASP programmers. Okay, without further ado, let’s start the tutorial directly.

Part 1 – 15 Minute Installation

If you really want to learn from scratch, then take the time to set up the environment first. It's not difficult, I'm using Win8, so this looks a little different than the tutorials for using Mac and Ubuntu or other *nix systems, but it's basically the same.

Step 1 – Install Node.JS

It's easy, go to the Node.js official website, click the big green Install button, it will automatically detect your system and give you a download of the correct installation file. (If not, click the Download button to select the download you need). Run the installer and you're good to go. You have Node.js installed, and NPM (Node Package Manager) allows you to easily install various useful packages into Node.

Step 2 – Install Express

Now that we have Node running, we need a few things that will allow us to actually create a usable site. Next we need to install Express, which is a framework that turns Node from a primitive application into a web server that is more like the web server we usually use. We need to start with Express because we need the scaffolding functionality it provides. We enter this command:

Copy code The code is as follows:

c:node>npm install -g express

In this way, Express is correctly installed in our Node and has been made globally available. You will see a bunch of output in the command line window, mostly http 304 and GET requests, this is normal. Express should be installed and available.

Step 3 – Create an Express project

We are going to use Express and Ejs, but not for CSS preprocessing. We'll write some CSS by hand. We need to use Ejs or other template engines to process Node and Express data. If you know HTML, Ejs is not difficult. Just remember you need to concentrate, otherwise things can easily go wrong.

Now in the same command line window type:

Copy code The code is as follows:

c:node>express –sessions nodetest1

Press Enter and you will see a bunch of stuff like this:

Copy code The code is as follows:

C:node>express --sessions nodetest1
create : nodetest1
create : nodetest1/package.json
create : nodetest1/app.js
create : nodetest1/routes
create : nodetest1/routes/index.js
create : nodetest1/routes/user.js
create : nodetest1/views
create : nodetest1/views/index.ejs
create : nodetest1/public/images
create : nodetest1/public/javascripts
create : nodetest1/public
create : nodetest1/public/stylesheets
create : nodetest1/public/stylesheets/style.css

install dependencies:
$ cd nodetest1 && npm install

run the app:
$ node app

Step 4 – Edit Dependencies

Okay, we now have some basic project structure, but we’re not done yet. You will notice that the express installation process creates a file called package.json in your nodetest1 directory. Open this file with a text editor. It should look like this.

Copy code The code is as follows:

{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.8",
"ejs": "*"
}
}

This is a standard JSON format file that represents our application and its dependencies. We need to add a little something. For example, calls to mongodb and Monk. Change the dependencies part to this:

Copy code The code is as follows:

"dependencies": {
"express": "3.4.8",
"ejs": "*",
"mongodb": "*",
"monk": "*"
}

Step 5 – Install dependencies

Now we have defined the project’s dependencies. The * will tell NPM to "install the latest version". Return to the command line window, enter the nodetest1 directory, and enter:

Copy code The code is as follows:

C:nodenodetest1>npm install

It will output a bunch of stuff. This is because it reads our modified JSON file directly, identifies the dependencies within it, and installs the necessary files. When NPM is installed, you should have a node_modules directory that contains all the dependency files our project needs.

Now we have a fully functional App and it’s ready to run. Let’s give it a try! Make sure your current directory is the nodetest1 directory, enter:

Copy code The code is as follows:

C:nodenodetest1>node app.js

After pressing enter you will see:

Copy code The code is as follows:

Express server listening on port 3000

marvelous. Open the browser and enter http://localhost:3000. You should see a welcome page for Express.

Now you have your own Node JS WebServer running with Express engine and Ejs HTML template engine. It's not that difficult, right?

Part 2 – Okay, let’s write “Hello, World!”

Open your commonly used text editor or other IDE. I personally like to use Sublime Text. Open app.js in your nodetest1 directory. This file is the core of your App. You should see something like this:

Copy code The code is as follows:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

This just defines a bunch of JavaScript variables and points to some packages and dependencies, node functions, and routes. Routes are equivalent to a collection of Models and Controllers in MVC. They are responsible for forwarding requests and also contain some processing logic. Express has created all these things for us. Let's ignore the user route for now and start writing the top-level route (controlled by routesindex.js).

Write at the end of the above file:

Copy code The code is as follows:

var app = express();

This sentence is crucial. It instantiates Express and assigns it to our app variable. The following content will use this variable to configure a bunch of Express parameters. Continue typing:

Copy code The code is as follows:

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

This sets the port, the directory to look for views, what template engine to use to process these views, and a few other things. Also note the last line, which tells Express to host static files in the public/ directory as files in the top-level directory. For example, your image directory is stored in c:nodenodetest1publicimages, but the actual access address is http://localhost:3000/images/.

Note: You need to put this line

Copy code The code is as follows:

app.use(express.bodyParser());

Change to

Copy code The code is as follows:

app.use(express.urlencoded());

This is to ignore some warning messages in the Node window while the app is running. Mainly some possible future modifications to Express and its plug-ins. If you don't make this modification, you will receive a bunch of warnings that certain functions are about to expire when the program is running.

Then add:

Copy code The code is as follows:

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

This way you can do some error checking during development.

Continue to increase:

Copy code The code is as follows:

app.get('/', routes.index);
app.get('/users', user.list);

This tells the router which Route to use when a URI request arrives. Note that the user variable was defined earlier and mapped to /routes/user.js. We will call the list function defined in this file. A list of users can be displayed here.

Continue to increase:

Copy code The code is as follows:

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' app.get('port'));
});

Finally, create an http server and start it. That's pretty much it.

(The above content is complete in the template generated by the new express, no need to write it in yourself)

Now, let’s write something useful. We will not write "Hello World!" directly in our index page. We will take this opportunity to learn how to use route routing and learn how the Ejs engine works. Add a line after the app.get() section of the above app.js file:

app.get('/helloworld', routes.helloworld);
If you press ctrl C in the command line window to end the app.js process and then restart it, and then use a browser to access http://localhost:3000/helloworld, you will get a very exciting node error and the following message in the command line window: A bunch of crash prompts. This is because we haven't modified the routing to handle this path. Let’s do this. In your editor, go to the routes directory, find index.js, and open it. It should look like this:

Copy code The code is as follows:

/*
* GET home page.
*/

exports.index = function(req, res){
res.render('index', { title: 'Express' });
};

Let's add a new page. I prefer to create an independent route file for each first-level directory, but now we are not planning to build a complete directory structure for helloworld under views, so we will use index routing for now. At the end of this file add:

Copy code The code is as follows:

exports.helloworld = function(req, res){
res.render('helloworld', { title: 'Hello, World!' });
};

It will be responsible for processing this URI request, but now we don't have an actual page for res.render to render. This is the job of Ejs. Go to your views directory, open index.ejs, and save it as helloworld.ejs file. It should now look like this:

Copy code The code is as follows:

<%= title %>

Welcome to <%= title %>

It should be easy to understand.
Save the file. Press ctrl c in the command line window to interrupt app.js, then type node app.js to restart it. Tip: When you modify an ejs template file, you do not need to restart the server. But when you change a js file, such as app.js or a routing js file, you must restart the server to see the effect.

After the server starts, note that the server opens http://localhost:3000/helloworld, and you should be able to see this beautiful interface:

Okay! Now that we have a route that can handle our template, we see the effect we want. Next we will make some Model (data layer).

Part 3 – Creating the database and reading the data

Step 1 – Install Mongodb

Let’s close the text editor and return to the command line window. First use a browser, open http://mongodb.org/, and download Mongo. Click the download link in the main menu to find the version suitable for your system. For 64-bit win8, download the 64-bit *2008R2 version. After downloading it is a zip file, unzip it to c:mongo or c:program filesmongo or wherever, it doesn't matter. We save the data in our nodetest1 directory.

Step 2 – Run Mongod and mongo

Create a subdirectory data in our nodetest1 directory, then enter the bin directory of your mongodb directory in the command line window and enter:

Copy code The code is as follows:

mongod –dbpath c:nodenodetest1data

You will see that the mongo server starts. The first startup will take a while because it needs to pre-allocate some hard disk space and some other tasks. When it prompts "[initandlisten] waiting for connections on port 27017", it's done. There is nothing else to do, the server is already running. Now you need to open another command line window, enter the bin directory of the mongo directory, and enter

Copy code The code is as follows:

mongo

You will see some prompts like this:

Copy code The code is as follows:

c:mongo>mongo
MongoDB shell version: 2.4.5
connecting to: test

If you look at the mongod window at this time, you will see a prompt that a connection has been connected. We will use this command line client to manually process our database next, but this is not necessary for our website.

Step 3 – Create a database

Don’t worry about the above prompt to connect to test. That's just the default database that mongo uses when you don't specify a database. It won't even create the database named test unless you add a record to it. Let's create a database of our own. In the mongo command line window, enter:

Copy code The code is as follows:

use nodetest1

It won't create the database unless we insert some data into it.

Step 4 – Add some data

My favorite feature of MongoDB is that it uses JSON as the data structure, which means I am very familiar with it. If you're not familiar with JSON, read up on it first; it's beyond the scope of this tutorial.

We add some data to the collection. In this tutorial, we only have a simple database, leaving only two fields: username and email. Our data looks like this:

Copy code The code is as follows:

{
"_id" : 1234,
"username" : "cwbuecheler",
"email" : "cwbuecheler@nospam.com"
}

You can create your own _id field values, but I think it's better to let mongo do this. It creates a unique value for each record. Let's see how it works. In the mongo window, enter:

Copy code The code is as follows:

db.usercollection.insert({ “username” : “testuser1″, “email” : “testuser1@testdomain.com” })

Important note: db is the nodetest1 database we created above, and usercollection is our collection, which is equivalent to a data table. Note that we do not need to create this collection in advance, it will be created automatically the first time it is used. Okay, press enter. If all goes well, you'll see... nothing. This is not good, enter:

Copy code The code is as follows:

db.usercollection.find().pretty()

If you're curious, the pretty method formats the output, adding newlines and indentations. It should read:

Copy code The code is as follows:

{
"_id" : ObjectId("5202b481d2184d390cbf6eca"),
"username" : "testuser1",
"email" : "testuser1@testdomain.com"
}

Of course, the ObjectID you get should be different, mongo will automatically generate one. If you have used JSON interface services before, do you think now, wow, it should be very simple to call this on the web! Well, you're right.

Tip: As a formal service, you should not want all data to be stored at the top level. Regarding the design of mongodb data structure, take a look at Google.

Now that we have a piece of data, let’s add more. Enter in the mongo window:

Copy code The code is as follows:

newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);

Note that we pass multiple pieces of data to the collection through one data at a time. How simple! Use the find command above and you will see these three pieces of data.

Now let’s integrate the web server and database built previously.

Step 5 – Connect mongo to node

Now let’s create a page to display the records in the database into a beautiful table. This is the HTML content we are going to generate:

Copy code The code is as follows:

• testuser1


• testuser2


• testuser3

I know this isn't very scientific, but it's good for you to understand. We just want to build a simple database reading and writing program, not to build a complete website. First, we add a little bit of content to app.js (the heart and soul of our application) so that we can connect to mongodb. Open c:nodenodetest1app.js, at the top you will see:

Copy code The code is as follows:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

Below it add:

Copy code The code is as follows:

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');

These lines will tell the app that we need to connect to MongoDB. We use Monk to be responsible for this connection. Our database location is localhost:27017/nodetest1. Note that 27017 is the default port of mongodb. If you change the port for some reason, record it here and change it accordingly. Now look at the bottom of the file:

Copy code The code is as follows:

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/helloworld', routes.helloworld);

Add a line below:

Copy code The code is as follows:

app.get('/userlist', routes.userlist(db));

This line tells the app that when a user accesses the /userlist path, we need to pass the db variable to the userlist route. But we don’t have a userlist route yet, so let’s create one now.

Step 6 – Read the data in mongo and display

Open c:nodenodetest1routesidnex.js with your editor. There are two routes, index and hello world. Now let’s add the third one:

Copy code The code is as follows:

exports.userlist = function(db) {
Return function(req, res) {
      var collection = db.get('usercollection');
        collection.find({},{},function(e,docs){
              res.render('userlist', {
“userlist” : docs
            });
        });
};
};

Well, things get a little complicated. Here we first define a function to receive the db variable we passed, and then call a page render that is the same as the previous two routes. We tell it that it needs to read the usercollection, do a lookup, and save the returned data in the docs variable. Once we read the content, we call render to render the userlist template page and pass the obtained docs variable as the userlist variable in the template engine.

Next create our Ejs template. Open index.ejs in the views directory, save it as userlist.ejs, and then modify its HTML to look like this:

Copy code The code is as follows:

Userlist

<%
for(var i in userlist){
%>

• ”><%=userlist[i].username%> <% } %>
  

Save the file and restart the node server. Hope you remember how to restart. Open the browser and visit http://localhost:3000/userlist. You should see an interface like this:

Click the submit button and you will see a "can't post to /adduser" error. Let's fix it.

Step 2 – Create your database processing function

As before, we modify app.js, then the route file, and then the ejs template. However, there is no need for an ejs template here, because our post will jump later. Add a line after the app.get() section of app.js:

Copy code The code is as follows:

app.post('/adduser', routes.adduser(db));

Note that this is app.post, not app.get. Let’s set up the route. Back in routes/index.js, create our database insert function. This one is relatively large, so I suggest you write a good comment.

Copy code The code is as follows:

exports.adduser = function(db) {
Return function(req, res) {

// 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 {
// If it worked, set the header so the address bar doesn't still say /adduser
                   res.location("userlist");
// And forward to success page
                    res.redirect("userlist");
            }
        });

}
}

Obviously in a real project you still need to do a lot of verification. For example, user names and emails are not allowed to be repeated, and email addresses must comply with certain format rules. But let’s ignore that for now. You can see that when the insertion into the database is complete, we have the user jump back to the userlist page where they should see the newly inserted data.

Is this the best way?

Step 3 – Connect to the database and write data

Make sure your mongod is running! Then restart your node server. Open http://localhost:3000/newuser with a browser. Now we fill in some content and click the submit button. If everything goes well, we should be back on the userlist page and see the new data we just added.

Now that we have officially completed reading and writing Mongodb database using Node.js, Express, and Ejs, we are already awesome programmers.

Congratulations, really. If you read this tutorial carefully and study it carefully instead of just copying the code, you should have a complete concept of routes, views, reading data, and writing data. This is everything you need to know to develop any other complete web site! No matter what you think, I think it's pretty cool.

Part 5 – Next Steps

Start now and your possibilities are endless. You can take a look at Mongoose, another Node package for working with MongoDB databases. It is larger than Monk and has more features. You can also take a look at Stylus, a CSS engine for Express. You can Google Node Express Mongo Tutorial to see what follows. Study hard and make progress every day.

I hope this tutorial can be helpful, I wrote this because when I started learning I really needed something like this, but couldn't find it. If you've made it this far, thank you very much!