ExpressJS allows you to develop a custom web server according to your need. You don’t need to install multiple packages to handle HTML files. If you have Node.js installed, you are good to go.
In this short tutorial i am going to explain how to render HTML files in ExpressJS.
If you are new to Node and Express then you won’t regret taking our Node course. Its FREE!
About sendFile() function.
ExpressJS provides sendFile() function which will basically send HTML files to browser which then automatically interpreted by browser. All we need to do is in every route deliver appropriate HTML file.
For.eg :
When user hit main URL deliver index.html :
app.get('/',function(req,res) {
res.sendFile('index.html');
});
This code is for example purpose. It will cause directory resolution error.
Our project :
I am going to develop simple website consist of 3 pages i.e Home page, about page, site link page. I will use Bootstrap for designing and jQuery for event handling.
Directory structure :
|--+express
---+ index.html
---+ about.html
---+ index.html
--- app.js
----package.json
"name": "htmlRender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
Install dependencies using
and run project using
Here is our express Server.
const app = express();
const path = require('path');
const router = express.Router();
router.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
router.get('/about',function(req,res){
res.sendFile(path.join(__dirname+'/about.html'));
});
router.get('/sitemap',function(req,res){
res.sendFile(path.join(__dirname+'/sitemap.html'));
});
//add the router
app.use('/', router);
app.listen(process.env.port || 3000);
console.log('Running at Port 3000');
Here is our HTML files. I am going to show index.html only.
<head>
<title>Express HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin:100px;">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="/">Express HTML</a>
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/sitemap">Sitemap</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron" style="padding:40px;">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
Here is the output.
Final words:
Right now we are resolving path in each router. You can optimise this little bit. Express have configuration variable which let’s you define static file path so that you don’t need to resolve path in every routes. Here is how to do so.
const app = express();
const path = require('path');
const router = express.Router();
router.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
router.get('/about',function(req,res){
res.sendFile(path.join(__dirname+'/about.html'));
});
router.get('/sitemap',function(req,res){
res.sendFile(path.join(__dirname+'/sitemap.html'));
});
//add the router
app.use(express.static(__dirname + '/View'));
//Store all HTML files in view folder.
app.use(express.static(__dirname + '/Script'));
//Store all JS and CSS in Scripts folder.
app.use('/', router);
app.listen(process.env.port || 3000);
console.log('Running at Port 3000');
This code will work in a similar way as above one.
Further reading
- How to detect device type in Express
- Error handling in Express using Middleware
- Express Complete tutorial : Part 1
Getting Started with Node – Course
Conclusion:
There are scenarios where you need to develop web server which delivers HTML files like how your apache does. However, this is not the optimal use of Node.js but you can use such a feature to achieve custom web server for your own application.
Love your posts! Keep it up!
Yes this is still simple best post to use node express
localhost:3000/dashboard
Error: ENOENT, stat ‘C:dashboard.html’
Make sure file is placed on that path c:dashboard.html.
I am new in nodejs and express js. please,help me
inside view only I gave css, js,image file and html also but i am not get.
localhost:3000/dashboard
Error: ENOENT, stat ‘C:dashboard.html’
var app = express();
app.use(express.static(__dirname + '/view'));
app.get('/dashboard',function(req,res){
res.sendFile('/dashboard.html');
});
app.get('/index1',function(req,res){
res.sendFile('/index.html');
});
app.get('/',function(req,res){
res.redirect("/login.html");
});
app.listen(3000);
console.log("Running at Port 3000");
Here you go.
var app = express();
var path = require("path");
app.use(express.static(__dirname + '/view'));
app.get('/dashboard',function(req,res){
res.sendFile((path.join(__dirname + '/dashboard.html'));
});
app.get('/index1',function(req,res){
res.sendFile((path.join(__dirname+'/index.html'));
});
app.get('/',function(req,res){
res.redirect('/login');
});
app.get('/login',function(req,res){
res.redirect((path.join(__dirname + '/login'));
});
app.listen(3000);
console.log("Running at Port 3000");
WHY STATIC PATH IS NOT WORKING ?
because you are running it on Server, it won’t refer to local path.
How to get the value from the html file.e.g i want to display the username from login page in console.how can i?
Console of Node or Browser ?
Hi,
In my application, I have “index.html” in app folder, and other pages are in “app/views” folder. Now when I use app.get(), I am able to access only the pages in views folder.
How to load views as part of “index.html” so that it will be a Single Page Application.??
Please help I am stuck here… 🙂
Define one more static path using express.static
Hi shahid,
How can I display records inhtml using express.
I am also troubling to get record in html , how could i get response object on html page ?
Good afternoon,
I am having a small problem, where in my html pages I have referred to bootstrap via a relative path to a directory on the server e.g.
Where as in your example you have used a CDN. So when the index.html loads, it brings up the page, but not the bootstrap.
__dirname thinks it is in D:DropboxAptana 3 WorkspacemyLibrary
So I have “assumed that the index.html page would use that as it’s base location of __dirname for loading the additional bootstrap files?
If I load up the index.html via a browser on it’s own, the bootstrap all appears.
Please add static path where your bootstrap resides.
After that add boostrap.css or .js in index.html and it should work.
Thanks Shahid
i want fetch data from sql server using node js and bind with html page using angula js .
i just want know is it possible ??
It is possible. Visit this tutorial.
Thank you so much your post saved me after hours of searching.
Can I use my only server.js to serve all my html pages?
Is there a way that you can have all of the files registers/sent without having to declare this in your code? For example, setting up a node server you could say /index.html and this file will display on your new server.
Hi Shahid,
I’m not able to understand when you say dirname?
__dirname prints the absolute path of the project.
I am not able to load css even after adding static path using app.use(express.static(__dirname + ‘/assets’)); in server.js
Great tutorial! You can almost never find a client side template rendering example for express on the web, you always find jade server side templating examples. This helped a ton for setting up my nodejs server as an email service with sendgrid without getting a 502 bad gateway error. Thanks!
Thanks! Final words helped me.
Thanks man, very useful information
i want to go to a particular element using the element id. Is it possible using the res.sendFile(path.join(__dirname, ‘filename.html#idtag’));
Nope.
Any idea how it can be done??
Done… how to include Css file style and Js ? because include in html file not working css and js include.
Can you please update me about restify framework. Basic APIs like get , post, put, delete will be enough. 🙂
We have tutorials for that here.
Hi,
I am trying to implement a blog application using NodeJs, Express and MongoDb. I am struggling with displaying the data as I am piping images using Read Stream. When I try to do a res.render(). It throws error saying can’t set headers after they are sent. I know I am sending the response twice to the browser, but I can’t find a work-aroud for this.
app.get(‘*’, function (req, res) {
var file = path.join(dir, req.path.replace(/\/$/, ‘/index.html’));
if (file.indexOf(dir + path.sep) !== 0) {
return res.status(403).end(‘Forbidden’);
}
var type = mime[path.extname(file).slice(1)] || ‘text/plain’;
var s = fs.createReadStream(file);
s.on(‘open’, function () {
res.set(‘Content-Type’, type);
s.pipe(res);
});
s.on(‘error’, function () {
res.set(‘Content-Type’, ‘text/plain’);
res.status(404).end(‘Not found’);
});
var cursor = db.collection(‘quotes’).find().toArray((err, result) => {
if (err) return console.log(err)
// renders index.ejs
//res.render(‘index’, {quotes: result})
})
})
Put return at the status code.
res.set(‘Content-Type’, ‘text/plain’);
return res.status(404).end(‘Not found’);
});
nice post really like the post
thanks so much for this, really helped me understand the node-express way of rendering pages based on requests made. My question is, can one use a master template html page and make it a default layout engine like handlebars?
Hey there! We’re excited to help you out. Let us know your email address so that we can follow up in case we get disconnected.
Hello Shahid, I am trying to get a simple html file that lets users know what an app I am working on does, but I cannot seem to get it to work.
how can I pass data to that html file from server.js? and how can I display that dynamic data in that html file?
Is it possible to redirect or stream a video along with html from the server itself. Imean I wish to stream the video into an or a tag from my local machine to index.html file using server.js file. I have learned how to stream video using nodejs but I am unknown about how to place it onto a html file within some container.
Maybe I’ve just not yet had enough coffee, but your code `res.sendFile(path.join(__dirname+’/sitemap.html’));` seems to be missing the point of `path.join` as JS will evaluate `__dirname+’/sitemap.html’` to a single value, and so the `join` function is only being passed one argument
Hi there!very well done with your article. Is it still relevant as it’s a few years old?I’m asking this because I’ve tried your method and it didn’t work, I made a path to my js files by defining a /public folder and I can clearly see them if I do localhost:9000/public/MY SCRIPT. js but the script is not loaded in my page.
My script only contains a console.log for testing but nothing happens. CSS works fine but js is totally ignored, is there any security settings that might be blocking it?
i want to render a html page where html page again use a .js plugin file..but where it is throwing an error plugin .js file is not bale to load using fs module..any suggestion on dat..
any other route except / doesn’t work for me
Hi,
I am running my web application on localhost. How can i make it to run as client server? Means i want to run it on web that can be access by others. Need change IP address or create a server.
Thanks in advacnce.
hello I did the same process and created a root folder auth, inside this there is one another folder that is password where html file is stored and same inside it again there are another folders for css, images, js and another files, I’m including using exports.render_reset_password_template = function(forgotpassModel, res) { //template path!!//
return res.sendFile(path.resolve(‘./auth/password/css/main.css’));
}; and rendering with html file like exports.render_reset_password_template = function(forgotpassModel, res) { //template path!!//
return res.sendFile(path.resolve(‘./auth/password/reset-password.html’));
}; but I’m confused with it what’s wrong with it??
After the post method is done, i want to show an alert on the browser that job is done and let the user be on the same page without navigating to other. Please suggest.
if you require real-time response, you can use a socket.
I have a problem adding a image on html. Not found the file .png
I put the image in the same folder with html file.
I used , but in the browser dont show it.
What is wrong?, please.
To do that, add images in a seperate folder and add this code in server code.
Then it will work.
How to start localhost? cuz it says ‘This site cant be reached’ 🙁