Hi! This tutorial is for beginners, to start learn node.js direct coding a simple website.
This stack is not the only stack available in the sea of stacks for node.js, consider this a starting point ok?
I assume you have just read my first three tutorials about node.js at:
a. [START WITH NODE.JS] http://www.lucedigitale.com/blog/lets-start-with-node-js/
b. [MODULES] http://www.lucedigitale.com/blog/node-js-modules-npm/
c. [PRODUCTION STACK WITH EXPRESS.JS AND EJS] http://www.lucedigitale.com/blog/node-js-project-structure-express-js-ejs-templates/
Then leggo!
1. Create a folder in your localhost environment, mine choice is Laragon:
laragon/www/mywebsite
2. Open Laragon’s terminal and go into laragon/www/mywebsite and type: node -v
If you see the node version it means that node.js is installed 😀
3. Type: npm install express-generator -g
-g stand for global, so you can access to this command from every folder
4. Type: npm install nodemon -g
-g stand for global, nodemon is a tool that helps develop node.js based applications.
Usually you have to stop and restart the server every time you change your js code, nodemon automatically restarting the node application when file changes in the directory are detected, great!
5. Type: express –view=ejs
Set the template system for express.js, this template system is ejs
6. Type: npm install
Install all dependencies
7. Type: nodemon start
If you see … [nodemon] starting `node ./bin/www start`… all gonna be all right 
8. Open your browser at: http://localhost:3000
You will see the Express welcome message.
If you want switch the port you can do it at mywebsite/bin/www file here:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
9. Open mywebsite/app.js file, check the row:
var index = require('./routes/index');
10. Jump to mywebsite/routes/index.js
Change the title of your home (http://localhost:3000) page as show below:
original code
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
edited code
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {page:'Home', menuId:'home'});
});
11. Then we need the HTML code inside the view, change mywebsite/views/index.ejs (notice is called by previous … res.render(‘index’,…)
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body>
<% include partials/menu %>
<div class="container-fluid bg-3 text-center">
<h3><%= page %></h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
<% include partials/script %>
</html>
Notice the inclusion of separate elements of DOM:
<% include partials/head %> <% include partials/menu %> <% include partials/script %>
It is similar in PHP at:
<?php include 'head.php';?>
Let’s create the partials
a. mywebsite/views/partials/head.ejs
<title>Static Website | <%= page %></title> <meta charset="utf-8"> <meta name="active-menu" content="<%= menuId %>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="./stylesheets/style.css">
b. mywebsite/views/partials/menu.ejs
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="home"><a href="/">HOME</a></li>
<li id="about"><a href="/about">ABOUT US</a></li>
<li id="contact"><a href="/contact">CONTACT US</a></li>
</ul>
</div>
</div>
</nav>
c. mywebsite/views/partials/script.ejs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="./javascripts/menu.js"></script>
d. Notice we have to create in mywebsite/public/javascript/menu.js
$(document).ready(function(){
var element = $('meta[name="active-menu"]').attr('content');
$('#' + element).addClass('active');
});
e. Notice we have to create this in mywebsite/public/stylesheets/style.css
.bg-3 {
background-color: #ffffff;
color: #555555;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
.active>a {
color: #1abc9c !important;;
}
The final result (responsive):
For further information about making website/apps with node.js:
– https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website
– https://codeforgeek.com/express-nodejs-tutorial/
– https://freshman.tech/learn-node/
– https://www.slant.co/topics/51/~best-javascript-templating-engines
– https://vuejs.org/
– https://levelup.gitconnected.com/simple-application-with-angular-6-node-js-express-2873304fff0f
Ref:
– https://medium.com/@bhanushali.mahesh3/creating-a-simple-website-with-node-js-express-and-ejs-view-engine-856382a4578
