Step 1: Understanding directory structure

This is very important because if you do not know the flow of the whole system and which file is running and where it is stored, what time it has been called then I am sure your understanding of code will not be up to mark.

Here is the directory structure of the sample project which I have made to demonstrate.

Now one question may arise in your mind? Do I have to create all these? The answer is No as well as Yes! You will be more clear about this in the next step.

Step2: Creating package.json

This is a JSON ( JavaScript object notation) file which contains every information about your project. Information may include Name, version, description and may vary depending upon the project.

In package.json one of the important things is “dependencies” which is nothing but the tools you need to run your project. In our case, we want Express and EJS so we will mention those in our package.json file.

Go ahead and create any folder and inside that folder create a file named as package.json and put the following content in it.

Make sure that name field should not contain blank spaces for example “express web app” is not allowed, in place you may use “express_web_app” or “express-web-app” but no spaces !

Some notations are there in dependencies which I’d like to mention.

“~” means either that version of express or ejs or above than that but not below that.

“*” means any version of that package.

Step 2.1 : Installing Dependencies using NPM

Till this step, I am assuming that you have created any folder and had put “package.json” file in it. Also, I am assuming that you have Nodejs and NPM installed in your system. If not go to the official site, download and install it.

Open up your command prompt or terminal ( in my case ) and switch to the folder you have created where package.json is placed. once switch type “npm install” and wait till it download and install dependencies.

Step 3: Create Express Server

Till this step we have installed dependencies and created package.json. Now it’s time to create Express server to deal with Request and response by client. Go ahead and create file and save it as server.js and write these code in it.

This is a basic express server which basically does nothing. If you will run “nodejs server.js” then on console it will show you message and on browser after typing localhost:3000 you will see nothing but a blank page and that’s because we have not defined the Router of our project yet.

Step 4: Router to handle Request

We have our Server ready along with every package we need. Now it’s time to tell our Server that on a request from browser what it has to do. That’s in a technical term called a Router which routes the application according to request.

Let’s create one simple router which respond to request and print “Hello world” on browser. Add this line in Server.js before listen() function.

app.get('/',function(req,res){
res.send('Hello world');});

Save the file and run the Server using “nodejs server.js” or “node server.js” and go to URL http://localhost:3000 in your browser. You may be able to see message in your browser. This is just an example of basic router.

It is always a better practice to separate the router code and server code in different files. As i have shown in directory structure , create folder called “router” and inside that folder create “main.js” file and paste following code.

Save the file and do not run the code now. What is module.exports ? Since we have placed our code in a separate file and still want to use it in our Server file.

To do so we need to expose the functions which we want to use in a different file and that is what module.exports does.

Step 5: Render HTML page and send them in response

Now it’s time to do something complex stuff. Yes this is bit complex but i will explain it simply. The EJS package which we have defined in package.json file is allow us to render HTML pages. But before that i want you to create two HTML files named as “index” and “about” and put normal HTML codes.

Once done then in project directory create folder called as “VIEWS“and put those HTML files in it.

Now it’s time to modify Server file because we have made lots of changes in the project. Here is the modified and final Server file.

Hi Anon,
Thanks for reaching out and giving me a feedback about it. As you see in my package.json file, i have added the dependency greater than (~) 4.0.0 and this code does work in my computer. Could you please give any reference to disapprove your doubt.

Ya,
You have not defined the router for about.html. Express should know that when url will be set as 0.0.0.0:3030/about.html then it should serve the index.html file.
You can do that like this.
app.get(‘/about’,function(req,res){
res.render(‘about’);
});
//Assuming ‘app’ is express instance and you have defined the view engine to render HTML. For more information about Router you can read the detailed explanation here.

thanks so much for this interesting and helpful tuto.!!! 🙂
I have the same issue that Anon has 🙁

—-
require(‘./router/main’)(app);
^
TypeError: object is not a function
at Object. (/Users/federico/repos/miapp/server.js:3:25)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3
—-

What should i do to fix this error? I couldn’t understand what Anon said.

Great article! Just wanted to point out that there doesn’t seem to be any indentation on your code, which might be confusing for beginners (which this article targets). Adding some indentation/structure to the code could be really helpful for some.

Thanks for the great informative post,enjoyed reading while learning. Node js frameworks can help you develop web applications more user-friendly. And with lot of features and functionality to develop huge web applications.

sir, your tutorials are very help full.
I’m confused what to learn in bet “EXPRESS JS” or “METEOR JS” as i want to make web application as well as mobile application in less time. Not for single project for long term .