This blog is for beginners who wanted to start with Node.js. We will be creating a simple\u00a0website design\u00a0with Node.js and the\u00a0Express framework\u00a0and will be using the EJS view engine to manage our HTML code.<\/p>\n\n\n\n
Step 1: Install nodejs and npm<\/p>\n\n\n\n
If everything installed correctly, open terminal and type node -v and npm -v and you should get the following output based on the version you have installed<\/p>\n\n\n\n
node -v\n8.9.1\nnpm -v\n5.8.0<\/pre><\/div>\n\n\n\nStep 2: Install Express generator package globally (g stand for global in command)<\/p>\n\n\n\n
npm install express-generator -g<\/pre><\/div>\n\n\n\nStep 3: To run our node server we will install the nodemon package globally<\/p>\n\n\n\n
npm install nodemon -g<\/pre><\/div>\n\n\n\nOpen a terminal and move to your directory where you want your code to reside and type<\/p>\n\n\n\n
express --view=ejs mywebsite<\/pre><\/div>\n\n\n\nAs I told we will be using
ejs view engine<\/code> to manage our HTML code throughout our tutorial and this command will create the skeleton of our node application and will set ejs as our default view engine<\/p>\n\n\n\nThe next step is to install all dependencies listed in mywebsite\/package.json file. Move to your myapp directory and type<\/p>\n\n\n\n
npm install<\/pre><\/div>\n\n\n\nNow we are all set to run our node server, type command<\/p>\n\n\n\n
nodemon start<\/pre><\/div>\n\n\n\nIf you see following output in your terminal, voila!!! node server is up and running<\/p>\n\n\n\n
[nodemon] 1.11.0\n[nodemon] to restart at any time, enter `rs`\n[nodemon] watching: *.*\n[nodemon] starting `node .\/bin\/www start`<\/pre><\/div>\n\n\n\nNow open your browser and tune to the following URL<\/p>\n\n\n\n
http:\/\/localhost:3000<\/pre><\/div>\n\n\n\nOpen mywebsite\/app.js file, you will see<\/p>\n\n\n\n
var index = require('.\/routes\/index');<\/pre><\/div>\n\n\n\nSo this is place where we will be defining all our website routes i.e. routes\/index file.\n\nOpen your routes\/index.js file and replace your route entry.<\/pre><\/div>\n\n\n\nOld \n\/* GET home page. *\/\nrouter.get('\/', function(req, res, next) {\n res.render('index', { title: 'Express' });\n});\nNew \n\/* GET home page. *\/\nrouter.get('\/', function(req, res, next) {\n res.render('index', {page:'Home', menuId:'home'});\n});<\/pre><\/div>\n\n\n\nwe are passing page and menuId variable to index view file.<\/p>\n\n\n\n
Now open your views\/index.ejs file and replace your code with following<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <% include partials\/head %> \n<\/head>\n<body>\n<% include partials\/menu %>\n<div class="container-fluid bg-3 text-center"> \n <h3><%= page %><\/h3><br>\n <div class="row">\n <div class="col-sm-4">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n \n <\/div>\n <div class="col-sm-4"> \n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n <\/div>\n <div class="col-sm-4"> \n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<% include partials\/script %>\n<\/html><\/pre><\/div>\n\n\n\nCreate partials directory in mywebsite\/views directory and create following files in partials directory<\/p>\n\n\n\n
\n
- head.ejs<\/li>\n<\/ol>\n\n\n\n
<title>Static Website | <%= page %><\/title>\n<meta charset="utf-8">\n<meta name="active-menu" content="<%= menuId %>">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css">\n<link rel="stylesheet" href=".\/stylesheets\/style.css"><\/pre><\/div>\n\n\n\n2. menu.ejs<\/p>\n\n\n\n
<nav class="navbar navbar-default">\n <div class="container">\n <div class="navbar-header">\n <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">\n <span class="icon-bar"><\/span>\n <span class="icon-bar"><\/span>\n <span class="icon-bar"><\/span> \n <\/button>\n <a class="navbar-brand" href="#">LOGO<\/a>\n <\/div>\n <div class="collapse navbar-collapse" id="myNavbar">\n <ul class="nav navbar-nav navbar-right">\n <li id="home"><a href="\/">HOME<\/a><\/li>\n <li id="about"><a href="\/about">ABOUT US<\/a><\/li>\n <li id="contact"><a href="\/contact">CONTACT US<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/nav><\/pre><\/div>\n\n\n\n3. script.ejs<\/p>\n\n\n\n
<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\n<script src="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js"><\/script>\n<script src=".\/javascripts\/menu.js"><\/script><\/pre><\/div>\n\n\n\nIf you have noticed we have separated our header, topbar menu and master scripts(javascript which needs to be load in all pages) code. And all the partials files are included in views\/index.ejs file<\/p>\n\n\n\n
<% include partials\/head %> \n <% include partials\/menu %>\n <% include partials\/script %><\/pre><\/div>\n\n\n\nCreate javascripts and stylesheets directory inside mywebsite\/public directory and create new file menu.js inside javascript directory and style.css inside stylesheets directory, I have created these 2 files just to show how we can load external CSS and js file in our app.<\/p>\n\n\n\n
4. menu.js<\/p>\n\n\n\n
$(document).ready(function(){\n var element = $('meta[name="active-menu"]').attr('content');\n $('#' + element).addClass('active');\n});<\/pre><\/div>\n\n\n\n5. style.css<\/p>\n\n\n\n
.bg-3 { \n background-color: #ffffff;\n color: #555555;\n }\n .container-fluid {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .navbar {\n padding-top: 15px;\n padding-bottom: 15px;\n border: 0;\n border-radius: 0;\n margin-bottom: 0;\n font-size: 12px;\n letter-spacing: 5px;\n }\n .navbar-nav li a:hover {\n color: #1abc9c !important;\n }\n.active>a {\n color: #1abc9c !important;;\n }<\/pre><\/div>\n\n\n\nNow again tune to URL\u00a0http:\/\/localhost:3000, our updated home page will be loaded similarly, you can create multiple static views as we did for the index page.<\/p>\n","protected":false},"excerpt":{"rendered":"
This blog is for beginners who wanted to start with Node.js. We will be creating<\/p>\n","protected":false},"author":1,"featured_media":994,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nodejs"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":1,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":995,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/993\/revisions\/995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/994"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}