Render basic HTML view?
Solution 1
You can have jade include a plain HTML page:
in views/index.jade
include plain.html
in views/plain.html
<!DOCTYPE html>
...
and app.js can still just render jade:
res.render(index)
Solution 2
Many of these answers are out of date.
Using express 3.0.0 and 3.1.0, the following works:
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
See the comments below for alternative syntax and caveats for express 3.4+:
app.set('view engine', 'ejs');
Then you can do something like:
app.get('/about', function (req, res)
{
res.render('about.html');
});
This assumes you have your views in the views
subfolder, and that you have installed the ejs
node module. If not, run the following on a Node console:
npm install ejs --save
Solution 3
From the Express.js Guide: View Rendering
View filenames take the form
Express.ENGINE
, whereENGINE
is the name of the module that will be required. For example the viewlayout.ejs
will tell the view system torequire('ejs')
, the module being loaded must export the methodexports.render(str, options)
to comply with Express, howeverapp.register()
can be used to map engines to file extensions, so that for examplefoo.html
can be rendered by jade.
So either you create your own simple renderer or you just use jade:
app.register('.html', require('jade'));
More about app.register
.
Note that in Express 3, this method is renamed
app.engine
Solution 4
You could also read the HTML file and send it:
app.get('/', (req, res) => {
fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
res.send(text);
});
});
Solution 5
try this. it works for me.
app.configure(function(){
.....
// disable layout
app.set("view options", {layout: false});
// make a custom html template
app.register('.html', {
compile: function(str, options){
return function(locals){
return str;
};
}
});
});
....
app.get('/', function(req, res){
res.render("index.html");
});
Related videos on Youtube
aherrick
http://twitter.com/andrew_herrick http://andrewherrick.com Run, code, slick.
Updated on December 24, 2020Comments
-
aherrick over 3 years
I have a basic node.js app that I am trying to get off the ground using Express framework. I have a
views
folder where I have anindex.html
file. But I receive the following error when loading the web browser.Error: Cannot find module 'html'
Below is my code.
var express = require('express'); var app = express.createServer(); app.use(express.staticProvider(__dirname + '/public')); app.get('/', function(req, res) { res.render('index.html'); }); app.listen(8080, '127.0.0.1')
What am I missing here?
-
Teo Choong Ping over 12 yearssendfile is not cache in production mode so this is not a good solution.
-
Bijou Trouvaille over 12 yearshad trouble with the exact configuration above, so I removed the dot from ".html" and added this: app.set('view engine', 'html'); app.set('views', __dirname + '/views'); for a perfect render
-
enyo about 12 yearsThis is a bit weird... you should serve html as static files. This also gives you the benefit of better caching. Creating a custom "html compiler" seems wrong. If you need to send a file from within a route (which you very rarely need to do) just read and send it. Otherwise just redirect to the static html.
-
Kyeotic almost 12 years@Enyo this comment seems odd, considering HOW TO do what you are saying should be done is THE QUESTION BEING ASKED, and your answer is to just do it. How do you serve a static html with caching?
-
enyo almost 12 years@Tyrsius, well not really. I'm saying that you shouldn't just render an html file. If you really really have to send it from within a route you could read the file with
fs
and then send the plain text. What I suggest doing is redirecting to the html file instead of trying to directly render it inside the route. -
S.D. almost 12 yearsNote- app.register has been renamed app.engine in Express 3.
-
Drew Noakes almost 12 yearsI see an error on
app.register
. Perhaps it's been deprecated in express 3.0.0.rc3?TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
-
Drew Noakes almost 12 yearsDo you have to install
ejs
globally? -
Marcel Falliere over 11 yearsthis solution is bad because no caching of the files ; it is read for every request.
-
Naman Goel over 11 yearsits potentially pretty easy to cache it manually. Just store the read file a variable, and only read again, if that variable is blank. You could also use a JS object and store various files in various variables, with timestamps. Sure its more work than most people would do, but it's good with people new to node. It's easy to understand
-
sma over 11 yearsThis suggestion worked for me. All others seemed to either render the view showing the markup on screen or gave me errors in the node console. This was the only one that truly rendered the correct HTML.
-
MetaGuru over 11 yearsit's tell me it can't find the 'index.html' file
-
Diosney over 11 yearsJust to note that what I want was to serve only one .html file because my app was single page ;)
-
fatuhoku about 11 yearsWhy do you repeat
app.use(express.static(__dirname + '/public'));
after you start the server withapp.listen
? -
David Betz almost 11 years@enyo, you missed the point of the steamlined architecture. When the pattern is controller/view (or /processor/view, whatever your specific architecture is), you can't deviate from that with with the obsolete model of extensions. You need to treat your HTML as rendered content like everything else. Keep it DRY, dude.
-
David Betz almost 11 yearsYikes. This defeats the entire point of convention-oriented, streamlined architectures (like MVC).
-
David Betz almost 11 yearsSee answer from Andrew Homeyer. It is the actual answer.
-
Transcendence almost 11 yearswhy does the res.render require the .html extension in this case but not in the default case with jade. with the boilerplate code, it just calls res.render('index', { title: 'Express' }); but here, it's : res.render('about.html');
-
Drew Noakes almost 11 years@Transcendence, I'm not sure exactly. Perhaps you should open a new question.
-
roland over 10 yearsWith Express 3.4.2: app.set('view engine', 'ejs');
-
Tom Teman about 10 yearsYou should use the command 'npm install ejs --save' to update your package.json
-
paulcpederson about 10 yearsThis answer is excellent. Note you can also keep using layout and just put the include inside the content block.
-
Tyler about 10 years@roland
app.set('view engine', 'ejs');
only worked for me (express 3.5.1) when running from within same directory. To run, e.g. via startup script, I still had to doapp.set('views', __dirname + '/views');
. Just mentioning in case others have this issue. -
user3398326 almost 10 yearsCan We included multiple HTML/JS pages with this method ?
-
Benny Schmidt about 9 years@MarcelFalliere You're assuming that he wants to cache the file, or that he doesn't want to use a custom caching solution. Thank you keegan3d for the answer.
-
CrazyPyro about 9 yearsFrom some other answer, for Express 4 I ended up using
app.engine('.html', require('ejs').renderFile);
-
Lygub Org almost 9 yearsit gives me the following error "Error: Cannot find module 'ejs' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) "
-
Daniel Huang over 8 yearsIn express 4, you could also use: app.set('view engine', 'jade');
-
A1rPun over 8 years@LygubOrg run
npm install ejs --save
in your working directory. -
PositiveGuy about 8 yearsshouldn't you be able to render that html page without a jade template just for initial testing of express?
-
PositiveGuy about 8 yearswhat's the diff of serving the html page as static vs. just loading it non-static with express?
-
PositiveGuy about 8 yearswhy do you need ejs?
-
KhoPhi about 8 years@SeymourCakes Kindly correct me if I'm wrong, but I think sendFile now supports caching: devdocs.io/express/index#res.sendFile
-
xgqfrms over 7 yearsnot bad! here is a full file demo! https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906
-
Chris - Jr over 6 yearsSo do we have to create a jade template for each of our HTML files?
-
JCarlosR over 6 yearsis it necessary to add a dependency only to serv a html file?
-
JCarlosR over 6 yearsI currently have
app.set('view engine', 'hbs');
should I attach another dependency (ejs
)? -
JCarlosR over 6 years@MarcelFalliere Then, what is the right solution? I see other answers that requiere new dependencies. Is it necessary just for serve html files?
-
Ozil over 6 yearsMore of a hack rather than a solution.
-
Marcel Falliere over 6 years@benny @JCarlos the right solution IIMO is to use the
static
middleware of express. -
harshad over 5 yearsThis solution worked for me. Although I tried static option too. Can you explain the mechanism behind it. Thanks!
-
Robert Daraż over 4 yearsEverything works but remember about correct path. For me works
app.set('views', '../public/views');
because I haveserver.js
andapp.js
in different location. -
vighnesh153 over 4 yearsWhat is this mess?
-
Vlado about 4 yearsHi, how you pass locals to the view in this case? For example how you handle in 'index.html' this locals.title?: router.get('/', function(req, res){ res.render('index', {locals: {title: 'Welcome!'}}); }); I tried ${title} and <%= title%?> but no success.
-
Tony almost 4 yearsAs suggested above, this answer only works when using Jade template system. It doesn't work with e.g. handlebars.
-
Tony almost 4 yearsI had to use
var app = express(); app.set('views', path.join(__dirname, '../views'));
. Without the "../folderName" it was looking in the routes folder. -
Sam007 over 3 years
server.configure
is deprecated, so directly useserver.use
-
VPaul over 3 yearsMake sure to install jade i.e.
npm i jade
to use this setup -
xgqfrms about 3 yearsawesome,I like native node.js API
-
Shaikh Shahid about 3 yearsOne of the easiest approaches is sending the HTML back to the browser. ``` router.get('/about',function(req,res){ res.sendFile(path.join(__dirname+'/about.html')); }); ``` Or using rendering engines like Pug or Jade. I personally believe that sending the HTML build from frameworks like React.js is the easiest way to achieve rendering of the apps. This codeforgeek.com/render-html-file-expressjs covers most of it.
-
ThN almost 3 yearsEven though this answer is old and it didn't exactly work as described here, I managed to get this to work in a weird way. All the prep work for this answer worked, but when it came to actually rendering a html file, it threw up the same error OP mentioned in his question; Cannot find module 'html.' Then, I realized that regardless of what content is in the file just as long as the file extension is ejs, render procedure renders and client displays it with no errors. So, I changed all of my html files' extension to ejs and they are all being rendered successfully. Horay!!! :)
-
Andrew Nessin about 2 yearsI have just one html file because I am using create-react-app and I need to serve the same HTML file for all URLs for react-router to work correctly. This solution seems perfect when I cache the contents in a variable!